运行react如何配置

安装 Node.js 和 npm

确保系统已安装 Node.js（建议版本 16 或更高）和 npm。Node.js 自带 npm，安装完成后可通过以下命令验证版本：

node -v
npm -v

创建 React 项目

使用官方工具 create-react-app 快速初始化项目：

npx create-react-app my-app
cd my-app

my-app 为项目名称，可自定义。

启动开发服务器

进入项目目录后运行以下命令启动开发服务器：

npm start

默认在浏览器打开 http://localhost:3000 实时预览。

项目结构说明

生成的项目主要目录结构：

• src/：源代码目录，包含入口文件 index.js 和组件文件 App.js。
• public/：静态资源目录，如 HTML 模板和图片。
• package.json：依赖和脚本配置。

添加必要依赖

根据需求安装额外依赖，例如路由库 react-router-dom：

npm install react-router-dom

配置自定义环境变量

在项目根目录创建 .env 文件定义环境变量，变量需以 REACT_APP_ 开头：

REACT_APP_API_URL=https://api.example.com

通过 process.env.REACT_APP_API_URL 在代码中访问。

配置代理解决跨域

开发时可在 package.json 中添加 proxy 字段代理 API 请求：

"proxy": "http://localhost:5000"

生产环境构建

运行以下命令生成优化后的生产版本：

npm run build

构建结果位于 build/ 目录，可直接部署到服务器。

可选配置覆盖

如需修改 Webpack 等底层配置，可使用 react-app-rewired 覆盖默认配置：

1. 安装依赖：

   npm install react-app-rewired --save-dev

2. 创建 config-overrides.js 文件自定义配置。

集成 TypeScript

初始化项目时可直接使用 TypeScript 模板：

npx create-react-app my-app --template typescript

或现有项目添加 TypeScript：

npm install --save typescript @types/node @types/react @types/react-dom @types/jest