jeft-hai / gallery-by-react

https://jeft-hai.github.io/gallery-by-react/

gallery-by-react

安装运行 使用yoman、webpack

1. npm install yo -g
   
2. npm install generator-react-webpack -g
   
3. yo react-webpack gallery-by-react 自动生成项目
   
4. 运行 node server.js
   
5. npm install autoprefixer-loader --save-dev
   
6. 编辑 Main.js 开始项目
   
7. 打包 npm run dist
   

发布项目

注意

发布时：index.html中要直接引用的文件地址
发布时：图片引用地址要更改

1. git init
   
2. git add .  （一定注意add后面的 . 前后要有空格）
   
3. git commit -m 'react'
   
4. git remote add origin https://github.com/JEFT-hai/gallery-by-react
   
5. git pull origin master
   
6. git push -u origin master
   
7. git subtree push --prefix=dist origin gh-pages 推送到Github提供的静态文件访问上
   
8. 访问http://jeft-hai.github.io/gallery-by-react/
   

有时候pull后上传出错（fatal: refusing to merge unrelated histories）,可以用
git pull origin master --allow-unrelated-histories命令

知识点

1. 图片的信息存在imageDatas.json中
   
2. 翻转图片：.img-back 先翻转180度，这样就到了背面，点击时父元素翻转180度，这样子元素就是360度，就朝上了。
     父元素 .img-figure.is-inverse{transform:translate(320px) rotateY(180deg);}
     子元素 .img-back{transform:rotateY(180deg) translateZ(1px);} （translateZ(1px)是为了兼容性）
     改进翻转画面：.img-sec （perspective:600px;）
   .img-figure
       　{
        　transform-origin: 0 50% 0;
        　transform-style:preserve-3d;
        　transition:transform .6s ease-in-out,left .6s ease-in-out,top .6s ease-in-out;
       　}
   
3. react创建组件 class AppComponent extends React.Component {}
4. react获取DOM节点 let stageDOM = ReactDOM.findDOMNode(this.refs.stage) ref="stage"。
5. Icon Font:字体文件 取代图片文件展示图片（1体积小，2支持css3属性变形）需在头部进行字体声明：@font-face{font-family:"";src:url() format(兼容)}
6. react 重新渲染时，是比较之前的结构和现在的结构，用key 给数组对应的一个值更快速的配对，加快性能。(现在key值是必须的）key={index}