JavaScript >> Javascript 文檔 >  >> React

你好世界!在 Rescript-React 中

你好世界!在 Rescript React 中

稍微說一下 Rescript,它是一種結合了 JS 和 OCaml 最好部分的新語言。它有一個編譯器,可以編譯為 JS 並利用 OCaml 的靜態和聲音類型系統。與 TypeScript 相比,許多人更喜歡這種方法。該編譯器最初命名為 BuckleScript,但在 2020 年,由於其類似 Reason 的語法,它更名為 ReScript。

Rescript 文檔寫得很好,組織得很好,並且維護得很好。鏈接到他們的文檔。

如果您對 Rescript 語法和 React 有基本的了解,那麼我們就可以開始了。

設置項目

  • 從命令npm init -y開始 .如果你只是做 npm init 它會要求您填寫一些數據,如果您希望它們成為默認值,請添加 -y 標記。
$ npm init -y
  • 現在,讓我們在本地安裝 ReScript 編譯器。我們使用 --save-dev 安裝它的原因 是因為我們需要它作為開發依賴。Rescript 編譯器將編譯 *.res 文件轉換為 JS 文件。這實際上稱為源到源編譯。
$ npm install --save-dev bs-platform
  • 之前,進入配置部分,讓我們安裝 rescript-react 插件。
$ npm install @rescript/react --save
  • 現在,我們要設置一個bsconfig.json 文件。創建此文件,然後將以下內容複製並粘貼到其中:

bsconfig.json

{
    "$schema": "https://raw.githubusercontent.com/rescript-lang/rescript-compiler/master/docs/docson/build-schema.json",
    "name": "project-name",
    "sources": [
        {
        "dir": "src",
        "subdirs": true
        }
    ],
    "package-specs": [
        {
        "module": "es6",
        "in-source": true
        }
    ],
    "suffix": ".bs.js",
    "namespace": true,
    "bs-dependencies": ["@rescript/react"],
    "ppx-flags": [],
    "reason": {"react-jsx": 3},
    "warnings": {
        "error": "+101"
      },
    "refmt": 3
}

讓我們逐行了解一下配置:

  1. $模式 :像 VSCode 這樣的編輯器有一個模式自動補全的功能,為了得到它,我們需要指定模式。
  2. 姓名 :就是庫名或者簡單的主項目名。
  1. 來源 :我們必須指定源文件將駐留的位置。通常,它是 /src 目錄。
  2. 後綴 :Rescript編譯器編譯後的文件擴展名,可以是.js.bs.js . (雖然,後者總是首選)
  3. bs 依賴項 :Rescript 依賴列表,因為我們使用的是 rescript-react 我們必須在這裡指定。還有bs-dev-dependencies .這些與我們在 package.json 中提到節點依賴的方式非常相似 .
  4. 原因 :由於我們將使用 React-JSX,我們必須指定 {"react-jsx": 3} .
  • 要編譯源文件,我們必須在 package.json 中添加兩個腳本 .

package.json

"scripts": {
    "clean": "bsb -clean-world",
    "start": "bsb -make-world -w",
}

開始 :將編譯 res 文件並將在監視模式下運行,即將不斷查找更改並編譯它。始終建議運行啟動腳本,然後對 Res 文件進行編碼,因為智能 rescript 編譯有很大幫助,並且使初學者對語言的編碼更容易。
清除 :將清理/刪除之前編譯的 *.bs.js 文件。

  • 現在,安裝 reactreact-dom 包。
$ npm install react react-dom --save
  • 最後,我們將使用 snowpack 在開發過程中構建和捆綁項目。在 snowpack 每個文件只需要構建一次,然後永久緩存。當文件更改時,Snowpack 會重建該單個文件。無需浪費時間重新捆綁每個更改,只需在瀏覽器中進行即時更新(通過熱模塊更換 (HMR) 變得更快)。它真的很快。 我們將再次安裝 snowpack 作為開發依賴項:
$ npm install --save-dev snowpack
  • 製作一個snowpack.config.js 文件並複制粘貼。由於我們沒有使用任何類型的插件,因此這裡無需指定任何內容。

