React之画廊应用

npm install -g yo grunt-cli karma
npm install -g generator-react-webpack@1.2.11
mkdir react-grunt-example && cd $_
yo react-webpack

npm install autoprefixer-loader --save-dev
npm install json-loader --save-dev    

var controllerUnits = [],
imgFigures = [];
imageDatas.forEach(function (value, index) {
imgFigures.push(<ImgFigure key={index} data={value} ref={'imgFigure' + index} 
};

return (
        <section className="stage" ref="stage">
            <section className="img-sec">
                {imgFigures}
            </section>
            <nav className="controller-nav">
                {controllerUnits}
            </nav>
        </section>
    );

/ 如果图片的旋转角度有值并且不为0， 添加旋转角度
        if (this.props.arrange.rotate) {
          (['MozTransform', 'msTransform', 'WebkitTransform', 'transform']).forEach(function (value) {
            styleObj[value] = 'rotate(' + this.props.arrange.rotate + 'deg)';
          }.bind(this));
        }

/*
   * 翻转图片
   * @param index 传入当前被执行inverse操作的图片对应的图片信息数组的index值
   * @returns {Function} 这是一个闭包函数, 其内return一个真正待被执行的函数
   */
  inverse: function (index) {
    return function () {
      var imgsArrangeArr = this.state.imgsArrangeArr;

      imgsArrangeArr[index].isInverse = !imgsArrangeArr[index].isInverse;

      this.setState({
        imgsArrangeArr: imgsArrangeArr
      });
    }.bind(this);
  },

  给父结点perspective属性：perspective: 1800px;

  transform-origin: 0 50% 0;
            transform-style: preserve-3d;
            transition: transform .6s ease-in-out, left .6s ease-in-out, top .6s ease-in-out;

            &.is-inverse {
                transform: translate(320px) rotateY(180deg);
            }

transform: scale(.5);
transition: transform .6s ease-in-out, background-color .3s;

&.is-center {
    background-color: #888;

    transform: scale(1);

    &::after {
        color: #fff;
        font-family: "icons-turn-arrow";
        font-size: 80%;
        line-height: 30px;

        content: "\e600";

        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    &.is-inverse {
        background-color: #555;

        transform: rotateY(180deg);
    }

grunt serve:dist    
访问dist目录下的内容
git add dist 
git commit -m 'adddist'
git subtree push --prefix=dist origin gh-pages
推送本地的dist目录到gh-pages分支