初識React:React --- A JavaScript Library for building User Interfaces
了解react是幾個月之前的事了,出于好奇心和求知欲,找了本完整的介紹React的電子書,從頭到尾的看完,就被它吸引。作為一個前端開發工程師,要想不落伍,不被淘汰,總是要不斷吸取新的知識來給自己充電。
React是由Facebook推出的一個用來構建用戶界面的JavaScript庫:
1)一個JavaScript庫;
2)用于創建可組成的UI;
3)使用jsx(JavaScript Syntax Extension)
優點:
1)渲染簡單;
2)面向組件開發;
3)虛擬DOM
學以致用:實踐出真知
任何知識習得之后如果不應用,都是會被遺忘的。
雙十一臨近,作為一個電商公司,總會有很多的營銷頁面需要做,Boss給我安排了一個營銷活動的項目(搖錢樹),剛好也是一個獨立的項目,我就決定用新學的React來做,也是對自己的考驗。其實這真的是一個考驗,雖說只是一個雙11的營銷頁面,但時間很短、工作量很大。
項目是一個搖錢樹游戲,微信用戶進入頁面,種樹、澆水,長金幣,分享到朋友圈,召集朋友澆水長金幣,排行榜,兌換金幣。兩周時間,6個頁面,新的知識,其實大家都挺忙,特別是雙11臨近,最后,美工給的psd,自己還得切圖。
在連續加班兩個星期之后,最終還是完成了任務。當項目上線之后,其實內心是很滿足的,最后呈現出來的也許只是幾個頁面,但是背后的過程還是很值得回味。這也是自己獨立完成的一個比較大的營銷活動,學到的知識也很多,不僅鞏固了React(雖然相對來說沒有用到很復雜的東西,但至少是學以致用),也學會了切圖。這就好比打怪獸,經驗值又上升了。
H5效果圖:
活動上線8天,已有參與種樹用戶4w,澆水總數53w,平均每天訪問人數14w。總的來說,還是滿成功的。
總結:
1)所有元素響應式布局(rem);
2)進度條和dialog組件化;
3)React生命周期
4)ES6語法、webpack打包;
這只是一個開始,一入前端深似海。僅以此記錄我的第一個React項目。
如有對React感興趣的朋友,推薦一本書給大家 Pro React,一本非常好的學習React的教材。