react-webpack 照片墙制作（一）

这段时间开始学习react与webpack，在慕课网中看一个照片墙的制作，以下是我自己的学习过程。因为react-webpack的更新，视频中的很多过程用现在的环境是错误的，接下来我带着大家一起来排坑。

学习react的话推荐 阮一峰的React 入门实例教程
学习webpack的话推荐 慕课网的视频

**

准备工作

**
nodejs等其它基本环境这里不赘述。
首先我们新建自己的一个项目文件夹并切换到该目录下

mkdir react-photo_wall & cd react-photo_wall

安装yeoman

npm install -g yo
yo --version  //查看版本

安装generator-react-webpack这个全局安装。

npm install -g generator-react-webpack

安装react-webpack

yo react-webpack react-photo_wall  
//(后面接的是项目文件夹名字)  安装可能失败，源的问题，换源后安装，失败的话反复试一下，可能第二次就安装好了，**安装过程中选择sass和postcss**

安装完成之后

npm run serve  
//运行，进入localhost:8000,能正确显示页面不报错表示安装成功

下图为react-webpack安装好后的文件目录结构

接下来，我们会将图片导入到src下的images文件夹，然后在src下新建一个data文件，并新建imageDatas.json文件，作为图片信息的存放。代码如下

[
  {
    "fileName": "1.jpg",
    "title": "Heaven of time",
    "desc": "Here he comes Here comes Speed Racer."
  },
  {
    "fileName": "2.jpg",
    "title": "Heaven of time",
    "desc": "Here he comes Here comes Speed Racer."
  },
  {
    "fileName": "3.jpg",
    "title": "Heaven of time",
    "desc": "Here he comes Here comes Speed Racer."
  },
  {
    "fileName": "4.jpg",
    "title": "Heaven of time",
    "desc": "Here he comes Here comes Speed Racer. "
  },
  {
    "fileName": "5.jpg",
    "title": "Heaven of time",
    "desc": "Here he comes Here comes Speed Racer. "
  },
  {
    "fileName": "6.jpg",
    "title": "Heaven of time",
    "desc": "Here he comes Here comes Speed Racer. "
  },
  {
    "fileName": "7.jpg",
    "title": "Heaven of time",
    "desc": "Here he comes Here comes Speed Racer. "
  },
  {
    "fileName": "8.jpg",
    "title": "Heaven of time",
    "desc": "Here he comes Here comes Speed Racer. "
  },
  {
    "fileName": "9.jpg",
    "title": "Heaven of time",
    "desc": "Here he comes Here comes Speed Racer. "
  },
  {
    "fileName": "10.jpg",
    "title": "Heaven of time",
    "desc": "Here he comes Here comes Speed Racer. "
  },
  {
    "fileName": "11.jpg",
    "title": "Heaven of time",
    "desc": "Here he comes Here comes Speed Racer. "
  },
  {
    "fileName": "12.jpg",
    "title": "Heaven of time",
    "desc": "Here he comes Here comes Speed Racer.  "
  },
  {
    "fileName": "13.jpg",
    "title": "Heaven of time",
    "desc": "Here he comes Here comes Speed Racer.  "
  },
  {
    "fileName": "14.jpg",
    "title": "Heaven of time",
    "desc": "Here he comes Here comes Speed Racer.  "
  },
  {
    "fileName": "15.jpg",
    "title": "Heaven of time",
    "desc": "Here he comes Here comes Speed Racer.  "
  },
  {
    "fileName": "16.jpg",
    "title": "Heaven of time",
    "desc": "Here he comes Here comes Speed Racer.  "
  }
]

**

开始搭建框架

**

开始为照片墙搭建框架，在src的components文件夹下修改main.js。这文件看成react里的组件文件
代码如下

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

import React from 'react';

let yeomanImage = require('../images/yeoman.png');

class AppComponent extends React.Component {
  render() {
    return (
      <div className="index">
        "Yeoman Generator" />
        <div className="notice">Please edit src/components/Main.js to get started!div>
      div>
    );
  }
}

AppComponent.defaultProps = {
};

export default AppComponent;

将以下代码删除

<div className="index">
        <img src={yeomanImage} alt="Yeoman Generator" />
        <div className="notice">
        Please edit
        <code>src/components/Main.jscode> 
        to get started!
        div>
div>

添加如下代码
这是照片墙框架，对stage和img-sec以及controller-nav添加样式，分别是舞台，图片显示区域，按钮控制区域，这里需要对src下的styles中的app.css修改，将其改为app.scss，利用sass和postcss来管理css，这里修改了在main.js的顶部也需要修改过来。

<section className="stage" ref="stage">
          <section className="img-sec">
            {imgFigures}
          section>
          <nav className="controller-nav">
            {controllerUnits}
          nav>
      section>

再添加图片信息处理代码，如下

var imageDates = require('../data/imageDatas.json');     //获取图片的json数据
//利用getImageURL函数，将图片信息转换成图片URL路径信息
imageDates = (function getImageURL(imageDatesArr) {
  for (var i = 0; i < imageDatesArr.length; i++) {
        var singleImageData = imageDatesArr[i];
        singleImageData.imageURL = require('../images/'+singleImageData.fileName);
        imageDatesArr[i] = singleImageData;
  }
  return imageDatesArr;
})(imageDates);

修改之后再app.scss中添加样式如下，但是这里会碰到
问题1：样式不起作用。

/* Base Application Styles */
html, body {
    width: 100%;
    height: 100%;

    background-color: #222;
}

.content {
    width: 100%;
    height: 100%;
}

/* stage -- start */
.stage {
    position: relative;

    width: 100%;
    height: 100%;
}
/* stage -- end */

/* image -- start */
.img-sec {
    position: relative;

    width: 100%;
    height: 90%;
    overflow: hidden;

    background-color: #ddd;


}
/* image -- end */

/* controller -- start */
.controller-nav {
    position: absolute;
    left: 0;
    bottom: 30px;
    z-index: 101;

    width: 100%;

    text-align: center;
}
/* controller -- end */

解决方法：
慕课网视频中的使用方法如今行不通。
首先需要安装 autoprefixer-loader和postcss-loader插件
命令如下

npm install autoprefixer-loader postcss-loader --save-dev

然后修改cfg只不过的base.js文件，
在base.js中
//头部加上如下代码

 let postcss = require('postcss');  

//module.exports里加上如下代码

postcss: function () {
       return [
         require('autoprefixer')({
           browsers: ['last 2 versions', 'ie >= 8']
         })
       ];
     },

因为是scss文件需要安装sass-loader和node-sass
命令如下

npm install sass-loader -save-dev

安装node-sass会报错，网上搜了各种办法，然后找到了此方法，输入如下命令，可安装完成

 npm install --save-dev node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass

这是样式的问题，后面会用数据的导入问题，按视频中来，
安装json-loader

npm install json-loader -save-dev

修改文件时，修改的是cfg文件夹下的defaults.js文件，添加如下代码

{
  test: /\.json/,
   loader: 'json-loader'
 },

今天就到这里，接下来会将react-webpack照片墙制作中的坑陆续填平。请关注。