如何搭建react项目
使用 Create React App 搭建项目
Create React App (CRA) 是官方推荐的快速搭建 React 项目的工具，无需配置构建工具（如 Webpack 或 Babel）。
确保已安装 Node.js（版本 14 或更高），在终端运行以下命令创建项目：
npx create-react-app my-app
cd my-app
npm start项目将自动在 http://localhost:3000 启动，包含基础模板和开发服务器。
手动配置 Webpack 和 Babel
如需自定义构建流程，可手动配置 Webpack 和 Babel。初始化项目并安装必要依赖：
mkdir my-app
cd my-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创建 webpack.config.js 文件配置入口和输出：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
}
]
}
};使用 Vite 快速启动
Vite 是现代化的前端构建工具，启动速度更快。安装并创建项目：
npm create vite@latest my-app --template react
cd my-app
npm install
npm run devVite 会提供更快的热更新和开发服务器，适合对性能要求较高的项目。
项目结构优化
典型 React 项目结构建议按功能或路由组织文件：
src/
├── components/ # 可复用组件
├── pages/ # 页面级组件
├── utils/ # 工具函数
├── App.js # 根组件
└── index.js # 入口文件这种结构便于维护和扩展，尤其适合中大型项目。
集成 TypeScript
如需使用 TypeScript，可通过 CRA 直接创建 TS 项目：
npx create-react-app my-app --template typescript或手动添加 TypeScript 到现有项目：
npm install --save-dev typescript @types/react @types/react-dom将文件扩展名改为 .tsx 并配置 tsconfig.json 即可。
