前端如何搭建react项目
使用 Create React App 搭建项目
Create React App (CRA) 是官方推荐的快速搭建 React 项目的工具，无需配置构建工具（如 Webpack 或 Babel）。通过以下命令初始化项目：
npx create-react-app my-app
cd my-app
npm start项目将自动启动开发服务器，默认地址为 http://localhost:3000。
使用 Vite 搭建项目
Vite 是一个现代前端构建工具，启动速度和热更新更快。安装命令如下：
npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run devVite 会生成一个优化过的 React 项目结构，支持 TypeScript 和 SCSS 等特性。
手动配置 Webpack 项目
如需更灵活的配置，可以手动初始化项目并集成 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 babel-loader @babel/core @babel/preset-env @babel/preset-react创建 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: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
},
},
},
],
},
};项目结构建议
典型的 React 项目目录结构如下：
my-app/
├── public/ # 静态文件（如 index.html）
├── src/ # 主代码目录
│ ├── components/ # 可复用组件
│ ├── pages/ # 页面级组件
│ ├── App.js # 根组件
│ └── index.js # 入口文件
├── package.json # 依赖和脚本配置
└── node_modules/ # 依赖库集成 TypeScript
如需使用 TypeScript，在 CRA 或 Vite 创建项目时选择 TypeScript 模板：
npx create-react-app my-app --template typescript或通过 Vite：
npm create vite@latest my-app --template react-ts添加样式支持
支持 CSS 预处理器（如 SCSS）需安装对应依赖：
npm install sass在组件中直接引入 .scss 文件即可使用。
