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

原创 黎云锐 随笔 前端 2992阅读 22 天前 举报

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

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

不行吗?

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

因此,不要想着通过接触 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,从实现方法的角度来讲。
一、输入与输出场景:一个文本框的内容显示到div或label等元素内

jQuery的实现方式:

$('#divId').text($('#txtId').val())
Vue的实现方式:
<input type='text' v-model="inputvalue">
<div>{{inputvalue}}</div>
vue不用做额外的工作,只要在标签内绑定好vue数据就可以
二、表格修改场景:一个数组循环生成一个Table,然后对每行编辑

jQuery的实现方式:A、js生成字符串,然后写入div中;B、引用模板方法,然后写入模板展示区;
对table中的修改,读出修改行的文本数据,修改后替换,流程复杂,代码量不小,我就不上代码了;
Vue的实现方式:##
在tr标签中增加v-for="(item,index) in tabledata"方式实现,对tabledata的直接增删改后无需对展示的table标签做任何操作;
三、事件: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小案例

本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:582735936,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复