创建React项目的三个方式

创建React项目

创建一个React项目非常简单，通常有几种方法可以进行，下面是最常见的几种方法：

1. 使用 create-react-app (已经不被推荐了)

create-react-app 是一个官方的脚手架工具，用于快速创建 React 项目。它会为你配置好很多常用的开发工具和预设。

步骤：

1. 安装 Node.js 和 npm（如果你还没有安装的话）：
   React 需要 Node.js 和 npm，安装方式请参考 Node.js 官方网站，安装完毕后可以在终端运行 node -v 和 npm -v 来检查是否安装成功。

2. 使用 create-react-app 创建项目： 打开终端或命令提示符，执行以下命令：

   npx create-react-app my-app
   

   这会创建一个名为 my-app 的 React 项目。npx 是一个工具，可以自动下载并运行 create-react-app，无需全局安装。

3. 进入项目文件夹：

   cd my-app
   

4. 启动开发服务器：

   npm start
   

   此时，浏览器会自动打开 http://localhost:3000，你就可以看到一个默认的 React 应用。

2. 使用 Vite（现代化快速开发工具）

Vite 是一个现代化的构建工具，启动速度快，适合用来开发 React 应用。

步骤：

1. 安装 Vite： 首先，确保你已经安装了 Node.js，然后在终端中运行：

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

2. 进入项目文件夹：

   cd my-vite-app
   

3. 安装依赖：

   npm install
   

4. 启动开发服务器：

   npm run dev
   

   访问 http://localhost:5173，就能看到你的 React 项目了。

如果用WebStorm创建的话，可以按照如下所示操作：

进入后点击运行npm install，然后可以运行这个按钮"dev" : “vite”

点击进入下面这个链接

能看到下面这个界面就算成功了

3. 使用 Next.js（适用于需要服务端渲染或静态生成的项目）

如果你需要构建一个支持服务端渲染（SSR）或静态站点生成（SSG）的 React 应用，可以使用 Next.js。

步骤：

1. 创建 Next.js 项目：

   npx create-next-app@latest my-next-app
   

2. 进入项目文件夹：

   cd my-next-app
   

3. 启动开发服务器：

   npm run dev
   

   访问 http://localhost:3000，你就能看到 Next.js 默认页面。

总结

• create-react-app：最基础的 React 脚手架，适合大多数 React 应用。
• Vite：速度快，适合开发时追求快速反馈的场景。
• Next.js：适用于服务端渲染或静态生成的 React 应用，SEO 更友好。

你可以根据项目需求选择合适的工具来创建 React 项目！