[前端工坊]如何学习React:一个五步计划

文章来自微信公众号：前端工坊(fe_workshop)，不按期更新有趣、好玩的前端相关原创技术文章。若是喜欢，请关注公众号：前端工坊
版权归公众号全部，转载请注明出处。
译者:田腾

我最近查看邮箱的时候注意到一封邮件。邮件内容是关于.NET的开发人员学习Node.js和React构建产品。邮件中的如下内容吸引了个人注意：

React的特性和咱们以前用到的技术彻底不一样。咱们一直在和它战斗。其中的一个难点是找到优质的学习资源。网上有太多不一样的文章和教程，其中一些内容已经没有学习价值。React文档是不错的，可是咱们不想在它上面花太多时间，咱们但愿能有快速入手的资料。
在过去的两年多的时间里，我一直致力于React项目的开发，有着丰富的React学习经验。在这个过程当中，我造成了如何学习React的一些建议，包括学习资源、学习顺序以及学习要点。

如下是如何学习React的一个五步计划。每一步都尽量向你指出免费的资源。

本文最终会以“其余须要考虑的事项”一节做为结尾。你可能常常听人说React只是一个视图库。虽然在某种程度上是这样的，但它更是一个庞大而充满活力的生态系统。最后一节将介绍五个主要步骤中没有涉及的重要事项。这些东西对于构建一个项目并非必须的，但当你深刻研究如何利用React来构建项目的时候，你应该仔研究这部份内容。

第一步- React文档+Code Sandbox

是的，你应该从阅读React文档开始学习。文档写得很好，读完它你将理解React的基本术语和概念。上面分享的连接指向文档的第一部分，安装。这儿有一个CodePen的连接能够帮助你上手。

另外一个我更喜欢的学习资源是Code Sandbox。我以为它提供了基础React应用的更好感受。你可使用它来实践文档里的内容。

在React文档的Create a New APP标签下面有另一个可作选择的学习连接，能够参照这个Create React App连接里的内容在你本地机器上构建开发环境。Create React App是一个很好的工具，立刻使用起来也许会对你有所帮助。每一个人都有本身最有效的学习方法，你能够根据本身需求从以上学习资源中选择。

我我的以为，在你刚开始学习的时候，Create React APP里的内容会加剧精神负担。个人建议是在初学阶段使用Code Sandbox或者Code Pen，注重基本概念而不是开发环境。你能够随时回过头来构建环境。

关键点: 我建议阅读React文档的快速入门和高级指南。我知道并非每一个人都喜欢阅读文档，尤为是那些视觉或听觉学习者。若是你在努力克服阅读文档的困难，那么你须要关注的重点内容是快速入门里的以下部分：

• JSX简介
• 元素渲染
• 组件&Props
• State&生命周期（极其重要！）
• 事件处理
• 组合vs继承
• React理念

重申一下，我建议完整阅读这两部份内容，但学习的最低限度是以上列出的重点内容。重点内容包含了你须要的基本概念。

第二步- React基础课程

通过第一步学习，你应该对React是什么有所了解。也许并无清楚全部细节，但你应该开始在脑海中造成一些概念。下一步是React训练的基础课程。它是很好的免费课程，做者是Tyler McGinnis，他不但知识渊博，并且他的授课易于理解。

为何推荐这门课程？若是你是一个视觉或听觉学习者，这个课程将对你有所帮助。它包含了构建项目须要的基础和要点，像webpack和获取远程数据。

在课程结束时，你能够掌握构建一个基本的React应用所需的内容。根据你学习React的目标，你甚至有可能在完成课程时学到了你须要的全部信息。而大家中的大多数人，那些想学习React来构建客户端项目的人，须要继续学习下去。

更新：难以想象的是，在本篇文章发表的同一天，这个课程开始收费了。我经过联系Tyler得知他发起了一项新事业，所以不能再免费提供该课程。他新网站每个月订阅费用是20美圆，若是按年订阅更便宜一些。即使如此，我依然推荐该课程做为第二步学习的内容，缘由以下：

