【初心者】React.jsのチュートリアルの環境をwebpackで作る #React

これからReact.jsを勉強しようという初心者です。
公式のチュートリアルの簡単なゲームを実際に自分で作ってみて勉強しようと思っています。
https://facebook.github.io/react/tutorial/tutorial.html

公式ではcreate-react-appコマンドで簡単に環境が作れますが、
Reactの記事にはよくwebpackも一緒に語られているので、せっかくなのでそちらで環境を作ってみようと思っています。

注意
私はただReactを趣味で勉強し始めただけで、業務でやってるわけでもなんでもありません。
間違っていることも書くと思います。
ただ、コピペしただけでReactとwebpackの環境を作成できるものにはしようと思います。
それとこの記事でReactのチュートリアルをやるわけではありません、環境を作るだけです。
他にも同じような記事がたくさんがありますが、自分の勉強のために書きました。間違っていたら指摘してほしいです、、、

最終的なディレクトリ構成

このような形になります。

├　dist
│　└ bundle.js
├ node_modules
├ src
│　　├ index.css
│ └ index.js
├ index.html
├ package.json
└ webpack.config.js

npmで必要なものをインストール

npm init -y
npm install --save-dev webpack react react-dom babel-loader babel-core babel-preset-react babel-preset-es2015 style-loader css-loader

package.jsonが作成されてインストールしたものが書いてあればOK

packge.json

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.1",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "style-loader": "^0.17.0",
    "webpack": "^2.5.1"
  }
}

webpack.config.jsを作成

webpack.config.js

module.exports = {
   context: __dirname + '/src',
   entry: {
      'index':'./index.js'
   },
   output: {
      path: __dirname + '/dist',
      filename: 'bundle.js'
   },
   module: {
      loaders: [
         {
            test: /.js?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
               presets: ['babel-preset-es2015', 'react']
            }
         },
         {
            test: /\.css$/,
            loaders: ['style-loader', 'css-loader'],
         },
      ]
   }
}

webpackの設定ができました。

cssとjsのコードを用意

srcフォルダを作成して、公式にある通り、index.cssとindex.jsの内容をコピペする
index.css
https://codepen.io/gaearon/pen/oWWQNa?editors=0100
index.js
https://codepen.io/gaearon/pen/oWWQNa?editors=0010

index.jsの上にimportを書き込んでおく

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './index.css';

// 以下コピペしたコード
class Square extends React.Component {
  render() {
     //...

webpackでコードをバンドルする

$ ./node_modules/.bin/webpack

distフォルダとbundle.jsが作成されたら成功。

ブラウザで表示させる

index.htmlで先ほど作成したbundle.jsを読み込む

index.html

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>React</title>
</head>
<body>
   <div id="root"></div>
   <script src="dist/bundle.js"></script>
</body>
</html>

マス目が表示された！

チュートリアルの環境を作ることができました。これから頑張って勉強していくつもりです。
ここまで読んでくださってありがとうございました。