第 1 章:React 入门

学习目标

• 理解 React 是什么、能解决什么问题
• 掌握 Vite + React 18 项目初始化
• 跑通第一个组件
• 避开环境搭建的 3 个常见坑

一、React 是什么?

React 是 Meta 开源的用于构建用户界面的 JavaScript 库(注意:不是框架)。它采用组件化思想,把 UI 拆成独立可复用的片段,用声明式描述界面长什么样。

// 声明式:告诉 React "我要什么",React 自己决定怎么改 DOM
function Hello() {
  return <h1>Hello, React!</h1>;
}

⚠️ 坑 1:React 只是 UI 层,不负责路由、状态管理、HTTP,这些由生态(React Router、Zustand、Axios)补充。

二、为什么选 React 18?

特性	作用
Concurrent Rendering	渲染可中断,避免卡顿
Automatic Batching	多次 setState 自动合并为一次渲染
Suspense	异步加载优雅降级
Transitions	标记非紧急更新,优先响应用户输入

三、环境要求

• Node.js ≥ 18(LTS,推荐 20.x)
• 包管理器:npm / pnpm / yarn 任意
• 编辑器:VS Code + 官方扩展

node -v     # v18+ 或 v20+
npm -v      # 9+

⚠️ 坑 2:Node 16 及以下不再受 Vite 5 支持,旧项目要升级 Node。

四、用 Vite 创建项目

Vite 是当前最主流的构建工具,秒级启动,比 Webpack 快 10 倍以上。

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

参数说明:

• --template react-ts → React + TypeScript 模板
• 想用 JS 改 --template react

启动后访问 http://localhost:5173,看到 Vite + React 欢迎页即成功。

五、目录结构

my-app/
├── public/              # 静态资源(图标、favicon)
├── src/
│   ├── assets/          # 图片、字体
│   ├── App.tsx          # 根组件
│   ├── main.tsx         # 入口,挂载到 #root
│   └── index.css        # 全局样式
├── index.html           # HTML 模板
├── package.json
├── tsconfig.json
└── vite.config.ts       # Vite 配置

关键文件:

• src/main.tsx — 入口文件,调用 createRoot().render()
• src/App.tsx — 根组件,所有 UI 写在这里或从这里分发

六、第一个组件

打开 src/App.tsx,改成:

function App() {
  return (
    <div className="container">
      <h1>我的第一个 React 应用</h1>
      <p>当前时间:{new Date().toLocaleTimeString()}</p>
    </div>
  );
}

export default App;

保存后浏览器自动热更新(HMR),无需手动刷新。

⚠️ 坑 3:React 组件名必须大写开头(App 而非 app),否则会被当成普通 HTML 标签,内容不显示。

七、main.tsx 完整默认写法

Vite 创建的项目自带 src/main.tsx,这是整个应用的入口文件,只有 4 行,逐行拆解:

import { StrictMode } from 'react'             // ① 引入严格模式组件
import { createRoot } from 'react-dom/client'  // ② React 18 的新挂载 API(老版 ReactDOM.render 弃用)
import './index.css'                            // ③ 引入全局样式
import App from './App.tsx'                     # ④ 引入根组件

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />                                     # ⑤ 把根组件渲染到 index.html 的 <div id="root">
  </StrictMode>
)

逐行解释

行	作用
① StrictMode	开发环境故意双调用组件函数,帮你暴露副作用 bug
② createRoot	React 18 新 API,启用并发渲染;from 'react-dom/client'(注意 /client)
③ ./index.css	顺序很关键——必须在 App 之前引入,样式才能被组件用上
④ App	根组件,所有 UI 从这里往下展开
⑤ getElementById('root')!	! 是 TS 非空断言——告诉 TS "我确定这个元素一定存在",省去空检查

完整默认 main.tsx(Vite 生成)

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

配合 index.html

main.tsx 里的 #root 对应 index.html:

<body>
  <div id="root"></div>           ← React 渲染到这里
  <script type="module" src="/src/main.tsx"></script>
</body>

⚠️ 坑 4:createRoot 来自 react-dom/client,不是 react-dom(老 API)。React 18 起 ReactDOM.render 已弃用,看到老代码这么写要知道是旧项目。

💡 StrictMode 副作用:开发模式下会故意双调用函数体(console.log('init') 看到两次),生产环境不会。这是 React 帮你"演戏"找 bug,不是 bug 本身。

八、本章小结

要点	关键
React 定位	UI 库,只负责视图层
React 18 新特性	Concurrent / Batching / Suspense / Transitions
推荐环境	Node 18+、Vite 5、TypeScript
项目初始化	npm create vite@latest -- --template react-ts
组件命名	必须大写开头
严格模式	<StrictMode> 双调用检测副作用

动手练习

1. 环境检查:运行 node -v 和 npm -v,记录版本号
2. 创建项目:用 Vite 创建 hello-react,跑通默认页
3. 改首页:把 App.tsx 改成显示你的姓名、当前日期
4. 删测试文件:把 src/App.css 和 index.css 默认样式删干净,避免污染

---

下一章:第 2 章:JSX 语法 →