Webpack での React 環境の構築

開発の流れ

1：要件から詳細設計

2：環境構築

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

4：コーディング

5：テスト

6：リリース

詳細設計

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

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

• コーディングルール

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

• ディレクトリ構成

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

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

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

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

環境構築

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

1 : ディレクトリの作成

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

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

4 : eslintを設定

• Reactの導入の流れ

  • Webpack の設定

  → webpack をインストールする

  npm install --save-dev webpack webpack-cli webpack-dev-server
  

  　→ Webpackでバンドルするために、jsを読み込む用意をする必要がある

  npm install babel-loader @babel/core @babel/preset-env
  

  React は一つのページに表示要素を順々に出していくイメージのフロント言語なので、バンドルするのは必要条件！

  → babel で表示するディレクトリを設定していく必要がある(コードの表示を行う口を設定)

  　 .js のプロジェクトを読み込めるように設定

  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 を開始するコマンドを追加する。

  "start" : "webpack-dev-server --mode=development"
  

  3 : npm start を実行して 任意のコードが実行されていることを確認する。

  → 指定したlocalhost の URL で任意の内容が表示されていたら webhook の準備は完了。

  　React の環境構築に移る。

  • React のインストール

  • web hook にて React の設定を行う

  → React のインストール

  npm install --save react react-dom
  npm install --save-dev @babel/preset-react
  

  → web hook に React の loader を追加

  		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が機能していることを確認します。

  (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 を利用可能にする。

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

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

		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'
              ],
            },
          },
				}
		}]