在这个教程里我们将为[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)
- 前言
- 概述
- 第一步:新建Express项目
- 第二步:构建系统
- 第三步:项目结构
- 第四步: ES6速成教程
- 第五步: React速成教程
- 第六步:Flux架构速成教程
- 第七步:React路由(客户端)
- 第八步:React路由(服务端)
- 第九步:Footer和Navbar组件
- 第十步:Socke.IO – 实时用户数
- 第十一步:添加Character的组件
- 第十二步:数据库模式
- 第十三步:Express API 路由(1/2)
- 第十五步:Home组件
- 第十四步:Express API 路由(2/2)
- 第十六步:角色(资料)组件
- 第十七步:Top 100 组件
- 第十八步:Stats组件
- 第十九步:部署
- 第二十步: 附加资源
- 总结