一、
1、JSX：即JavaScript XML——一種在React組建內部構建標籤的類XML語法。（增強React程序組件的可讀性）；
2、使用動態值：
JSX將兩個花括號：{}渲染成動態值，花括號指明瞭一個JavaScript上下文環境——或括號內的任何東西都會進行求值，得到的結果會被渲染爲標籤中的若干節點。
對於簡單值，比如文本或者數字，你可以直接引用對應的變量，例如：
var text=‘Questions’；
<h2>{text}</h2>
對於更復雜的邏輯，可以更傾向於將其轉換成一個函數來求值,例如：
function（）dateToString（d）{
return【
d.getFullYear();
d.getMonth()+1;
d.getDate()
].join('-');
}；
<h2>{dateToString(newDate())}</h2>
React通過數組中的每個元素渲染爲一個節點的方式對數組進行自動求值：
var text=[‘hello','hello'];
<h2>{text}</h2>
//<h2>helloworld</h2>
3、子節點
比起簡單的值，我們通常希望渲染一些更復雜的數據，比如說，可以把數組中的所有數據渲染成若干個<li>元素，就要涉及到子節點了：
var Divider =React.createClass（{
render：function（）｛
return（
<div className="divider">
<h2>{this.props.children}<h2>
</div>
）
}
}）；
<Divider>Questions</Divider>
React將開始標籤和結束標籤中所有的子節點保存在一個名爲this.props.children的組件屬性中。而以上例子中this.props.children==["Questions"];
4、JSX與HTML比較
1)屬性設置
var surveyQuestionId =this.props.id;
var classes ="some-class-name";
...
<div id = {surveyQuestionId}className={classes}>...</div>
對於屬性的設置和HTML很相似，注意設置class的方式不是class而是className；對於更復雜的情景可以把屬性設置爲一個函數調用返回的結果；
<divid={this.getSurveyId()}>...</div>
React每渲染一個組件時，知道哪個的變量和函數會被求值，而總重生成的DOM結構反映出這個新的狀態。
2）條件判斷
在React中組件的HTML標籤和生成這些標籤的代碼內在的緊密聯繫在一起，這意味着可以利用JavaScript強大的功能，例如循環和條件判斷。
要是在組件中添加條件判斷似乎是很困難的事情，因爲if/else邏輯很難用HMTL標籤來表達。直接往JSX中加入if語句會渲染出無效的JavaScript。
解決辦法：
使用三目運算符，設置一個變量並在屬性中引用它，將邏輯轉化到函數中，使用$$運算符，以下演示：
使用三目運算符：
render：function（）{
return <divclassName={
this.state.isComplete ?'is-complete'：‘‘
}>...</div>
}
雖然對於文本來說三目運算符可以正常運行，但是如果想要在其他情況下很好地應用ReactComponent,三目運算符就可能顯得笨重又麻煩了。對於這些情況最好使用以下方法：
使用變量：
getIsComplete:function(){
return this.state.isComplete ?'is-complete' : ' ';
},
render:function(){
var isComplete= this.getIsComplete();
return <divclassName={isComplete}>...</div>
}
使用函數：
getIsComplete:function(){
return this.state.isComplete ?'is-complete' : ' ';
},
render:function(){
return <div className={this.getISComplete()}>...</div>
}
使用邏輯與（&&）運算符
由於對於null或者false值React不會輸出任何內容，因此你可以使用一個後面跟隨了期望字符串的布爾值來實現條件判斷。如果這個布爾值是true，那麼後續的字符串就會被使用。
render：function（）{
return <divclassName={this.stae.isComplete && 'is-complete'}></div>
}
5、非DOM屬性
1）下面的特殊屬性只有在JSX中存在：key、ref、dangerouslySetInnerHTML
鍵（key）：
可以是一個可選的唯一標識符。在程序運行的過程中，一個組件可能會在組件樹中調整位置，比如當前用戶在進行所有操作時，或者當一個列表中的物品被增加、刪除時。這種情況下組件可能不需要被銷燬並重新創建。
通過給組件設置唯一的key。確保渲染週期內保持一致，使React能夠更智能的決定應該重用一個組件，還是銷燬並重新創建一個組件，今兒提升渲染的性能，當兩個已經存在DoM中的組建交換位置時，可以不用重新渲染DOM而是移動。
引用（ref）：
ref允許負父組件在render方法之外保持對子組件的一個引用。
在jSX中，可以通過屬性中設置期望的引用名定義一個引用。例如：
render：function（）{
return <div><input ref='myInput'.../></dib>
}
然後，你就可以在組件中的任何地方使用this.refs.myInput獲取這個引用了。通過或者這個對象唄成爲支持實例。並不是真的DOM，而是REact在需要的是有用來穿件DOM的一個描述對象。可以使用this.refs.myInput.getDOMNode()訪問真實的DOM節點。
設置原始的HTML：
dangerouslySetInnerHTML——有時候需要將HTML內容設置爲字符串，尤其是使用通過字符串操作DOM的第三方庫時，爲了提升React的互操作性，這個屬性允許你使用HTML字符串，然而如果你可以避免使用的話那就儘量不要使用。要使用這個作用要把字符串設置到逐漸爲html_的對象裏，像這樣：
render：function（）{
var htmlString={
_html:"<span>an htmlstring</span>“
}；
return <div dangerouslySetInnerHTML={htmString}</div>
}
6、事件
1）在所有瀏覽器中，時間名已經被規範化並同意用駝峯形式表示。例如，change變成了onChange，click變成了onClick，在JSX中，捕獲一個事件就像是給組件的方法設置一個屬性一樣簡單。
handleClick：funcition(event){............},
render:function(){
rerurn <divonClick={this.handleClick}>...</div>
}
...
注意，React自動綁定了組建所有方法的作用域，因此你永遠都不需要手動綁定。
handleClick:function（event）{.....}
render:function(){
//反模式——在React中手動給組件實例綁定
//函數的作用域是沒有必要的
return <div onClick ={this.handleClick.bind(this)}></div>
}
7、註釋
1）JSX本質上就是JavaScript，因此你可以在標籤內添加原生的JavaScript註釋，註釋可以用以下兩種方式添加：當作一個元素的子節點、內聯在元素的屬性中。
2）做爲子節點
子節點形式的註釋只需要簡單的包裹在花括號內即可，並可以跨多行。
例如：
{/*內容。。。。。。*/}
3)作爲內聯屬性
/*
內容
內容
*/
或者採用常用的 //來做單行註釋
4）特殊屬性
由於JSX會轉化成原生的JavaScript函數因此有一些關鍵詞我們不可以用的：如for和class
要給表單裏的變遷添加for屬性需要使用htmlFor，要渲染一個自定義的class需要使用className。可以通過elem.className獲取元素的class。
8、樣式
React把內聯樣式規範化爲了駝峯形式，與JavaScript中DOM的style屬性一致。要添加自定義的樣式屬性，只需簡單地把駝峯形式的屬性名及期望的CSS值拼裝爲對象即可。
varstyles={
borderColor：“#999",
borderThickness：“1px”
}；
React。renderComponent（<div ｓｔｙｌｅ＝｛ｓｔｙｌｅｓ｝＞．．．＜／ｄｉｖ＞，ｎｏｄｅ）；
９、沒有ＪＳＸ的Ｒｅａｃｔ
所有的ＪＳＸ標籤最後都會被轉換成原生的ＪａｖａＳｃｒｉｐｔ，因此Ｒｅａｃｔ並不是必要的，但是ＪＳＸ的確減少了一部分複雜性。
React.createElement('div');
React.DOM.div();
然而對於自定義組件來說必須爲組建類創建一個工廠。
