分类

JavaScript 全栈工程师培训教程

作者: 阮一峰

日期: 2016年11月15日

我现在的技术方向,前端是 React,后端是 Node,时间都投入在这两方面。

最近有一种感觉,我可以融汇贯通了,使用 JavaScript 全栈解决各种问题。

最初,我只是想整理一份技术清单,理清思路。但是内容越写越多,索性就做成一个教程,放在 Github 上面。这份教程一共四章,可以在两天内学完,适合那些已掌握前端基本技能(HTML、CSS、JS)、想进一步进修、成为 JavaScript 全栈工程师的读者。

我的写作目标是内容完整、脉络清晰、通俗易懂,帮助初学者看清技术路径,快速入门。难度为入门级,不涉及深入的细节,重在理解各种技术想要解决的问题,掌握基本用法,为进一步自学打下基础。

引子:《准备工作》

  1. 知识准备
  2. 环境准备

第一讲:《前端开发的历史和趋势》

  1. 前端开发的历史演变
  2. 前端MVC框架的兴起
  3. 前后端分离
  4. 全栈工程师
  5. 前端开发的未来

第二讲:《React 技术栈》

  1. React 的基本用法
  2. React 应用的架构

第三讲:《Node 应用开发》

  1. Node 的基本用法
  2. Restful API
  3. Express 框架搭建 Web 应用

第四讲:《前端工程简介》

  1. 持续集成
  2. 静态代码检查
  3. 单元测试
  4. 功能测试
  5. 持续集成服务 Travis CI

所有内容都配有 Demo操作指导,帮助读者边学边练,保证学会。

我已经找了一个场合,试讲了一次上面的内容,觉得效果还可以。

本教程采用 GPL 许可证,你可以自由地使用它,唯一的条件是如果对内容做出任何改进,你也必须在 GPL 许可证下开源。

我也接受现场培训。如果你们公司有这个需要,可以联系我。不过,讲课费比较贵,所以还是推荐大家自学。

(完)

珠峰培训

优达学城

留言(163条)

赞,把头伸进web浏览器里面,将会一个宇宙。

说起来伤心,碰到能把测试写好的工程师,少之又少,大多是没有测试,一测就过,一上就挂 : (

阮老师太赞了

先赞一个,然后再去学习;

阮老师的每一篇文章都拜读过,对我的影响和启发非常大;感觉阮老师的文章就像技术界的一股清流,读过之后总是让人如沐春风。

赞!立贴留名。争取本周学习完!

打赏功能怎么没了,这个应该付费 ;-)

每当学习迷失的时候,就来到了这里

一入前端深似海。

感谢阮大大 Orz

阮老师功德无量啊

仰视中...

拜读过博客的很多文章,收获很大,感谢。

赞!双十一特意买了es6 支持一下阮老师!

这种无私可贵精神已经很难得了 最难得是阮一峰老师把它给实践了 佩服佩服!

小伙子不错,跟我用一样的技术栈

希望阮老师能写更多的nodejs基础资料学习~

阮老师的近两年的博客好多我都读了好几遍,每次都受益匪浅

阮老师超棒,Java的我看教程学,也很容易上手。

立帖留名...这次要完成啊!

学了这些就是全栈了呀,谢谢软哒哒!

我的沙发评论为什么没有了?

一直伸手党的我必须要留言表示感谢了,谢谢!

看了阮老师博客几年了,第一次留言,感谢前端圈有阮老师这样的布道者

我好像明白了为什么我的浏览器越来越慢.

必须支持,顶一个

太兴奋了.....

单元测试,功能测试,持续集成服务,嗯,都不熟悉的说

跟上前辈的脚步,踏上巨人的肩膀,立帖为证,感谢

谢谢你,很好奇你是什么想法,为什么要做这些?

为什么 全栈工程师 会被黑呢?我觉得挺好的啊

有没有一个连贯的示例能展示下用react+node交火,如何搭建一个blog之类的?

vue +node;

感觉前端的这些,再加上Typescript才能称得上是solution

谢谢阮老师,老师教的都是很有用的东西,培养我对js的兴趣很有帮助!

阮老师 伟大啊!!谢谢有您这样的大神!

我比较关心你里面画图的软件是用的啥?谢谢

引用爱上星云的发言:

阮老师超棒,Java的我看教程学,也很容易上手。

他还写java? 我以为都是js,css等等。