• 课程质量高
• 没有可与该课程媲美的免费资源（但若是你负担不起这门课程，我稍后会给出两个替代资源）
• 它是地道的React

还记得文章开头我提到的挣扎在学习React道路上的开发团队吗？他们很难找到指引"正确"作事方法的资源。Tyler指出了正确的方法。

若是这门课程不在你的预算以内，这里有两个免费的替代资源：

• egghead.io上的React基础 ，做者是Joe Maddalone
• YouTube上的React JS 教程（学习前8章，暂时先略过Flux这部分），做者是LearnCode.academy

这两个并不能彻底代替Tyler课程，但他们能让你学到80%的内容。

关键点: 经过这些课程，你须要学习这些内容：

• 加深理解React文档里的原理
• 学习React项目构建工具，特别是webpack
• 无状态的功能组件
• 路由（如何从一个页面导航到下一个页面）
• 获取异步数据
• 另外一个选择

关于Wes Bos创做的课程我只据说过各类优势。若是你预算充足，能够考虑他的React Beginners课程。这个课程价格不便宜，根据不一样的选项，须要花费89美金-127美金。若是你老板付钱，这本书也许会有所帮助。为了了解他的教学方式，能够尝试一下他的免费课程，JavaScript 30

第三步- 学习ReactBits

下一步是学习ReactBits，这是WalmartLabs的Vasa提供的很是好的学习资源。它并非一本书，更像是以一种很是有用的大纲格式呈现的一系列小建议，能够用来填补其余教程留下的知识缺口。

关键点: 这个文档很是有用。并且它是个按期更新的资源，你能够随着React的不断发展时再次访问。我再次建议阅读全部的内容，但若是你难以作到，这儿是须要关注的重点：

• 设计模式和技术（最重要的建议应该在这里）
• 反面模式（别的不说，必定要阅读这一部分）
• 性能建议

ReactBits的另外一个优势是它的每一个建议都给出了引用，所以你能够对相应主题作出更深刻的研究-至少可让你理解做者为何认为给出的建议是最佳实践。

文章插曲

到目前为止，咱们已经给出了一些教授如何建立简单应用的资源。但在继续学习以前，咱们须要停下来思考一下在一个React应用变得更复杂的时候会发生什么。随着React应用的扩展，会出现一些常见问题。例如，如何在多个组件之间共享状态？在添加了功能以后，如何清除已经分散在整个应用程序中的API调用？

Facebook给出了这些问题的答案-Flux架构。在Redux面世一段时间以后，Dan Abramov建立了Flux的一个实现叫作Redux。它在React社区和其余领域都有很大的影响力。Facebook很喜欢Dan的工做，聘请他成为React团队的一员。

我推荐你学习Redux，但你应该知道还有其余的选择，最著名的就是MobX。在本文我不会评述Redux vs. MobX的优缺点。我只给出广泛共识是MobX更易于学习，可是Redux更适用于大型项目。

Redux被为很是适合大型项目的缘由之一在于，Redux就像React自己，而不只仅是被宣称的简单的库。它也是一种架构模式，能够为你的应用带来不少可预见性。对于有不少灵活组件（和开发人员）的大型项目来讲，这是一项巨大的资产。

Redux最后值得注意的一点是，它也一个很是强大的生态系统。Redux支持中间件，有大量的库可用来添加调试、数据处理、用户浏览、认证、路由等等功能。

我推荐学习Redux。若是你研究了一下以为不适合你，那么MobX也许会更合适。这些只是工具，使用最能帮助你的。

我推荐观看Preethi Kasireddy 在React2017大会上的一个演讲，主题是Redux vs. MobX，你能够从中知道他们各自的优缺点。

