JSX構(gòu)建元素
之前我們使用 React.createElement來構(gòu)建ReactElement：
var boldElement = React.createElement('b', null, 'Text (as a string)')

當(dāng)我們構(gòu)建小組件的時候，這種方法用起來還行，但是如果我們要構(gòu)建許多有相互嵌套的組件的時候，這種方法就顯得很麻煩了。

我們可以想著一種方式：我們編寫HTML來告訴瀏覽器頁面應(yīng)該是什么樣的；瀏覽器解析這種HTML變成可以變成DOM元素的HTML。

HTML對于描述元素的層級關(guān)系是非常好的。所以，React用類似于HTML的方式來表達React組件。
這就是JSX背后的思想。

我們可以將剛剛的React.createElement方式構(gòu)建的元素用JSX替代：
var boldElement = <b>Text (as a string)</b>

JSX是JavaScript的一種語法拓展(JavaScript Syntax Extension)，這是React提供的看起來像HTML/XML的一種語法。我們用這個方法編寫組件就好像使用HTML那樣，而不是直接使用JavaScript的方式。

盡管JSX提供的語法很像HTML，但是JSX可以讓我們構(gòu)建自己的標簽（例如將其他功能性的組件封裝起來成為一個標簽）。

React組件和HTML標簽的區(qū)別之一就是它的命名方式。HTML標簽的首字母是小寫的，而React組件的首字母必須大寫。例如：

// html標簽
const htmlElement = (<div>hello world</div>)

// React組件
const Message = props => (<div>{props.text}</div>)

我們通常會使用圓括號()將JSX包裹起來。盡管這不是必須的，但是這種方式有助于我們區(qū)分JavaScript和JSX。

但是瀏覽器并不能識別出JSX，那么JSX又怎么能渲染到瀏覽器上？

這是因為通過使用預(yù)處理的構(gòu)建工具將JSX編譯成JavaScript，這樣瀏覽器就能識別了。

除了能寫起來像HTML，JSX還要其他的優(yōu)勢：我們可以在JSX中混寫JavaScript。這樣就能讓我們在試圖中添加邏輯。

我們已經(jīng)見過一些基本的JSX的使用方法了，接下來我們將會討論一下JSX的如下方面：

• 屬性表達式
• 條件組件
• 布爾屬性
• 注釋

JSX屬性表達式
為了在組件屬性中使用JavaScript表達式，我們需要使用{}。在{}寫JavaScript表達式，而不能使用""。

const warningLevel = 'debug'
const component = (
  <Alert
    color={warningLevel === 'debug' ? 'gray' : 'red' }
    log={true} />
)

這個例子中，我們使用三目表達式來判斷color的顏色。

JSX條件表達式
另一種通常的模式是用布爾的方式檢查表達式，然后條件的渲染組件。
例如，如果我們想要構(gòu)建一個菜單以條件的顯示admin用戶，我們可以這樣書寫：

const renderAdminMenu = () => {
  return (
    <MenuLink to="/users">User accounts</MenuLink>
  )
}

const userLevel = this.props.userLevel
return (
  <ul>
    <li>Menu</li>
    {userLevel === 'admin' && renderAdminMenu() }
  </ul>
)

我們同樣可以使用三目表達式來條件渲染組件。
`const Menu = (<ul>{loggedInUser ? <UserMenu/> : <LoginLink/>}</ul>)

JSX布爾屬性
在HTML中，一些屬性默認是設(shè)置成true的。例如一個disabled的input標簽：
<input name="Name" disabled/>

在React中，我們需要設(shè)置這些布爾值。也就是說，我們需要顯式的給屬性傳遞true或者false。

<input name="Name" disabled={true} />

let formDisabled = true
<input name="Name" disabled={formDisabled} />

JSX注釋
在JSX中，我們使用{/* ... */}的方式書寫注釋。

let userLevel = 'admin'
{/*
  Show the admin menu if the userLevel is 'admin'
*/}
{userLevel === 'admin' && <AdminMenu/>}

JSX的spread語法
有些時候，我們要給組件傳遞很多props，但是一個一個的書寫這些props是很麻煩的。JSX有一個簡寫的語法使得多個props的傳遞變得容易。
例如：
const props = {msg: 'Hello', recipient: 'World'}

我們可以一個一個的傳遞props，就像這樣：
<Component mgs={'Hello'} recipient={'World'} />
但是通過使用JSX的spread語法，我們可以這樣來寫：

<Component {...props} />
// 兩種方式是一樣的
<Component mgs={'Hello'} recipient={'World'} />

JSX其他
class和className，for和htmlFor
當(dāng)我們想要在HTML元素中添加CSS類的時候，我們通常是在標簽內(nèi)使用class：
<div class="box"></div>

由于JSX本質(zhì)上是JavaScript，所以我們不能再JSX中使用JavaScript的關(guān)鍵字。所以HTML中的class和for是不能用在JSX中的，因為class和for是JavaScript的關(guān)鍵字。

所以在JSX中，使用className替代class，使用htmlFor替代for。

<div className="box"></div>

<label htmlFor="email">Email</label>
<input name="email" type="email" id="email" />

JSX小結(jié)
JSX并不是魔法。我們始終牢記一點，JSX本質(zhì)上就是JavaScript，它是React.createElement的語法糖。JSX是我們構(gòu)建組件樹的一種方便的書寫方式。