##前提条件
ReScript & React の実行には Node.js version >= 10 が必要です。

##Reactアプリケーションの作成

SH

npx create-react-app sample
cd sample

Reactアプリケーションを作成します。¹²
npx create-react-app sampleの実行には時間がかかります。
実行終了まで待って、sampleディレクトリに移動します。

##ReScriptのインストール

SH

npm install rescript --save-dev

ReScriptをインストールします。³
sampleディレクトリで実行します。

##rescript-reactのインストール

SH

npm install @rescript/react --save

rescript-reactをインストールします。⁴
sampleディレクトリで実行します。

##React & Rescript設定ファイルの作成
sampleディレクトリに以下の内容のbsconfig.jsonを作成します。⁵⁶

bsconfig.json

{
  "name": "sample",
  "version": "0.0.1",
  "sources": {
    "dir" : "src",
    "subdirs" : true
  },
  "package-specs": {
    "module": "es6",
    "in-source": true
  },
  "suffix": ".js",
  "reason": { "react-jsx": 3},
  "bs-dependencies": [
    "@rescript/react"
  ],
  "warnings": {
    "error" : "+101"
  }
}

##App.resの作成
sample/srcディレクトリに以下の内容のApp.resを作成します。⁷

src/App.res

@react.component
let make = () => {
  <div>{React.string("Hello World")}</div>
}

##ReScriptをJavaScriptに変換

SH

npx rescript

sampleディレクトリで実行します。
App.resの内容が変換され、App.jsに保存されます。

##index.jsの修正

src/index.js

// 修正前
import App from './App';

// 修正後
import { make as App } from './App';

sample/srcディレクトリにあるindex.jsに上記の修正を加えます。

##実行

SH

npm start

sampleディレクトリで実行します。
しばらくするとWebブラウザが起ち上がり、Hello Worldが表示されます。⁸
npm startを実行したターミナルは何もできなくなっています。Ctrl+Cを入力すると制御が戻ります。

##この後
1.App.resにReScriptを記述する
2.npx rescriptでReScriptをJavaScriptに変換する
3.npm startで内容を確認する
でいろいろと試すことができます。

##おまけ： index.js をReScriptで書く
sample/srcディレクトリに以下の内容のindex.resを作成します。⁹

src/index.res

switch(ReactDOM.querySelector("#root")){
| Some(root) => ReactDOM.render(<App />, root)
| None => ()
}

SH

npx rescript
npm start

で動作が確認できます。

https://create-react-app.dev/docs/getting-started を参照 ↩
"sample"はプロジェクト名です。好きな名前を付けることができます。プロジェクト名でディレクトリが作成され、その配下に必要なファイルが設置されます。 ↩
https://rescript-lang.org/docs/manual/latest/installation#integrate-into-an-existing-js-project を参照 ↩
https://rescript-lang.org/docs/react/latest/installation を参照 ↩
https://rescript-lang.org/docs/manual/latest/installation#integrate-into-an-existing-js-project と https://rescript-lang.org/docs/react/latest/installation を参照 ↩
"suffix"は".bs.js"にするのが一般的なようです。その場合は後の例のApp.resはApp.bs.jsに変換されます。 ↩
https://rescript-lang.org/docs/react/latest/installation を参照 ↩
起ち上がったWebブラウザが http://localhsot:3000 にアクセスします。 ↩
https://rescript-lang.org/docs/react/latest/rendering-elements#rendering-elements-to-the-dom を参照 ↩