npm i -g create-react-app

create-react-app react-demo

# 将在当前终端的文件夹创建一个名称为 react-demo 的文件夹
# 文件里面就是项目了

npx create-react-app react-demo

# 这条指令就在 create-react-app 创建的项目的 package.json 的指令中
npm run eject

npm i -D react-app-rewired

{
  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  }

const path = require('path');

module.exports = (config, env) => {
  // env 顾名思义，就是环境变量配置
  // config 就是 webpack 配置文件，可以修改里面的项，最后会并入 webpack 的配置中
  // 从 config 可以读取到 entry、output、plugins、resolve……等等配置，可以进行修改

  // 查看 config.entry 配置
  console.log(config.entry)
  
  // 修改配置
  config.resolve = {
    ...(config.resolve ||  {}),
    alias: {
      ...(config.resolve.alias ||  {}),
      // 添加别名 alias
      app: path.join(__dirname, "src"),
    },
    // 针对 webpack >= 5 时需要单独导入node模块的配置
    // fallback: {
    //   ...(config.resolve.fallback || {}),
    //   crypto: require.resolve('crypto-browserify'),
    //   path: require.resolve('path-browserify'),
    //   http: require.resolve('stream-http'),
    //   https: require.resolve('https-browserify'),
    //   stream: require.resolve('stream-browserify'),
    // }
  }

  return config
}

# 本地启动服务时不自动使用浏览器打开页面
BROWSER=none

# 修改启本地服务时的端口号
PORT=3012

# 打包时不构建sourceMap文件
GENERATE_SOURCEMAP=false

{
  // ...其他配置
  "homepage": "./",
}

npm i -D sass sass-loader

npm i -S redux react-redux redux-thunk

// defaultState.js 文件中
const defaultState = {
  flagNum: 0,
};
export default defaultState;

// reducers.js 文件中
import { combineReducers } from "redux"; // 工具函数，用于组织多个reducer，并返回reducer集合
import defaultState from "./defaultState"; // 默认值
// 测试字段
function flagNum(data = defaultState.flagNum, action) {
  switch (action.type) {
    case "SET_FLAGNUM":
      return action.data;
    default:
      return data;
  }
}
// 导出所有reducer
export default combineReducers({
  flagNum,
});

// actions.js 文件中
export function init() {
  return async (dispatch, getState) => {
    const state = getState()
    const text = `页面初始化时 flagNum 的值：${state.flagNum}`
    console.log(text);
    // 是否 return 都可以
    return new Promise(resolve => {
      resolve();
    })
  };
}

// index.js 文件中
import { applyMiddleware, createStore } from "redux";
// 中间件，作用：如果不使用该中间件，当我们dispatch一个action时，需要给dispatch函数传入action对象；
// 但如果我们使用了这个中间件，那么就可以传入一个函数，这个函数接收两个参数:dispatch和getState。
// 这个dispatch可以在将来的异步请求完成后使用，对于异步action很有用
import thunk from "redux-thunk";
// 引入reducer
import reducers from "./reducers.js";
// 创建store实例
let store = createStore(reducers, applyMiddleware(thunk));
export default store;

import React from 'react';
import ReactDOM from "react-dom/client";
import Router from "./router";
// 引入redux
import { Provider } from "react-redux";
import store from "app/store";

const root = ReactDOM.createRoot(document.getElementById('root'));
// 修改写法，使用 Provider 包裹并注入 store
root.render(
  <Provider store={store}>
    <Router />
  </Provider>
)

import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
// 引入要使用的动作
import { init } from "../../store/actions";

export default function Button() {
  // 初始化 dispatch
  const dispatch = useDispatch()
  useEffect(() => {
    // 用 dispatch 执行再 actions 中写好的方法
    // 可以放在函数中，使用异步 async/await 执行
    dispatch(init())
  }, [dispatch])

  // 获取全局变量
  const flagNum = useSelector(state => state.flagNum);
  const addFlag = () => {
    // 用 dispatch 修改某个变量
    dispatch({ type: "SET_FLAGNUM", data: flagNum + 1 })
  }
  return (
    <button onClick={addFlag}>点击加值：{flagNum}</button>
  );
}

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }