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

时间  2019-11-06
标签 2019年 react 新手 学习 指南 线路 图说 开去 栏目 React 繁體版
原文   原文链接

原文：https://www.html.cn/archives/10111javascript

注：本文根据 React 开发者学习线路图（2018） 结构编写了不少新手如何学习 React 的建议。2019 年有标题党的嫌疑，可是 2018 年剩下的时间很少，我相信文中提到的这些技术 2019 年也不会过期。因此本文彻底能够做为 2019 年 React 学习指南。文章中包含相关资源连接但愿对你有所帮助。同时本文也大量引用了 The 2018 React JS RoadMap 文章内容和结构，不过该文章中推荐的大可能是英文收费视频教程，因此我作了不少内容修改。css

本文 基础 和 通常技能 部分也能够做为任何其余前端框架或库的学习基础。html

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

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

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

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

因此，若是您尚未了熟悉的库来作这些事情，或者您可能并不彻底使用库，那么 React 是一个很好的选择，可是学习 React 并非那么容易，尤为是若是你刚刚进入 web 开发领域的话。webpack

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

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

这个 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 新手学习方面好的资源或教程，甚至是收费课程均可以留言告诉咱们，我会尽快将其加入到本文合适的地方。固然你有任何建议也能够留言。感谢！

赞(19)   打赏
未经容许不得转载： WEB前端开发 »  2019年 React 新手学习指南 – 从 React 学习线路图说开去
标签： API Clients After.js Aphrodite Apollo Async actions (Side Effects) Atomic Ava BEM Bootstrap Bulma CSS Architecture CSS Frameworks CSS Modules CSS Preprocessor CSS-in-JS Chai Component State/Context API Cordova/Phonegap Cucumber.js Cypress Data persistence Electron Emotion End to End Testing Enzyme Final Form Flow Form Helpers Formik Formsy GET Gatsby Git GraphQL HTTP HTTPS Helpers ImmutableJS Integration Testing Internationalization JSS JavaScript Jest Karma Less Material Design Lite Material UI Materialize MobX Mocha Moment Next.js Nightwatch.js Numeral OOCSS OPTIONS PATCH POST PUT Parcel PostCSS Proton Native Puppeteer Radium Ramda Reach Router React React 360 React Intl React Native React Native Windows React i18next React on Rails Redux Redux Better Promise Redux Form Redux Observable Redux Persist Redux Phoenix Redux Saga Redux Thunk Redux-First Router Relay Rematch Reselect Rest Rogue Rollup Router5 Routing RxJS SMACSS SUITCSS Sass/CSS Selenium Semantic UI Server Side Rendering Sinon State Management Styled Components Styling Stylus SuperAgent Tape Task Runners Terminal Type Checkers TypeScript Unit Testing Utility Libraries Webdriver Yarn axios classnames css delete fetch gulp html lodash npm npm Scripts pnpm propTypes react-router shell testing urql webpack 数据结构 服务端渲染 算法 终端 设计模式
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程