環境

環境は Windows10 です。 node.js インストール済みとします。
Mac でも同じだと思います。

インストール

フォルダを作成して、そこをカレントディレクトリにしてコマンドを打ちましょう。

  npm init -y
  npm install --save react
  npm install --save react-dom
  npm install --save-dev babel-core
  npm install --save-dev babel-loader
  npm install --save-dev babel-preset-env
  npm install --save-dev babel-preset-react
  npm install --save-dev webpack
  npm install --save-dev webpack-cli

フォルダに、package.json が作られてその中身の一部はこのようになります。

  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.4.1",
    "webpack-cli": "^2.0.13"
  },
  "dependencies": {
    "react": "^16.3.0",
    "react-dom": "^16.3.0"
  }

ファイル

次の構成にします。作成されたフォルダの中に次のファイルがある状態にしてください。

  index.html
  .babelrc
  development.js
  webpack.config.js
  src フォルダ
    hello.jsx
  build フォルダ
    build.js

build.js は WebPack によって生成されます。

index.html

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="app01"></div>
    <div id="app02"></div>
  <script src="./build/build.js"></script>
  </body>
</html>

hello.jsx

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

class HelloWorld extends React.Component {
  render() {
    return <div>Hello World {this.props.name}</div>;
  }
}

const hwElement = <HelloWorld name="01" />;
ReactDOM.render(hwElement,
  document.getElementById('app01'));

const hwFactory = React.createFactory(HelloWorld);
 ReactDOM.render(
  hwFactory({name: '02'}),
  document.getElementById('app02')
);

Babel用の設定ファイルを用意します。

.babelrc

{
  "presets": ["env", "react"],
}

WebPack用の設定ファイルを用意します。

webpack.config.js

require('babel-core/register'); 
module.exports = require('./development');

development.js

import path from 'path'

const src  = path.resolve(__dirname, 'src')
const dist = path.resolve(__dirname, 'build')

export default {
  entry: src + '/hello.jsx',

  output: {
    path: dist,
    filename: 'build.js'
  },

  module: {
    rules: [
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },

  plugins: []
}

実行

ビルドコマンドは次のとおりです。決めたフォルダをカレントディレクトリにしてコマンド実行してください。
オプションなどを設定しなくても webpack.config.js をデフォルトで読み取ってそのとおりに動作します。

>.\node_modules\.bin\webpack

実行結果は次のとおりになります。

<body>
    <div id="app01"><div data-reactroot="">Hello World 01</div></div>
    <div id="app02"><div data-reactroot="">Hello World 02</div></div>

これで、Babel を使って ES の最新と React の変換を行えます。

GitHub

2018/04/08追記

少しソースコードをシンプルにして次の場所に配置しました。
https://github.com/standard-software/React_Hello-World_Sample
CDN版 Reactのみ / React+JSX
Browserify版 Reactのみ / React+JSX Reactify / React+JSX Babelify
WebPack版 Reactのみ / React+JSX
これらが全て含まれています。

React16 jsx 最小構成のビルド環境 WebPack

関連記事

環境

インストール

ファイル

実行

GitHub