react基础框架搭建2-准备工作：react+router+redux+axios+Tailwind+webpack

环境配置

确保您的开发环境中已安装以下工具：

• Node.js (建议使用 LTS 版本)
• npm 或 yarn

安装依赖

在项目根目录下运行以下命令以安装项目依赖：

npm install

yarn install

添加新组件

1. 在 src/components/ 目录下创建新组件目录。
2. 创建组件文件（如 MyComponent.jsx）和样式文件（如 MyComponent.module.css）。
3. 在 MyComponent.jsx 中编写组件代码，并在需要的地方导入使用。

状态管理

使用 Redux Toolkit 进行全局状态管理：

1. 在 src/store/ 目录下创建新的 Slice 文件。
2. 使用 createSlice 定义状态和 reducers。
3. 在 src/store/index.js 中配置 Redux Store，并在 main.jsx 中使用 Provider 包裹应用。

路由管理

使用 React Router 进行路由管理：

1. 在 src/router/AppRouter.jsx 中定义路由。
2. 使用 BrowserRouter 和 Route 组件配置路由。
3. 在 App.jsx 中引入 AppRouter 组件。

API 请求

使用 Axios 进行 API 请求：

1. 在 src/api/ 目录下创建 API 模块。
2. 使用 Axios 实例进行请求配置。
3. 在组件中导入 API 模块并调用相应的请求方法。

样式管理

使用 Tailwind CSS 或 CSS Modules 进行样式管理：

• 对于 Tailwind CSS，确保在 tailwind.css 中配置好 Tailwind。
• 对于 CSS Modules，使用 .module.css 文件命名约定。

测试

使用 Jest 和 Testing Library 进行单元测试：

1. 在组件目录下创建 __tests__ 文件夹。
2. 编写测试文件（如 MyComponent.test.js）。
3. 运行测试命令：

一、使用官方脚手架快速开始

npx create-react-app luArch
cd luArch
npm start

默认目录如下：

luArch

├── node_modules
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── serviceWorker.js
│   └── setupTests.js
├── README.md  
├── package.json
├── .gitignore

2、以下是需要install的npm包

npm install redux react-redux react-router-dom axios tailwindcss postcss autoprefixer

redux

react-redux

react-router-dom

axios

tailwindcss

postcss

autoprefixer

web-vitals

@reduxjs/toolkit

另外有报错：（待查）

npm install @jridgewell/gen-mapping

npm install @babel/generator@latest