react如何启动6

React 项目启动（React 18+）

创建并启动一个 React 项目需要安装 Node.js 和包管理工具（如 npm 或 yarn）。以下是具体步骤：

安装 Node.js 和 npm 确保系统已安装 Node.js（建议版本 16.8+），npm 会随 Node.js 自动安装。可通过以下命令检查版本：

node -v
npm -v

使用 create-react-app 创建项目 React 官方推荐使用 create-react-app（CRA）脚手架工具快速初始化项目：

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

npm start 会启动开发服务器，默认在 http://localhost:3000 打开应用。

使用 Vite 创建项目（推荐） Vite 是更快的现代构建工具，适合 React 18+：

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

项目结构说明

生成的典型 React 项目结构如下：

my-app/
├── node_modules/     # 依赖库
├── public/           # 静态资源
├── src/              # 源代码
│   ├── App.js        # 主组件
│   ├── index.js      # 入口文件
│   └── ...
├── package.json      # 项目配置
└── README.md

关键文件修改

React 18 入口文件示例 src/index.js 需使用新的 createRoot API：

import { createRoot } from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

自定义配置

修改启动端口 在 package.json 中调整启动脚本：

"scripts": {
  "start": "set PORT=3006 && react-scripts start"
}

环境变量配置 创建 .env 文件定义变量：

PORT=3006

生产环境构建

生成优化后的代码：

npm run build

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