require('normalize.css/normalize.css');
require('styles/App.css');
import React from 'react';

// let yeomanImage = require('../images/yeoman.png');
var imageDatas = require('../data/imageDatas.json')
// 图片信息转成图片路径信息
imageDatas = (function(imageDatasArr) {
for (var i = 0; i < imageDatasArr.length; i++) {
var singeImageData = imageDatasArr[i];
singeImageData.imageURL = require('../images/'+singeImageData.filename);
singeImageData.key = require('../images/'+singeImageData.filename);
imageDatasArr[i] = singeImageData;
}
return imageDatasArr
})(imageDatas);
var ImgFigure = React.createClass({
render() {
return (

{this.props.data.title}

AppComponent.defaultProps = {
};

export default AppComponent;

初学react。 下载下来后， 运行会报：
Cannot find module 'source-map'
@ multi main
我的是windows系统。

这份代码热更新好像失效了。我测试一下 ，只有取消autoprefixer-loader这个插件的时候热更新才会有用。这是为什么呀。老师能解答一下吗？

hi @materliu ，请问下什么时候在慕课网更新，这个工程构建看不懂，能不能着重讲下；index.html之前没有引用css，运行之后怎么就出来了？

不错的教程，希望有关于react-router的教程，react-router路由刷新时页面丢失是不是应该配置服务器呢？

require('normalize.css/normalize.css');
require('styles/App.styl');

import React from 'react';

// 获取相关数据 json 文件

var imageDatas = require('../data/imageDatas.json');
window.console.log(imageDatas);

/**
 * 通过filename，拼接文件名，拿到图片URL,为对象添加imageURL属性
 * @param  {Array}
 * @return {Array}
 */

imageDatas = ((imageDatasArr) => {
  for (let i = 0; i < imageDatasArr.length; i++) {
    let singleImageDara = imageDatasArr[i];
    singleImageDara.imageURL = require('../images/'+singleImageDara.fileName);
    imageDatasArr[i] = singleImageDara;
  }
})(imageDatas);

let controllerUnits,imgFigures = [];

window.console.log(imageDatas);

imageDatas.forEach((value,index) =>{
  imgFigures.push(<ImgFigure data = {value} key={'imgFigures'+index}/>);
});

class ImgFigure extends React.Component {
  render() {
    return (
      <figure>
        <img src={this.props.data.imageURL}
            alt={this.props.data.title}/>
        <figurecaption>
          <h2>{this.props.data.title}</h2>
        </figurecaption>
      </figure>
    );
  }
}

class AppComponent extends React.Component {
 render() {
    return (
      <section className="stage">
        <section className="img-sec">
          {imgFigures}
        </section>
        <nav className="controller-nav">
          {controllerUnits}
        </nav>
      </section>
    );
  }

}


AppComponent.defaultprops = {

};

export default AppComponent;

[Object, Object, Object, Object, Object, Object, Object, Object] // 第一个log，且里面有imageURL属性
undefined // 第二个log
Main.js?7cd4:30 Uncaught TypeError: Cannot read property 'forEach' of undefined

为什么会是这个样子？为什么这么魔性哦？看了3、4个小时没看懂。写到render里面也是undefined

老师好，按照教程完成之后发现firefox（电脑是mac）翻转之后显示的是图片和title的背面，尝试修改了figure当中img的backface-visibility(设置为hidden)和figcaption的transform-style(设置为preserve-3d)，但是修改之后会导致.img-back的绝对定位出错，附件为firefox上dian'ji点击图片翻转后的效果以及firefox的版本信息。

发现2个小问题：
1、safari 版本 10.0 (12602.1.50.0.10)，运行起来非常不流畅;
2、firefox 版本49.0.1(mac) ，图片在翻转时，后面的图片会挡住翻转中的图片，翻转结束后层次正常。

火狐浏览器图片旋转失败

meterliu你好，我的项目出现了一个问题：项目在本地正常运行，当放在github上，生成静态网页后,图片不能正常加载出来。如：https://maoruibin001.github.io/上出现的情况。图片下载了，但是不展示。如果有空烦请帮忙看下，谢谢。

大大,课程什么时候更新啊``

老师，您的demo在IE10打开，图片翻转时，看不到背面的图片描述，而是正面做了镜面翻转，像Safari修复前一样，应该怎么处理？

用的webpack2.0,在imageDatas.forEach()的时候提示，没有forEach这个function

• 这算是个BUG吧？
• 这个要怎么解决呢

项目地址：
https://github.com/louguozhe/gallery-by-vue
修改Firfox下图片反转的问题

谢谢materliu老师的慕课！

本地运行需要安装node-sass,file-loader, 建议package.json里面添加node-sass和file-loader依赖

你好mater，按照您在慕课网的react教程，终于完成最后一步，然后不曾想到这个是最大的问题啊……我按照您敲的代码 git subtree…… ，最后在我的gitPages上展示出错，只有APPLICATION CONTENT，这个是地址https://lucylucy-xia.github.io/my-gallery-by-react/；请问是什么原因？我谷歌了好久，也没有解决掉