React初期構築

# はじめに
Reactの環境を１から構築していく。

# アプリディレクトリの作成
まずは`mkdir`コマンドでアプリのディレクトリを作成する。
作成したらアプリディレクトリに移動する。

```bash
whitecat:~/environment $ mkdir whitecat-app
whitecat:~/environment $ ls
README.md  whitecat-app
whitecat:~/environment $ cd whitecat-app/
whitecat:~/environment/whitecat-app $ 
```

# 必要npmパッケージのインストール
## package.jsonの作成
npmモジュールをインストールするために、最初に空のpackage.jsonを作成する。

```bash
whitecat:~/environment/whitecat-app $ echo "{}" > package.json
whitecat:~/environment/whitecat-app $ ls
package.json
```

## babel
### babelとは
reactのJSXで記述されたコードは、ブラウザでは解釈できない。そこでブラウザ解釈できるように変換する必要がある。この変換を行ってくれるのがbabelである。

### babelのインストール
インストールは`npm install --save-dev babel-core babel-preset-react`コマンドで実施する。*babel-core*はbabelの本体である一方、*babel-preset-react*はreactアプリケーションに必要なbabelのプラグインをまとめたものだ。
>babel-preset-hogehogeは、特定の目的のためにbabelで必要なプラグインをまとめてくれているもの。自分でひとつひとつインストールしてもよいが、特に理由なければpresetを使うべき。

## webpack
webpackはモジュールバンドラーであり、モジュール（機能ごとにファイルを分割したソースコードやnpmパッケージ）をバンドルして（依存関係を解決したうえで１ファイルにまとめて）くれる。

### webpackのインストール
インストールは`npm install --save-dev webpack babel-loader@7 webpack-cli`コマンドで実施する。
モジュールをバンドルするだけならwebpakだけでよいが、reactではモジュールをバンドルする前にbabelでソースコードのJSX記述を変換する必要があるため、babel-loaderを併せてインストールする。なお、babel-coreのバージョン関係から@7のバージョンをインストールしないといけない。

webpackでバンドルする際にはcliでコマンド実行させる必要があるので、*webpack-cli*もインストールする。

## react
### reactのインストール
最低限必要な2つのreactパッケージを`npm install --save react react-dom`でインストールする。

## package.json
インストール後の*package.json*は以下のようになる。

```json:package.json
{
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3"
  },
  "dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4"
  }
}
```

# アプリケーションソースコードの作成
*src*ディレクトリを作成し、サンプルとして以下ファイルを作成する。

```js:index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './Hello';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
    );
```

```js:Hello.js
import React from 'react';

export default function Hello(){
    return <h1> Hello world!! </h1>;
}
```
# webpack設定ファイルの作成
*webpack.config.js*を作成し、バンドルの設定を記述する。

```js:webpack.config.js
module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['react']
                    }
                }
            }
        ]
    }
};
```

# バンドル実施
`./node_modules/.bin/webpack --config webpack.config.js  --mode development`を実行し、バンドルファイルを作成する。モードについては、とりあえずdevとしておく。

実行するとwebpackは自動的に*/src/index.js*を起点として、バンドルする。実行後は、*/dist/main.js*がアウトプットとして出力される。

# index.htmlの作成
*public*フォルダを作成し、*index.html*を作成する。*index.html*では、バンドルされた*main.js*を読み込むようにする。

```html:index.html
<body>
    <div id="root"></div>
    <script src=".././dist/main.js"></script>
</body>
```

# index.htmlを読み込む
htmlをブラウザで開くと、reactが実行され*hello world!!*が表示される。

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

```bash
.
├── dist
│   └── main.js
├── node_modules
├── package.json
├── package-lock.json
├── public
│   └── index.html
├── src
│   ├── Hello.js
│   └── index.js
└── webpack.config.js
```
# webサーバーの作成と自動ビルド
このままだと、ソースを書き換えるたびにwebpackコマンドを実行し、htmlファイルを再読み込みしないといけない。webpack-dev-serverをインストールすると、ソースコードの書き換えにより勝手に再ビルドしてくれるようになる。

## インストール
` npm install webpack-dev-server --save-dev`コマンドを実行する。

## 設定
webpack-dev-serverも*webpack.config.js*を設定ファイルとして利用する。なお、まずは設定として[disableHostCheck: true]とする。
※今回は開発環境にcloud9を利用しているためlocal環境ではない。よって、どこからでもアクセスできるようにしないといけない。

```js:webpack.config.js
module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['react']
                    }
                }
            }
        ]
    },
	devServer: {
        disableHostCheck: true
    }
};
```
## アクセス
`./node_modules/.bin/webpacdev-server`コマンドでwebサーバーを起動する。起動後、*https://hogehoge.hoge.cloud9.us-east-1.amazonaws.com/public/index.html*にアクセスすると、hello world!!が表示される。

## distフォルダ削除
webpack-dev-serverではバンドルしたファイルはインメモリ上に保存される。よって、distフォルダは必要ないため削除する。


# おわりに
とりあえず、最低限のreact環境は作成できた。