“十步杀一人,千里不留行” 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#开发,可能会有一些不熟悉的语法规则。别担心,如果你看到什么不明白的东西,就把它放到一边。等完成了第四、五步的学习,你就能掌握这些内容了。

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。它是一个应用脚手架。它可以帮助你很快地构建一个应用。这部分内容留给你自己阅读,但是它有个潜在缺点是没有服务器渲染。如果你需要这个功能,就要自己添加。

原文地址:http://blog.51cto.com/13722730/2114996

时间: 2024-10-07 02:22:57

“十步杀一人,千里不留行” React的五步夺命诗的相关文章

React中引入HightCharts五步走~

1.安装: npm install highcharts --save 1-2.指定版本安装: npm install [email protected] --save 2.引入: 2-1.基础配置: import Highcharts from 'highcharts/highstock'; 2-2.其他图标会用到的配置: import HighchartsMore from 'highcharts/highcharts-more'; 具体会用到哪些可以看官方提供的图标demo的代码页面 2-

安卓开发基础知识0(五步搞定Android开发环境部署——非常详细的Android开发环境搭建教程)

需求说明:安卓开发 内容       :安卓开发所需的环境搭建 来自       :时间的诗 原文:http://www.cnblogs.com/zoupeiyang/p/4034517.html 参考:http://jingyan.baidu.com/article/bea41d437a41b6b4c51be6c1.html 引言 在windows安装Android的开发环境不简单也说不上算复杂,本文写给第一次想在自己Windows上建立Android开发环境投入Android浪潮的朋友们,为

还在使用pdf、word简历?简单五步实现github托管个人逼格简历

写在前面: 什么是git.github? git 版本控制工具 github 通过git工具做的版本控制的项目托管平台 项目开发肯定不止一个程序猿,多个程序猿针对同一个文件进行代码读写操作时,是先保存程序猿a还是程序猿b呢?这就很容易冲突,所以就有了git这种版本控制工具解决项目更新.慢慢的随着开源精神的发展以及在线的需求就有了github项目托管平台,对于git本地服务来说,github就是一个远程的仓库. 逼格在哪里? Github已经取代Sourceforge,成为最活跃的代码交流社区,一

变革家五步投资法学习体会

变革家(Reformer),专注创业项目分析,帮股权投资者把好第一关! 拆解学院,是变革家的一个王牌课程,通过每周微信语音和网站内容形式,大力提升股权投资者的投资水平. 作为一名变革家的顶级Fans,最近认真完整地听取了其中的第十七课,"'五步投资法'精益投资,让你从业余到专业!" 之前都是在网站上学习文字版的内容,这次是认真参加了"微信课堂",及时学习了下. 自我感觉,这一课,非常好,可以说是"变革家课程体系的核心",所有的项目拆借报告.股权众

在Spring3 MVC中五步配置集成注解方式Hibernate3

最近在搞一个WEB项目,以前在公司做项目用的都是JPA做ORM持久层,这次这个项目是我自己接的,我决定改一下,用Hibernate3来做ORM持久层.于是我网上搜索了Hibernate3怎么配置集成到Spring3 MVC上,发现千奇百怪,而且很多都是不是基于注解方式配置,显然那些文字上面的配置方式已经跟如今的Hibernate3注解支持方式脱节了,于是我决定自己搞一把,首先说一下网上那些配置方式的不好的地方,很多文章都提到要jdbc.properties文件与Hibernate config文

java入门第五步之数据库项目实战【转】

在真正进入代码编写前些进行一些工具的准备: 1.保证有一个可用的数据库,这里我用sql server 2000为例,2.拥有一个ide,如ecelise或myeclipse等,这里我使用的是myeclipse 8.5 3.数据库连接的架包: 这里数据库的安装就不说了,如果你安装的sql server 2000的话,你在使用jdbc进行连接时还需要打上sp3补丁: 一切准备就绪后我们就开始进入正题了: 1.首先我们在file--->New---->Web Project(也可以再Package

【数学建模的五步方法】

第一步,提出问题. ·列出问题中涉及的变量,包括适当的单位. ·注意不要混淆变量的常量. ·列出你对变量所做的全部假设,包括等式和不等式. ·检查单位从而保证你的假设有意义. ·用准确的数学术语给出问题的目标. 第二步,选择建模方法. ·选择结局问的一个一般的求解方法. ·一般地,这一步的成功需要经验.技巧和熟悉相关文献. 第三步,推导模型的数学表达式.·将第一步中得到的问题重新表达成第二步选定额建模方法所需要的形式. ·你可能需要将第一步中的一些变量名改成与第二步所用的记号一致.·记下任何补充

从一名打工者蜕变成一名企业家的五步曲

无数打工者每天皆梦想能于某天开创自己的公司.其总觉得自己拥有着进入一个领域并打造出一个成功的事业所需的正确的技能或者正确的创业点子.但,这些人到现在都还是只是在脑袋里意淫着而已,他们并没有真正的付诸行动去开始追求他们的创业点子.这又是为何呢? 如果你有一个可以创业的点子但又没有真正放手去干,那是因为什么原因拖了你后腿呢? 对于很多有抱负的企业家来说,缺乏如何启动一个可以催生出一家公司的项目的蓝图,让他们举步维艰.大部分人甚至不知道如何举出第一步,剩下一部分人却又不确定这种职业生涯是否是他们自己想

Ajax学习(三)——XMLHttpRequest对象的五步使用法

    Ajax的核心技术是XMLHttpRequest对象,它可以在不向服务器提交整个页面的情况下,实现局部更新网页.通过这个对象,Ajax可以像桌面应用程序那样只与服务器进行数据层的交换,而不必每次都刷新界面,也不必每次将数据处理的工作都交给服务器来做.这样既减轻了服务器负担又提高了响应速度,还缩短了用户的等待时间.通常一个Ajax的实现过程有五步,下面我们以上篇博客中的小实例为例来逐步学习. 1.建立XMLHttpRequest对象. IE浏览器将XMLHttpRequest实现为一个Ac