##前提条件
ReScript & React の実行には Node.js version >= 10 が必要です。
##Reactアプリケーションの作成
npx create-react-app sample
cd sample
Reactアプリケーションを作成します。12
npx create-react-app sample
の実行には時間がかかります。
実行終了まで待って、sampleディレクトリに移動します。
##ReScriptのインストール
npm install rescript --save-dev
ReScriptをインストールします。3
sampleディレクトリで実行します。
##rescript-reactのインストール
npm install @rescript/react --save
rescript-reactをインストールします。4
sampleディレクトリで実行します。
##React & Rescript設定ファイルの作成
sampleディレクトリに以下の内容のbsconfig.json
を作成します。56
{
"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を作成します。7
@react.component
let make = () => {
<div>{React.string("Hello World")}</div>
}
##ReScriptをJavaScriptに変換
npx rescript
sampleディレクトリで実行します。
App.resの内容が変換され、App.jsに保存されます。
##index.jsの修正
// 修正前
import App from './App';
// 修正後
import { make as App } from './App';
sample/srcディレクトリにあるindex.jsに上記の修正を加えます。
##実行
npm start
sampleディレクトリで実行します。
しばらくするとWebブラウザが起ち上がり、Hello Worldが表示されます。8
npm start
を実行したターミナルは何もできなくなっています。Ctrl+Cを入力すると制御が戻ります。
##この後
1.App.res
にReScriptを記述する
2.npx rescript
でReScriptをJavaScriptに変換する
3.npm start
で内容を確認する
でいろいろと試すことができます。
##おまけ : index.js をReScriptで書く
sample/srcディレクトリに以下の内容のindex.resを作成します。9
switch(ReactDOM.querySelector("#root")){
| Some(root) => ReactDOM.render(<App />, root)
| None => ()
}
npx rescript
npm start
で動作が確認できます。
-
"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 を参照 ↩