react前端如何启动

创建React项目

使用官方工具create-react-app快速搭建项目：

npx create-react-app my-app
cd my-app
npm start

运行后默认在http://localhost:3000启动开发服务器。

使用Vite构建工具

通过Vite初始化React项目（推荐高性能方案）：

npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run dev

Vite提供更快的热更新和构建速度。

手动配置Webpack

适合需要自定义构建流程的场景：

1. 初始化项目并安装依赖：

   mkdir react-manual-setup
   cd react-manual-setup
   npm init -y
   npm install react react-dom webpack webpack-cli babel-loader @babel/core @babel/preset-react html-webpack-plugin --save-dev

2. 配置webpack.config.js和Babel预设，具体规则参考官方文档。

集成TypeScript

在创建项目时直接选择TypeScript模板：

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

或为现有项目添加TypeScript支持：

npm install --save-dev typescript @types/react @types/react-dom

环境变量配置

在项目根目录创建.env文件，定义变量：

REACT_APP_API_URL=https://api.example.com

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

调试与扩展

• React Developer Tools：浏览器插件，用于组件树检查和状态调试。
• Redux DevTools：集成状态管理调试工具。
• ESLint/Prettier：代码规范检查和自动化格式化。

生产环境构建

生成优化后的静态文件：

npm run build

部署到Nginx、Netlify等服务器即可上线。