react如何启动项目

使用 Create React App 创建新项目

在终端运行以下命令创建新的 React 项目：

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

my-app 是项目名称，可根据需求修改。npm start 会启动开发服务器，默认在 http://localhost:3000 打开应用。

使用 Vite 创建 React 项目

Vite 是更快速的现代构建工具，适合轻量级项目：

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

npm run dev 启动开发服务器，默认端口可能为 5173 或其他。

手动配置 Webpack 项目

适合需要自定义构建配置的场景：

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

   mkdir my-react-app
   cd my-react-app
   npm init -y
   npm install react react-dom
   npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react

2. 创建 webpack.config.js 文件配置打包规则：

   

   
   const path = require('path');

module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /.(js|jsx)$/, exclude: /node_modules/, use: ['babel-loader'], }, ], }, };

3. 添加 Babel 配置（`.babelrc`）：  
```json
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

1. 运行 npx webpack 打包，并通过 HTML 文件引入生成的 bundle.js。

使用 TypeScript 模板

Create React App 支持 TypeScript：

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

Vite 同样提供 TypeScript 模板：

npm create vite@latest my-ts-vite --template react-ts

注意事项

• 确保 Node.js 版本 ≥ 16.8，避免兼容性问题。
• 使用 npm 或 yarn 安装依赖，避免混用导致锁文件冲突。
• 项目启动后，修改代码会自动热更新（HMR），无需手动刷新页面。