React第一个 Vite 应用系列React入门指南目标本地跑起第一个 React TypeScript 页面建立「组件 → 虚拟 DOM → 真实 DOM」心智模型。引言别一上来啃全家桶。先把最小闭环跑通脚手架 → 改一行字 → 浏览器立刻变。本篇 demo 在demo/用 Vite 官方react-ts模板改写。心智模型你写的是组件函数返回 UI 描述React 先在内存里做协调虚拟 DOM再尽量少地改浏览器真实 DOM。动手安装与启动完整代码react2/01-hello-react/democdreact2/01-hello-react/demonpminstallnpmrun dev浏览器打开终端里提示的地址一般是http://localhost:5173。代码在干什么src/App.tsx是一个函数组件export default function App() { const name React const year new Date().getFullYear() return ( main classNamepage h1你好{name}/h1 p classNamemeta页面渲染年份{year}/p /main ) }要点JSX看起来像 HTML其实是 JS 表达式{name}插入变量。一个组件返回一棵 UI 树main.tsx里createRoot(...).render(App /)把它挂到#root。改保存后 Vite HMR 会热更新一般不用整页刷新。运行截图常见坑现象排查端口被占用换端口npm run dev -- --port 5174白屏打开浏览器控制台检查main.tsx是否渲染了App中文乱码确认文件 UTF-8 保存下一篇组件与 Props把 UI 拆成可复用积木。