React：第一个 Vite 应用

React：第一个 Vite 应用

系列：React入门指南

目标：本地跑起第一个 React + TypeScript 页面，建立「组件 → 虚拟 DOM → 真实 DOM」心智模型。

引言

别一上来啃全家桶。先把最小闭环跑通：脚手架 → 改一行字 → 浏览器立刻变。

本篇 demo 在 demo/，用 Vite 官方 react-ts 模板改写。

---

心智模型

你写的是组件（函数返回 UI 描述）；React 先在内存里做协调（虚拟 DOM），再尽量少地改浏览器真实 DOM。

---

动手：安装与启动

完整代码：react2/01-hello-react/demo

cd react2/01-hello-react/demo
npm install
npm run dev

浏览器打开终端里提示的地址（一般是 http://localhost:5173）。

---

代码在干什么

src/App.tsx 是一个函数组件：

export default function App() {
  const name = 'React'
  const year = new Date().getFullYear()

  return (
    <main className="page">
      <h1>你好，{name}</h1>
      <p className="meta">页面渲染年份：{year}</p>
    </main>
  )
}

要点：

1. JSX 看起来像 HTML，其实是 JS 表达式；{name} 插入变量。
2. 一个组件返回一棵 UI 树 ；main.tsx 里 createRoot(...).render(<App />) 把它挂到 #root。
3. 改保存后 Vite HMR 会热更新，一般不用整页刷新。

---

运行截图

---

常见坑

现象	排查
端口被占用	换端口：npm run dev -- --port 5174
白屏	打开浏览器控制台；检查 main.tsx 是否渲染了 App
中文乱码	确认文件 UTF-8 保存

---

下一篇

组件与 Props：把 UI 拆成可复用积木。