browserifyとbabelifyを使ってReact用のjsxファイルを変換します。

使う道具

browserify
babelify
babel-plugin-transform-react-jsx

対象

jsxファイル

index.jsx

const React = require('react')
const ReactDOM = require('react-dom')

const App = () => <div>Hello, world!</div>

ReactDOM.render(<App />, document.querySelector('#container'))

をbrowserifyを使ってJavaScriptにトランスパイルします。

読み込むhtmlファイル

index.html

<!DOCTYPE html>
<html>
  <body>
    <div id="container"></div>
    <script src="bundle.js"></script>
  </body>
</html>

手順

準備

package.jsonを作ります。

npm init -y

必要なnpmモジュールをインストールします。

npm i -D browserify babelify babel-plugin-transform-react-jsx react react-dom

babelの設定ファイルを作ります。

.babelrc

{
  "plugins": ["transform-react-jsx"]
}

実行

node_modules/browserify/bin/cmd.js -t babelify index.jsx -o bundle.js

ブラウザで、index.htmlファイルを開いてHello, world!が表示されたら、成功です。

その他

以前はreactifyというtransform moduleもありました。今は非推奨です。

参考