很多人做前端练习，卡在一个尴尬的位置：组件会写、文档能查，但给一个"社交产品"这种具体品类，就不知道从哪下手了——信息流怎么排、发布入口放哪、底部导航几个标签、移动端点一下该有什么反馈。这门课就是冲着这个缺口来的：三节课，动手把一个 SNS 前端 Demo 搭出来，边做边补齐移动端社交产品的那套常见结构。

先看清楚：它补的是哪块能力

不是从零讲语法，也不打算把你带成架构师。它针对的是"能看懂代码，但独立起一个移动端页面就发怵"这个阶段。社交产品的界面看着简单，实际有一堆位置固定的东西：顶部栏、可滚动的内容区、底部标签栏、发布按钮的落点、列表项之间的间距和分割。这些在真实项目里几乎每个页面都要处理，但很少有人系统讲过为什么这么放。

课程选择用 antd-mobile 这类移动端组件库来做，好处是把样式细节先交给库，你腾出精力去理解结构和数据怎么串起来。等你能把一屏信息组织清楚，再回头抠样式也不迟。

三节课大致覆盖什么

第一节课的重心通常在环境和骨架：把跑起来这件事先解决，页面容器、路由的基本形态定下来，避免一上来就陷在配置里。
第二节课进入具体页面，信息流列表、卡片、头像、互动区域这些社交产品的高频元素会依次落地，同时会碰到列表渲染和状态更新的常见写法。
第三节课收口，把发布、导航切换、页面跳转这些交互串成一条能走通的路径，让 Demo 从"几张静态图"变成"能点得动的东西"。

三节的量确实不大，所以别指望覆盖登录鉴权、即时通讯、后端接口这些。它更像一个可运行的样板，你拿它当起点，再往上加东西。

配套练习该怎么用

跟着敲一遍只是第一步，而且很容易产生"我会了"的错觉。建议在每节课结束后做两件事：一是把某个区块改掉——比如把信息流从单列换成带图片的卡片，或者换一套配色，看结构会不会散；二是断开网络或删掉一段数据，观察页面报错和空白状态长什么样。社交产品最麻烦的从来不是正常态，而是加载中、为空、出错这三种情况，早一点碰到它们，比多背几个 API 有用。

如果时间紧，至少保证第三节的交互闭环自己独立走一遍，不看视频。能凭记忆把发布到展示这条链路接上，说明结构真的进脑子了。

学完之后，你应该能回答这些问题

一个移动端社交首页，自上而下通常由哪几层构成，底部导航为什么不宜放太多项？
信息流里的重复卡片，是复制结构还是抽成组件，判断依据是什么？
点"发布"之后，新内容是怎么出现在列表顶部的，中间经历了哪些状态变化？
页面切走再切回来，之前的数据还在不在，为什么？
如果需要给某条动态加一个点赞，你会改动哪几个地方？

这些问题能答上来，说明你不只是照着抄了一遍。答不上来的那几条，正好就是下一步要补的。缺什么补什么，比假装什么都会省时间。