专栏首页call_me_R【译】我是如何学习任意前端框架的

【译】我是如何学习任意前端框架的

你决定学习框架x,你打开youtube或任何搜索引擎,搜索与x框架相关的任何教程,并在30分钟之后突然发出"Eureka"(高兴地表现)的尖叫--我认为这个框架类似自己之前学过的框架。你是对的,你不必要从头开始学习它。在这篇文章中,我将向你展示我学习前端框架的经验以及这些框架如何彼此相似的。

每次你决定学习前端框架时,你定会反复听到这些术语(组件,路由和管理状态/状态管理)。

下面我们逐步了解下:

组件

任何框架的核心都是以创建组件来达到复用的目的。如今,大多数现代框架都使用JSXHTML模版引擎,生命周期钩子--提供生命瞬间可见性,比如创建,渲染,注销以及它们发生时的行为能力。

路由

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

管理状态

有时,你的数据必须在组件之间共享,推荐的方法是使其成为中心(中转站)。

现在,所有框架都提供API来管理你的状态(例如Angular有一个Service,React现在有Context API)以及当你的数据规模变大之后,你可以考虑使用像redux这样的库。

完成基础学习之后,我们来亲自动手并创建项目

创建项目

为了理解事物的某些方面,你需要很好地了解它,这些知识(获取)不是仅仅来自阅读书籍或者观看视频课程。在这篇文章中,真实的测试伴随着现实中的真正问题,会带给你些启发,并应用在你选择的任何前端框架的项目中。

笔记:

  • 该主题中列出的项目难度逐渐递增,每个项目会在前一个项目基础中增加。
  • 项目的条理是从最简单到最全面。

1.查找 & 显示 (模仿)

常用的首个应用是使用其公共的API来模仿任何已知站点,尝试构建一个带下拉列表的搜索栏,来保存来自端点API的结果,检查其返回的数据,然后再显示它,就像有张图像一样(显示)或不显示。

端点API示例:

你将学到:

  • 使用HTTP客户端向端点API发起请求
  • 使用键盘事件监听器,例如,一旦用户点击进入,就向端点API获取结果数据
  • 学会如何展示单条数据或一组数据
  • 给你插入的数据添加点样式
  • 构建你的布局
  • 主要的详细信息:列表结果将结果中的每个项目的链接添加到项目详细页面
  • 了解如何将数据从母版页传递到详细信息页

2.Auth App

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

你将学到:

  • 路由守卫:某些页面只允许通过身份验证的用户(访问)
  • 如何发送并保存JWT(JSON Web令牌)以发出需要经过身份验证的用户请求

3.CRUD App

增删查改的应用程序是本节中最受欢迎的前端应用程序,你可以使用本地存储或者使用在线服务(如Firebase)来构建此应用程序,甚至将它与后端框架集成在一起。

项目实例:

  • 书签应用
  • To-Do App

你将学到:

  • 验证用户的表单输入,如果用户输入错误就提示错误信息
  • 如何创建put、delete、post和get的HTTP请求
  • 将你的应用程序和任意后端框架集成
  • 尝试为后端框架添加auth功能

4.聊天应用

在前面的章节中,对后端的所有请求都是单向的,你在管理应用程序状态时没有问题。但在本节中,我们尝试使用web sockets来构建聊天应用程序,它是双向的,我们不能(总是)等待响应来更新视图,我们需要另一种方法来管理我们的客户端状态。

你将学到:

  • 学习如何使用管理状态解决方案,如redux for react, ngrx for angular 2+ 或 vuex for vuejs以及如何将其与客户端应用程序集成
  • 使你的应用更灵活(接收网络状态并通知用户新消息)

原文:dev.to/imm9o/how-i…

文章首发:github.com/reng99/blog…

更多内容:github.com/reng99/blog…

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Egg.js 试水 - 天气预报

    官网介绍,Egg奉行『约定优于配置』,按照一套统一的约定进行应用开发,团队内部采用这种方式可以减少开发人员的学习成本。

    嘉明
  • opacity骚操作

    借着这个节日,结合下最近的需求:移动端h5生成图片没有二维码(如上),长按保存下来时候有二维码(如下)。我们来聊聊如何实现,文末配上不严谨的源码,感兴趣的看官自...

    嘉明
  • 【译】发布你自己的npm包

    如今,NPM已经成为javascript库的事实上的注册表。特别是React,Angular和其他前端库主导的网络和node.js接管的服务器端,NPM软件包比...

    嘉明
  • Android 10 新特性 率先看

    设备位置:让用户能够控制应用程序何时可以获得位置信息,包括应用程序何时不使用位置信息。用户可以设置应用程序无法使用位置信息,可以选择只有应用程序在运行或者在后台...

    蜻蜓队长
  • 使用Apache Spark的微服务的实时性能分析和分析

    作为一种架构风格,微服务因其极高的灵活性,越来越受欢迎。应用程序在功能上分解为一组松散耦合的协作服务,通过定义良好的(REST)API进行交互。通过采用这些设计...

    人工智能资讯小编
  • 「应用现代化」应用程序现代化的最佳实践和方法

    应用程序现代化是对传统软件编程的重新利用,以使其与当前业务需求更紧密地协调一致。这是企业保持竞争力的关键。虽然存在许多挑战,但通过这一过程获得的效率有助于公司保...

    首席架构师智库
  • 物联网应用和事件驱动计算重塑云服务

    如今,一些全球主要的公共云提供商已经为物联网和事件驱动计算推出了新的服务。了解这些服务对企业的IT团队和未来的云计算将有一些重要的意义。 工具总是以其用途塑造...

    静一
  • z/OS Connect 助力你的业务更上一层楼

    上周有关API 经济的推送得到了热烈的反响,今天我们趁热打铁,解说下之前留下的一个引子。下面是我们今天要cover的重点: z/OS Connect Enter...

    企鹅号小编
  • 图神经网络的重要分支:时间图网络

    在本文中,作者将描述时间图网络(Temporal Graph Network,TGN),这是一个用于深度学习动态图的通用框架。

    guichen1013
  • 简单的做一个图片上传预览(web前端)

    在做web项目很多的时候图片都是避免不了的,所以操作图片就成了一个相对比较棘手的问题,其实也不是说很麻烦,只是说上传然后直接预览的过程很恶心,今天简单的做一个处...

    何处锦绣不灰堆

扫码关注云+社区

领取腾讯云代金券