描述 UI

从 JSX 开始，逐步建立“把界面当成数据来描述”的心智模型。

TL;DR

  • What：React 让你用组件（函数）返回 JSX 来描述 UI。
  • Why：当 UI 由数据驱动变化时，“声明式描述”更稳定、可组合、可维护。
  • How：把页面拆成组件 → 用 JSX 拼装 → 用 props 传数据 → 用样式表达视觉。

你适合从这里开始吗？

如果你已经能读懂基本的 HTML/CSS/JavaScript，并且想知道“React 页面到底怎么写出来”，这里就是第一站。 如果你更关心“组件为什么会重新渲染 / 为什么状态更新会影响 UI”，可以先跳到状态响应。

学习顺序（从易到难）

1) JSX 简介：JS 里写“像 HTML 的东西”到底是什么2) 组件嵌套与组合：把页面拆成可复用的积木3) 样式：如何在 React 里组织 CSS / Tailwind / CSS-in-JS

常见误区

  • 把 JSX 当成字符串拼接：JSX 只是语法糖，真正的“变化”来自数据与渲染。
  • 过早抽象组件：先让页面跑起来，再提炼复用点。
  • 在一个组件里塞进所有 UI：学会用组合来降低复杂度。

下一步

读完本章后，推荐继续学习组件基础与Props，把“描述 UI”落到可维护的组件结构上。

这篇文章有帮助吗？