Reactプロジェクト環境の構築メモ

freeCodeCamp の [How to set up & deploy your React app from scratch using Webpack and Babel](https://medium.com/free-code-camp/how-to-set-up-deploy-your-react-app-from-scratch-using-webpack-and-babel-a669891033d4) より、余計なパッケージ等が多く付属されてしまう `create-react-app` とは別の方法でのセットアップだそうだ。

1. [nvm で node と npm のインストール](#1-nvm-で-node-と-npm-をインストール)
2. [プロジェクトの初期化](#2-プロジェクトの初期化)
3. [npm パッケージのインストール](#3-npm-パッケージのインストール)
4. [package.json の設定](#4-packagejson-の設定)
5. [webpack.config.js の設定](#5-webpackconfigjs-の設定)
6. [rc ファイルの設定](#6-rc-ファイルの設定)
7. [サイトのコンテンツの作成](#7-サイトのコンテンツの作成)
8. [サーバー起動](#8-サーバー起動)

### <a name="1">1. nvm で node と npm をインストール</a>

```bash
$ sudo wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash
$ exec bash
$ nvm --version
0.35.2
$ nvm install node
$ node -v
v13.5.0
$ npm -v
6.13.4
```

### <a name="2">2. プロジェクトの初期化</a>

```bash
$ mkdir my-react-project && cd my-react-project
$ npm init -y
```

### <a name="3">3. npm パッケージのインストール</a>
[React](https://reactjs.org/), [Webpack](https://webpack.js.org/), [Babel](https://babeljs.io/), [ESlint](https://eslint.org/), [Less](http://lesscss.org/), [Prettier](https://prettier.io/) パッケージをインストール:

```bash
$ npm install --save-dev \
react react-dom \
webpack webpack-dev-server webpack-cli \
@babel/core @babel/preset-env @babel/preset-react babel-loader \
eslint eslint-loader babel-eslint eslint-config-react eslint-plugin-react \
less less-loader css-loader style-loader 
$ npm install --save-dev --save-exact prettier
$ npm install html-webpack-plugin -D
```

### <a name="4">4. package.json の設定</a>
`package.json` 内の `"scripts"`に以下の様に追加

```js
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1", 
  "start": "webpack-dev-server --mode development", 
  "format": "prettier --write \"src/**/*.js\"",
  "eslint-fix": "eslint --fix \"src/**/*.js\"",
  "build": "webpack --mode production"
}
```

### <a name="5">5. webpack.config.js の設定</a>
`webpack.config.js`を作成、以下を記入：

```js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: 'inline-source-map',
  entry: './src/index.js',
  output: {
    path: __dirname + '/build',
    publicPath: './',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './build',
    port: 4000,
    writeToDisk: true,
    historyApiFallback: true,
    publicPath: './'
  },
  module: {
    rules: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: ['babel-loader', 'eslint-loader']
    },
    {
      test: /\.less$/,
      use: [
        'style-loader',
        'css-loader',
        'less-loader',
        ]
    }]},
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve('./index.html'),
    }),
  ]};
```

### <a name="6">6. rc ファイルの設定</a>

`.babelrc`:

```js
{"presets": ["@babel/preset-env", "@babel/preset-react"]}
```

`.eslintrc`:

```js
{
  "parser": "babel-eslint",
  "extends": "react",
  "env": {
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}
```

`.prettierrc`:

```js
{"semi": true, "singleQuote": true, "trailingComma": "es5"}
```

### <a name="7">7. サイトのコンテンツの作成</a>

以下ファイルとディレクトリを作る：

- index.html
- /src
- /src/index.js
- /src/style/
- /src/style/main.less
- /src/style/header.less

内容は以下の通りに：

`index.html`:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hi There</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>
```

`index.js`:

```js
import React from "react";
import ReactDOM from "react-dom";
import "./style/main.less";

class Welcome extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
};
ReactDOM.render(<Welcome />, document.getElementById("root"));
```

`main.less`:

```css
@import "header.less";
@color: #f5adad;
body {
  background-color: @color;
}
```

`header.less`:

```css
.header {
  background-color: #3d3d;
}
```

### <a name="8">8. サーバー起動</a>

Prettier と ESLint でコードを整形:

```bash
$ npm run format
$ npm run eslint-fix
```

サーバー起動:

``` bash
$ npm run start
```

コンパイルが成功したら http://localhost:4000/ に Hello World が表示されるはず。