2019年 React 新手学习指南 – 从 React 学习线路图说开去

10年服务1亿前端开发工程师

小编推荐:掘金是一个面向程序员的高质量技术社区,从 一线大厂经验分享到前端开发最佳实践,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。

愚人码头注:本文根据 React 开发者学习线路图(2018) 结构编写了很多新手如何学习 React 的建议。2019 年有标题党的嫌疑,但是 2018 年剩下的时间不多,我相信文中提到的这些技术 2019 年也不会过时。所以本文完全可以作为 2019 年 React 学习指南。文章中包含相关资源链接希望对你有所帮助。同时本文也大量引用了 The 2018 React JS RoadMap 文章内容和结构,不过该文章中推荐的大多是英文收费视频教程,所以我做了很多内容修改。

本文 基础 和 一般技能 部分也可以作为任何其他前端框架或库的学习基础。

ReactJS 或简称 React 是用于开发 Web 应用程序的前端或 GUI 的领先 JavaScript 库之一。

在 Facebook 的支持下,React JS(也称为React)近年来实现了跨越式发展,并成为基于组件的 GUI 开发名副其实的库。

虽然还有其他前端框架,如 Angular 和 Vue.js ,但 React 与其他组件不同的是,它可能只专注于基于组件的 GUI 开发,而不涉及其他领域。

例如,Angular 是一个完整的框架,为您提供了许多开箱即用的功能,例如依赖注入,路由系统,表单处理,HTTP请求,动画,i18n支持以及一个简单强大且延迟加载的模块系统。

所以,如果您还没有了熟悉的库来做这些事情,或者您可能并不完全使用库,那么 React 是一个很好的选择,但是学习 React 并不是那么容易,尤其是如果你刚刚进入 web 开发领域的话。

当我今年开始学习 React 时,我有一些 Web 开发的背景,之前使用过 HTML ,CSS 和 JavaScript ,并且具备了前端开发的一些基本知识,但我学习 React JS 也碰到了一些问题。 事实上,我现在还在继续学习它。

当我正在研究学习 React 的正确姿势时,我遇到了这个优秀的 React 开发者线路图,它概述了什么是必须要学的,什么是好的知识,以及你作为一名 React 开发人员需要学习的一些额外的知识。

这个 React 开发者线路图是由 adam-golab 构建的,它概述了成为 React 开发人员可以采用的学习线路和库。

那么,如果您想知道接下来作为 React 开发人员应该学什么? 然后这个路线图可以帮助你成为更好的 React 开发人员。

但是,如果你想知道在哪里学习那些必修技能,那么别担心,我会分享了一些免费资源或者付费的在线课程,你可以学习这些技能。当然学习任何技能最好的开始都是其官网的技术文档。

2018 React 开发者线路图

这里是我正在谈论的 React 开发者线路图:

2018 React 开发者线路图

图谱来源: https://github.com/adam-golab/react-developer-roadmap/blob/master/roadmap-cn.png

现在,让我们一步一步地浏览线路图,了解如何在2018年学习成为 React 开发人员的基本技能:

1) 基础

无论你在 Web 开发中学习哪个框架或库,你都必须掌握基础知识,当我说基础知识时,我指的是 HTML ,CSS 和 JavaScript ,这三个是 Web 开发的三大支柱。

HTML

它是 Web 开发人员的第一支柱和最重要的技能之一,因为它提供了网页的结构。

CSS

它是 Web 开发的第二个支柱,用于设置网页样式,使网页看起来很漂亮。

如果你想学习 CSS ,你可以看看 :

JavaScript

这是 Web 开发的第三个支柱,用于使您的网页具有交互性。 这也是 React 框架背后的原因,因此在尝试学习 React JS 之前,您应该了解 JavaScript 并掌握它。

如果您想从头学习 JavaScript ,我建议:

以上是入门基础,很多人虽然能做项目完成工作,但是对于这些基础肯能了解不多,这样往往很容易触碰到天花板。个人认为作为一个前端开发工程师,这些基础概念,基本知识都应该很好的掌握。虽然学习概念性东西有点枯燥,但是当你真正了解这些的时候,你会觉得学什么都得心应手,融汇贯通。前端的大门也随之为你敞开。

2)一般开发技能

无论您是前端开发人员还是后端开发人员,甚至是全栈软件工程师,都无关紧要。 您必须了解一些在编程世界中生存的一般开发技能,以下是其中一些的列表:

2.1)学习 GIT

您必须在 2018 年完全了解 Git。尝试在 GitHub 上创建一些仓库,与其他人共享您的代码,并学习如何从您喜欢的 IDE 下载Github 上的代码。这里有一份 git – 简明指南 可以作为你最简入门。

2.2)了解 HTTP(S) 协议

如果您想成为一名 Web 开发人员,那么了解 HTTP 并掌握它是绝对必要的。

我不是要求您阅读规范,但您至少应该熟悉常见的 HTTP 请求方法,如 GET,POST,PUT,PATCH,DELETE,OPTIONS 以及 HTTP / HTTPS 的工作原理。

2.3)学习终端 terminal

虽然前端开发人员学习 Linux 或终端并不是强制性的,但我强烈建议你熟悉终端,配置你的shell(bash,zsh,csh)等。如果你想学习终端和 bash 那么我建议你去看看 终端使用初级教程

2.4)算法和数据结构

好吧,这又是一般编程技巧之一,不管是成为 React 开发人员或其他程序员都需要这个。

要学习数据结构和算法,您可以阅读一些书籍或加入一个好的课程,如 【专题课】前端面试防虐指南——算法篇

而且,如果您喜欢的课程不仅仅是课程,那么每个开发人员都应该阅读 10本算法书籍清单

2.5)学习设计模式

就像算法和数据结构一样,学习设计模式以成为 React Developer 并不是必须的,但是通过学习它将为自己创造一个美好的世界。

首先来看看什么是设计模,式并了解 JavaScript 中的常用的几种设计模式。 然后你可以再买书看看,这项技能是编程经验总结,不会过时。

以上 基础部分 和 一般开发技能 也可以作为任何其他前端框架或库(如 Angular 和 Vue.js)的学习基础。这些都是作为一名前端开发工程师的必备技能。

3)学习 React JS

现在,我们切入正题。 你必须学习 React ,学习它成为一名 React 开发人员。 学习React的最佳地点是官方网站,这里有 React 最新的中文文档 ,但作为初学者,它对您来说可能是至关重要的。

假如你看中文文档一下子摸不着头脑,我建议你先看看这两篇文章作为你最简入门:

入门后建议你看看 构建 React 应用的基础知识,以及官方文档中的一些细节知识:

再深入一点你必须学习:

当然 React 周边一些非常有用的库,比如:Redux,MobX,React-Router等等,也是非常必要的,我们将在后面详细说明。

4)学习构建工具

如果你想成为一名专业的 React 开发人员,那么你应该花一些时间熟悉一下你将作为 web 开发人员使用的工具,比如内置工具,单元测试工具,调试工具等。

首先,本路线图中提到了一些构建工具:

Package Managers

顺便说一下,学习所有这些工具并不重要,对于初学者来说,只需学习 npm 和 Webpack 应该足够了。 一旦您对 Web 开发和 React 生态有了更多的了解,您就可以探索其他工具了。

如果您想学习 Webpack ,那么 【专题课】从0到1深度理解webpack 是一个很好的开始。

5)样式(Styling)

如果您的目标是成为像 React 开发人员这样的前端开发人员,那么了解一些 样式(Styling)相关的知识非常有必要。 线路图中提到了很多东西,比如:

看到蒙了是吧,这么多东西?不用担心,你不必学会每一样技能,根据你团队情况和个人喜好,每种学习一样就好,其他都类似,掌握应该不难。

6)State(状态) 管理

