React学习之图片画廊项目《一》

本项目是使用Yeoman生成项目文件目录，使用Webpack打包，react开发的。

第一部分是Yeoman生成项目文件

1>第一步，安装Yeoman（在安装Yeoman之前需要先安装node，请自行搜索安装），使用如下命令：

npm install -g yo

使用yo --version 命令查看版本信息，若正确显示版本信息即表示安装成功。

2>安装generator，因为本项目是基于webpack+react开发的，因此此处安装generator-react-webpack，使用如下命令：

npm install -g generator-react-webpack

3>创建项目仓库。为了更好保证项目的安全，我们把项目放在github上。首先在github上创建本项目的仓库，然后使用命令

github 仓库地址信息

例如：

github [email protected]:dingww/gallery-by-react.git  

将远程仓库克隆到本地。

4>在本地仓库，用命令

yo react-webpack gallery-by-reat(仓库名)

生成项目文件。此过程中需要在控制台做一些选择，视需求而定。

5>安装本项目所需的依赖：react、react-dom、sass-loader、json-loader，安装命令可自行搜索安装。

6>配置webpack，在自动生成的文件中，webpack的配置文件为cfg文件夹中的default.js文件。关于webpack的配置方法也请自行搜索学习，本文不作详细介绍。本项webpack的配置为：

'use strict';

const path = require('path');
const srcPath = path.join(__dirname, '/../src');
const dfltPort = 8000;

/**
 * Get the default modules object for webpack
 * @return {Object}
 */
function getDefaultModules() {
  return {
    preLoaders: [{
      test: /\.(js|jsx)$/,
      include: srcPath,
      loader: 'eslint-loader'
    }],
    loaders: [{
      test: /\.css$/,
      loader: 'style-loader!css-loader!autoprefixer-loader?{browsers:["last 2 version"]}'
    }, {
      test: /\.sass/,
      loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&indentedSyntax'
    }, {
      test: /\.scss/,
      loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded'
    }, {
      test: /\.less/,
      loader: 'style-loader!css-loader!less-loader'
    }, {
      test: /\.styl/,
      loader: 'style-loader!css-loader!stylus-loader'
    }, {
      test: /\.json$/,
      loader: 'json-loader'
    }, {
      test: /\.(png|jpg|gif|woff|woff2|eot|ttf|svg)$/,
      loader: 'url-loader?limit=8192'
    }, {
      test: /\.(mp4|ogg|woff|woff2|eot|ttf|svg)$/,
      loader: 'file-loader'
    }]
  };
}

module.exports = {
  srcPath: srcPath,
  publicPath: 'assets/',
  port: dfltPort,
  getDefaultModules: getDefaultModules
};

7>执行webpack命令，对项目进行打包。

8>为了方便调试，可使用热加载，输入命令：

npm run serve

就可以在浏览器中使用该命令给出的地址来查看demo的展示。

这样整个项目的结构和配置就完成了，接下来就可以进入正式的项目开发阶段，下篇再述。