项目设置：Vite、布局与开发服务器
使用 Vite（或类似工具）创建 React 应用，了解基本文件夹布局，运行开发服务器，并用一个小型组件验证渲染结果。
项目设置：Vite、布局与开发服务器 是 CoddyKit 上的免费 React Academy 课时。 这是第 2 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 3 节课。
设置概览
目标：快速创建项目，了解文件夹布局，并运行支持热更新的开发服务器。
- 使用 Vite（或类似工具）搭建项目
- 了解文件所在的位置
- 启动并验证应用
前置条件
前置条件：
- 已安装 Node.js LTS 和 npm
- 可以访问终端
- 掌握基本的 CLI 使用方法（cd、ls）
使用 Vite 搭建项目
使用快速工具创建项目：
- 搭建项目（例如，npm create vite@latest）
- 选择 React（JavaScript）
- 安装依赖项（npm install）
文件夹要点
布局（典型情况）：
- index.html：包含
div#root - src/main.jsx：创建根节点并渲染 App
- src/App.jsx：您的组件
运行开发服务器
开发服务器：
- 使用 npm run dev 启动
- 打开本地网址
- 编辑 App.jsx；更改会立即显示（热更新）
验证渲染
渲染一个小型的 App，以确认设置正常；修改文本以查看热更新。
<div id="root"></div>
挂载点文件
回顾
回顾：使用 Vite 搭建项目，了解 index.html、main.jsx 和 App.jsx 所在的位置，运行开发服务器，并使用小型组件验证渲染。
常见问题解答
「项目设置：Vite、布局与开发服务器」课时是免费的吗？
是的 — 「项目设置：Vite、布局与开发服务器」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 3 节课。
「项目设置：Vite、布局与开发服务器」这节课中我会学到什么？
使用 Vite（或类似工具）创建 React 应用，了解基本文件夹布局，运行开发服务器，并用一个小型组件验证渲染结果。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 React Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 3 节。
「项目设置：Vite、布局与开发服务器」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 React Academy 课中编写并运行代码吗？
能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- React 入门：概念与设置
- 项目设置：Vite、布局与开发服务器
- 第一个组件与渲染