react如何建项目

使用 Create React App 创建项目

通过官方脚手架工具 Create React App 可以快速初始化 React 项目。确保已安装 Node.js（建议版本 ≥ 14.0.0），运行以下命令：

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

此命令会生成一个基础项目结构，包含 Webpack、Babel 等配置的预封装。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 的模板支持 TypeScript，可通过 --template react-ts 选择 TypeScript 版本。

手动配置 Webpack 项目

如需自定义配置，可手动初始化项目：

1. 创建项目目录并初始化 package.json：

   mkdir my-react-app
   cd my-react-app
   npm init -y

2. 安装 React 和 React DOM：

   npm install react react-dom

3. 安装开发依赖（Webpack、Babel 等）：

   

   npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react css-loader style-loader html-webpack-plugin

4. 配置 webpack.config.js 和 Babel 预设文件（.babelrc 或 babel.config.json）。

使用 Next.js 框架

Next.js 适合服务端渲染或静态站点生成。创建项目：

npx create-next-app@latest

根据提示选择配置选项（如 TypeScript、ESLint 等），完成后通过 npm run dev 启动。

项目结构优化

初始项目生成后，可调整目录结构以提高可维护性：

• 将组件放入 src/components
• 页面级组件放入 src/pages（适用于 Next.js）
• 工具函数或 hooks 放入 src/utils 或 src/hooks
• 样式文件按模块组织（如 CSS Modules 或 Sass）