如何搭建react工程

安装Node.js和npm

确保系统中已安装Node.js（包含npm）。可在终端运行以下命令检查版本：

node -v  
npm -v  

若未安装，需从Node.js官网下载并安装LTS版本。

使用Create React App初始化项目

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

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

my-app为项目名称，可根据需求修改。

启动开发服务器

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

npm start  

默认会在浏览器中打开http://localhost:3000，并实时热更新代码修改。

项目结构说明

生成的项目主要目录及文件作用如下：

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

添加必要依赖

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

npm install react-router-dom  

配置ESLint和Prettier（可选）

为统一代码风格，可安装ESLint和Prettier：

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier  

随后在项目根目录创建.eslintrc.json和.prettierrc配置文件。

构建生产环境代码

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

npm run build  

构建结果会输出到build/目录，可直接部署到服务器。

部署到GitHub Pages（可选）

若需部署到GitHub Pages，安装gh-pages并修改package.json：

npm install --save-dev gh-pages  

在package.json中添加homepage字段和部署脚本：

"homepage": "https://username.github.io/my-app",
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

运行npm run deploy即可完成部署。