我如何学习任何前端框架

我如何学习任何前端框架

我如何学习任何前端框架

您决定学习 x 框架，您打开 youtube 或任何您喜欢的搜索引擎来搜索与此“x”框架相关的任何教程，突然 30 分钟后您尖叫“Eureka”，我认为这个框架与我以前的框架类似，您是对的，您不必从头开始学习它，在这篇文章中，我将向您展示我学习前端框架的经验以及这些框架如何相互封闭。

每次您决定学习前端框架时，您都必须
一遍又一遍地听到这些术语（组件，路由和管理状态）
让我们分解一下。

成分

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

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

• 所有框架都提供了生命周期挂钩，可以提供对组件生命时刻的可见性，例如创建、渲染、销毁以及在发生时采取行动的能力。

路由

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

管理状态

• 所有框架都构建了一种方式，让组件能够在内部管理其状态，而无需任何外部库或工具。

• 许多框架都是通过组件共享相同状态的方式构建的（例如Angular有一个Service，React现在有Context API）。

• 有时框架解决方案是不够的，特别是当你的状态很大时，所以你可以考虑使用像redux这样的库。

学习完基础知识后，我们就可以开始动手构建项目了。

建筑项目

为了理解某些事物的各个方面，您需要很好地了解它，而这些知识并非仅仅来自阅读书籍或观看视觉课程，真正的考验来自现实生活中的实际问题，在本文中，我为您提供了一些项目想法，涵盖了您选择的任何前端框架的许多方面。

笔记：

• 本主题列出的项目难度逐渐增加，每个项目都增加了其前一个项目的难度。
• 项目按从最年轻到最全面的顺序排列。

1. 查找并显示（克隆）

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

端点 API 示例：

• Github API
• OMDb API
• Spotify Web API
• wunderground API
• Reddit API

您将学到：

• 使用 HTTP 客户端向端点 API 发出请求。
• 例如，使用键盘事件监听器，一旦用户按下回车键，就会调用端点 API 来获取结果数据。
• 了解如何显示单个数据或一组数据。
• 使用插值数据来设计您的显示样式。
• 构建您的显示。
• 主从：列出结果，为结果中的每个项目添加一个指向项目详细信息页面的链接。
• 了解如何将数据从主页传递到详细信息页面。

2. 授权应用程序

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

您将学到：

• 路由保护：某些页面只需要经过身份验证的用户。
• 如何发送和保存 JWT（JSON 网络令牌）以发出需要经过身份验证的请求。

3. CRUD 应用程序

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

项目示例：

• 书签应用程序。
• 待办事项应用程序。

您将学到：

• 验证表单中的用户输入，如果用户输入错误的数据则显示错误。
• 如何发出 put、delete、post 和 get HTTP 请求。
• 将您的应用程序与任何后端框架集成。
• 尝试为您的后端框架添加身份验证功能。

4.聊天应用程序

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

您将学到：

• 了解如何使用管理状态解决方案，例如用于 react 的 redux、用于 angular 2+ 的 ngrx 或用于 vuejs 的 vuex，以及如何将其与客户端应用程序集成。
• 让您的应用更具响应能力（监听网络状态并通过新消息通知用户）。