webpackとbabel-loaderを使ってReact用のjsxファイルを変換します。

使う道具

webpack
babel-loader
babel-core (babel-loaderに必要です)
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'))

をwebpackを使って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 webpack babel-loader babel-core babel-plugin-transform-react-jsx react react-dom

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

webpack.config.js

module.exports = {
  entry: './index.jsx', // エントリポイントのjsxファイル
  output: {
    filename: 'bundle.js' // 出力するファイル
  },
  module: {
    loaders: [{
      test: /\.jsx?$/, // 拡張子がjsxで
      exclude: /node_modules/, // node_modulesフォルダ配下でなければ
      loader: 'babel', // babel-loaderを使って変換する
      query: {
        plugins: ["transform-react-jsx"] // babelのtransform-react-jsxプラグインを使ってjsxを変換
      }
    }]
  }
}

実行

node_modules/webpack/bin/webpack.js

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

その他

以前はjsx-loaderというローダーもありました。今は非推奨です。

参考