在这个教程里我们将为[EVE Online](http://www.eveonline.com/)游戏创建一个角色投票应用(受Facemash的启发),EVE是一个大型多人在线游戏。请点击播放下面美妙的音乐,来进入本教程的学习氛围当中。 <p style="text-align: center;"><audio controls="controls"><source src="http://7pn5bk.com1.z0.glb.clouddn.com/2014-KronosTheme.ogg" type="audio/ogg" /><source src="http://7pn5bk.com1.z0.glb.clouddn.com/2014-KronosTheme.mp3" type="audio/mpeg" />Your browser does not support the audio tag.</audio><br /> (EVE Online – Kronos (2014) Release Theme) 当你听着这首音乐时,想象你正身处宇宙深空的某个小行星带,一边从小行星中挖取稀有矿物,一边警戒着雷达上随时可能出现的宇宙海盗,同时,你还正在研究太空站推进系统的设计图,为你的宇宙舰队制造零件,并在完全由玩家需求和供给控制的交易系统下达买卖指令,另外还从遥远星系赶来的大型宇宙货船上卸货。在你的战舰旁边,是装有微型曲速装置的超高速截击机和武装到牙齿的战斗飞船,它们都是你的忠实护卫。在这场自由的游戏中,你可以计算如何从行星最优化的萃取矿物,也可以投身一场有数千玩家参与的大型宇宙会战。——这就是EVE Online。 在EVE Online中每个玩家都有一个3D形象以代表他们的角色,我们要开发的这个应用就是来为这些角色形象投票,以选出它们中最好看的。不管怎样,你的目标是学习Node.js和React,而不是EVE Online。但我想说的是:“在一个教程里,趣味即使不是最重要的,也至少和教程的主要目的同样重要。”我之前创建[New Eden Faces](http://www.newedenfaces.com/)的唯一目的是学习Backbone.js,我创建[TV Show Tracker](https://github.com/sahat/tvshow-tracker)的目的是为了学习AngularJS。这些日子以来,貌似大家都开始用一个简单的TODO应用来当做教程项目,但对我来说,上面这些项目的任何一个,都比一个简单的TODO应用要有趣得多。 编写这些教程,我所学到的就是,无论是录屏、书籍还是视频教程,在学习一项新技术时,没有什么比创建一个让你有激情的小项目更高效的了。 ![Full Demo](https://box.kancloud.cn/2015-09-14_55f64109bb53a.jpg) 项目完整源代码: [https://github.com/sahat/newedenfaces-react](https://github.com/sahat/newedenfaces-react) 基于和我之前教程同样的精神([TV Show Tracker](http://sahatyalkabov.com/create-a-tv-show-tracker-using-angularjs-nodejs-and-mongodb/)和[Instagram Clone](https://hackhands.com/building-instagram-clone-angularjs-satellizer-nodejs-mongodb/)),本教程将是一篇全栈的JavaScript教程,我们将从零开始构建一个完整的应用。 > 注意:这个项目是对我之前[New Eden Faces](http://www.newedenfaces.com/)项目的重制,那是我使用Backbone.js编写的第一个单页面应用。它已经在[OpenShift](https://www.openshift.com/)上基于Node.js 0.8.x稳定的运行两年多了。 对于给定主题的教程,我一般尽量少的做假设(如假设读者拥有Node.js基础之类),这也是为什么我的教程都是如此之长。不过即便如此,你至少也需要有一些客户端JavaScript框架和Node.js的经验,才能从这个教程中得到最大的收获。 在开始之前,你需要下载并安装下列工具: 1. [Node.js](https://nodejs.org/),或[io.js](https://iojs.org/en/index.html) 2. [Bower](http://bower.io/) 3. [MongoDB](https://www.mongodb.org/downloads) 4. [gulp](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md) 5. [nodemon](https://github.com/remy/nodemon#nodemon)