如何搭建react工程

安装 Node.js 和 npm

React 工程需要 Node.js 和 npm（Node 包管理器）作为基础环境。访问 Node.js 官网 下载并安装最新 LTS 版本，安装完成后运行以下命令验证是否成功：

node -v
npm -v

使用 Create React App 初始化项目

Create React App（CRA）是官方推荐的脚手架工具，快速生成 React 项目结构。运行以下命令创建项目：

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

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

启动开发服务器

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

npm start

默认会在浏览器打开 http://localhost:3000，修改代码后页面会自动热更新。

项目结构说明

CRA 生成的标准目录结构如下：

• src/: 存放源代码，包括主入口文件 index.js 和组件。
• public/: 存放静态资源，如 HTML 模板和图片。
• package.json: 定义项目依赖和脚本命令。

添加必要依赖

根据需求安装常用库，例如路由管理（React Router）或状态管理（Redux）：

npm install react-router-dom redux

构建生产环境代码

完成开发后，运行以下命令生成优化后的生产环境代码：

npm run build

构建结果会保存在 build/ 目录中，可直接部署到服务器。

可选配置

如需自定义配置（如 Webpack），可通过 eject 暴露配置（不可逆操作）：

npm run eject

建议优先通过修改 package.json 或使用第三方库（如 craco）覆盖配置。

集成 TypeScript

若需使用 TypeScript，创建项目时添加模板参数：

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