1. 使用 IntelliJ IDEA 创建 React 项目：创建 React 项目界面详解；配置 Yarn 为包管理器
- 🧩 使用 IntelliJ IDEA 创建 React 项目（附 Yarn 配置与 Vite 建议）
- 📷 创建 React 项目界面详解
- 1️⃣ Name（项目名）
- 2️⃣ Location（项目路径）
- 3️⃣ Project type（项目类型）
- 4️⃣ Node interpreter（Node 解释器）
- 5️⃣ create-react-app
- ❗红色提示信息解析
- 6️⃣ ✅ Create TypeScript project
- 🧶 配置 Yarn 为包管理器
- ✅ 安装 Yarn（全局）
- ✅ 验证 Yarn 是否生效
- 添加 Yarn 到环境变量 Path中
- ✅ IDEA 中启用 Yarn
- ✅ 使用 Yarn 重新安装
🧩 使用 IntelliJ IDEA 创建 React 项目（附 Yarn 配置与 Vite 建议）
在现代前端开发中，React 仍然是最受欢迎的 UI 库之一。虽然很多开发者习惯使用命令行工具创建 React 应用，但 IntelliJ IDEA 也提供了图形化的新建入口，支持 create-react-app、Vite、Next.js 等方案。
本篇文章将手把手带你通过 IntelliJ IDEA 创建 React 项目，并重点讲解 Yarn 配置和 create-react-app 的注意事项。
📷 创建 React 项目界面详解
以下是通过 IDEA 新建 React 项目的界面（截图）：
我们逐项解释上图中的重要字段和提示内容：
1️⃣ Name（项目名）
- 你要创建的项目名称，例如：
react、my_app等。 - 最终项目目录将自动以此命名。
注意：项目名称要遵循npm包命名规范，使用 数字、字母、下划线 命名
2️⃣ Location（项目路径）
- 本地文件系统中项目的存放位置。
- 示例：
D:\IdealProjects\react
3️⃣ Project type（项目类型）
- IDEA 提供了：
React: 使用create-react-appReact Native: 原生应用开发Next.js: SSR 框架
本文选择：
React
4️⃣ Node interpreter（Node 解释器）
- IDEA 自动检测你的 Node 安装路径。
- 例如：
D:\soft\nodejs\node.exe - 版本号：
22.15.0（请使用 Node 18 或以上）
如未识别，请点击右侧 ... 选择本地 Node 可执行文件。
5️⃣ create-react-app
- IDEA 内部通过
npx create-react-app方式生成 React 项目。 - 下拉框中可选择版本（如
5.1.0）。 - 实际等价于：
npx create-react-app my-app
❗红色提示信息解析
Using the create-react-app is not the advised method for creating React applications. The preferred approach is to use a template with the Vite bundler when using React without a framework.
这段话的意思是：
- 官方不再推荐使用
create-react-app创建新项目。 - 推荐使用
Vite创建 React 应用，具有更快的启动速度、更现代的构建架构。 - 如果你不使用 Next.js 等框架，请优先考虑 Vite。
6️⃣ ✅ Create TypeScript project
- 可选项：是否使用 TypeScript 模板。
- 勾选后，项目会默认启用
.tsx文件及类型系统。
🧶 配置 Yarn 为包管理器
虽然 IDEA 默认使用 npm，你可以切换为更高效的 Yarn。
Yarn vs npm 全面对比：谁才是最适合你的前端包管理器
✅ 安装 Yarn（全局）
npm install -g yarn
✅ 验证 Yarn 是否生效
在终端（CMD）执行：
yarn --version
如果输出版本号如 1.22.22，说明 Yarn 安装成功。
添加 Yarn 到环境变量 Path中
通过下面命令找到 Yarn 的安装路径
where yarn
应返回类似：
C:\Users\admin\AppData\Roaming\npm\yarn
C:\Users\admin\AppData\Roaming\npm\yarn.cmd
将它的目录 C:\Users\admin\AppData\Roaming\npm\ 配置在环境变量 Path 中，这样 IDEA 中就可以运行该命令了
✅ IDEA 中启用 Yarn
- 打开
File > Settings（或Preferences） - 导航到：
Languages & Frameworks > Node.js and NPM - 配置如下：
- Node interpreter: 正确的 Node 路径
- Package manager: 选择
yarn的路径（例如yarn.cmd），可以直接粘贴路径C:\Users\admin\AppData\Roaming\npm\yarn.cmd
IDEA 控制台查看是否能够使用yarn命令
✅ 使用 Yarn 重新安装
项目默认是通过 npm 的方式去进行安装的，这也是为什么项目名称要遵循npm包命名规范的原因，项目目录目录结构如下
如果你想用 yarn 的方式去进行安装，可以把 package-lock.json 这个文件删掉，把 node_modules 也删掉，再执行 yarn 或者 yarn install，执行完之后，会生成 yarn.lock 文件。
