如何学习任何前端框架

你决定学习前端框架，你打开搜索引擎，你喜欢搜索任何与这个前端框架相关的教程，在这篇文章中，我将向你展示我学习前端框架的经验，以及这些框架是如何相互封闭的。

每次您决定学习前端框架时，都必须反复听到这些术语（组件、路由和管理状态），让我们将其分解。

组件 

• 任何框架构建组件的核心都使其可重用。

• 大多数使用JSX或HTML模板引擎的现代框架，

• 所有框架都提供了生命周期挂钩，这些挂钩提供组件生命周期时刻的可见性，如创建、渲染、销毁以及发生时的操作能力。

路由

• 现在大多数现代框架都提供了创建和管理客户端路由的API。

管理状态

• 所有freameworks的构建方式都允许组件内部管理其状态，而无需任何外部库或工具。

• 许多框架都是以组件共享相同状态的方式构建的，例如（Angular拥有服务，React现在拥有Context API）。

• 有时框架解决方案是不够的，特别是当您的状态很大时，因此可以考虑使用redux之类的库。

学习完基础知识后，让我们动手创建项目。

创建项目

为了理解某些东西的某些方面，你需要很好地了解它，而这些知识并不仅仅来自于阅读书籍或观看视觉课程，真正的测试伴随着现实生活中的一个真实问题，在本文中，我为你带来了一些项目的想法，涵盖了你选择的任何前端框架的许多方面。

注意事项：

• 本主题所列项目的难度是渐进的，每个项目都会增加其前身。

• 项目从最小到最全面的项目顺序。

1.查找和显示（克隆）

第一个常用的应用程序是使用公共API克隆任何已知站点，尝试构建一个带有下拉列表的简单搜索栏，保存来自端点API的结果，在显示返回的数据之前检查是否有要显示的图像。

您将学到什么：

• 使用HTTP客户端向端点API发出请求。

• 例如，使用键盘事件侦听器，一旦用户点击enter call endpoint API获取结果数据。

• 了解如何显示单个数据或一组数据。

• 使用插值数据设置显示样式。

• 结构化显示。

• 主详细信息：列出结果为结果中的每个项目添加链接到项目详细信息页。

• 了解如何从中传递数据母版页到详细信息页。

2.验证应用程序

我在上一节中提到的一些端点API需要一些身份验证，因此在本节中，请尝试添加或构建另一个具有登录/注册页面的应用程序，如果用户正在登录，请将其重定向到用户主页，并阻止来宾用户访问需要用户登录的页面。

您将学到什么：

• 路由保护：有些页面只需要经过身份验证的用户。

• 如何发送和保存JWT（JSON web令牌）以发出需要经过身份验证的使用的请求。

3.积垢应用程序

创建，读取，更新和删除应用程序是本节中最流行的前端应用程序，您可以使用本地存储或使用Firebase等在线服务来离线构建此应用程序，甚至可以将其与后端框架集成。

您将学到什么：

• 验证表单中的用户输入并在用户插入错误数据时显示错误。

• 如何发出put、delete、post和get HTTP请求。

• 将应用程序与任何后端框架集成。

• 尝试为后端框架添加身份验证功能。

4.聊天应用程序

在前面的部分中，所有对后端的请求都是单向的，在这里管理应用程序状态没有问题，但是在本部分中，我们尝试使用web套接字构建聊天应用程序，它是双向的，我们不能等待响应更新视图，我们需要另一种方法来管理我们的客户端状态。

您将学到什么：

• 了解如何使用管理状态解决方案，如react的redux、angular 2+的ngrx或vuejs的vuex，以及如何将其与客户端应用程序集成。

• 使应用程序更具反应性（收听网络状态并用新消息通知用户）。