99热精国产这里只有精品,四虎国产成人永久精品免费,亚洲三级香港三级久久

首頁免費課 React實戰(zhàn)--打造畫廊應用（上）問答

React實戰(zhàn)--打造畫廊應用（上）

                
                Materliu
            Web前端工程師

                    查看講師更多課程 
                    Materliu講師的其他課程
                
Sass和Compass必備技能之Compass
中級·21216
免費課程
                                
Sass和Compass必備技能之Sass篇
中級·29320
免費課程
                                
Grunt-beginner前端自動化工具
高級·60388
免費課程
                                
                難度高級
            
                時長 2小時 4分
            
                學習人數
            
綜合評分9.37
                            67人評價
                        查看評價
                                9.6
                                內容實用
                            
                                9.3
                                簡潔易懂
                            
                                9.2
                                邏輯清晰

全部評論問答未解決精華

qq_痛恍若隔世的幸福_0

選擇的時候也是各種不一樣，為什么
? Please choose your application name (galleryByReact) n
? Which style language do you want to use? (Use arrow keys)
? Enable postcss? (y/N) n

2 2-1 項目生成

2016-11-03

刻月十字

今天是萬圣節(jié)。。。。。。。

4 1-1 react實踐介紹

2016-10-31

weibo_杰米桀彌_0

不是“菊特”吧

0 2-1 項目生成

2016-10-30

慕粉3800378

代碼 https://github.com/xingbofeng/gallery-by-react

demo http://www.xingbofeng.com/gallery-by-react/

版本更新后寫完了本項目，有完整注釋和項目文檔，希望能給小伙伴們一些參考。

如果覺得幫到了您，不放給個follow和贊呀。

2 3-4 圖片組件構建(三)

2016-10-29

走走婷婷1215

就這么幾節(jié)課，每節(jié)課這么十幾分鐘，我已經來來回回刷了好幾遍了，尤其是webpack這兩節(jié)。最后放棄掙扎，安裝了generator-react-webpack@1.2.11，跟著老師的腳步走吧！
N刷的我路過～

5 2-2 webpack（一）

2016-10-29

Vidor_Chan

完全是看懵了。

0 3-4 圖片組件構建(三)

2016-10-29

慕標6343877

哈哈哈，果真，視頻所用版本用@吸氧武士所說的 npm install -g generator-react-webpack@1.2.11，然后grunt serve 運行; 現在新版本npm install -g generator-react-webpack用 @凌橙所說的 npm start運行;哦也~~都測試成功??！開森

2 2-1 項目生成

2016-10-28

junyu14

1 初始化Constant
2 componentDidMount結束時：計算出Constant內的各取值范圍，執(zhí)行rearrange函數

3 getInitialState初始化:建立數組imgsArrangeArr:
imageDatas.forEach this.state.imgsArrangeArr[index].pop 讓每個圖片都有imgsArrangeArr[index]

4 執(zhí)行rearrange函數 Constant.h.x
imgsArrangeArr[i].pos = Constant.h.x (1.2+3)的結果:每個圖片的位置確定

0 3-3 圖片組件構建(二)

2016-10-27

junyu14

5 imageDatas.forEach 把JSON分解為16個<img> 給定圖片信息和位置
arrange={this.state.imgsArrangeArr[index]} 傳給每個圖片的位置，通過 this.props.arrange.pos 掛鉤起來

0 3-3 圖片組件構建(二)

2016-10-27

junyu14

3：點擊時，調用rearrange（this）
3.1（this移動到中心，其他圖片重排（方法））：調用rearrange()函數
3.2this.setState（執(zhí)行）：位置信息變?yōu)橹行?br /> 3.3（arrange={this.state.imgsArrangeArr[index]}（真執(zhí)行））把這個信息交給html 綁定，最后才顯示

1 3-3 圖片組件構建(二)

2016-10-27

junyu14

2位置
componentDidMount
（this.rearrange(0)(方法)） this.setState（執(zhí)行）
確定各自的的位置：第一張放中間第二張放where 最后一張放top

（arrange={this.state.imgsArrangeArr[index]}（真執(zhí)行））完成后，同步給各自的圖片，每張圖片自己來領取自己的信息

各自的圖片把自己的位置信息領回家，用一個袋裝起來
styleObj = this.props.arrange.pos;

放在自己的style里 style={styleObj}
}
打包所有圖片，render出來{}

1 3-3 圖片組件構建(二)

2016-10-27

junyu14

！?。。∷悸?br /> ////////////////////
遍歷JSON，把圖片的路徑信息放進去

重新遍歷新JSON，把它分解成16張，初始化位置，同時把各自信息（文字，位置）傳遞給各自圖片
{

1文字圖片：data={value（來自JSON）} src={this.props.data.imageURL}

1 3-3 圖片組件構建(二)

2016-10-27