React js入門

1. React 入門
2016/05/30 主講：小賴

2. 介紹
 React 是 Facebook 在 2013 年所發表的一個處理前
端 UI 的開源函式庫。
 Solve one problem:
 Building large applications with data that changes over
time
 解決建置資料不斷更新的大型系統 前端瀏覽效以的問題
 官方網站

3. 特色
 Virtual DOM:讓執行速度加快的關鍵
 Component:提高重用性

4. Virtual DOM
 由於操作DOM是個昂貴的動作
 React會將頁面結構透過virtual DOM紀錄起來資料變
動時，將virtual DOM與實際的DOM比對只更動需要
異動的部分，以加快呈現速度

5. 元件Component
 定義元件
 ReactClass createClass(object specification)
<div id="example"></div>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function() {
return (
<h1>Hello,World!</h1>
);
}
});
ReactDOM.render(
<HelloWorld/>,
document.getElementById('example')
);
</script>
sample02-component.htm

6. JSX
JSX是在javascript程式碼當中，看起來類似XML的語法
用來描述頁面結構。
深入JSX

7. JSX注意事項
 class => className
 for => htmlFor
 JSX 撰寫要符合xml 標準，開放標籤要記得結尾,例如
<br/>

8. JSX 編譯
 npm install -g react-tools
 jsx --watch src/ build/
 From React 快速導覽

9. Babel
 The compiler for writing next generation
JavaScript
 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-
core/5.8.23/browser.min.js"></script>
 Babel REPL
Sample01-helloworld.htm

10. props
 通常用在靜態資料上
讓父元件傳遞資訊給子元件
sample03-props.htm

11. state
 存放內部時常變動的資料
sample04-state.htm

12. refs
sample05-refs.htm

13. Separate File
<script type="text/babel" src="src/helloworld.js"></script>
Note that some browsers (Chrome, e.g.) will fail to load the file unless
it's served via HTTP.
sample06-separate-file.htm

14. Component Lifecycle
 Components have three main parts of their lifecycle:
 Mounting: A component is being inserted into the DOM.
 Updating: A component is being re-rendered to determine if the
DOM should be updated.
 Unmounting: A component is being removed from the DOM.
will methods, which are called right before something happens.
did methods which are called right after something happens.

15. Component Lifecycle
 componentWillMount()
 componentDidMount()
 componentWillReceiveProps(object nextProps)
 shouldComponentUpdate(object nextProps, object nextState)
 componentWillUpdate(object nextProps, object nextState)
 componentDidUpdate(object prevProps, object prevState)
 componentWillUnmount()

16. 佳隆程式改寫(1)
 步驟1，定義Component
 <ChatRoom>
 <MessageBlock>
 <Messages>
 <InputSection>

17. 佳隆程式改寫(2)
 步驟2，資料關聯與事件撰寫
 Props
 State
 Refs
 getInitialState
 onClick、onKeyPress
 靜態資料傳入測試
 sample08-index-chatroom-2.html

18. 佳隆程式改寫(3)
 步驟3，Socket
 動態資料測試
 初始化程式設定 (componentDidMount)
 監聽Socket
sample11-index-chatroom-scoket.html

19. React Native
 2015 年 3 月份的時候， Facebook 開放了 React
Native 的原始碼
 利用 JavaScript 建立原生 iOS 及 Android App 的框架
 「只需撰寫一次，到處皆可執行」（ Write Once,
Run Everywhere ）

20. 其它參考連結
 [ReactJs]第一個實戰範例
 React Native (Teyou)
 不要只因為性能考量而選擇 React.js
 React基礎教學
 React Native 簡介：以 JavaScript 建構 iOS App
 ReactJS and Socket.IO Chat Application
 Windows下搭建React Native Android開發環境詳解
 React Native官網