如何搭建react项目
使用 Create React App 搭建项目
Create React App (CRA) 是官方推荐的快速搭建 React 项目的工具，无需配置构建工具（如 Webpack 或 Babel）。确保已安装 Node.js（版本 ≥ 14.0.0）和 npm（版本 ≥ 5.6）。
运行以下命令创建项目：
npx create-react-app my-app
cd my-app
npm start项目将自动启动在 http://localhost:3000。CRA 内置了热重载、ES6+ 支持和测试环境。
使用 Vite 搭建项目
Vite 是更轻量、更快的替代方案，适合现代浏览器环境。安装 Vite 并创建 React 项目：
npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run devVite 的启动速度显著快于 CRA，尤其适合大型项目。
手动配置 Webpack 和 Babel
如需完全自定义配置，可手动设置 Webpack 和 Babel：
初始化项目并安装基础依赖：
mkdir my-react-app
cd my-react-app
npm init -y
npm install react react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server 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'],
},
},
},
],
},
devServer: {
static: path.join(__dirname, 'dist'),
port: 3000,
},
};配置 Babel (.babelrc)：
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}项目结构建议
典型的 React 项目结构如下：
my-app/
├── src/
│ ├── components/ # 可复用组件
│ ├── pages/ # 页面级组件
│ ├── App.js # 根组件
│ ├── index.js # 入口文件
│ └── styles/ # CSS 或 SCSS 文件
├── public/ # 静态资源
├── package.json
└── README.md添加 TypeScript 支持
如需使用 TypeScript，CRA 和 Vite 均提供模板：
- CRA:
npx create-react-app my-app --template typescript - Vite:
npm create vite@latest my-app --template react-ts
手动配置需额外安装 typescript 和 @types/react：
npm install --save-dev typescript @types/react @types/react-dom创建 tsconfig.json 并配置编译器选项。
