React 基础突破：从编译原理到状态驱动视图
很多开发者在从原生 JavaScript 或 jQuery 转向 React 时，最大的障碍不是语法本身，而是对“声明式 UI”和“虚拟 DOM”底层逻辑的陌生。这门课针对的就是这个痛点。它不满足于让你会用 create-react-app 跑起来，而是深入讲解 React 的运行机制。课程从“原子继承”这种基础概念切入，帮助建立组件化的思维模型，随后通过详细的理论讲解，厘清 React 与其他框架的本质区别。对于具备一定 JS 基础、准备通过系统性学习完成技术栈转型或查漏补缺的学习者来说，这部分打底的工作至关重要。
核心内容与学习顺序建议
学习建议按照课程的自然顺序进行，不要跳过前面的编译原理部分。前几节课集中解决 JSX 的编译问题，包括浏览器端实时编译、工程化环境下的 Babel 配置以及如何在普通 HTML 中引入 JSX。这些内容看似枯燥，却是理解后续所有工具链和构建流程的地基。如果你跳过了这里，后面遇到打包报错或性能优化问题时，将很难定位根源。接着进入组件开发的核心领域，重点攻克特殊元素属性、插值表达式、列表渲染（以新闻列表为实战案例）、样式绑定、属性传递和事件系统。这一阶段是日常开发中最高频使用的技能点，必须通过代码实践来巩固。最后的“换肤”案例是一个综合性练习，要求你将之前学到的样式管理和状态控制结合起来，实现一个动态主题切换的功能，这标志着你对 React 组件内部数据流有了初步的掌握。
学完能独立做什么及资料配合
完成本阶段学习后，你应该能够独立搭建一个简单的单页应用原型。具体能力包括：合理划分组件层级，通过 Props 在不同层级间传递数据，利用 State 管理组件内部的动态状态，并响应各种用户交互事件驱动视图更新。这意味着你可以胜任一些简单的中后台管理系统界面开发或静态页面的动态化改造。资料包的配合方式很关键，视频切片适合分块观看，但一定要配合动手练习。特别是在编译原理章节，务必亲手配置一个最小化的本地环境，观察 JSX 是如何被转换成原生 JS 的，这种直观体验比看十遍文档都管用。对于列表渲染和状态管理部分，建议先遮住代码自己写一遍，再对照视频修正，这样才能真正将知识转化为肌肉记忆。
课程目录
1-1 [react] 原子继承 (11:47) 1-2 [react] react理论 (51:52) 1-3 [react] 体验react (04:30) 1-4 [react] 组件 (11:52) 1-5 [react] 浏览器端编译jsx语法 (13:21) 1-6 [react] 工程化中编译 (10:25) 1-7 [react] 编译html中的jsx语法 (06:29) 1-8 [react] 特殊元素属性 (08:26) 1-9 [react] 插值 (12:30) 1-10 [react] 渲染新闻列表 (13:25) 1-11 [react] 样式 (08:14) 1-12 [react] 属性 (24:03) 1-13 [react] 事件 (10:38) 1-14 [react] 状态 (30:54) 1-15 [react] 换肤 (41:17) 2-1 [react] 复习 (22:39) 2-2 [react] 组件创建期 (49:49) 2-3 [react] 子组件 (10:10) 2-4 [react] 子组件二 (16:46) 2-5 [react] 子组件三 (13:00) 2-6 [react] 组件存在期 (31:35) 2-7 [react] 组件销毁期 (05:27) 2-8 [react] 非元素属性 (18:37) 2-9 [react] 非元素属性二 (04:10) 2-10 [react] 非约束性组件 (11:10) 2-11 [react] 约束性组件 (26:27) 2-12 [react] 选框 (16:27) 2-13 [react] 下拉框 (23:25) 2-14 [react] 下拉框二 (01:59) 2-15 [react] 使用非react类库 (44:17) 2-16 [react] 使用侵入式类库 (12:50) 3-1 [react] 复习 (16:33) 3-2 [react] 子组件向父组件通信 (22:16) 3-3 [react] 兄弟组件间通信 (13:41) 3-4 [react] 项目实战---项目部署 (28:28) 3-5 [react] 项目实战--导航模板 (24:43) 3-6 [react] 项目实战--导航模块2 (06:21) 3-7 [react] 项目首页-首页banner (18:41) 3-8 [react] 项目实战-首页列表 (31:47) 3-9 [react] 项目实战-起步页请求 (14:54) 3-10 [react] 项目实战-起步页样式 (23:41) 3-11 [react] 项目实战--css页面组件 (09:13) 3-12 [react] 项目实战-页面组件抽象 (11:17) 3-13 [react] 项目实战-模块化与工程化 (26:27) 4-1 [react] 复习 (20:09) 4-2 [react] css3动画 (01:00:03) 4-3 [react] 图片加载器 (33:39) 4-4 [react] 图片加载进度 (09:03) 4-5 [react] 路由 (24:22) 4-6 [react] header模板 (31:24) 4-7 [react] 首页模板 (29:00) 4-8 [react] 分类页面 (40:24) 4-9 [react] 搜索页面 (22:24) 4-10 [react] 模块化与工程化 (53:04)
