Islam Muhammad 原作，授权 New Frontend 翻译。
你一定有过这样的经历：在学习一个新框架的时候打开视频网站或者搜索引擎寻找教程，然后在看了差不多三十多分钟后突然发出「咦，这跟我之前用过的那个差不多诶，我不用从头学了」这样的感慨。在这篇文章里，我会向你介绍我学习前端框架的经历，以及这些框架之间的相似性。
「组件」、「路由」、「状态管理」……每当你学习一个新框架的时候，都会反反复复接触到这些词。下面咱们就来看看它们到底是什么东西：
组件
- 提供复用性，是各大框架的核心。
- 多数现代框架都会使用 JSX 或 HTML 模版引擎。
- 所有框架都会提供「创建」、「渲染」、「销毁」等生命周期钩子，不仅帮助你了解组件的运作方式，还允许你在相应事件发生时执行一些操作。
路由
- 多数现代框架都会提供在客户端创建和管理路由的 API。
状态管理
- 所有框架都自带管理组件内部状态的方法，它们不依赖外部库和工具。
- 还有很多框架自带组件间共享状态的方案，比如 Angular 的服务、React 的 Context API。
- 有时候框架自带的方案不足以满足需求，尤其是状态较多的时候。这种情况下可以考虑使用第三方状态管理库，比如 Redux。
了解了这些基本知识，下面咱们来做几个项目。
项目
想要真正了解一个东西的话，不能只看书或者看视频，还要动手去实践。下面介绍的这些项目帮助你在学习新框架的时候快速上手它的各项功能。
注：
- 下面这些项目的难度是递增的，每个项目都会用到前面的那个涵盖的知识点。
- 项目的复杂度也是递增的。
展示型应用（复刻一个网站）
通常用新框架做的第一个项目可以是借助一个已有的网站提供的公共 API 复刻这个网站。可以做一个搜索框，在下拉列表里显示从 API 获取到的数据，并根据一定的条件展示不同的内容（比如说，如果有图片的话，就把图片显示出来）。
一些 API 的例子：
你将学会：
- 从客户端通过 HTTP 访问 API。
- 使用键盘事件监听器。比如说，当用户敲回车后从 API 读取数据。
- 显示一条数据或者一组数据。
- 通过插值来改变展示方式。
- 将数据以结构化的方式展现。
- 制作主从页面：在结果中放一个链接，点击后进入对应结果的详情页。
- 将数据从主页面传给从页面。
用户鉴权
上面的部分 API 需要用户登录后才能进行某些操作。在这一节，我们试着做一个有登录、注册页面的应用，然后在用户登录后把用户重定向到个人主页，同时防止未登录用户访问只有登录用户才能访问的页面。
你将学会：
- 使用导航守卫：一些页面只有登录用户才可以看到。
- 借助 JWT（JSON web token）来发送只有登录用户才能进行的请求。
CRUD（增删改查）
这是最流行的一类前端应用。在这一节，你可以选择把数据存在本地，也可以选择用 Firebase 这样的服务把数据存到云端，还可以把应用跟后端框架结合起来。
一些例子：
- 书签应用。
- To-Do 应用。
你将学会：
- 检查表单输入，并在遇到非法值的时候显示错误信息。
- 使用 PUT、DELETE、POST、GET 这些 HTTP 请求。
- 把应用跟后端框架结合到一起。
- 为后端框架添加鉴权的功能。
聊天应用
在前面几个小节里，所有往后端发的请求都是单向的，不需要在后端维持应用状态。但这一节里面，我们会试着用双向传输请求的 web socket 来做一个聊天应用。这就不能依靠发出请求后收到的结果来更新视图了，而是要通过另一种方式来管理客户端的状态。
你将学会：
- 使用 React 的 Redux、Angular 2+ 的 NgRx 以及 Vue.js 的 Vuex 来管理状态，并将它们和你的应用结合到一起。
- 让你的应用监听网络状态，并在收到新消息的时候通知用户。
Photo by Reto Simonet on Unsplash
