React を使って何かを試すとき、 JSX を変換する必要があったり npm でインストールした JavaScript を1つにまとめたり色々とやることが多く、環境の構築が割りと面倒です。
React のビルド環境とサーバをひとまとめにした enclave という npm モジュールがあったので試してみます。
インストール
npm 3 で enclave だけインストールすれば(とりあえず)使えるみたいです。
$ npm install -D enclavenpm install を実行するとエントリーポイントやポート番号など色々聞かれるので答えていきます。答えた内容は enclave.js というファイルに記録されます。
Hello, World!
簡単な例を作ってみます。
// App.js
import React from 'react';
import { render } from 'react-dom';
class App extends React.Component {
render() {
return <div>
{`Hello, enclave!`}
</div>;
}
}
render(<App name="World" />, document.querySelector('#app'));これを読み込む index.html です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>App</title>
</head>
<body>
<div id="app"></div>
</body>
</html><script> タグは enclave が </body> の直前に挿入してくれるので書きません。最初 <body></body> を省略したら動きませんでした。
サーバの起動は npm start でできるように package.json の "scripts" に仕込んでくれます。
$ npm startこれで先ほど入力したポート(デフォルトでは8080でした)を開くと表示が確認できます。
App.js と index.html を用意しただけで表示確認ができました。
Live Reload
enclave は設定で Live Reload まで使えます。最初に live reload を on にするか聞かれた時に true と答えると有効になりました。 enclave.js の中身を直接編集すれば後からでも有効にできます。
サーバが起動した状態で JavaScript に変更があると自動でリロードしてくれます。
// App.js
import React from 'react';
import { render } from 'react-dom';
class App extends React.Component {
render() {
const { name = 'enclave' } = this.props;
return <div>
{`Hello, ${name}!`}
</div>;
}
}
render(<App name="World" />, document.querySelector('#app'));さいごに
ちょっと React を試すために、自分で0からビルドの設定やサーバ、 live reload の設定をするのは結構大変なので enclave を使えばかなり手間を省けると思います。
さくっと React で書いたコードが試せるので React 関連のライブラリなどを気軽に試すことができそうです。実際のプロダクトでつかう感じではなさそうですが、使える場面は多いかもしれません。