框架与组件站在前人肩膀

所有代码的本质，都是为了高效、稳定的工程化——让人能更快把东西做出来、做稳，还能多人协作、长期维护。规模一大，光靠「三件套 + 原生 JS」从头手写就太累了，于是框架应运而生。

框架的本质就两件事：快速解决问题，以及积累前人的智慧。它把无数人踩过的坑、总结出来的最佳实践，沉淀成默认行为和现成的轮子——你不必重新发明一切，站在前人肩膀上往下走就行。

而前端框架最本质的一件事，是组件化——把页面拆成一块块独立的小积木，像搭积木一样拼出整页。到了 AI 时代，这一点被彻底放大：你不必亲手砌每一块积木，只需描述「我要什么组件、它该干什么」，剩下的交给 AI。所以认得组件、说清组件，比会写组件更重要——这正是这门课的重心。

本节先认框架（具体就是 React + TypeScript），再认它拆出来的基础组件——按钮、卡片这些 UI 词汇。

React 把界面拆成一个个组件——这一节就认最基础的那几个：按钮、输入框、卡片这类能嵌进任何页面的小零件，是 UI 的「词汇表」。每个组件答三件事：是什么、怎么用、怎么一句话告诉 AI。

本节只详讲一个最典型的组件（Card），其余常用组件用一张速查表带过。区块级组件（Hero 主视觉、Navbar 顶栏、Sidebar 侧栏）体积大、管整页骨架，放到进阶篇。

现在不必全会——认得名字、想深入时知道去哪儿就行。下面分两组：学框架、看组件。