Reactのjsxをプリコンパイルする方法

Reactでjsxを使っている場合、JSXTransformerを使って描画時ブラウザ側でjsx⇒HTML5に変換することが出来ます。

しかし、実際にはこれを使うと以下のような警告文が出ます。

You are using the in-browser JSX transformer. Be sure to precompile your JSX for production

これには間に1段階jsx⇒jsに変換するプロセスがあり(つまりjsx⇒js⇒html5という流れ)、このjsxからjsへのコンパイルがパフォーマンス的に優れていないため、本番環境では使わないようにという警告です。

プリコンパイルの方法

### ライブラリのインストール
yum install npm
npm i -g react-tool

### プリコンパイル
jsx --harmony jsx/ js/

### 変更があったら常時反映したい場合は
jsx --harmony --watch jsx/ js/

• これでjsx以下にあるファイルが全てプリコンパイルされてjsディレクトリ以下に配置されます。
• react.min.jsとか、その他のreactとは関係ないライブラリファイル等はあらかじめjsディレクトリに配置しておいてもいいかもしれません。
• watchオプションを使うことで、jsx以下のファイルに変更があるたびに自動で再プリコンパイルしてくれます。

htmlファイルでの読み込み

JSXTransformerを使った場合

<script type="text/javascript" src="/jsx/react.min.js"></script>
<script type="text/javascript" src="/jsx/JSXTransformer.js"></script>
<script type="text/jsx;harmony=true" src="/jsx/react_test.js"></script>

• JSXTransformerをあらかじめダウンロードしておいて読み込む必要があります。
• また、JSXTransformerを使ってプリコンパイルするために、typeに"text/jsx;harmony=true"といれなければいけません。

プリコンパイル済みの場合

<script type="text/javascript" src="/js/react.min.js"></script>
<script type="text/javascript" src="/js/readt_test.js"></script>

• JSXTransformerはいりません(読みこんでもコンパイルするものがなければ警告文は出ません)
• jsのタイプは"text/jsx;harmony=true"から"text/javascript"に変更します(こちらは変更しないと動きません。)