如何创建react项目
使用 Create React App 创建项目
确保已安装 Node.js（建议版本 12 或更高）。打开终端或命令行工具，运行以下命令创建新项目：
npx create-react-app my-app
cd my-app
npm startmy-app 是项目名称，可自定义。npm start 会启动开发服务器，默认在浏览器打开 http://localhost:3000。
使用 Vite 创建项目
Vite 是更快的现代构建工具。安装命令如下：
npm create vite@latest my-vite-app --template react
cd my-vite-app
npm install
npm run dev选择 react 模板后，npm run dev 会启动开发服务器。
手动配置 Webpack 项目
适合需要深度定制的场景。初始化项目并安装基础依赖：
mkdir react-manual
cd react-manual
npm init -y
npm install react react-dom
npm install --save-dev webpack webpack-cli babel-loader @babel/core @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$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react']
}
}
}
]
}
};项目结构说明
典型 React 项目结构如下：
my-app/
├── node_modules/
├── public/
│ ├── index.html
│ └── favicon.ico
├── src/
│ ├── App.js
│ ├── index.js
│ └── styles.css
├── package.json
└── README.md添加 TypeScript 支持
使用 Create React App 时可直接选择 TypeScript 模板：
npx create-react-app my-ts-app --template typescript手动配置需额外安装类型定义：
npm install --save-dev typescript @types/react @types/react-dom创建 tsconfig.json 文件配置编译器选项。
