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">
        <img src={yeomanImage} alt="Yeoman Generator" />
        <div className="notice">Please edit <code>src/components/Main.js</code> 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.js</code> 
        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照片牆製作中的坑陸續填平。請關注。