React 学习路线

以下所谈及的,就是为你定制的 React 学习路线。

为了能稳固基础,我们一定要逐步地来进行学习。

倘若你正在建造一间房子,那么为了能快点完成,你是否会跳过建造过程中的部分步骤?如在具体建设前先铺设好部分石头?或直接在一块裸露的土地上先建立起墙面?

又假如你是在堆砌一个结婚蛋糕:能因为上半部分装饰起来更有趣,而直接忽略了下半部分?

不行吗?

当然不行。众所周知,这些做法只会导致失败。

因此,不要想着通过接触 React 来将 ES6 + Webpack + Babel + React + Routing + AJAX 这些知识一次性学好。因为想一下,就能明白这难道不正是导致学习失败的原因吗?

既然我把该文章称作是一条学习路线,那么每一次都应该走好每一步。既不要尝试去跨越,也不要贪步。

一步一脚印。若把其置身于每一天的那么一点时间,那么也许几周就能把整个学习完成。

制定该路线的主要目的在于:使你在学习过程中避免头脑不堪重负。因此,请脚踏实地地去学习 React 吧。

当然,你也可以为整个学习过程制定一个可打印的 PDF 文件,以便在学习过程中能够查记。

第零步:JavaScript

在学习之前的你,理应对 JavaScript 有所了解,或至少是 ES5 标准下的 JavaScript。可若了解甚少,那么,你就应该停下手头上的工作,学习好该基础部分后,才可迈步前行。

可倘若早已熟知
ES6 所带来的新特性,那么请继续。因为如你所料,React 的 API 接口在 ES5 和 ES6
两标准间存在着较大的差异性。所以对于你来说,熟悉两种标准其特性的不同至关重要。尽管发生了异常,你也可以通过两种标准之间的转换,寻找出广泛有效的答案。

第半步:NPM

