在这个教程里我们将为EVE Online游戏创建一个角色投票应用(受Facemash的启发),EVE是一个大型多人在线游戏。请点击播放下面美妙的音乐,来进入本教程的学习氛围当中。

Your browser does not support the audio tag.

(EVE Online – Kronos (2014) Release Theme)

当你听着这首音乐时,想象你正身处宇宙深空的某个小行星带,一边从小行星中挖取稀有矿物,一边警戒着雷达上随时可能出现的宇宙海盗,同时,你还正在研究太空站推进系统的设计图,为你的宇宙舰队制造零件,并在完全由玩家需求和供给控制的交易系统下达买卖指令,另外还从遥远星系赶来的大型宇宙货船上卸货。在你的战舰旁边,是装有微型曲速装置的超高速截击机和武装到牙齿的战斗飞船,它们都是你的忠实护卫。在这场自由的游戏中,你可以计算如何从行星最优化的萃取矿物,也可以投身一场有数千玩家参与的大型宇宙会战。——这就是EVE Online。

在EVE Online中每个玩家都有一个3D形象以代表他们的角色,我们要开发的这个应用就是来为这些角色形象投票,以选出它们中最好看的。不管怎样,你的目标是学习Node.js和React,而不是EVE Online。但我想说的是:“在一个教程里,趣味即使不是最重要的,也至少和教程的主要目的同样重要。”我之前创建New Eden Faces的唯一目的是学习Backbone.js,我创建TV Show Tracker的目的是为了学习AngularJS。这些日子以来,貌似大家都开始用一个简单的TODO应用来当做教程项目,但对我来说,上面这些项目的任何一个,都比一个简单的TODO应用要有趣得多。

编写这些教程,我所学到的就是,无论是录屏、书籍还是视频教程,在学习一项新技术时,没有什么比创建一个让你有激情的小项目更高效的了。

Full Demo

项目完整源代码: https://github.com/sahat/newedenfaces-react

基于和我之前教程同样的精神(TV Show TrackerInstagram Clone),本教程将是一篇全栈的JavaScript教程,我们将从零开始构建一个完整的应用。

注意:这个项目是对我之前New Eden Faces项目的重制,那是我使用Backbone.js编写的第一个单页面应用。它已经在OpenShift上基于Node.js 0.8.x稳定的运行两年多了。

对于给定主题的教程,我一般尽量少的做假设(如假设读者拥有Node.js基础之类),这也是为什么我的教程都是如此之长。不过即便如此,你至少也需要有一些客户端JavaScript框架和Node.js的经验,才能从这个教程中得到最大的收获。

在开始之前,你需要下载并安装下列工具:

  1. Node.js,或io.js
  2. Bower
  3. MongoDB
  4. gulp
  5. nodemon