Node.js + React.js + Babel + Webpack 環境構築 

#React.js環境構築難しくない？
はい今回は、React.jsをNode.jsで
動かすための環境構築をしていきたいと思います。

　　**やってきた感想正直言いますとなめてました**

極力テンプレにできるような形で環境構築を行なったので、
備忘録+みなさんが苦労しなくてもいいように書きます。
それと、色々とここ最近仕様が変わってるみたい？で
https://qiita.com/yuki_nagahama/items/f64b183e16a6c307e2ee
こういったわりと最近の記事でもerror吐きます。。
上記の記事の差分と言う立場で書いていこうと思います。

##環境構築手順
※ Node.jsとnpmは導入したことがあり,
  ある程度理解できる前提としてください。

1. 必要ファイルの作成
2. 必要パッケージのインストール
3. webpack.config.jsの書き換え
4. package.jsonの書き換え
5. npmを用いたbuildと実行

###1. 必要ファイルの作成
```
react_sample/

｜ーー index.html
｜
｜ーー app.js
｜
｜ーー webpack.config.js
｜
｜ーー package.json
｜
｜ーー dist/
```
以上のファイルをIDEつかってチャチャッと作成しましょう。
んで、ファイル内容は以下の通り。

```index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div id="root"></div>
</body>
</html>
```

```app.js
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);
```
これら以外のファイルは,
ややこしくなるの後に説明します。

###2. 必要パッケージのinstall
```.sh
npm install react
npm install react-dom
npm install --save-dev webpack babel-core babel-loader babel-preset-react babel-preset-es2015
npm install html-webpack-plugin
```
簡単に説明しますと,
React.jsはbabelを用いて, 
ES6をコンパイルしてブラウザが認識できる
ES5にする必要があって, Webpackを用いてブラウザに描画するらしいです。（適当なこと言ってたら指摘お願いします）
なので, babelとWebpackの環境を整えて行く必要があります。

###3. webpack.config.jsの書き換え
今は何も書かれていないと思います。
一番の**厄介ポイント**です！！！！

```webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'app.js'),
  //区別しやすいようにdistディレクトリ配下に
  //ビルドした後に生成されるjsファイル名をbundleに
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
  //ここの項目を書いていないサイトをそこそこみます
  //これを書かないとlocalサーバが動きません。
  devServer: {
    contentBase: __dirname + './index.html',
    port: 3000,
  },
  resolve: {
    modules: [path.resolve(__dirname, "src"), "node_modules"],
    extensions: ['.js', '.jsx']
  },
  module: {
    //ここがloadersだとビルドの際エラー吐きます.
    //いろんなサイトでloadersと書かれています.
    rules: [
        {
         test: /\.js$/,
         loaders: 'babel-loader',
         query: {
           presets:['react','es2015']
         }
       }
    ]
  },
  //これがないと先ほど作成したHTMLと
  //app.jsがバインドされません
  plugins: [
    new HtmlWebpackPlugin({template: './index.html'})
  ]
};
```
###4. package.jsonの書き換え
ここまでくれば、知ってる人なら簡単かも。
パッケージバージョンによっても
変わるらしいですが, 2018/05/05時点での
最新パッケージをinstallしています。

```package.json
{
  "name": "react_sample",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  //追記箇所-実行しやすいように
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server"
  },

  "author": "",
  "license": "ISC",
  "dependencies": {
    "eslint": "4.19.1",
    "fs": "0.0.1-security",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "http": "0.0.0",
    "mime": "^2.3.1",
    "path": "^0.12.7",
    "react": "16.3.2",
    "react-dom": "16.3.2",
    "webpack": "4.7.0"
  },
  "devDependencies": {
    "babel-cli": "6.26.0",
    "babel-loader": "7.1.4",
    "babel-preset-env": "1.6.1",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-react": "6.24.1",
    "webpack-cli": "2.1.2",
    "webpack-dev-server": "^3.1.4"
  },
  //追記箇所-babelの設定
  //.babelrcで書くサイトもあるけどこっちを推奨
  //おそらくbabelとreactをバインドする設定
  "babel": {
    "presets": [
      "env",
      "react",
      "es2015"
    ]
  }
}
```
はい設定は完成です。
手順5に関しては以下のようにすればいいです。

```.sh
npm run build
npm start
```
あとはdistディレクトリに
index.htmlとbundle.jsが生成され,
localhost:3000にブラウザでアクセスしたら
ようやく "**Hello, world**" React.jsに...。
ということで今回は終わりです。

自分も今回初めてReact.jsをNode.jsで動かしたので
もし、理解など違うところがあれば教えてください(懇願)

参考にしたサイトは正直エラー吐かれたので、
あんまりみてないですが、Reactの構造などの理解はしやすいと思います。


参考Webサイト
https://qiita.com/HayneRyo/items/74892d3a37ee96a5df60