❧ React项目搭建

官网文档

一、创建项目（基于vite搭建）

npm create vite@latest 项目名称

# select-framework: react
# select a variant: TypeScript + SWC

二、UI框架

推荐使用 Ant Design

安装

npm install antd --save

三、状态管理库（Redux）

npm install redux react-redux --save

# 官网推荐
npm install @reduxjs/toolkit react-redux --save

redux 是一个独立的状态管理库，它不仅可以用在 React 应用中，也可以用在 Vue、Angular 或任何其他 JavaScript 应用中。
react-redux 是 Redux 的官方绑定库，专为 React 设计。它提供了将 Redux 与 React 应用集成的能力

四、路由管理（React-Router）

npm install react-router-dom --save

五、样式管理（Styled-Components）

npm install less -D

注意点：

• Provider组件：在应用程序的根组件中包裹Provider，它将store（Redux状态管理器）传递给React组件树中的所有组件。
• connect函数：用于在React组件中通过映射Redux状态和操作到组件属性进行数据绑定。
• mapStateToProps和mapDispatchToProps函数：这两个函数用于将Redux状态和操作映射到组件属性中。
• connect 是 React-Redux 库中的一个高阶组件（HOC），用于将 React 组件连接到 Redux store。