如何新建react项目

使用 Create React App 创建项目

确保已安装 Node.js（版本 14 或更高）和 npm/yarn。

打开终端或命令行工具，运行以下命令创建新项目：

npx create-react-app my-app

my-app 为项目名称，可自定义。

进入项目目录：

cd my-app

启动开发服务器：

npm start

使用 Vite 创建 React 项目

Vite 提供更快的构建和开发体验。

运行以下命令创建项目：

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

进入项目目录并安装依赖：

cd my-vite-app
npm install

启动开发服务器：

npm run dev

手动配置 Webpack 项目

适合需要高度自定义配置的情况。

初始化项目并安装 React 和 ReactDOM：

mkdir my-webpack-app
cd my-webpack-app
npm init -y
npm install react react-dom

安装 Webpack 和相关工具：

npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin css-loader style-loader

创建 webpack.config.js 配置文件，配置入口、输出和加载器。

使用 TypeScript 模板

Create React App 支持 TypeScript 模板：

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

Vite 也支持 TypeScript 模板：

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

项目结构说明

典型 React 项目包含以下目录和文件：

• src/：源代码目录，包含 App.js 和 index.js
• public/：静态资源文件
• package.json：项目配置和依赖
• node_modules/：安装的依赖包

根据需求选择合适的方法创建项目。Create React App 适合初学者，Vite 适合追求性能的开发者，手动配置适合需要自定义的场景。