React 图片画廊 踩坑笔记

说到目前最流行的库肯定有React。关于React这个就不多介绍了。
趁着春节期间，正好来学习一下React。
本文就是记录一下在学习过程中所踩过的一些坑。

首先，先介绍一下学习的课程。这两节课都能在慕课网上找到。
老师讲的还是挺风趣易懂的。

• React实战--打造画廊应用（上）
• React实践图片画廊应用（下）

跟着课程做完后的效果可以看这里：图片画廊练习

那么接下来就整理一下在学习过程中所踩过的一些坑。配合教程大概会更好理解。

1. 框架搭建

   整体的框架通过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文件中。

2. 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地址：图片画廊练习。