如何快速新建react项目

使用 Create React App 工具

安装 Create React App（CRA）是官方推荐的方式，适合大多数 React 项目初始化。

确保已安装 Node.js（版本 14 或更高），然后运行以下命令：

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

CRA 会自动配置 Webpack、Babel 和开发服务器，项目启动后默认在 http://localhost:3000 运行。

使用 Vite 创建 React 项目

Vite 是一个更轻量、更快的构建工具，适合追求开发效率的场景。

运行以下命令创建 React + TypeScript 项目（可选）：

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

Vite 的启动速度显著快于 CRA，适合现代前端开发。

通过 Next.js 初始化项目

如果需要服务端渲染（SSR）或静态站点生成（SSG），Next.js 是更好的选择。

安装并启动 Next.js 项目：

npx create-next-app@latest
cd my-app
npm run dev

Next.js 默认支持 React，并提供了路由、API 路由等开箱即用的功能。

手动配置 Webpack + Babel

对构建流程有定制需求时，可以手动初始化项目：

1. 新建项目目录并初始化 package.json：

   mkdir my-react-app
   cd my-react-app
   npm init -y

2. 安装 React 和核心依赖：

   npm install react react-dom
   npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react

3. 配置 webpack.config.js 和 Babel 预设文件（参考官方文档）。

使用 Preact 替代 React

如果需要更轻量级的方案，可以用 Preact（兼容 React API）：

npm init vite@latest my-preact-app --template preact
cd my-preact-app
npm install
npm run dev

Preact 的体积比 React 小很多，适合性能敏感场景。

以上方法覆盖了从简单到高级的需求，根据项目类型选择合适的工具即可。