ReactWebAppの新規作成

### ReactWebAppの新規作成

初心者の中の初心者向けです。そんなことも知らなかったのかとか言わないでください。

create-react-appを使わず、react-appをどう作ればいいのかについて。これについては他の方がすでに記事にしているが、僕にはいまいちよくわからなかったのでなるべくシンプルにまとめてみました。

この記事がどこかの誰かの役に立つことを願って。



ここで重要なのがWebpackの存在。

Python(import hoge from 'hoge')とかprogateのreactなどとかでは、当たり前のように、`import hoge from 'hoge'`や`const hoge = require('hoge')` と書いてソースコードを分割するが実際には、webブラウザのjsには他のプログラムを読み込む機能はないので、うまく行かない。

そこでWebpackやブラウザリフィルなどを使って`require`や`import`などの単語がソースコード上で出てきたら、それらのソースコードを探してきて、読み込むことによって、`require`や`import`を行う。

更にWebpackは、それだけでなくいろいろできる。

（参照 https://ics.media/entry/12140/ https://app.codegrid.net/entry/browserify-1)



一応nodeとnpmのインストールの仕方。

```bash
sudo apt install npm nodejs -y
sudo npm install -g n 
sudo n stable
sudo apt purge nodejs npm -y
reboot

node -v
npm -v
```

`npm no such file or ...`と出る場合は、`reboot`した後に`echo export PATH=/usr/local/bin/:\$PATH >> ~/.bashrc`としてください。

------



|      | 大まかな手順                 |
| ---- | ---------------------------- |
| 0    | ディレクトリ作成             |
| 1    | npm、eslintの初期化          |
| 2    | NodePackageのインストール    |
| 3    | ディレクトリ構築             |
| 4    | 書く                         |
| 5    | webpack.config.jsを書く      |
| 6    | package.jsonに次を書き足す。 |
| 7    | webpackを実行。              |
| 8    | 生成されたindex.htmlを開く。 |



-----



####0.ディレクトリ作成

```bash
mkdir react-app
```



####1.npm、eslintの初期化

```bash
npm init -y
npx eslint --init
```



####2.NodePackageのインストール

基本として次の13のパッケージを入れる。

```
react
react-dom

@babel/core
@babel/cli
@babel/preset-env
@babel/preset-react

webpack
webpack-cli
webpack-dev-server

babel-loader
css-loader
style-loader

html-webpack-plugin
```

グローバルインストールをしたほうが良いのかよくわからないので、一応しておきます。

```bash
sudo npm i -g react react-dom @babel/core @babel/cli @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin

npm i -save react react-dom
npm i --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin
```



####3.ディレクトリ構築

```
react-app/
├── public/
│   ├── css/
│   │   └── スタイルシート
│   ├── img/
│   │   └── 画像
│   └── template/
│       └── index.html
└── src/
    ├── Components/
    │   └── App.js
    └── index.js
```

```
mkdir public src
cd public
mkdir css img template
touch template/index.html
cd ../src
mkdir Components
touch index.js Components/App.js 
```



####4.書く

```public/template/index.html
<!DOCTYPE html>

<body>
    <div id="root"></div>
</body>
```

```src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './Components/App';

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

```src/Components/App.js
import React from 'react';
import '../../public/css/index.css';

class App extends React.Component {
    render() {
        return (
            <div>
                <h1>Hello, React</h1> 
                <p>Hello, React</p>
            </div>
        )
    }
}

export default App;
```

```public/css/index.css
h1 {
    color: red;
    background: yellow;
    font-size: 40;
}

p {
    color: yellow;
    background: red;
    font-size: 20px;
}
```



####5.webpack.config.jsを書く

```
cd react-app
touch webpack.config.js
```

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

module.exports = {
    entry: './src/index.js',                                                     !
    mode: 'development',
    output: {
        path: path.resolve(__dirname, './'),                                     !
        filename: 'bundle.js'                                                    !
    },
    module: {
        rules: [
            {test: /\.(js)$/, use: 'babel-loader'},
            {test: /\.css$/, use: ['style-loader', 'css-loader']}
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'public/template/index.html'                               !
        })
    ]
}
```

一応それぞれのディレクトリ構造に合わせて変えないといけないところは「！」で表した。（4箇所）

上で示したディレクトリ構造の場合は変える必要なし。コピペする場合「！」は消してください。



####6.package.jsonに次を書き足す。

```package.json
 ...
  "babel":{
    "presets" : [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },
  "scripts": {
    "build-react-app": "webpack",
    "start": "webpack-dev-server --open"
},
...
```



####7.webpackを実行。

```
cd react-app
npm run build-react-app
```



####8.生成されたindex.htmlを開く。

7を実行すると、reaxt-appディレクトリに

```
index.html
bundle.js
```

が生成される。

webpackによってbundle.jsにすべてがまとめられ、index.htmlではscriptタグでbundle.jsを実行するだけである。

 
![React-app-startup-img.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448552/1f5ac638-fa3e-4c45-0ed9-39df1a4ce103.png)


### 参考



次のサイトが大変参考になりました。

Webpack for React (intro) / Vishang
https://dev.to/vish448/webpack-for-react-intro-3n01

Webpack Getting Started
https://webpack.js.org/guides/getting-started/

babel Usage Guide
https://babeljs.io/docs/en/usage