教你如何打好根基快速入手react，vue，node

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

又假如你是在堆砌一个结婚蛋糕：能由于上半部分装饰起来更有趣，而直接忽略了下半部分？

不行吗？

固然不行。众所周知，这些作法只会致使失败。

所以，不要想着经过接触 React 来将 ES6 Webpack Babel React Routing AJAX 这些知识一次性学会。由于想一下，就能明白这难道不正是致使学习失败的缘由吗？

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

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

制定该路线的主要目的在于：使你在学习过程当中避免头脑不堪重负。所以，请脚踏实地地去学习 React 吧。

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

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

可假若早已熟知 ES6 所带来的新特性，那么请继续。由于如你所料，React 的 API 接口在 ES5 和 ES6 两标准间存在着较大的差别性。因此对于你来讲，熟悉两种标准其特性的不一样相当重要。尽管发生了异常，你也能够经过两种标准之间的转换，寻找出普遍有效的答案。

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

npm install <package name>

）

：React
学习一个新的编程技术，咱们每每会从熟悉的 <wbr>Hello World <wbr>教程开始。首先，咱们能够经过使用 React 官方教程所展现的原生 HTML 文件来实现，而该文件包含有一些 <wbr>

script

<wbr>标签。其次，咱们还能够经过使用像 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）和 <wbr>import

五：Routing
有些人会把 React Router 和 Redux 这两个概念混为一谈 —— 可是，它们之间并无任何的关系或依赖。所以，你能够（也理应）在深刻 Redux 以前学习如何去使用 React Router。

因为在以前“think in React”的教程中，积累了坚实的基础。所以，相比于第一天学习 React Router，咱们此时更能从基于组件（component-based）的构建方式中，领悟出更多的精髓。

六：Redux
Dan Abramov，做为 Redux 的创造人，他会告诉大家不要过早地接触 Redux。其实，这是有原因的 —— Redux 其复杂度在早期的学习过程当中，将会带来灾难性的影响。

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

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

非步骤
在前面列出的步骤中，你曾否看见过”选择一个模板项目“的字眼吗？并无。

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

该如何应对
对于 React 来讲，虽然有大量的学习计划须要采起，且有大量的东西须要学习 。

但一切须要循规蹈矩，一步一脚印。

如何快速的学会使用VUE##
用vue的朋友大都用过jQuery，并且都感受jQuery用得很顺手，要控制哪一个元素就控制哪一个元素,但这里我不是要讲为何要用vue，而是讲如何快速的学会使用VUE，从实现方法的角度来说。
1、输入与输出场景：一个文本框的内容显示到div或label等元素内

jQuery的实现方式:

$('#divId').text($('#txtId').val())

Vue的实现方式：

<input type='text' v-model="inputvalue">
<div>{{inputvalue}}</div>
vue不用作额外的工做，只要在标签内绑定好vue数据就能够
2、表格修改场景：一个数组循环生成一个Table，而后对每行编辑

jQuery的实现方式：A、js生成字符串，而后写入div中；B、引用模板方法，而后写入模板展现区；
对table中的修改，读出修改行的文本数据，修改后替换，流程复杂，代码量不小，我就不上代码了；
Vue的实现方式：##
在tr标签中增长v-for="(item,index) in tabledata"方式实现，对tabledata的直接增删改后无需对展现的table标签作任何操做；
3、事件：button事件的绑定

这个和jquery相比，基本上差很少，jQuery可在页面加载事件中绑定事先写好的方法，也可直接用onEvent方式绑定事先写好的方法，vue是用@事件="事先写好的方法名称"来绑定，因此这个没什么好说的

总结：用vue开发时，要想着如何经过修改数据来改变显示内容；用jQuery开发时，要想着如何经过选择器来直接改变显示内容；这是二者最大的区别；

学习Node的总结的线路##
一.Node以JavaScrip为实现语言

Node起源于2009年，当时Ryan Dahl正在探索基于对功能web的服务器的探索，而Ryan将JavaScript最为首选，是由于他发现设计共性能的web服务器应该具有事件驱动，非阻塞I/O操做，而相较于其余语言，JavaScript能够知足这种需求而且学习起来的门槛低
二.Node名字的真正含义

刚开始Ryan称项目为web.js，可是项目的发展超过了他起初单纯开发一个web服务器的想法，编程了一个构建网络应用的一个基本框架，能够在此基础上构建更多东西，因此将起名为Node，表示每个node进程构成了网络应用中一个节点。
三.Node为何这么火？

因为gooleV8引擎的发布，commonJS规范的提出，不断完善了JavaScript。并且在开源社区GitHub上，Node高居第二，并且nmp上面模块的数量和下载量也很是的惊人，而且express,socket.io的优秀框架有机构的排名
四.Node给JavaScript注入了新的力量

JavaScript做为一门图灵完备的语言，长久以来却只能限制在浏览器沙箱中运行，不过在Node中，JavaScript却能够随意的访问本地文件，搭建webSocket服务器，能够链接数据库，能够像webWorkers同样玩转多进程
五. Node无与伦比的优点

异步I/O操做，就如同发起了Ajax请求
事件与回调函数，事件具备轻量级，松耦合，关注事务特色
单线程，与其他线程不共享任何状态
跨平台，linux和window下均可以运行
六 .学习Node的总结的线路

nodejs基础视频，点击收看nodejs框架express，socket学习视频深刻浅出Node.js动手实践node.js小案例