这是 React 开发人员关注的另一个重要领域。愚人码头注:很多人都说 React 其实很简单,只要懂得 2 件事情,就是 Prop(属性) 和 State(状态),可见 State(状态) 管理 的重要性。 路线图提到了要掌握的以下概念和框架:

如果这对你来说太多了的话,我建议你首先只关注 Redux ,因为 Redux 是目前应用最广泛的 React 状态(State)管理库,等有了一定的经验之后再学习其他内容。

7)类型检查

由于 JavaScript 是一种弱类型语言,弱(或松散)类型的语言不强制执行对象的类型。这允许更多的灵活性,但是又将类型安全和类型检查拒之门外。所以编译器无法捕捉这些与类型相关的 bug 。

随着应用程序的增长,您可以通过类型检查捕获大量错误,特别是如果您可以使用 JavaScript 扩展语言(如 Flow 或 TypeScript ) 来对整个应用程序进行类型检查的话。

但即使你不使用它们,React 也有一些 内置的类型检查功能 ,学习它们可以帮助你尽早发现 bug 。

TypeScript 如今增长势头很猛,并且 TypeScript 也可以编写 Angular 和 Vue 等应用,所以我认为 TypeScript 值得我们学习。

8)表单

除了类型检查之外,还可以学习像 Redux Form 这样的表单助手,它提供了在 Redux 中管理表单状态的最佳方法。

除了Redux Form之外,您还可以查看:

9)路由

组件是 React 功能强大的声明性编程模型的核心,而路由组件是任何应用程序的重要组成部分。

React-Router 提供了一组导航组件,这些组件与您的应用程序以声明方式组合。

无论您是希望为Web应用程序设置可收藏的 URL 还是在 React Native 中导航的可组合方式,React Router 都可以在 React 渲染的任何位置工作。

除了 React-Router 之外,您还可以查看:

10)API 客户端

当今,您很少会去构建一个独立的 GUI ,相反,您将有更多机会使用 REST 和 GraphQL 等API构建与其他应用程序通信的应用。

值得庆幸的是,React 开发人员可以使用许多API客户端,以下是它们的列表:

REST API 方面,国内目前很多人使用 Axios,理由也很简单,它确实简单好用,再加上 Vue2.0之后,尤大大推荐大家用 axios 。Axios 本质上也是对原生 XHR 的封装,和 jQuery Ajax 类似,只不过它是Promise 的实现版本,符合最新的 ES 规范,从它的官网上可以看到它有以下几条特性:

  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 客户端支持防止CSRF
  • 提供了一些并发请求的接口(重要,方便了很多的操作)

Fetch API(ES6+)执行对 REST API 的 HTTP请求,提供了一个获取资源的接口(包括跨域)。任何使用过 XMLHttpRequest 的人都能轻松上手,但新的API提供了更强大和灵活的功能集。Fetch 提供了对 Request 和 Response (以及其他与网络请求有关的)对象的通用定义。使之今后可以被使用到更多地应用场景中:无论是service workers、Cache API、又或者是其他处理请求和响应的方式,甚至是任何一种需要你自己在程序中生成响应的方式。它还提供了一种定义,将 CORS 和 HTTP 原生的头信息结合起来,取代了原来那种分离的定义。实际工作中,很多前端开发工程师觉得 Fetch API 使用起来不是很方便,而且代码丑陋,其实只是我们平常没用太多跟底层的东西。Fetch API 的优势主要优势也在于它更加底层:

  • 更加底层,提供的API丰富(request, response)
  • 脱离了XHR,是ES规范里新的实现方式

GraphQL 方面推荐 Apollo 。Apollo 客户端是我的最爱,它提供了一种使用GraphQL构建客户端应用程序的简便方法。 该客户端旨在帮助您快速构建一个使用GraphQL获取数据并可与任何JavaScript前端一起使用的 UI 。

11)实用程序库(Utility Libraries)

