跟我看：搭建项目
Vite（读作 “veet”，法语「快」）是帮你准备好 React 项目骨架的工具。打开终端，进入你想放项目的地方（比如桌面）：
cd Desktop
npm create vite@latest my-react-web -- --template reactVite 可能问你问题——用 Enter 确认。然后：
cd my-react-web
npm install
npm run dev -- --port 3901npm install下载项目需要的所有东西（要等一会儿——React 和它的助手会下载到node_modules文件夹）。npm run dev -- --port 3901启动 开发服务器。终端会显示地址http://localhost:3901。在浏览器里打开它。
看到转动的 logo 和标题 “Vite + React” 了吗？恭喜——你的第一个 React 应用在跑了！🎉
💡
localhost 是什么？ 只在你电脑上跑的「服务器」。只有你能看到——私人测试场。最好的是：改代码并保存，页面 立刻自己刷新。不用再一直按 F5！
项目导览
在 VS Code 里打开 my-react-web 文件夹（File → Open Folder）。文件好像很多，但现在对你重要的只有三个：
| 文件 | 是什么 |
|---|---|
index.html | 整个网站唯一的 HTML——几乎是空的，只有一个 <div id="root"> |
src/main.jsx | 启动器：把应用塞进那个 div |
src/App.jsx | 主组件——你要在这里写代码 |
src/App.css | 样式——普通 CSS，你已经会了 |
其余先别管（永远别打开或删除 node_modules，package.json 是项目包的清单）。
第一次改代码
打开 src/App.jsx。删掉全部，写：
function App() {
const name = "Jake";
return (
<div>
<h1>Hi, this is {name}!</h1>
<p>This is my first React app.</p>
</div>
);
}
export default App;保存——浏览器里的页面自己变了。你在看的是：
App组件是 返回 HTML 的函数（这种写法叫 JSX）。{name}——花括号把 JavaScript 插进 HTML。什么都行：变量、计算{2 + 3}，甚至条件。export default App——「把这个组件提供给其他文件」（main.jsx会接住它）。
JSX 有两个怪癖你会习惯：不用 class，写 className（class 在 JavaScript 里是保留字），而且组件必须返回 一个 包裹元素（所以外面有个 <div>）。
轮到你了 💪
- 按指南搭建项目并运行起来。
- 编辑
App.jsx：带你名字的标题、一段介绍你在做什么的段落，还有变量age，显示在句子I am {age} years old里。 - 故意删掉一个闭合标签，看看错误长什么样——Vite 直接在浏览器里显示，还带行号。然后修好它。
- 停止服务器（终端里 Ctrl+C），再启动（
npm run dev -- --port 3901）——把整个循环练顺手。
✅
检查一下： 项目在 localhost 上跑着，你能停能启，编辑 App.jsx 并保存后浏览器自己重绘。开发者循环转起来了！
这堂课你要记住
npm create vite@latest建项目，npm install下载包，npm run dev启动 localhost。- 在
src/App.jsx写代码：组件是返回 JSX 的函数，{}把 JavaScript 插进 HTML。 - JSX 里：用
className代替class，始终只有一个包裹元素。
© 2026 Ing. Martin Polak / AlgoRhino · 内容使用条款