最后一点…… 若是Redux或MobX对你的应用来讲过重了，考虑一下容器组件模式。它能够经过使逻辑和表现分离来优化性能。它能够帮助查看API调用和其余逻辑所在的位置，可能包含你改进应用所须要的所有内容。

第四步- Redux文档 + Redux视频系列

Redux的文档很好，你应该从它开始学习。有一点须要注意的是，Redux是函数式编程风格，若是你以前是Java或C#开发，可能会有一些不熟悉的语法规则。别担忧，若是你看到什么不明白的东西，就把它放到一边。等完成了第4、五步的学习，你就能掌握这些内容了。

Dan Abramov有一系列学习视频叫作Redux入门。他们能够在Egghead.io上免费观看，是很好的学习资源。个人同事认为这个视频使得React文档易于理解。若是你更擅长从视频教程里学习，能够从这个视频开始学习，但最后必定要看文档内容。文档里有一些能够帮助你的只是在视频里是省略掉的。

关键点: 你不须要精通如下内容，可是应该对这些Redux的术语和概念有个基本了解：

• Redux三原则
• Actions
• Reducers
• 数据流
• 搭配 React
• 异步 actions
• 异步数据流
• 中间件

若是你完成这些资源的学习后，感到稍微有些了解，那么你已步入正轨。Redux开始学习的时候是一件既容易又困难的事情。容易的是理解每一个独立的概念。困难的是把每一部分综合起来理解。下一步的学习内容会帮助你进行综合理解。

第五步- 完整的Redux书籍 + Redux视频系列II

有一本关于Redux很是好的免费书籍，Redux全解。这是一本由开发过一系列React应用的开发人员写的书。它会帮助你学习如何构架本身的应用程序，并能深刻理解前面几步提到的概念。它也能帮助你理解函数式编程的基本概念，以及更容易地使用Redux。

请注意，这本书在LeanPub网站上的建议价格是32美圆，可是你能够免费获得它。若是你有足够的钱，建议付费。做者作得很好，值得这笔钱。

下一个资源是来自Dan Abramov的第二个视频教程-用Idiomatic Redux开发React应用程序。这个视频和前面的书有重叠的部分。你能够根据本身的学习时间和学习风格选择学习哪一个资源。若是可以作到的话，最好两个都学。

另外一个选择有一本价格39美圆的书叫FullStackReact。若是想要全套示例代码和三小时的视频教程，须要79美圆。我没有读过这本书，可是这本书的做者之一是Tyler McGinnis。我在第二步学习内容中推荐过他。

若是你资金充裕的话，这本书或许值得一读。关于本书我持谨慎态度的部分是它侧重于GraphQL和Relay。这两项技术-尤为是GraphQL-颇有意思。他们值得学习。可是，若是你将使用REST API来开发APP，可能就要推迟购买了。

关键点: 恭喜-这是最后一步了！在这一步你应该：

• 加深理解Redux文档/第一个视频里的概念
• 熟知基本的函数式编程概念
• 熟知建立和编写Redux中间件
• 熟知如何构建一个React—+Redux的应用

固然，说到软件，咱们的学习永不会停……

其余事项

学习如何构建JS应用很难，尤为是当你要构建企业级软件的时候。不管你是使用React，Angular，仍是其余的框架或者库都是如此。不过，若是你已经完整学习了以上五步，这大概须要专心学习一个星期的时间，你就掌握了构建应用的基本工具。

我还想分享一些React生态系统的其余内容，这些内容能够做为从此学习的主题。我不会详细介绍这些内容，但要注意，根据你本身项目的状况，你迟早会遇到这些问题。

Webpack

Webpack是React应用的重要打包工具。它在React基础课程中已经讲过，但你还须要深刻了解某些知识点。你能够找一些其余的学习资料，可是当你遇到困难时，可能很难找到相应例子。我推荐Emil Oberg作的一个很好的免费演讲，它包含一个连接，里面有视频中提到的代码。

