近期技术学习-React,Docker和Angular2

在去年年底,开发组里有点时间,我就组织一起学了JavaScript和AngularJs。主要目的有两个,一是向将来的技术趋势靠拢,我们的项目基本上会从DotNet/WPF转到Web开发,而且很可能就是AngularJs。另外一个就是给大家可以持续学习的方向,免得闲下来。

用Angular做了几个项目后,发现组里有个趋势,就是大家把同一套项目模板反复重用,结果导致第二个目的没有达到,不少人复制粘贴就可以了。于是我又推动大家开始学习Angular2和React,不是想把这两个新框架(库)全面掌握,只是想推动大家继续学习。

除了Angular2和React,最近也在看Docker技术以及学习ES6,很多有意思的东西,感觉自己的能量又在慢慢积攒。尤其是Docker,也是将来一个DevOps的方向,我认为是可以深挖的一个技术。

这个只作为最近技术系列的开篇吧。

最后放一个Angular2学习的结果,大家可以直接Fork:

http://plnkr.co/edit/FPkubu?p=preview

Yosemite, U.S.

c9.io step by step

1, 申请一个c9账号,可以直接用github认证。

2,建一个workspace,node或者html5都行,其实就是一个完全的linux虚拟机。在菜单里找“window”,打开terminal窗口。

3,升级nodejs,运行:

nvm install 5.4

nvm use 5.4

nvm alias default v5.4.0

4,clone一下阮一峰的demo,运行:

git clone https://github.com/ruanyf/react-demos

5,找到一个目录下的index.html,双击打开,运行(菜单栏里的run),会给你一个地址,点击打开即可。如果想结束,点击X关掉弹出来的apache执行窗口,或者点stop都行。

6,然后可以试试yo生成器,随便google一个。

7,命令行下建立一个新目录,在这个目录下工作。

mkdir fullstack

cd fullstack

8,安装yo和生成器。如果有警告类似[fix],拷贝运行即可。c9装依赖包非常快,大概几分钟就搞定了。

npm install -g yo

npm install -g generator-react-fullstack

yo react-fullstack

npm start

9,运行大部分程序,缺少的组件都可以通过npm install xxx安装。

使用c9.io建立Nodejs、React、Angular2编程学习环境

c9.io是非常棒的云端编程环境,尤其是免费配置最近还升级了,可用性更高了。大陆使用c9的好处是它的npm升级的网络速度远远超过本地开发。

第一个需要调整的可能是安装最新版的nodejs。只要打开Window-》terminal,然后敲如下命令:

nvm install 5.4

nvm use 5.4

nvm alias default v5.4.0

比如我们想用Babel使用ES6开发Angular,可以用这套starter https://github.com/shuhei/babel-angular2-app

Snip20160107_1

how to run and debug JavaScript code snippet

Mostly I use these methods to run JavaScript code snippet.

1) c9.io

It is a online coding IDE, you could get most convenient abilities, including editing, running, debugging.

2) VisualStudio Code

You could download from https://code.visualstudio.com/. about how to debug, you could refer to the document https://code.visualstudio.com/Docs/debugging

3) FireFox developer tools

FireFox has one Scratchpad feature, but I don’t use it too much.

My suggestion about technical learning – first step

Actions in first step:

1, register on github.com, and star the projects you are interested in.

2, register on codeproject.com, and download the demo code to study.

3, register on inoreader.com or other RSS online website, and subscribe the blogs you like, especially English blogs.

4, register on getpocket.com, and save the articles you are interested in.

For your reference.