感谢阮老师,在我的前端路上有绝对的帮助!

留名感谢 阮老师是指路人

感谢阮大大倾情分享,太给力了

软大神牛逼,第一次评论,希望还能看到更劲爆的东西

引用静静的发言:

希望阮老师能写更多的nodejs基础资料学习~

这个好多了吧

谢谢分享!

我现在的技术方向,前端是 React,后端是 Node,时间都投入在这两方面。
最近有一种感觉,我可以融汇贯通了,使用 JavaScript 全栈解决各种问题。

看到这句话,突然眼前一亮,非常感谢阮老师!!!上天入地 js 无所不能

大谢阮老师

React写法明显没有vue好,为什么看好react呢?

JavaScript 全栈开发者走起!

谢谢分享!

好棒,谢谢分享!

简单明了,实践性强,赞!

老师真是一语道破了我好多知识点模糊的地方,很感谢老师

简直能看懂。

引用kww的发言:

赞!立贴留名。争取本周学习完!

我差不多学习完了,只能说学到皮毛。不过对react的兴趣更大了。打算再深入学习!

大爱无疆,全栈福音。
有阮兄名师指路,受益匪浅,感谢!

感谢

我非常喜欢你组织知识的格式,我之前也一直想通过一些common格式的方式存储我的一些总结和笔记。
但是总感觉txt,markdown没有word丰富,用的顺手,
看到你这样组织md文件和jpg,很有借鉴意义。关键是平台通用,在shell模式下也能阅读。

我想再知道的就是,你pdf是怎么转的? 直接通过markdown文件预览直接转的?通过什么工具呢?

阮老师,为什么我这边做node应用开发experss demo那几个例子时,网页返回404呀。。。顺便问一下有和我情况相同的童鞋么。。。

阮老师有没有写一些 meteor 心得的想法呢?

看完 敲了一边 ,感觉收获不小 但最后那个

----了解持续集成的做法,学会使用 Travis CI--------

是什么 东东?

感觉就是 “你提交的改变又在 另一个网址里可以看见而已吧。。。”
没明白,谁能解释下。。。

赞赞赞赞赞赞

厉害了,感谢分享。

阮老师的blog网站一直在我的收藏夹里

谢谢阮老师

话说不支持第三方的评论插件,这样很麻烦呢。

阮大神太棒啦,你搞的这个前端教程啊,excited!
非常适合我们这些要找工作的学生,希望继续更新!

之前对这些东西有些迷茫,看了这个再自己打了一遍,收获蛮多,原来还可以做这么多的事情,到时再继续深入学习一下!

