ccckaass的部落格

基本範例：

使用 React.createClass({...}) 宣告要生成的元件內容以及相關的屬性參數等等資料 (行:2)

使用 React.render (已建立的 React Vitril DOM,目標元素ID) 執行 (行:14)

render:function(){...}

要生成的元件內容, 除了html以外可以加入js碼, 如此例中的 thisprops.date.toTimeString()(行:3)

這個例子透過 setInterval 間隔0.5秒更新一次時間, 在 React.render() 執行時帶入 new Date() 變數到 date 中, 與(行7)的 this.props.date.toTimeString() 呼應

基本範例2：

範例2透過點擊 <p> 元素來改變文字內容(行:11)

getInitialState:function(){...}

初始化執行的動作(?), 可以取得元件初始化時的狀態

定義 liked = false

handleClick:function(){...}

定義 <p> 的 onclick 事件 (行:13)

需要注意的是執行 this.setState({liked: !this.state.liked});

當有事件發生而異動時，使用 setState() 來更新狀態，React 收到異動時會自動呼叫 render() 方法來產生新的畫面

在範例中此動作定義了 State內的 liked = 目前liked的反狀態

範例3：

建立三個物件(Avatar 、 ProfilePic 、ProfileLink ), 其中ProfilePic 、ProfileLink 繼承 Avatar物件的username

行32的username1與行6、7相關聯 而行6則與行16關聯(username2)、行7與行24.25關聯(username3)

最後只要透過 React.render 便可以從Avatar物件中也處理出ProfilePic及ProfileLink兩個標籤

使用Mixin的範例：

對DOM的操作範例：

內容很簡單, 一個清除用的標籤 + 一個輸入框 + 一個顯示輸入的DIV, 清除輸入框的值後focus回輸入框

很基本的範例, 但有幾個重點值得注意：

1. 輸入框的初始 value 參照 react state 的userInput(行:25)

我們透過 getInitialState() (行:3)的 function 來定義userInput的初始值, 如果在不宣告初始值則會產生錯誤

2.React.creactClass 下的 Handlefunction 名稱可以自行定義 (ex. ClearInput(行:10))

3.每輸入一個值都會進入handleChange(), 必須要setState userInput 值才能持續輸入字元(行:8)

參考來源：https://www.gitbook.com/book/cswleocsw/react-guide-learing/details