目录

1. 安装基础环境

安装方式：

2. 创建react项目：

3. 根据需求安装依赖包

生产环境（dependencies）：

开发环境（devDependencies）：

4. 目录结构

5. 其他配置

5.1 router配置

5.2 redux配置

5.3 craco别名配置

5.4 数据Mock实现

json-server实现mock

5.5 antd-mobile主题定制

5.6 封装request

1. 安装基础环境

下载安装node和npm

安装方式：

Windows：

1. 官网下载Node.js官网,并配置环境变量

MacOS：

1. Homebrew下载

brew install node

2. 官网下载

二者都可以用 nvm版本管理器下载node，并管理node版本

npm自动包含在node包里，node安装后npm自动安装

2. 创建react项目：

使用CRA创建

// 创建新项目
npx create-react-app react-project-name
cd react-project-name
// 启动项目
npm start

CRA 已集成了 Webpack、Babel、TypeScript 等工具

3. 根据需求安装依赖包

生产环境（dependencies）：

1. 路由与状态管理

  • react-router-dom：React 路由库
  • @reduxjs/toolkit：Redux 官方工具集
  • react-redux：Redux 的 React 绑定库

2. ui组件库

  • antd：PC 端 UI 组件库
  • antd-mobile：移动端 UI 组件库

3. 工具库

  • dayjs：日期处理库
  • classnames：动态管理 CSS 类名
  • axios：HTTP 请求库
npm install react-router-dom @reduxjs/toolkit react-redux dayjs classnames axios 
npm install antd --save
npm install --save antd-mobile
...

开发环境（devDependencies）：

1. 样式处理
  • scss（通常通过 sass 包安装）：CSS 预处理器
  • craco（Create React App Configuration Override）：自定义 CRA 配置
2. 模拟数据
  • json-server：开发阶段的 REST API 模拟服务器

4. 目录结构

5. 其他配置

5.1 router配置

  1. 安装router包
  2. 准备基础路由组件Layout，Login
  3. 创建router/index.js ,引入组件，配置路由，并导出router实例
  4. 入口文件渲染, 传入router实例

5.2 redux配置

1. 创建store子模块
2. 合并store模块
3. 注入store实例

5.3 craco别名配置

通过@代替src，方便开发过程中的路径查找访问

1. 路径转换配置，修改webpack别名路径配置

 2. 联想提示配置，修改vscode配置

3. 别名启动项目

5.4 数据Mock实现

json-server实现mock
  1. 安装包
  2. 准备一个json文件 server/data.json
  3. 添加启动命令
可同时启动react项目和json-server

5.5 antd-mobile主题定制

5.6 封装request

  1. 安装axios
  2. 创建utils/request.js文件
  3. 创建axios实例，配置baseURL，请求拦截器，相应拦截器
  4. 在utils/index.js中，同意导出request
# react.js # 前端 # 前端框架
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

avatar 腾讯云开发者社区

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

avatar 腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git

avatar 腾讯云开发者社区