说到目前最流行的库肯定有React。关于React这个就不多介绍了。
趁着春节期间，正好来学习一下React。
本文就是记录一下在学习过程中所踩过的一些坑。
首先，先介绍一下学习的课程。这两节课都能在慕课网上找到。
老师讲的还是挺风趣易懂的。
跟着课程做完后的效果可以看这里：图片画廊练习
那么接下来就整理一下在学习过程中所踩过的一些坑。配合教程大概会更好理解。
-
框架搭建
整体的框架通过Yeoman来搭建的。Yeoman是一个很方便的脚手架工具。跟着教程，首先在Generators中找到react-webpack进行安装。在开始创建项目的时候，就会踩到第一个坑。
PostCSS
在创建项目的过程中，会询问是否要使用PostCSS。由于教程中并没有这一项，所以在创建时我选择了No。但其实PostCSS和之后教程中所用到的autoprefixer是相关的。因为autoprefixer现在已经整合在PostCSS中了，不推荐单独使用。因此在这里最好选择Yes。然后按照react-webpackGitHub主页上上文档配置autoprefixer会方便许多。
当然，如果在这一步没有安装PostCss的话，也可以在之后手动配置（就是会麻烦许多）。手动配置可以参考这里。在配置完成后很可能还会报错，这时只要根据错误信息的提示安装相对应的npm包（比如postcss-loader等）即可解决问题。-
项目的启动与配置文件
项目的启动命令也已经变更过了。- 启动服务器（开发环境）
npm start或者npm run server - 启动服务器（生产环境）
npm run server:dist - 编译文件
npm run dist
配置文件所在的目录也有变化。课程中所用到的配置文件都在
cfg目录下。loader和打包时的路径都在default.js文件中。修改也主要在default.js文件中。 - 启动服务器（开发环境）
-
ES6下React的事件绑定
在进行
onClick事件绑定的时候，ES6的写法不会让React自动绑定this。课程中老师的写法是使用React.createClass的方法，因此React在最后会自动绑定this。而解决的方法就是自己使用bind方法手动绑定或者使用=>函数。
require('styles/NavBar.scss');
import React from 'react';
class NavBarComponent extends React.Component {
// 使用箭头函数绑定this，如果使用普通写法，this的对象是null
handleClick = (event) => {
if (this.props.imgPos.isCenter) {
this.props.inverse();
} else {
this.props.center();
}
event.stopPropagation();
event.preventDefault();
}
render() {
let navBarClassName = 'nav-button';
navBarClassName += this.props.imgPos.isCenter ? ' is-center' : '';
navBarClassName += this.props.imgPos.isInverse ? ' is-inverse' : '';
return (
<span className = {navBarClassName} onClick = {this.handleClick}></span>
// 或者在这里this.handleClick.bind(this) 进行手动绑定
);
}
}
module.exports = NavBarComponent;
这些就是我在学这个课程中所踩过的一些坑。
主要还是一些版本更新所带来的问题。
此外，在课程中，老师是把全部的组件写在一个js文件中。在自己练习时，可以分开写。
最后附上自己的Github地址：图片画廊练习。
