2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

ReScript & React で Hello World を表示する

Posted at

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

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

SH
npx create-react-app sample
cd sample

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

##ReScriptのインストール

SH
npm install rescript --save-dev

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

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

SH
npm install @rescript/react --save

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

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

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を作成します。7

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が表示されます。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

src/index.res
switch(ReactDOM.querySelector("#root")){
| Some(root) => ReactDOM.render(<App />, root)
| None => ()
}
SH
npx rescript
npm start

で動作が確認できます。

  1. https://create-react-app.dev/docs/getting-started を参照

  2. "sample"はプロジェクト名です。好きな名前を付けることができます。プロジェクト名でディレクトリが作成され、その配下に必要なファイルが設置されます。

  3. https://rescript-lang.org/docs/manual/latest/installation#integrate-into-an-existing-js-project を参照

  4. https://rescript-lang.org/docs/react/latest/installation を参照

  5. https://rescript-lang.org/docs/manual/latest/installation#integrate-into-an-existing-js-projecthttps://rescript-lang.org/docs/react/latest/installation を参照

  6. "suffix"は".bs.js"にするのが一般的なようです。その場合は後の例のApp.resはApp.bs.jsに変換されます。

  7. https://rescript-lang.org/docs/react/latest/installation を参照

  8. 起ち上がったWebブラウザが http://localhsot:3000 にアクセスします。

  9. https://rescript-lang.org/docs/react/latest/rendering-elements#rendering-elements-to-the-dom を参照

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?