es6
webpack
React
babel

【メモ】ES6でReactを動かす

まずはwebpack

jsxの書き方はしない場合

まずはwebpackでes6のトランスパイルができるように
webpackのインストールからes6のトランスパイルまでを記事を参考に準備する

Reactのプリセットをインストール

$ npm i --save-dev babel-preset-react

.babelrcにreactを追記

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

Reactのパッケージをインストール

$ npm i --save-dev react react-dom

webpack.config.jsに追記

module.exports = {
  entry: './src/js/common.js',
  output: {filename: './dist/js/bundle.js'},
  // 略
  module: {
    loaders: [
      { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        loader: "babel-loader", 
        query:{
          presets: ['react', 'es2015']
        }
      }
    ]
  },
  // 略
};