snowpack.config.j

// Example: snowpack.config.js
// The added "@type" comment will enable TypeScript type information via VSCode, etc.

/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
    plugins: [
        /* ... */
    ],
};
  • 現在,我們必須為 snowpack 添加幾個 npm 腳本來啟動服務器並構建項目。

package.json

"scripts": {
    "dev": "snowpack dev",
    "build": "snowpack build"
}

至此,我們完成了依賴項的設置,以及你最終的 package.json 應該是這樣的:

package.json

{
  "name": "react-res-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "clean": "bsb -clean-world",
    "start": "bsb -make-world -w",
    "dev": "snowpack dev",
    "build": "snowpack build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "bs-platform": "^9.0.1",
    "snowpack": "^3.0.13"
  },
  "dependencies": {
    "@rescript/react": "^0.10.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}

開始編寫你的 Hello World 代碼!!

  • 首先從一個簡單的index.html開始 在您的根目錄中。粘貼此基本模板。一件重要的事情是應該有一個 <div>id="root" React 組件將在其中渲染。這就是 React 的工作原理,如果你已經有一些經驗,那麼你就會知道。另外,我們必須包含編譯後的 index.bs.js 文件。您可以簡單地複制粘貼此 HTML。如果您將使用 index.css 然後創建一個文件並添加其相對路徑。

index.html

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>ReScript React</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="src/index.bs.js"></script>
  </body>
</html>
  • 現在創建一個文件夾src 並創建一個新文件 src/index.res . index.res 內部 文件暫時只是複制粘貼。稍後我們將深入研究代碼。目前,讓我們測試一下我們所做的所有設置是否成功。
switch ReactDOM.querySelector("#root") {
| Some(root) => ReactDOM.render(<div> {React.string("Hello World!")} </div>, root)
| None => Js.log("Error: could not find react element")
}
  • 現在,在終端運行命令編譯index.res 文件。
$ npm run start

一旦你運行它,一個新文件 index.bs.js 將被創建。 (這就是我們包含 index.bs.js 的原因 <script> 中的文件 index.html 中的標記 )。

要構建反應應用程序運行,這是另一個終端窗口。

$ npm run dev

這將在 localhost:8080 處啟動一個雪包服務器 熱重載。訪問瀏覽器中的 URL,如果您看到 Hello World! 恭喜!!你現在已經準備好創建你的 rescript-react 項目了。

最終的文件夾結構將是這樣的:

├── bsconfig.json
├── index.css
├── index.html
├── package.json
├── package-lock.json
├── snowpack.config.js
└── src
    ├── index.bs.js
    └── index.res

這是一個漫長的過程嗎?是的,有點。但每次你都不必經歷所有。在這裡,我已經創建了一個包含所有這些步驟的倉庫。只需克隆它並開始使用:


Tutorial JavaScript 教程
  1. 使用 fetch 進行文件上傳

  2. JavaScript ES6

  3. 使用 express 製作 HTML5 Canvas 應用

  4. 我想在我的 php 頁面從服務器獲取數據時顯示等待動畫

  5. 我發布了一個包來控制 reactjs 中的音頻文件

  6. 如何設計類型友好的上下文

  7. 生成所有可能的真/假組合

  1. useEffect() 的陷阱——無限循環

  2. 帶有 Node.js 後端的 React 和 Redux 工具包中的 CRUD 操作視頻教程

  3. 解構

  4. 如何使用 Vue 上傳文件

  5. 使用 jest-test-gen 編寫更少,測試更快

  6. 我用 Next.js、TailwindCSS 和 Vercel 構建的新網站

  7. 在 MongoDB 中使用 GraphQL:graffiti-mongoose

  1. 讓我們使用 Node + React 構建一個完整的英國天氣應用程序:第 1 部分 - 基本設置

  2. 部署反應配置文件!

  3. 公司介紹

  4. 🚀 GitHub 上面向 Web 開發人員的 10 個熱門項目 - 2021 年 7 月 2 日