React は基本的に JSX というシンタックスで書くのだけど、
実際に使用するときには ES5 の js にコンパイルしないといけない。
（ライブラリを使えばそのままブラウザで実行できるようになるけどそれについては触れない）
公式が JSX をコンパイルするツールを出してはいるのですが、最近は ES2015 でも書きたいということもあるので、それを含めてコンパイルしてくれる Babel を使う。
Babel のほうが一般的によく使われてるらしいですし。
Babel をインストール
公式サイトの Setup のページを参考にやります。
とりあえず npm init しておきます。
質問は全部 y で。
$ npm init
babel をインストール。
$ npm install --save-dev babel-cli
package.json の 'devDependencies' に 'babel-cli' が追加されてれば OK。
...
"devDependencies": {
"babel-cli": "^6.9.0"
},
...
package.json の 'scripts' を下記のように変更します。
...
"scripts": {
"build": "babel src -d lib"
},
...
ちなみにこれは 'src' ディレクトリにあるものをまとめてコンパイルして、libディレクトリに出力するという意味。
-d オプションは出力先を指定するオプションです。
これで下記コマンドを叩けば build が走ります。
$ npm run build
lib/ にファイルが生成されたら OK。
(おまけ) .babelrc ではなく package.json に設定を書く
ちなみに上記の .babelrc に書いた babel の設定は package.json に書くこともできます。
その場合、下記のように "babel" って項目を追加すれば OK です。
...
"babel": {
"presets": ["react", "es2015"]
},
...
プラグインを使う
上記のようにやるだけでは Babel はほぼ何もしてくれません。
Babel がどのようにコンパイルするのか、に関してはプラグインとして別ライブラリになっているものを別途入れる必要があります。
目的に合ったプラグインを入れましょう。
プラグイン一覧はこちら。
今回は react の JSX と es2015 をコンパイルしてほしいので、下記のプラグインを入れます。
$ npm install --save-dev babel-preset-react babel-preset-es2015
インストールできたら使用するプラグインを .babelrc ファイルに記載します。
{
"presets": ["react", "es2015"]
}
これで再度下記コマンドで build したらプラグインで入れたもののコンパイルをしてくれます。
$ npm run build
ちなみに babel コマンドでコンパイルすることも可能です。
$ ./node_modules/.bin/babel src -d lib