一个React构建的图片画廊应用,在线访问：https://ckinmind.github.io/gallery-by-react/

项目说明 本项目是对着视频教程编写的（非原创），教程地址 React实战--打造画廊应用 教程讲师的该项目的Github地址 materliu/gallery-by-react 项目构建的脚手架使用的是 generator-react-webpack 视频教程中使用的是ES5语法，本项目使用ES6语法，所以有诸多的不同 版本更新 【v1.2】: 减少代码量，增强可读性，完善注释，详细更新说明 issue #4 【v1.1】: 组件拆分，引入classnames,增强代码可读性，详细更新说明 issue #3 【v1.0】: 原始版本,详细更新说明 issue #2 如何开始

clone到本地

> git clone https://github.com/ckinmind/many-react-demo.git

安装依赖

> npm install

运行开发环境项目

> npm start

打包输出到dist目录

> npm run dist

更多命令请参考 package.json 文件, 从头构建项目可以参考视频教程

目录说明

. ├── /cfg/                       # webpack配置文件存放目录 │   ├── base.js                 # 基础配置 │   ├── default.js              # 默认配置 │   ├── dev.js                  # 开发环境配置 |   ├── dist.js                 # 生成环境配置 │   └── test.js                 # 测试环境配置 ├── /dist/                      # 存放最终打包输出的用于生产环境的项目文件 ├── /node_modules/              # node模块存放的目录 ├── /src/                       # 存放开发环境项目源码 │   ├── /actions/               # flux actions目录（没用到） │   ├── /components/            # 组件目录 │   ├── /config/                # 配置目录（没用到） │   ├── /sources/               # flux datasources目录（没用到） │   ├── /stores/                # flux stores(没用到) │   ├── /styles/                # 样式文件目录，内有一个App.css基础css文件 │   ├── index.html              # 项目入口文件 │   └── index.js                # js入口文件 ├── /test/                      # 单元测试和集成测试目录 │── .babelrc                    # Babel 配置文件 │── .eslintrc                   # ESLint代码风格检测配置文件 │── .gitignore                  # 配置不需要加入Git版本管理的文件 │── .yo-rc.json                 # yeoman的配置文件 │── karma.conf.js               # karma测试框架的配置 │── LICENSE                     # 软件使用许可 │── package.json                # npm的依赖配置项 │── README.md                   # 项目说明文件 │── server.js                   # 项目运行的js文件，命令可查看package.json中的script └── webpack.config.js           # webpack配置文件，不同环境的配置项在cfg目录下 部分扇区示意图

|------上扇区线-----| | | | |—————舞台线—————|——-——————|—————————|————————————————————| | |<--------|-------->| | | | | | | | | | | | |----------------|---- ___|____ ----|--------------------| | | | | | | 中心图片| | | |________| | | | | | | | | | | | | | |——————————————————————————|—————舞台线———————————————————| | 中轴线 ES5和ES6写法的不同点

创建组件

# ES5 Var AppComponent = React.createClass; # ES6 class AppComponent extends React.Component{ }

定义组件初始化状态

# ES5 getInitialState: function(){   return {     name: 'ck'   }; } # ES6 constructor(props) {   this.state = {     name: 'ck'  } }

箭头函数

# ES5 Var getRangeRandom = function(low, high) { return Math.floor(Math.random() * (high - low) + low); } # ES6 let getRangeRandom = (low, high) => Math.floor(Math.random() * (high - low) + low ); Git命令说明

# 查看更改的文件 git satus # 添加所有更改的文件进入本地暂存区 git add -A # 提交暂存区到仓库区 git commit -m " message " # 将本地仓库更新到远程仓库 git push # 强制删除本地分支 git branch -D gh-pages # 使用git的subtree将已有项目的某个目录分离成独立项目 # 并推送到分支 gh-pages # prefix指定本地推送的目录 git subtree push --prefix=dist origin gh-pages