create-react-app を使わずに React の環境を作る

# はじめに
これまで React でプロジェクトを始めるときは、`create-react-app` を使っており、自分で空から環境構築したことはありませんでした。

ふと、その場合はどのような手順で環境を作るんだろう？と思ったので、 [Create React App without create-react-app](Create React App without create-react-app) を参考に作業しました。
途中、いくつかエラーを踏んだので、その部分の対処は独自の方法です。

同じリンクを見てつまずいた人もいるかもしれないので、記事にまとめました。

# 環境構築
プロジェクトフォルダを作成します。
`yarn` を使ってるのは宗教ではなく、 React Project だし Facebook 産の `yarn` で作業してみよう、程度の感覚です。

```
$ mkdir dirname
$ cd dirname
$ yarn init
```

フォルダ構成を整備します。

```
$ mkdir -p src/components
$ touch src/components/app.js
$ touch src/index.{html,js}
$ touch .babelrc README.md webpack.config.js
$ echo node_modules > .gitignore
```

モジュールをインストールしていきます。
この作業では、リンク元のページと違うことをしています。

そのまま試してみるとエラーが出ました。
回避策を調べてみると、`@babel/core`, `@babel/preset-env`, `@babel/preset-react` を利用することを勧められていたのでそれに倣いました。

```
$ yarn add react react-dom
$ yarn add -D webpack webpack-cli webpack-dev-server
$ yarn add -D babel babel-loader @babel/core @babel/preset-env @babel/preset-react
$ yarn add -D html-webpack-plugin http-server
```

# 構成ファイルの内容
リンク元をそのまま活用させていただいているものと、適時修正したものがあります。

### webpack.config.js
```javascript
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    devtool: 'source-map',
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, "/dist"),
        filename: "index_bundle.js"
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader'
            }
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({ template: "./src/index.html" })
    ]
}
```

### .babelrc
```json
{
  "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
  ]
}
```

`.babelrc` は、利用するモジュールを変えたので、修正しています。

### package.json
```json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node_modules/.bin/webpack-dev-server --mode development --open --hot",
    "build": "node_modules/.bin/webpack --config webpack.config.js --mode production",
    "serve": "node_modules/.bin/http-server ./dist"
  },
```

元記事では `build` で `webpack.prod.js` が書かれているのですが、そんなファイルは作成していないのでエラーが出ます。
今回は、`dev`/`prod` のファイルを分けることは主目的ではないため、 `webpack.config.js` を直に指定しています。

### app.js
```javascript
import React, { Component } from 'react';
class App extends Component {
    render() {
        return (<h1>My React App</h1>)
    }
}

export default App;
```

### index.html
```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My React App</title>
</head>

<body>
    <div id="app"></div>
</body>

</html>
```


### index.js
```javascript
import React from 'react';
import { render } from 'react-dom';
import App from './components/app';

const rootEl = document.getElementById('app');


render(<App />, rootEl);

if (module.hot) {
    module.hot.accept();
}
```


これで `yarn start`, `yarn build`, `yarn serve` が動作するようになります。

### .gitignore
```
node_modules
dist
```

`build` でできるフォルダを含めていなかったので追記しています。


# おわりに
React Project を始める場合、 `create-react-app` が非常に便利です。

とはいえ、自分で手を動かしながら環境を作ることで学べることもあるので、いい経験になりました。
試してみたいライブラリの Get Started が `create-react-app` を使ってなさそうだったので脱線しました。

これで、ようやくライブラリを試せそうです。