另外一个很好的但收费的资源是Stephen Grider的Webpack 2 the Complete Developer’s Guide。这是一个很好的课程，在Udemy上卖10-75美圆。Udemy常常提供课程折扣，你应该可以以合适的价格买下这个课程。

服务器渲染

大多数JS框架不直接支持服务器渲染。服务器渲染的app一般被叫作isomorphic或通用应用程序。在Lullabot，咱们使用React开发不少网站，这使得服务端渲染相当重要。若是你不熟悉这个问题，大体能够理解为，服务器在给浏览器发送页面以前，会在服务器上渲染构建最初的页面。这么作有很重要的两点缘由：

第一，搜索引擎不会渲染JS。若是没有在服务器端渲染好页面，一般会严重影响你的搜索引擎优化。Meta标签和正文内容可能会丢失。若是你想让本身的应用出如今搜索结果的前面，这会有很差的影响。

第二，服务器渲染会提高APP性能。若是你已经在服务器端完成了初始渲染，那么页面将加载渲染好的初始部份内容，其他部分会在后台加载。在没有服务器渲染的状况下，全部的JS必须全被加载到浏览器，而后才渲染。这样页面加载会慢一些。

关于利用Redux进行服务器渲染，这些文档能够拿来做为良好的开端。另外一个颇有用的免费资源是Emil Ong在Hacker Noon上的帖子。当我第一次知道服务器渲染的时候，我从不少不一样的渠道进行学习。有一本能够帮助咱们的书是Konstantin Tarkus的用JS同构应用开发。这本书的Kindle版价格大概是32美圆。

若是你须要浏览器渲染并且以为有太多须要学习的东西，你能够考虑Next.js,我等下会简短得介绍一下它。

Redux Saga

Redux Saga是Redux的中间件。它在你的应用程序中充当一个反作用的位置。反作用通常是异步的，像获取数据和保存数据，它是函数式编程中的一个重要概念，也是React社区中很重要的内容。

使用Redux Saga这种中间件能够帮助应用程序的架构。它无疑会简化编写测试（参照Jest和Enzyme来学习如何测试React应用程序）。Redux Saga的缺点是增长了不少加载内容，尤为是当你不熟悉ES6生成器的时候。但从长远来看，仍是值得学习的。一旦掌握了以前五个步骤里的内容，你就能够考虑学习Redux Saga和其余Redux中间件。

Reselect

Reselect是Redux的选择器库。它能够经过计算衍生数据来提升性能。例如，若是在Redux中有一个须要计算的项目，除非参数发生变化，它是不会从新计算的，这能够用来防止没必要要的从新渲染。这对应用中的购物车、喜欢的内容、得分等部分都颇有用。

App Scaffolders

在文字的开头部分，我有提到Create React App。它是一个应用脚手架。它能够帮助你很快地构建一个应用。这部份内容留给你本身阅读，可是它有个潜在缺点是没有服务器渲染。若是你须要这个功能，就要本身添加。

另外一个选择是Zeit的Next.js。我没有用过它，但它看起来颇有趣。也许它能够帮助你开始。它能够说是（React）框架内的一个框架。它作了不少以至于自成体系，但好在它有很好的文档。我关注的是它的“黑盒”特性。在我确信能够在项目上使用它以前，我须要了解它的内部状况。我很乐意听取任何有经验人的见解。

最后……

感谢看到这里。这是一篇很长的文章。我但愿本身写的文章是“如何经过简单五步快速学习React”，但本文不是这样的。有不少须要学习的内容，而且学习永不会中止。我喜欢软件开发，但有时也会有压力。

若是你在作一个React项目，感到深深的无助，坚持住。React社区是一个大规模，活跃并乐于助人的社区。React比其余JS框架更有助于你的职业发展。坚持下去，乐在其中。

原文做者：John Hannah
原文地址：https://www.lullabot.com/arti...