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

环境配置

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

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

安装依赖

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

npm install

yarn install

添加新组件

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

状态管理

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

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

路由管理

使用 React Router 进行路由管理：

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

API 请求

使用 Axios 进行 API 请求：

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

样式管理

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

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

测试

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

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

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

复制代码

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