React学习途径和资料分享

这段时间因为项目的原因,要做web前端,趁此机会调研了一下当前前端的技术,根据调研的结果,React毫无疑问是现在的NO.1,遂决定入坑学一下React。

工欲善其事必先利其器,搜集整理网上资料制定了一个学习React的基础路线,希望能帮助自己快速的入门React。也跟大家分享一下。

文章大纲如下:

1 React学习“8”步走
2 学习资料总结

First of all

为了稳固基础,这个React学习的基础路线,我们一定要逐步地来进行学习。

不要想着通过接触 React 来将 ES6 + Webpack + Babel + React + Routing + AJAX 这些知识一次性学好。

欲速则不达!

在文章的最后,我将一些相应的资料也做了相应的罗列,大家可以根据自己的需求查看、下载。

1 React学习“8”步走

第0步:JavaScript

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

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

第0.5步:NPM

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

npm install

第1步:React

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

第2步:构建后摒弃

一旦你完成了 “Hello World” 的基础课程,你将如何去学习 ”think in React” 的课程。

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

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

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

第3步:Webpack

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

在这里,推荐一篇名为《React+Webpack快速上手指南》的文章,作为对 Webpack 的简介。

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

第4步:ES6

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

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

第5步:Router

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

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

下面几个链接可帮助你基本掌握Router
初入react-router新手入门
react-router学习笔记之入门
React Router的一个完整示例
React路由管理 —— React Router 总结
React-Router 中文简明教程

第6步:Redux

React 只是 DOM 的一个抽象层,并不是 Web 应用的完整解决方案。
有两个方面,它没涉及。

  • 代码结构
  • 组件之间的通信

对于大型的复杂应用来说,这两方面恰恰是最关键的。因此,只用 React 没法写大型应用。

为了解决这个问题,2014年 Facebook 提出了 Flux 架构的概念,引发了很多的实现。2015年,Redux 出现,将 Flux 与函数式编程结合一起,很短时间内就成为了最热门的前端架构。

构建一次性的应用程序。通过些许的 Redux 经验,去逐渐理解其背后的工作原理。

Redux 中文文档
Redux 入门教程

2 学习资料总结

除了上面的资料之外,我还准备了一些较为完整的资料,由浅及深的介绍了React的知识,认真仔细的看完这些书籍,并实践其中的代码,相信一定能够掌握React的开发。

书籍篇

学习书籍是最高效的方法,能迅速带你了解某个知识的整个框架结构,由表及里。

深入REACT技术栈.pdf
react快速上手开发完整版.pdf
深入浅出React和Redux.pdf

网站篇

网站中总结的知识,是对某类知识的一个细化,更加专注于某类问题的解决方法
React官网的中文版(重要资料)
React.js 小书

视频篇

慕课网视频
51CTO视频
百度网盘视频 密码:s0fc

P.S. 上面的书籍篇、网站篇和视频篇部分努力学习好之后,也基本算是对React入门了,后面就是通过项目去不断加深自己的理解。

image.png

祝大家学有所成!!!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,752评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,100评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,244评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,099评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,210评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,307评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,346评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,133评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,546评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,849评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,019评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,702评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,331评论 3 319
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,030评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,260评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,871评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,898评论 2 351

推荐阅读更多精彩内容

  • React的学习资源 这个文章好久没有更新了,资源算比较老旧的了,毕竟前端更新还是非常快的。 半年不学习,都不知道...
    izhongxia阅读 23,190评论 11 629
  • 这是一个好的方法,不仅仅是工作中,生活中一样实用! 或者创业或者做事情或者旅行。 可以把项目捋一捋,看看哪些没有做...
    乌龟的慢生活阅读 504评论 0 1
  • 那一夜,你在灯火阑珊处, 那一夜,你面朝大海背对人, 那一夜,海风吹拂,你的发丝飘飘, 那一夜,晚风撩拂你的裙。 ...
    小启明星阅读 382评论 1 14
  • 今天推荐一本书,书名叫做《从幼儿园到大学的零用钱计划》。 作者保罗·W·利米特,是一位具有15年工作经验的职业财务...
    芸的思考阅读 1,246评论 4 3
  • 人生不能过度理想化,因此对人生的想象不可过度,如果过度那很可能要受到挫败,更是一种自我加压和自我折磨。虽然如此...
    来喜wzf阅读 303评论 0 1