有这么一个梗:
一名程序员去酒吧买酒,分别买了1杯酒,10杯酒,-1杯酒,9999杯酒,3.5杯酒,0杯酒,a杯酒,undefined杯酒,null杯酒,都得到了很好的服务,程序员很满意。这时一名歌手问:洗手间在哪儿?然后酒吧着火了。
=================
noname 说:
说起来伤心,碰到能把测试写好的工程师,少之又少,大多是没有测试,一测就过,一上就挂 : (

阮老师说,赞赞赞,感谢有这么好的教程

不过,讲课费比较贵,所以还是推荐大家自学。

阮大神 简直要膜拜你 你的每篇文章都受益匪浅 怒赞!!!

引用Jesse的发言:

不过,讲课费比较贵,所以还是推荐大家自学。

广告打得也是轻车熟路了

引用hg20的发言:

广告打得也是轻车熟路了

这是厚道

厉害了我的哥。。每次来都能学到很多!! 感谢阮老师!

阮老师真的是硬功夫,多谢阮老师分享,认真学习中!!!

看的阮一峰老师的React教学入门前端,感谢阮老师。

要学的知识真的好多
公司没有前辈
真的有点迷茫
时时都在问自己
现在学的知识真的够吗
看到这些文章之后
发现自己有了动力
真的太感谢啦

感谢,非常感激

阮一峰老师的博客真的是一股清流

扯着巨人的裤腿往上爬

赞,喜欢!

大爱,我的阮老师。。。

支持阮一峰老师!

太牛逼了

太感谢阮老师了,开始学习~

阮老师,您这个搭建这个博客网站的技术可以分享一下吗?

我和你类似,正在考虑全栈JavaScript
我现在前端React,后端Go。
试验性的在用Node做一些后端的小程序,也许是我本人Go用得比较顺手,同时用Go和JavaScript做项目也没有太大困难,暂时没有让我有必需从Go转Node的欲望。

软老师,你好。我刚毕业一年,是做建筑设计的。我刚辞职计划花半年的时间学习然后投身IT。零基础的编程经验。现在很纠结的是,不知道是学Ruby还是前端开发。Ruby,偏小众,但是它自身优点也是厉害。现在学了两天的rails开发blog(有朋友可以指导),按照rails guides里面的步骤,几乎举步维艰,各种问题,我用的是windowns系统,网上能找到的资源,包括guides的教程大多基于Linux或mac操作系统。我在考虑的是否还是选择前端,前端培训多,网上教程也多。学习路径更便捷。并且还有你这位大牛在前面引导。但我在自制力和自学能力上面稍差,自我评价更适合找老师教。我很认可你在《我为什么喜欢编程》那本书讲的观点,谁对谁错,运行下代码就知道了。但是建筑设计不是这样,得熬,得设计符合老板,甲方审美标准的方案,而不是直面用户。我想学好编程,一是可以训练我的做事逻辑,磨炼心性;二是互联网现在发展很好,应该紧跟时代潮流;三能弄明白网页,产品怎么通过编程呈现出来的,这是令人兴奋的事情,我以后也要开发我想做的产品。

最近也在教学生使用Nodejs,主要是架设http服务器,模拟通信。阮老师的文章看过许多,有幸看到了这篇,抽时间一定拜读

作为一个想转行,用下班的业余时间自学前端的人,真是找了好多学习材料,在自学的路上摸爬滚打,在搜索一个JavaScript的一个问题的时候无意间发现了这里,有这么多的全栈课程,软老师,真的谢谢你

引用Mioss的发言:

作为一个想转行,用下班的业余时间自学前端的人,真是找了好多学习材料,在自学的路上摸爬滚打,在搜索一个JavaScript的一个问题的时候无意间发现了这里,有这么多的全栈课程,软老师,真的谢谢你


我喜欢软老师这个称谓,咩哈哈,

感谢阮大大。可是只有我一个人下载不了教程嘛。各种方式都失败,只能在线看了

文字看了一边。谢谢了。。
我是先学的php。把语法扫了一遍,发现看某些代码的时候还是有点不知所云。。所所以还得多看看。。。

阮前辈,太感谢您了! 看到好的文章。

demos/react-lifecycle-demo/index.html
做练习的时候, <ul>{results}</ul> 这个后面地方报错了,react发现必须要有key才能遍历.

修改成这样就没报错了。

projects.forEach((p,index) => {
var item = <li key={index}>{p.name}</li>;
results.push(item);
});

学完了,期待更新!!

刚看这网页效果,我还以为很渣的网站,再一看看,我也是培训出来的前段,虽然计算机毕业,但是感觉没你学的明白

引用Tomhu的发言:

阮老师太赞了

我看成 “阮老师太贵了” = =
BTW,好文,帮初学者少走弯路~

谢谢,让我找到方向,看了您几篇文章,受益匪浅!

阮老师可以开放打赏功能,我们也能聊表心意~~

阮老师每次写的 blog 都有自己独特的见解,通俗易懂,匠人匠心!

能否推荐一本关于React的书呢,我还是倾向于系统的学习。

引用haichen的发言:

打赏功能怎么没了,这个应该付费 ;-)

同意,虽然没有很多,但是代表自己对阮一峰老师的尊重和支持。阮一峰老师给了我很多启发

支持阮老师,看您的博客好久了,获益良多!

在 学会 Express 搭建 Web 应用

# Linux & Mac
$ PORT=7070 node app1.js

# windows
$ set PORT=7070
$ node app1.js

window 的命令用不了,但是可以用mac的 而且可以执行

太感谢阮老师了。

笑死我了,这就是全栈?别侮辱全栈两字

nginx,apache,linux,数据库,这些东西也要熟悉才能成为全栈吧?运维啊,后台啊,数据库啊,啥都要会一点。

阮老师大赞

当前graphql比Restful拥有更高的使用价值,老师有空写一篇吧~
又会技术又能表达的技术人太少了, 看你文章很享受,很明了, 加油

引用呵呵的发言:

笑死我了,这就是全栈?别侮辱全栈两字

