如何新建react项目

使用 Create React App 创建项目

安装 Node.js（包含 npm 或 yarn）后，通过以下命令创建新项目：

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

使用 Vite 创建项目

Vite 是更快的现代构建工具，创建 React 项目命令如下：

npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run dev

手动配置 Webpack 项目

适合需要自定义配置的高级用户：

1. 初始化项目并安装基础依赖

   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-react html-webpack-plugin

2. 创建 webpack.config.js 配置文件

   
   const path = require('path');
   const HtmlWebpackPlugin = require('html-webpack-plugin');

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-react'] } } } ] }, plugins: [ new HtmlWebpackPlugin({ template: './public/index.html' }) ] };

### TypeScript 模板创建

创建支持 TypeScript 的 React 项目：

npx create-react-app my-app --template typescript

或使用 Vite：

npm create vite@latest my-ts-app --template react-ts

### 项目结构说明

典型 React 项目包含：
- public/ 静态文件目录
- src/ 主代码目录
  - App.js 主组件
  - index.js 入口文件
- package.json 依赖管理
- node_modules/ 依赖目录

注意：使用 Create React App 或 Vite 会自动生成合理项目结构，手动配置需要自行创建这些目录和文件。