本文是本人自己辛苦翻譯的凛忿，請(qǐng)轉(zhuǎn)載的朋友注明喘垂，翻譯于Z.MJun的簡(jiǎn)書(shū) 买鸽，感謝胰耗！<翻譯不容易啊>
翻譯于2017年6月27日侥蒙，原文
變量描述
const element = <h1>Hello, world!</h1>;
這個(gè)Tag標(biāo)識(shí)并不是String慌核，也不是HTML>谈跛。這個(gè)標(biāo)識(shí)是Js的一種擴(kuò)展語(yǔ)法蜕猫。推薦使用JSX來(lái)開(kāi)發(fā)react箫措。
以下說(shuō)說(shuō)JSX的基礎(chǔ)內(nèi)容
Embedding Expressions in JSX
可以嵌入任意的JS擴(kuò)展到JSX的括號(hào)里面腹备，如2+2，user.fristName和formatName(user)都可以有以下表達(dá)方式
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
代碼規(guī)范在這里就不多說(shuō)了斤蔓，不過(guò)可以參考以上寫(xiě)法植酥，這樣可讀性比較強(qiáng)，不容易出錯(cuò)。
Specifying Attributes with JSX
使用JSX指定屬性友驮。
可以使用引號(hào)指定字符嵌入屬性中
const element = <div tabIndex="0"></div>;
也可以使用大括號(hào)把JS代碼嵌入到屬性中
const element = <img src={user.avatarUrl}></img>;
注意：使用引號(hào)里面只能是
string類(lèi)型漂羊，不能是JS代碼。大括號(hào)內(nèi)只能是JS代碼卸留，不能是string類(lèi)型走越。兩者不能混淆。
Specifying Children with JSX
JSX的children
如果一個(gè)標(biāo)簽是空著耻瑟，后面必須添加/>旨指，如XML
const element = <img src={user.avatarUrl} />;
JSX的標(biāo)簽包含子元素
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
特別注意：
JSX并不是HTML，而是JS喳整。所以在命名的時(shí)候不要使用HTML的風(fēng)格谆构，應(yīng)當(dāng)使用JS的camelCase駝峰試命名。
JSX Prevents Injection Attacks
必須提前聲明所要嵌入的JS變量框都，如
const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;
未經(jīng)申明的內(nèi)容低淡，不能提前嵌入。
JSX Represents Objects
JSX對(duì)象表達(dá)式瞬项，以下兩個(gè)表達(dá)式都是一個(gè)意思
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
如果使用React.createElement()來(lái)表達(dá)，會(huì)更好何荚，能明顯的減少問(wèn)題發(fā)生囱淋。
// Note: this structure is simplified
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
};
這個(gè)構(gòu)建函數(shù)叫React elements。React元素餐塘。
提示:
如果選擇使用ES6和JSX妥衣，建議了解下"Babel"的知識(shí)。
