JSX簡介
JSX是JavaScript的預(yù)發(fā)擴(kuò)展。推薦在React中使用JSX來描述用戶界面揭朝。
1.在JSX中使用表達(dá)式
在JSX中可以任意使用JavaScript表達(dá)式纽乱，需要放在大括號中{}.
比如像運(yùn)算 2+2幸缕，對象獲取屬性user.firstName以及調(diào)用JavaScript函數(shù)formatName(user)都可以作為表達(dá)式在JSX中使用悔详。
例如：
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')
);
在這段代碼中，真正的JSX部分是最后的兩段代碼宰睡，其中ReactDOM.render是將定義的內(nèi)容通過ReactDOM渲染成html的DOM蒲凶。element的定義是使用了表達(dá)式，看到調(diào)用JavaScript函數(shù)formatName的時(shí)候在外層加上了大括號{}夹厌。
上邊的兩段代碼就是我們平常寫的JavaScript代碼豹爹，第一段是函數(shù)，第二段是對象定義矛纹。
可以看到臂聋，element元素在定義的時(shí)候，在外層加上了小括號()或南，其實(shí)不加也可以孩等。不過推薦加上小括號，這樣可以防止分號自動(dòng)插入的bug采够。也就是說在element定義的時(shí)候也可以如下的(親測可以)：
const element = <h1>Hello, {formatName(user)}</h1>
這里看到很像html或者xml語法肄方，元素的閉合性也需要注意。
2.JSX本身也是一種表達(dá)式
JSX本身也是一種表達(dá)式蹬癌，JSX最終會(huì)結(jié)果React編譯权她，轉(zhuǎn)換成普通的JavaScript對象虹茶。那么這也就意味著，在JavaScript的語法中比如if或者for語句塊中使用JSX隅要，或者將JSX賦值給變量蝴罪，或者當(dāng)做函數(shù)的參數(shù)傳入，當(dāng)做返回值步清。
如下邊的代碼:
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
3.JSX屬性
你可以使用引號來定義以字符串為值的屬性
const element = <div tabIndex="0"></div>;
也可以使用大括號來定義以 JavaScript 表達(dá)式為值的屬性
const element = (<img src={user.avatarUrl} />);
切記你使用了大括號包裹的 JavaScript 表達(dá)式時(shí)就不要再到外面套引號了要门。JSX 會(huì)將引號當(dāng)中的內(nèi)容識(shí)別為字符串而不是表達(dá)式。
4.JSX嵌套
如果JSX標(biāo)簽是閉合的廓啊，那么在結(jié)尾處需要使用 />欢搜，就像XML和HTML一樣。
const element = <img src="http://www.baidu.com" />
JSX標(biāo)簽也可以嵌套谴轮，就是類似在定義XML/HTML標(biāo)簽的時(shí)候炒瘟，也是可以嵌套的。
const element = (
<div>
<h1>hello world!</h1>
<h2>good to see you here</h2>
</div>
);
如前面所說书聚，不用加小括號()也是可以的,可以測試：
const element =
<div>
<h1>hello world!</h1>
<h2>good to see you here</h2>
</div>
;
但是需要注意的是唧领，如前面所說的元素的閉合性藻雌，如下的代碼是有問題的：
const element = (
<h1>hello world!</h1>
<h2>good to see you here</h2>
);
此時(shí)雖然用括號括起來了雌续，作用一個(gè)JSX元素，但是標(biāo)簽并不是閉合的胯杭，開頭是以
<h1>開始驯杜，那么React認(rèn)為是結(jié)尾應(yīng)該以</h1>結(jié)束，但是這里卻是</h2>結(jié)束做个。
