Hello reactJS 0~1 Bulid my first web app
-
Upload
hungjie19 -
Category
Technology
-
view
367 -
download
0
Transcript of Hello reactJS 0~1 Bulid my first web app
![Page 2: Hello reactJS 0~1 Bulid my first web app](https://reader034.fdocument.pub/reader034/viewer/2022042619/587bfca61a28ab7c668b5b43/html5/thumbnails/2.jpg)
Outline
• What is React ?• React 起手式 • Sample demo
– Hello word – Try 分割元件 (card 好友請求)
![Page 3: Hello reactJS 0~1 Bulid my first web app](https://reader034.fdocument.pub/reader034/viewer/2022042619/587bfca61a28ab7c668b5b43/html5/thumbnails/3.jpg)
What is React ?
![Page 4: Hello reactJS 0~1 Bulid my first web app](https://reader034.fdocument.pub/reader034/viewer/2022042619/587bfca61a28ab7c668b5b43/html5/thumbnails/4.jpg)
誰 在 用 ? 不
![Page 5: Hello reactJS 0~1 Bulid my first web app](https://reader034.fdocument.pub/reader034/viewer/2022042619/587bfca61a28ab7c668b5b43/html5/thumbnails/5.jpg)
出處 https://speakerdeck.com/coodoo/flux-in-action-shi-zhan-jing-yan-fen-xiang 引用簡報內容
![Page 6: Hello reactJS 0~1 Bulid my first web app](https://reader034.fdocument.pub/reader034/viewer/2022042619/587bfca61a28ab7c668b5b43/html5/thumbnails/6.jpg)
React 三大主軸
Data Flow
Just the UI
Virtual DOM
![Page 7: Hello reactJS 0~1 Bulid my first web app](https://reader034.fdocument.pub/reader034/viewer/2022042619/587bfca61a28ab7c668b5b43/html5/thumbnails/7.jpg)
Just the UI
• 元件化架構
• MVC / MVVM 裡面的 View – 但是更強大
• 封裝性
HTML
JS CSS
![Page 8: Hello reactJS 0~1 Bulid my first web app](https://reader034.fdocument.pub/reader034/viewer/2022042619/587bfca61a28ab7c668b5b43/html5/thumbnails/8.jpg)
Virtual DOM
• $(“app”) 成本太高
• 虛擬文件模型
• 資料改變,畫面一律重繪
– 畫面保證正確。
• JSX 語法
![Page 9: Hello reactJS 0~1 Bulid my first web app](https://reader034.fdocument.pub/reader034/viewer/2022042619/587bfca61a28ab7c668b5b43/html5/thumbnails/9.jpg)
React
Virtual DOM
DOM畫面改變
Develops
Virtual DOM(記憶體)
JQuery
把 div 文字變紅色
![Page 10: Hello reactJS 0~1 Bulid my first web app](https://reader034.fdocument.pub/reader034/viewer/2022042619/587bfca61a28ab7c668b5b43/html5/thumbnails/10.jpg)
JSXHTML in JavaScript
![Page 11: Hello reactJS 0~1 Bulid my first web app](https://reader034.fdocument.pub/reader034/viewer/2022042619/587bfca61a28ab7c668b5b43/html5/thumbnails/11.jpg)
HTML in JavaScript
JQ / Angular
![Page 12: Hello reactJS 0~1 Bulid my first web app](https://reader034.fdocument.pub/reader034/viewer/2022042619/587bfca61a28ab7c668b5b43/html5/thumbnails/12.jpg)
HTML in JavaScript
React
![Page 13: Hello reactJS 0~1 Bulid my first web app](https://reader034.fdocument.pub/reader034/viewer/2022042619/587bfca61a28ab7c668b5b43/html5/thumbnails/13.jpg)
Data Flow
• 單向資料流,由 Store 開始
• 所有的資料只存在 Store 內– Store = Model
• Flux– 開發架構 ( Pattern / 心法 )
• Flux 實作:
– Flux ( Facebook )– Redux ( 作者已被 Facebook 納入公司 )
![Page 14: Hello reactJS 0~1 Bulid my first web app](https://reader034.fdocument.pub/reader034/viewer/2022042619/587bfca61a28ab7c668b5b43/html5/thumbnails/14.jpg)
MVC vs
Flux
![Page 15: Hello reactJS 0~1 Bulid my first web app](https://reader034.fdocument.pub/reader034/viewer/2022042619/587bfca61a28ab7c668b5b43/html5/thumbnails/15.jpg)
Single source of truth
唯一的真相
![Page 16: Hello reactJS 0~1 Bulid my first web app](https://reader034.fdocument.pub/reader034/viewer/2022042619/587bfca61a28ab7c668b5b43/html5/thumbnails/16.jpg)
小結
• React 負責 View• Flux 負責 Model• 單向資料流
• 一律重繪
![Page 17: Hello reactJS 0~1 Bulid my first web app](https://reader034.fdocument.pub/reader034/viewer/2022042619/587bfca61a28ab7c668b5b43/html5/thumbnails/17.jpg)
Sample demo
![Page 18: Hello reactJS 0~1 Bulid my first web app](https://reader034.fdocument.pub/reader034/viewer/2022042619/587bfca61a28ab7c668b5b43/html5/thumbnails/18.jpg)
React 起手式 .1
• 建立元件:
– React.createClass( Object );• 將元件繪製到 HTML DOM:
– ReactDOM.render( component, getID );• 從 attribute 上面拿資料
– props• 元件的狀態
– state
![Page 19: Hello reactJS 0~1 Bulid my first web app](https://reader034.fdocument.pub/reader034/viewer/2022042619/587bfca61a28ab7c668b5b43/html5/thumbnails/19.jpg)
React 起手式 1-1React.createClass
建立 React 元件:React.createClass( object );
![Page 20: Hello reactJS 0~1 Bulid my first web app](https://reader034.fdocument.pub/reader034/viewer/2022042619/587bfca61a28ab7c668b5b43/html5/thumbnails/20.jpg)
React 起手式 1-2 React.createClass
元件繪製區
![Page 21: Hello reactJS 0~1 Bulid my first web app](https://reader034.fdocument.pub/reader034/viewer/2022042619/587bfca61a28ab7c668b5b43/html5/thumbnails/21.jpg)
React 起手式 .1-3React.createClass
JSX syntax
props 從 attributes 取得資料
{ JavaScript 表達式 }
![Page 22: Hello reactJS 0~1 Bulid my first web app](https://reader034.fdocument.pub/reader034/viewer/2022042619/587bfca61a28ab7c668b5b43/html5/thumbnails/22.jpg)
React 起手式 .1-4ReactDOM.render
component, getElement
元件畫好了怎麼放到 DOM 上面?
![Page 23: Hello reactJS 0~1 Bulid my first web app](https://reader034.fdocument.pub/reader034/viewer/2022042619/587bfca61a28ab7c668b5b43/html5/thumbnails/23.jpg)
React 起手式 .1-5完成第一個 React
![Page 24: Hello reactJS 0~1 Bulid my first web app](https://reader034.fdocument.pub/reader034/viewer/2022042619/587bfca61a28ab7c668b5b43/html5/thumbnails/24.jpg)
AngularJS 比較
![Page 25: Hello reactJS 0~1 Bulid my first web app](https://reader034.fdocument.pub/reader034/viewer/2022042619/587bfca61a28ab7c668b5b43/html5/thumbnails/25.jpg)
JSX 注意事項
HTML JSX<br> <br />class className
style=“color: red” (string) style={{color: “red”}} (object)for htmlFor
onclick onClick
![Page 26: Hello reactJS 0~1 Bulid my first web app](https://reader034.fdocument.pub/reader034/viewer/2022042619/587bfca61a28ab7c668b5b43/html5/thumbnails/26.jpg)
React 起手式 .2Try 元件分割
CardRequest
CardContainer
CardOption
CardName
CardImage
![Page 27: Hello reactJS 0~1 Bulid my first web app](https://reader034.fdocument.pub/reader034/viewer/2022042619/587bfca61a28ab7c668b5b43/html5/thumbnails/27.jpg)
END
![Page 28: Hello reactJS 0~1 Bulid my first web app](https://reader034.fdocument.pub/reader034/viewer/2022042619/587bfca61a28ab7c668b5b43/html5/thumbnails/28.jpg)
reference• https://facebook.github.io/react• https://facebook.github.io/flux• https://github.com/jarsbe/react-simple• https://speakerdeck.com/coodoo/flux-in-action-shi-zhan-jing-yan-fen-xiang• http://blog.littlelin.info/posts/2015/06/14/note-establishing-flux-app-from-scratch-1• https://github.com/gaearon/react-makes-you-sad• https://github.com/jarsbe/react-simple•