摘要：使用，不一定非要使用語法，可以使用原生的進行開發。注意標簽的屬性和，需要寫成和。因為兩個屬性是的保留字和關鍵字。在的設定中，初始化完后，是不可變的。改變會引起無法想象的后果。重要的是這個過程是由操控的，不是手動添賦值的屬性。

JSX可以看作JavaScript的拓展，看起來有點像XML。使用React，可以進行JSX語法到JavaScript的轉換。

使用React，不一定非要使用JSX語法，可以使用原生的JS進行開發。但是React作者強烈建議我們使用JSX，因為JSX在定義類似HTML這種樹形結構時，十分的簡單明了。簡明的代碼結構更利于開發和維護。
XML有著開閉標簽，在構建復雜的樹形結構時，比函數調用和對象字面量更易讀。看個直接的對比：

#使用JSX
React.render(
    

        

            
content
        
    
,
    document.getElementById("example")
);

#不使用JSX
React.render(
    React.createElement("div", null,
        React.createElement("div", null,
            React.createElement("div", null, "content")
        )
    ),
    document.getElementById("example")
);

  
JSX并不是新語言，也沒有改變JavaScript的語法，只是對JavaScript的拓展。

React.render方法可以渲染HTML結構，也可以渲染React組件。
渲染HTML標簽，聲明變量采用首字母小寫

var myDivElement = 
;
React.render(myDivElement, document.body);

渲染React組件，聲明變量采用首字母大寫

var MyComponent = React.createClass({/*...*/});
var myElement = ;
React.render(myElement, document.body);

通過變量的聲明，來區分HTML標簽和React組件，這個可以看作一個約定吧。

  
注意：標簽的屬性class和for，需要寫成className和htmlFor。因為兩個屬性是JavaScript的保留字和關鍵字。無論你是否使用JSX。

#使用JSX
React.render(
    content,
    document.getElementById("example")
);

#不使用JSX
React.render(
    React.createElement("label", {className: "xxx", htmlFor: "input"}, "content"),
    document.getElementById("example")
);

React JSX將類似XML的語法轉化到原生的JavaScript，元素的標簽、屬性和子元素都會被當作參數傳給React.createElement函數：

#JSX
var Nav;
var app = 

表達式用{}包起來，不要加引號，加引號就會被當成字符串。

JSX是HTML和JavaScript混寫的語法，當遇到<，JSX就當HTML解析，遇到{就當JavaScript解析。

React.render(
    
 1 ? "class-a" : "class-b"}>content
,
    document.body
);

var Nav = React.createClass({
    render: function () {
        return 
nav
    }
});

React.render(
    

        {2 > 1 ? 
,
    document.body
);

同JavaScript注釋一樣

單行注釋 // comments

多行注釋 /* comments */

如果提前就知道了組件的屬性的話，寫起來很容易。例如component組件有兩個動態的屬性foo和bar：

var component = ;

而實際上，有些屬性可能是后續添加的，我們沒辦法一開始就確定，我們可能會寫出下面不好的代碼：

var component = ;
component.props.foo = x; // bad
component.props.bar = y; // also bad

這樣寫是錯誤的，因為我們手動直接添加的屬性React后續沒辦法檢查到屬性類型錯誤，也就是說，當我們手動添加的屬性發生類型錯誤時，在控制臺是看不到錯誤信息的。

在React的設定中，初始化完props后，props是不可變的。改變props會引起無法想象的后果。

為了解決這個問題，React引入了屬性延伸

var props = {};
props.foo = x;
props.bar = y;
var component = ;

當需要拓展我們的屬性的時候，定義個一個屬性對象，并通過{...props}的方式引入，React會幫我們拷貝到組件的props屬性中。重要的是—這個過程是由React操控的，不是手動添賦值的屬性。

需要覆蓋的時候可以這樣寫：

var props = { foo: "default" };
var component = ;

在React中寫行內樣式時，要這樣寫，不能采用引號的書寫方式

React.render(
    

        xxxxx
    
,
    document.body
);

比如我們有一些內容是用戶輸入的富文本，從后臺取到數據后展示在頁面上，希望展示相應的樣式

var content="content";

React.render(
    
{content}
,
    document.body
);

結果頁面直接輸出內容了：

React默認會進行HTML的轉義，避免XSS攻擊，如果要不轉義，可以這么寫：

var content="content";    

React.render(
    
,
    document.body
);

頁面效果：

如果在編寫React過程中使用了自定義屬性，React不會渲染的

React.render(
    
content
,
    document.body
);

要想使用得這么寫：

React.render(
    
content
,
    document.body
);