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もありました。今は非推奨です。