这些库使您的工作更轻松。 React 开发人员可以使用许多实用程序库,如下所示:

我不建议你学习所有这些,线路图也是如此建议的。如果你仔细观察 Lodash ,Moment 和 Classnames 是用黄色的,说明你应该从这几个开始学习。

12)测试

注意,这是 React 开发人员的一项重要技能,经常被忽视,但如果你想比其他开发人员更牛逼,那么你应该学习一些测试库。 此外,您还拥有用于单元测试,集成测试和端到端测试的库。

以下是路线图中提到的库列表:

您可以更具你们团队或你个人喜好学习所需的库,但是如果你刚开始学习这一块内容的话,我建议你使用 Jest 。 当然 Mocha 也受到很多开发者的青睐,但是学习曲线相对较陡,但这也说明了它可以提供更好的灵活性和可扩展性。

13)国际化

这是开发前端的另一个重要主题,帮助你的应用可以在全球使用。 您可能需要支持 日本,中国,西班牙和其他欧洲国家的本地 GUI 版本和语言包。

线路图建议您学习以下技术:

这两个库都提供了 React 组件和 API 来格式化日期,数字和字符串,包括复数和处理翻译。

14)服务器端渲染

您应该知道服务器端渲染和客户端渲染之间的区别,在讨论支持使用 React 的服务器端渲染的库之前,请先弄清楚他们直接的区别。

好吧,在客户端渲染中,您的浏览器会下载一个最小的HTML页面。 然后它渲染 JavaScript 并将内容填充到其中。

在服务器端呈现的情况下,React组件在服务器上呈现,输出的HTML内容将传递到客户端或浏览器。

线路图建议遵循服务器端渲染:

但是,我建议只学习 Next.js 应该足够了。

15)静态站点生成器

Gatsby.js 是一个现代静态站点生成器。 您可以使用 Gatsby 创建个性化的网站。 它们将您的数据与 JavaScript 相结合,并创建格式良好的HTML内容。React 官网就是用 Gatsby.js 生成的。例如:React 中文文档

16)后端框架集成

React on Rails 将 Rails 与 Facebook 的 React 前端框架(服务器渲染)集成在一起。 它提供 Server 渲染,通常用于SEO爬虫索引和UX性能,而不是 rails/webpacker 提供的。

17)移动端应用

这是学习 React 真正有好处的另一个领域,因为 React Native 正迅速成为用 JavaScript 开发原生移动应用程序外观和体验的标准方法。

线路图建议您学习以下库:

但是,我认为,只要学习 React Native 就足够了。

18)桌面端应用

还有一些基于 React 的框架来构建像 React Native Windows 这样的桌面 GUI,它允许您使用 React 构建本机 UWP 和 WPF 应用程序。

线路图建议使用以下库:

我个人推荐使用 Electron ,还是比较简单方便的,其他我也没用过,还要进一步探索。 如果你已经掌握了 React ,你可以看一下它们。

19)虚拟现实

如果您有兴趣构建基于虚拟现实的应用程序,那么您还有一些像 React 360 这样的框架,它允许您使用React 创建 360° 全景体验和VR体验。 如果您对该领域感兴趣,可以进一步探索 React 360 。

小结

这就是2018年的 React 学习线路图。 它确实非常全面,很有可能你在2018年剩下的时间里都不会学到所有这些,但不要担心,所有的技术在2019年仍然有效,你可以放心地将它用作2018年的React 学习线路图。

如果你有 React 新手学习方面好的资源或教程,甚至是收费课程都可以留言告诉我们,我会尽快将其加入到本文合适的地方。当然你有任何建议也可以留言。感谢!


如果你觉得本文对你有帮助,那就请分享给更多的朋友
关注「前端干货精选」加星星,每天都能获取前端干货
赞(15) 打赏
未经允许不得转载:WEB前端开发 » 2019年 React 新手学习指南 – 从 React 学习线路图说开去

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    感激不尽

    zuizui2周前 (11-27)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