photo project by react
在线预览地址：demo
在慕课网上跟着视频教程一步步完成的。
因为和老师录制视频的时间相隔比较久，所以工具的版本都不一样了，导致项目生成的文件相差还是比较大的。
就像课程中其他同学所说，有不少坑。一个一个踩，一个一个填。遇到的问题在视频下面提问，或者网google多搜搜总能解决的。
这个项目是使用ReactJs架构来开发的，是个单页面的应用。不涉及路由，不涉及数据流。
项目使用了Yeoman工具，在立项阶段使用Yeoman生成项目文件、代码结构，方便后续开发。Yeoman基于Nodejs,本地需要安装Nodejs环境。
我想git , Nodejs 这些一般大家都应该已经配置过了。
安装Yeoman: npm install -g yo
查看版本：yo --version
进入官网yeoman.io 搜索查看项目生成器，搜索react,会出现很多结果，使用其中的react-webpack；
安装generator : npm install -g generator -react-webpack
安装之后，查看generator 版本： npm ls -g --depth=1 2>/dev/null | grep generator-
其中npm ls -g 列出全局npm包；--depth=1 表示限制树状结构展示最多往下一层；
尖括号表示重定向， bash中1表示标准输出，2表示标准错误，/dev/null表示空设备文件；
所以2>/dev/null表示如果执行npm ls -g的过程中有错误消息，就把错误消息重定向到空设备文件中，也就是说在输出中过滤掉错误消息；
| 通道，将上一个消息的输出作为下一个消息的输入；
grep generator- 在前一个输出中检索generator开头的内容。
然后是创建项目，我们现在github中创建，选择MIT license。创建完成后，将项目拉到本地。git clone 项目地址
进入项目目录，然后执行： yo react-webpack 项目名 来生成项目。
回车以后，会有几个选择要选Y/N,是否使用react-router，因为这个项目是单页面程序不需要路由，所以N。
flux,reflux，alt 这些框架选什么，这些框架主要用来处理react程序中的数据流，多个视图的状态共享、更新、数据维护等，这个程序也不需要，所以N。
老师在项目中使用的是ES5,我现在使用的是ES6,语法会稍有不同，下面的链接详细讲解了ES5和ES6的对照表：
http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8
#运行项目
npm start
#打包输出到dist目录
npm run dist
#添加所有更改的文件到本地缓存区
git add -A
#将暂存区文件提交到本地仓库
git commit -m "something you have done"
#将本地仓库内容上传到远程仓库
git push
将项目发布到github.io上时，遇到图片加载不到的问题，因为路径不对，在本地是绝对路径，上传到github中应该使用相对路径。
按照老师在视频讲解的，把cdf目录下default.js里的publicPath: '/assets/',去掉/，改成publicPath: 'assets/'
但是我改了，图片还是加载不成功。
后来看视频下面同学的问答，解决方法是把publicPath: '/assets/'加个. 改成publicPath: './assets/'
同时把src里面index.html中script中src="/assets/app.js"加个. 改成src="./assets/app.js
然后就成功了。
后来我又发现，其中把这两处./同时去掉，改成publicPath: 'assets/'%nbsp;%nbsp;%nbsp;%nbsp;src="assets/app.js
也是成功的。
最后我把Main.js中不同的组件拆分出来，放在不同js文件里了。感觉这样清晰一些，要不然Main.js里内容太多