Webpack での React 環境の構築

## 開発の流れ

1：要件から詳細設計

2：環境構築

3：ディレクトリの作成(全体像から)

4：コーディング

5：テスト

6：リリース

### 詳細設計

この地点で、要件定義は行えていることを前提とする。

詳細設計の段階で決めること

- コーディングルール

命名の制約・アーキテクトデザイン・linter の設定・コメントなどのルール

- ディレクトリ構成

React にはテンプレとなるディレクトリ構成があまりないので、要件・設計から逆算してそれっぽい最効率のものを考えておく

→ 基本的には下記の構成で行なっている

```jsx
dict/
src/
 - pages
 - component
 - hooks
 - styles
 - utils
```

※ そのほかに、アトミックデザインなどを利用する場合があるが、基本的な考え方は一緒

### 環境構築

React のディレクトリ制作を自力で行う場合の流れ

1 : ディレクトリの作成

2 : プロジェクトの作成(npm init)

3 : React の導入 (web pack の設定 / React のinstall )

4 : eslintを設定 

- Reactの導入の流れ
    - Webpack の設定
    
    → webpack をインストールする
    
    ```jsx
    npm install --save-dev webpack webpack-cli webpack-dev-server
    ```
    
    　→ Webpackでバンドルするために、jsを読み込む用意をする必要がある
    
    ```jsx
    npm install babel-loader @babel/core @babel/preset-env
    ```
    
    React は一つのページに表示要素を順々に出していくイメージのフロント言語なので、バンドルするのは必要条件！
    
    → babel で表示するディレクトリを設定していく必要がある(コードの表示を行う口を設定)
    
    　 .js のプロジェクトを読み込めるように設定
    
    ```jsx
    module.exports = {
    	entry: 'ReactApp のRoot となる .js を指定',
    	output: 'ReactApp の表示を行う .html へ登録した .js を指定',
    	module: {
    		rules: [{
    			test: /\.(js|jsx|ts|tsx)?$/i,
          exclude: /node_modules/,
          use: {
    	       loader: 'babel-loader', /* jsのローダーを設定 */
             options: {
                presets: [
                    '@babel/preset-env',
                  ],
                },
              },
    				}
    		}]
    	},
    	devServer: {
    		ports: 'localhost のポートを決定',
    		static: {
    			directory: 'ReactApp の静的ファイルを表示させる口'
    		}
    };
    ```
    
    ! この地点で、web pack で .js が機能していることを確認してみる！
    
    1 : 表示する .js ファイルと .html をそれぞれディレクトリに作成する。
    
    （適当にhello world とかでおk）
    
    2 : npm でプロジェクトをスタートするための設定 
    
    package.json のデバック設定箇所に、web pack を開始するコマンドを追加する。
    
    ```jsx
    "start" : "webpack-dev-server --mode=development"
    ```
    
    3 :  `npm start` を実行して 任意のコードが実行されていることを確認する。
    
    → 指定したlocalhost の URL で任意の内容が表示されていたら webhook の準備は完了。
    
    　React の環境構築に移る。
    
    - React のインストール
    
    - web hook にて React の設定を行う
    
    → React のインストール
    
    ```jsx
    npm install --save react react-dom
    npm install --save-dev @babel/preset-react
    ```
    
    → web hook に React の loader を追加
    
    ```jsx
    		rules: [{
    			test: /\.(js|jsx|ts|tsx)?$/i,
          exclude: /node_modules/,
          use: {
    	       loader: 'babel-loader', /* jsのローダーを設定 */
             options: {
                presets: [
                    '@babel/preset-env',
    								'@babel/preset-react'
                  ],
                },
              },
    				}
    		}]
    ```
    
    → src ディレクトリ内でReactが機能していることを確認します。
    
    ```jsx
    (src/indexx.js)
    import React from 'react'
    import { createDom } from 'react-dom/client'
    
    import { '任意のコンポーネント'　} from 'PATH'
    
    const container = document.getElementById('root');
    const root = createRoot(container);
    root.render(<App />);
    ```
    
    これでReact の環境構築は完了
    

### コーディング

① React MUI / react-router-dom のインストール

下記のプリセットをinstall して React mui を利用可能にする。

```jsx
npm install @mui/material @emotion/react @emotion/styled @emotion/babel-preset-css-prop
```

web hook のpresetにReact emotion のcss を追加して、css の読み込みを可能にする

```jsx
		rules: [{
			test: /\.(js|jsx|ts|tsx)?$/i,
      exclude: /node_modules/,
      use: {
	       loader: 'babel-loader', /* jsのローダーを設定 */
         options: {
            presets: [
                '@babel/preset-env',
								'@babel/preset-react',
								'@emotion/babel-preset-css-prop'
              ],
            },
          },
				}
		}]
```