项目描述

项目预览： https://success-cg.github.io/gallery-by-react/dist/

使用 react-webpack 脚手架制作一个图片画廊，点击中央图片会翻转显示背面的描述，点击四周图片，会把该图片移动到中央，其他图片重新随机排列。点击底部的控制按钮，同样可以操作对应的图片，进行翻转或居中

技术栈

• react： 当下三大前端主流框架之一

• webpack： 当下最流行的前端打包工具

• scss： 高效快捷的预编译 CSS

• autoprefixer： 自动添加 CSS 浏览器兼容前缀

• es6 语法： 更加简洁高效

• commonJS： 代码模块化，避免命名污染，便于维护

• iconfont: 字体图标，更小更清晰，替代图片

环境搭建

npm install -g yo

npm install -g generator-react-webpack

项目构建

yo react-webpack

项目启动

git clone [email protected]:18810666595/gallery-by-react.git

cd gallery-by-react

npm install

npm run serve