思考一下這樣的變量聲明：
const element = <h1>Hello, world!</h1>;
上面這個好玩的標(biāo)記語法既不是字符串也不是html篱蝇，它被稱之為JSX穗酥，是一種對javascript的擴(kuò)展龄章。我們建議你使用它來描繪界面上的UI組件痊项。JSX或許會使你想起模版語言胳赌，但是它卻擁有javascript的強(qiáng)大的力量咳榜。
用JSX寫出的這種聲明被稱之為“elements”夏醉，我們將會在下一個章節(jié)將它渲染到DOM樹上，接下來涌韩，你將會了解到JSX怎么使用畔柔，明白它具有夢幻般的魔力的原因????。
1臣樱。JSX中可以嵌入javascript
你可以將任何javascript代碼用大括號{}包起來嵌入到JSX里面靶擦，舉個例子：2+2，user.name雇毫，和formatName(user)都是OK的玄捕。
<code>
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')
);
</code>
在CodePen上試試吧
上面的代碼將它分為多行來寫只是為了更清晰的閱讀，這并不是強(qiáng)制的棚放，所以在實(shí)際寫代碼中符合規(guī)則就行桩盲，但是我們?nèi)砸ㄗh你用小括號()把JSX包起來，因?yàn)橐遣贿@么做的話可能會有暗坑席吴。
2赌结。JSX可以被看作一般的javascript變量
在解釋器解析用JSX寫的代碼后，會把它完全轉(zhuǎn)換成javascript代碼孝冒，這就意味著你可以在JSX里面用if判斷語句柬姚，for循環(huán)語句，將其指定為變量庄涡，參數(shù)量承，或者返回值等等。
<code>
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
</code>
3穴店∷汉矗可以指定JSX的參數(shù)
參數(shù)可以用字符串形式指定：
const element = <div tabIndex="0"></div>;
也可以用javascript表達(dá)式指定：
const element = <img src={user.avatarUrl}></img>;
4。指定JSX的孩子節(jié)點(diǎn)
如果這個JSX沒有孩子的話泣洞，直接用/>結(jié)束：
const element = <img src={user.avatarUrl} />;
如果這個JSX包含孩子的話：
const element = ( <div> <h1>Hello!</h1> <h2>Good to see you here.</h2> </div> );
警告：
因?yàn)镴SX更接近于javascripte而不是html忧风，所以ReactDom標(biāo)簽的參數(shù)名用駝峰命名法命名而不是html標(biāo)簽的命名發(fā)，比如：html里面的class變成了className球凰，tabindex變成了tabIndex狮腿。
5腿宰。JSX可以防止注入攻擊
在JSX插入用戶輸入的值是非常安全的：
const title = response.potentiallyMaliciousInput; // 這樣是安全的: const element = <h1>{title}</h1>;
在默認(rèn)狀態(tài)下，ReactDom會忽略所以插入JSX的值直到渲染它們之前缘厢。因此這種機(jī)制確保了你不會注入任何在你書寫應(yīng)用時不確定的值吃度。所以東西都會被轉(zhuǎn)換成字符串直到它們被渲染。它確保了XSS攻擊贴硫。
6椿每。JSX實(shí)際上就是Javascript中的對象
Babel解釋JSX的時候會調(diào)用React.createElement()這個函數(shù)。下面的這兩個例子是一樣的：
one：
const element = ( <h1 className="greeting"> Hello, world! </h1> );
two:
const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );
React.createElement()會對你寫的代碼進(jìn)行一些檢測以便于你的代碼不出bug英遭，但實(shí)際上還是將JSX轉(zhuǎn)換成了一個對象间护，向下面這樣：
const element = { type: 'h1', props: { className: 'greeting', children: 'Hello, world' } };
這個對象就被稱為React elements。你可以把它描述為你想在屏幕上顯示的元素贪绘。React用這些元素來構(gòu)建DOM樹并且保證它們可以實(shí)時更新兑牡。我們將會在下一個章節(jié)將這些element渲染到DOM樹上??????。
