x
,你打开youtube或任何搜索引擎,搜索与x
框架相关的任何教程,并在30分钟之后突然发出"Eureka"(高兴地表现)的尖叫--我认为这个框架类似自己之前学过的框架。你是对的,你不必要从头开始学习它。在这篇文章中,我将向你展示我学习前端框架的经验以及这些框架如何彼此相似的。每次你决定学习前端框架时,你定会反复听到这些术语(组件,路由和管理状态/状态管理)。
下面我们逐步了解下:
任何框架的核心都是以创建组件来达到复用的目的。如今,大多数现代框架都使用JSX
或HTML
模版引擎,生命周期钩子--提供生命瞬间可见性,比如创建,渲染,注销以及它们发生时的行为能力。
如今,大多数现代框架都提供API
来创建和管理客户端路由。
有时,你的数据必须在组件之间共享,推荐的方法是使其成为中心(中转站)。
现在,所有框架都提供API
来管理你的状态(例如Angular有一个Service,React现在有Context API)以及当你的数据规模变大之后,你可以考虑使用像redux这样的库。
完成基础学习之后,我们来亲自动手并创建项目。
为了理解事物的某些方面,你需要很好地了解它,这些知识(获取)不是仅仅来自阅读书籍或者观看视频课程。在这篇文章中,真实的测试伴随着现实中的真正问题,会带给你些启发,并应用在你选择的任何前端框架的项目中。
笔记:
常用的首个应用是使用其公共的API
来模仿任何已知站点,尝试构建一个带下拉列表的搜索栏,来保存来自端点API
的结果,检查其返回的数据,然后再显示它,就像有张图像一样(显示)或不显示。
端点API示例:
你将学到:
HTTP客户端
向端点API
发起请求API
获取结果数据我在上一节中提到的一些端点API
(可能)需要一些身份验证,因此在这一节中尝试添加或构建另一个带有登陆/注册
页面的应用程序。如果用户登陆了,则将他/她重定向到用户主页,并阻止访客用户
访问(主页),因为这需要用户登陆的。
你将学到:
增删查改的应用程序是本节中最受欢迎的前端应用程序,你可以使用本地存储或者使用在线服务(如Firebase)来构建此应用程序,甚至将它与后端框架集成在一起。
项目实例:
你将学到:
put、delete、post和get
的HTTP请求auth
功能在前面的章节中,对后端的所有请求都是单向的,你在管理应用程序状态时没有问题。但在本节中,我们尝试使用web sockets
来构建聊天应用程序,它是双向的,我们不能(总是)等待响应来更新视图,我们需要另一种方法来管理我们的客户端状态。
你将学到:
管理状态
解决方案,如redux for react, ngrx for angular 2+ 或 vuex for vuejs
以及如何将其与客户端应用程序集成