はんのうきほん

Reactを開発し、非常に基本的な設定を整理します.
プロジェクト作成後の環境設定

npm init

npm i react react-dom
npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react
npm i -D react-refresh @pmmmwh/react-refresh-webpack-plugin 
npm i -D webpack webpack-cli webpack-dev-server	

なぜwebpackを使うのですか?
:複数のファイル(.js、.jsx...)ファイルをappにマージします.jsファイルとして作成
最新の構文を以前のブラウザでも使用できるようにする
webpack.config.jsファイルの作成後のプリファレンス
webpack.config.js

const path = require('path');
const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = {
    name: ***,
    mode: 'development',
    devtool: 'eval',
    resolve: {
        extensions: ['.js', '.jsx']
    },
    entry: {
        app: ['./Client'],
    },
    module:{
        rules: [{
            test:/\.jsx?$/,
            loader: 'babel-loader',
            options:{
                presets: [
                    ['@babel/preset-env',{
                        targets: {
                            browsers: ['> 1% in KR'],
                        }
                    }],    
                    '@babel/preset-react'
                ],
                plugins: [
                    '@babel/plugin-proposal-class-properties',
                    'react-refresh/babel'
                ],
            }
        }],
    },
    plugins: [
        new RefreshWebpackPlugin()
    ],
    output: {
        filename: 'app.js',
        path: path.join(__dirname, 'dist'),
    },
    devServer: {
        devMiddleware: { publicPath: '/dist/' },
        static: { directory: path.resolve(__dirname) },
        hot: true
    }
}

package.jsonファイル

{
  "name": "***",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve --env development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "***",
  "license": "***",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-hot-loader": "^4.13.0"
  },
  "devDependencies": {
    "@babel/core": "^7.17.8",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
    "babel-loader": "^8.2.4",
    "react-refresh": "^0.11.0",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  }
}