喷子无处不在啊,node本身可以实现nginx,apache,socket等功能,也能写出高效shell,我看demo中代码,很明显阮老师对于各类协议有很深的认识,这里只是举出前后端使用工具。 我想说 你不喷会死啊。

峰哥,这个地方有错误哦
MobX:响应式(Reative)管理,state 是可变对象,适合中小型项目
响应式应该是Reactive

阮老师,你写的东西写得真好,思路很清晰,谢谢您的分享!

感动得不行了,好人一生平安啊!!!

太牛了,大神!

阮老师,我一直有个问题想问。您一年能读那么多书,写那么多文章,还在为社区贡献代码。我弱弱的问一句,是怎么做到的,能分享一下是如何管理时间和精力的吗。

说的太实在了,满满的干货。

阮老师真的很棒,非常乐于分享,技术也很棒,更是个好老师

引用呵呵的发言:

笑死我了,这就是全栈?别侮辱全栈两字

那我想问你是什么东西

大神,感谢感谢!!!!!!!!!!!

点赞

您好,我之前学的JAVA,做jsp的,想转向前端,学习前端框架,请问选择react 好呢,还是 angular2好呢?

nightmare 一直下载失败~~~

谢谢,程序员就要这样,开源分析。。。。

膜拜,我已经习惯来这里找流行技术的教程了

引用kww的发言:

赞!立贴留名。争取本周学习完!

引用kww的发言:

赞!立贴留名。争取本周学习完!

怎么样,学完了没?

偶像,您会的东西太多了

“我也接受现场培训。如果你们公司有这个需要,可以联系我。不过,讲课费比较贵,所以还是推荐大家自学。”
这句话让我想起了变形金刚II里的天火,“擎天柱,接受我的馈赠,他的能量之大,你无法想象!”

别的不说,这种学习研究的精神,就已经值得学习!

你好。我学前面React的时候,感觉很好。但是后面Node.js部分就有点不太懂了。Node.js部分能不能多一点?

留言也是一种学习

前端能做的事情真是越来越多了

阮神又发大招了

阮老师写的东西真是太赞了,通俗易懂,方便学习

围观阮老师,过年跟着这个教程走一遍,感谢阮老师的思路

已fork,阮老师是真老师!

哼! PHP才是最好的语言![/滑稽][/滑稽]

前辈,什么时候会有react-native的入门,我在对app的部署有点苦难

每当迷茫时,在大师这边总能找到方向,谢谢大神的无私付出,赞赞赞

阮老师,您写的教程都层次分明,抓紧时间多出点书吧,我一样买五本(不吹牛)。

看标题以为是培训广告贴,进来之后发现是良心贴,赞赞赞

布道者阮老师,言辞匮乏,就只能谢谢。

感谢阮老师,从您的博客中学到了太多

阮老师超棒!为什么我无缘在几年前了解您的博客呢....

不错的教程

感谢老师的贡献!

阮大牛 来一个怎么部署环境的 案例

感觉都适合入门, 很多感觉深度不够啊

谢谢阮老师,我现在就是一个小前端,停留在页面水平,想提高却无从下手,现在看到这篇博客,决定试一下,按照您的学习方案试试,谢谢!

谢谢
一步一个脚印

都学了,而且也学会了,不过用起来感觉还是懵!还需要一个适应的过程吧!谢谢阮大侠!

请教一下,仓库里面的md文档怎么在本地浏览器打开?试了用gitbook,不过不行。

感谢阮老师! 博客深入浅出,即易懂又深入。

阮老师,我在运行mobx-demo的时候,执行npm start,报了一个错:
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.entry should be one of these:
object { : non-empty string | [non-empty string] } | non-empty string | [non-empty string] | function
The entry point(s) of the compilation.
请问如何解决...谢谢

@fish.ear:可能是你装了 2.0 版的 webpack,删掉 node_modules ,重装一次吧。

现在才看到这么好的文章,希望还不算太晚。

阮大神居然是上财前辈,以后人家问我偶像是谁,我一定说是阮大神

阮老师真的是太厉害了 非常用心 功德无量

扯着巨人的裤腿往上爬

开启膜拜大神之路

老师讲课费多少啊

赞,每篇文章都很好

一直觉得前端乱七八糟的,东西太多,无从下手。这个教程理清了我学习的思路,棒棒哒!

赞!! ,学习的榜样

厉害啊,找到了新的目标

我要发表看法

«-必填

«-必填,不公开

«-我信任你,不会填写广告链接