NPM 在 JavaScript 世界中,可谓是软件管理方的王者。然而,在这里你却并不需要学习太多关于 NPM 自身的东西。只要在安装好后 (连同 Node.js),学习如何使用其安装软件即可。(npm install <package name>

第一步:React

学习一个新的编程技术,我们往往会从熟悉的 Hello World 教程开始。首先,我们可以通过使用 React 官方教程所展示的原生 HTML 文件来实现,而该文件包含有一些 script 标签。其次,我们还可以通过使用像 React Heatpack 这样的工具来快速上手。

尝试一下该三分钟运行起 Hello World 的教程

第二步:构建后摒弃

由于这一步是一个棘手的中间过程,所以往往会有大量的人忽略了该步。

谨记,请勿犯这样的错误。因为,倘若对 React 的概念没有一个稳固的掌握而擅自前行,那么,最后只会对自己的大脑搪塞过多的知识,以致遗忘。

当然,该步需要一定时间的斟酌:该构建什么呢?是工作中的一个原型项目?还是能贴合于整个框架的一些 Facebook 克隆项目呢?

其实,我们应该构建的都不是这些项目。因为,它们要不是包裹过甚,以致无甚可学;要不是过于庞大,以致成本过高。

尤其是工作中的“原型项目”,它们更为糟糕。因为在你心目中,早已明白这些项目并不会占有一席之地。况且,该类项目往往会长期驻留在原型阶段,或变成线上的软件。最终,你将无法摒弃或重写。

此外,把原型项目当作学习的项目将会为带来大量的烦恼。对于你来说,你可能会就未来的因素考虑一切可能发生的事情。而当你认为这不仅仅是一个原型的时候,你就会产生疑惑 —— 是否要测试一下呢?我应该要保证架构能延伸扩展……我需要延后重构的工作吗?还是不进行测试呢?

为了解决该问题,我希望能用上我所写的一篇指引《为 Augular 开发者所准备的 React》:一旦你完成了 “Hello World” 的基础课程,你将如何去学习 ”think in React” 的课程。

在这里,我有一些个人的提议给到大家:那就是,理想的项目是介乎于 “Hello World” 和 ”All of Twitter“ 之间。

另外,请尝试去构建一些官方文档列表中所展示的项目(TODOs、beers、movies),然后,借此学会数据流(data flow)的工作原理。

当然,你也可以把一些已有的大型 UI 项目(Twitter、Reddit、Hacker News等)分割成一小块来构建 —— 即把其瓜分成组件(components),并使用静态的数据去进行构建。

总的来说,我们需要构建的,理应是一些小型且可被摒弃的应用程序项目。这些项目必须是可摒弃的。否则,你将深陷于一些不为重要的东西,如可维护性和代码结构等。

值得提醒的是,如果你曾经订阅于我,那么当《为 Angular 开发者准备的 React》发布的时候,你将会第一时间收到通知。

第三步:Webpack

构建工具是学习过程中的一个主要的难点。搭建 Webpack 的环境会让你感觉是一件繁杂的工作,而且,完全不同于 UI 代码的书写。这就是为什么我要将 Webpack 放在了整个学习路线的第三步,而不是第零步。

在这里,我推荐一篇名为《Webpack —— 令人疑惑的地方》的文章,作为对 Webpack 的简介。此外,该文章还讲述了 Webpack 本身所具有的一些思考方式。

一旦你清楚 Webpack 所负责的工作(打包生成各种的文件,而不仅仅是 JS 文件) —— 以及其中的工作原理(适用于各种文件类型的加载器),那么,Webpack 对于你来说将会是一个更为欣喜的部分。

第四步:ES6

如今,进入了整个路线的第四步。上述的所有将会作为下面的铺垫。之前,在学习 ES6 过程中,所学到的部分也将会让你写出更为利落简洁的代码 —— 以及性能更高的代码。回想起一开始那时候,某些问题本不应卡住在那 —— 但现在的你,已然清楚知道为啥 ES6 能完美地融合在其中。

在 ES6 中,你应该学习一些常用的部分:箭头函数(arrow functions)、let/const、类(classes)、析构(destructuring)和 import

第五步:Routing

有些人会把 React Router 和 Redux 这两个概念混为一谈 —— 但是,它们之间并没有任何的关系或依赖。因此,你可以(也理应)在深入 Redux 之前学习如何去使用 React Router。

由于在之前“think in React”的教程中,积累了坚实的基础。因此,相比于第一天学习 React Router,我们此时更能从基于组件(component-based)的构建方式中,领悟出更多的精髓。

第六步:Redux

Dan Abramov,作为 Redux 的创造人,他会告诉你们不要过早地接触 Redux。其实,这是有缘由的 —— Redux 其复杂度在早期的学习过程中,将会带来灾难性的影响。

虽然,在 Redux 背后所隐藏着的原理相当简单,但想要从理解跃至实践,却是一个很大的跨度。

因此,重复第二步所做的:构建一次性的应用程序。通过些许的 Redux 经验,去逐渐理解其背后的工作原理。

非步骤

在前面列出的步骤中,你曾否看见过”选择一个模板项目“的字眼吗?并没有。

若仅通过挑选大量模板项目中的其中一个,去深入学习 React。那么,后面将只会带来大量的疑惑。虽然这些项目会含有一切可能的库,且规定要求一定的目录结构 —— 但对于小型的应用程序,或开始入门的我们来说,并不需要。

也许你会说,“Dave,我可并不是在构建一个小应用。我所构建的,是一个服务于上万用户级别的复杂应用!”……那么,请你重新阅读一下关于原型的理解

该如何应对

对于 React 来说,虽然有大量的学习计划需要采取,且有大量的东西需要学习 —— 但一切需要循规蹈矩,一步一脚印。

虽说我已提供了一系列的步骤,那如果你在学习的过程中会忘记了步骤的顺序或跳过了某一步,那怎么办?

你会想,要是有一个能监督的方式就最好了……

的确是有:我已经把上述的学习路线整理成一个可打印的 PDF 文件,您仅需注册便可获取!

时间: 2024-10-20 07:23:05

React 学习路线的相关文章

React Native 从零到高级- 0基础学习路线

React Native QQ交流群(美团,饿了么,阿里的大神都在里面):576089067 React Native  从0 基础到高级 视频教程正在重录中,要了解最新进度可以关注菜鸟窝微信公众号(下图),旧版视频教程可以点击这里在线学习 学习路线(文章版),江清清老师出品,点击这里关注江清清 ,同时可以关注一下他的课程 基础入门:1.React Native For Android环境配置以及第一个实例2.React Native开发IDE安装及配置3.React Native应用设备运行(

react简单学习路线(实用版)

学习一门新的技术之前有必要了解一下该技术在专业领域的评价,使用的领域,以及整体的学习路线,总之尽可能多的在入坑之前了解相关方面的信息.不要什么都不去查就直接学了,这个是很愚蠢的!!!!! 首先来看一篇文章,它简单讲解了学习react的流程,确实很有帮助,看完之后再开始你的学习,这样会避免走很多的弯路. http://www.jianshu.com/p/ed55b366cd96 接下来可以去http://www.runoob.com/react/react-tutorial.html 这个地方学习

给想转行学习web前端的朋友提些学习建议及学习路线

第一:在如今这个前端的市场下,你如果太过于着急找工作而去学习,你一定找不到,有一个很简单的道理,任何东西求快没有用,首先你要会,学的成了半吊子,看点视频就去找工作,没人接收. 第二:如果没有一套系统的学习路线和方案,这看看,那里看看,依旧学了之后还是浪费时间,根据我的学习经历来看,任何人学习任何东西,需要一气呵成,在这段时间内,学习什么就一刻都不能松懈,今天看点视频,明天有事,不看了,这样没啥意义. 第三:在如今这个IT市场,不建议任何人去线下培训四个月,就目前来看四个月的时间培训出来的新手,大

Android 技能图谱学习路线

这里是在网上找到的一片Android学习路线,希望记录下来供以后学习 1Java 基础 Java Object类方法 HashMap原理,Hash冲突,并发集合,线程安全集合及实现原理 HashMap 和 HashTable 区别 HashCode 作用,如何重载hashCode方法 ArrayList与LinkList区别与联系 GC机制 Java反射机制,Java代理模式 Java泛型 Synchronized原理 Volatile实现原理 方法锁.对象锁.类锁的意义和区别 线程同步的方法:

2018年web前端学习路线图,WEB前端开发新手学习路线

前端的的技术一直在变化,更新和变革,现在基本是三驾马车(vue,angualr,react)主导整个前端框架,但是无论对于新人或者有经验的程序员,这些知识在必须掌握,下面给大家一份详细的表单: html的语法.格局,常用的标签极端作用,了解标签的嵌套.学习运用firefox+firebug或许chrom的调试工具,可以运用这些工具调试html.css.js.断点调试.抓包 怎么引入css.js.了解id.class属性的区别,学会css的常用选择器,了解盒子模型(padding,margin,b

2019最全的WEB前端 系统学习路线,从基础到企业实战

近几年 前端 的受欢迎程度可谓是扶摇直上,当然了学习的人也是愈来愈多.一些学习前端 的小白在学习初期,总希望能够得到一份 前端 学习路线图,小编经过多方汇总为大家汇总了一份前端 学习路线图. 对于一个零基础的想学习 前端 的朋友来说,学习方法很重要, 学习方法不对努力白费 一定要有一个正确的学习线路与方法 如果你在学习 前端 的过程当中有遇见任何问题,可以加入我的 前端 交流学习秋秋qun:七二八.七零零.四九一,多多交流问题,互帮互助,群里有不错的学习教程和开发工具.学习 前端 有任何问题(学

前端开发学习路线_零基础如何学web前端_从小白到大神进阶

下面给大家讲解一下前端需要掌握哪些技术和学习路线Web前端基础知识:一.前端相关概念建立主要内容:浏览器的概念介绍: 浏览器的作用.工作方式浏览器的概念介绍: 浏览器的作用.工作方式HTTP协议: 协议产生的原因.作用.及内容页面加载流程:当用户打开浏览器,输入地址栏并按下回车之后发生的事情二.HTML-CSS-JS基础-jQuery学习内容:HTML及HTML5:理解浏览器如何解析HTML.基本的语法规则.不同标签的使用方式.嵌套方式CSS:理解层叠式样式表的语法规则.各种盒模型及常用布局CS

零基础小白转行学习前端的学习路线

零基础如何学web前端_从小白到大神进阶:下面给大家介绍一下学习路线:Web前端知识总的可以分为三个部分:初级知识,中级js,高级框架一,初级的主要内容:浏览器的概念介绍: 浏览器的作用.工作方式浏览器的概念介绍: 浏览器的作用.工作方式HTTP协议: 协议产生的原因.作用.及内容页面加载流程:当用户打开浏览器,输入地址栏并按下回车之后发生的事情HTML-CSS-JS基础-jQuery学习内容:HTML及HTML5:理解浏览器如何解析HTML.基本的语法规则.不同标签的使用方式.嵌套方式CSS:

JavaScript历史以及前端学习路线

大家经常跟我要一些 web前端的学习路线和一些vue.angular.react教程,我自己很懒,自己没整理过系统的教程,因为网上也多的是,有时间我会普及一些入门和提升建议,思想提升了,路线明确了自然就好了,于是就整理了下这篇javaScript简介介绍帮助大家了解前端,学习资料和学习路线,干货福利内容 在文末↓JavaScript历史要了解JavaScript,我们首先要回顾一下JavaScript的诞生.在上个世纪的1995年,当时的网景公司正凭借其Navigator浏览器成为Web时×××