React入门：项目实践Gallery-in-React

yeoman

现代web app开发，著名的脚手架工具yeoman，在web项目立项的阶段，用yeoman生成项目文件、代码结构。yeoman自动将最佳实践和工具整合进来，大大加速和方便了后续的开发。

npm install -g yo //安装yeoman工具，需要nodejs环境
yo --version //查看yeoman版本

npm install -g generator-react-webpack //安装React的项目生成器
npm ls -g --depth=1 2>/dev/null | grep generator- //查看项目生成器版本
//-g是指查看全局的安装包，--depth 因为安装包是有树形层次联系的，depth指只查看深度为1的安装包
//npm ls -g 列出全局安装的npm包，npm包。往往会依赖其他的包，树状展示，1限制最多展示一层 2>dev>null 
//bash中：
//1表示standard out标准输出
//2表示standard error标准错误
//dev>null代表空设备文件
// | 表示通道，用来将上一个命令的输出内容作为下一个命令的输入内容
//总的：从输出中过滤错误消息

在github中创建repository，命名gallery-in-react(projectName)，选择MIT的License，然后clone到本地 git clone http://github.com/.....

yo react-webpack projectName //在git生成项目后clone到本地,进入本地项目根目录再执行

在chrome浏览器中安装react developer tool工具。网址如下：
                https://chrome.google.com/webstore/search/react

安装后重启chrome浏览器，在审查元素时会出现一个叫做react的标签，可以查看react的component

启动项目：generator-react-webpack V2.0 移除了Grunt（而用webpack替代）。可以执行 npm start 或者npm run serve 启动服务。在localhost:8000可以看到运行的页面效果。

关于generator-react-webpack2.0版，目录结构大变样，已经是只需要webpack就能启动项目。

|____.babelrc  // ES6配置文件
|____.editorconfig  // EditorConfig插件配置文件，用于统一编码风格。
|____.eslintrc  // ESLint(代码检测工具)的配置文件，支持JSX语法
|____.gitignore  // 需要git同步时忽略文件夹的配置文件
|____.yo-rc.json  // 用来记录yeoman的配置文件
|____cfg  // 这里存放webpack配置
| |____base.js  //  webpack基础配置
| |____defaults.js  //  webpack一些其他的默认配置
| |____dev.js   // 测试环境的webpack配置，启动npm run start的时候会使用这份webpack设置。
| |____dist.js  // 线上环境的webpack配置，启动npm run dist的时候会使用。
| |____test.js  // 做单元测试的时候使用，npm run test
|____dist  // webpack输出目录
| |____README.md
| |____static
| | |____favicon.ico
| | |____README.md
|____karma.conf.js  // 单元测试配置文件
|____npm-debug.log  // 日志文件
|____package.json  // 重要！包结构配置文件，并且存放了启动脚本，npm script
|____server.js  // node服务器，用于本地启动这个项目，正是这个脚本启动了webpack编译。
|____src // 源代码目录
|____test //  单元测试目录
|____webpack.config.js //  重要，webpack配置文件入口

Nodejs中，__dirname表示当前执行脚本所在目录。
loaders 配置在 cfg/defaults.js 中， plugins 配置现在改成分别放置了，例如 cfg/dev.js 中有 dev 所需要的 plugins，而 cfg/dist.js 中有 dist 所需要的 plugins

webpack的配置:
1、autoprefixer-loader用来处理css文件，自动为其中的css规则添加前缀的工具
nmp install autoprefixer-loader --save-dev、
2、为crg文件夹中的default.js配置css的auto-prefixer的配置 !autoprefixer-loader?{browser:["last 2 version"]}！

scss中，@at-root { } 可以让写在其他类名里面的css样式，提升到最外层（在scss文件丢失的情况下，也能很好的修改css文件）