JSX 其是一個語法擴展，它既不是單純的字符串，也不是 HTML，雖然長得和 HTML 很像甚至基本上看起來一樣。愛掏網(wǎng) - it200.com但事實上它是 React 內(nèi)部實現(xiàn)的一種，允許我們直接在 JS 里書寫 UI 的方式。愛掏網(wǎng) - it200.com
有些同學(xué)來看 JSX 可能也會覺得它像一種模板語言之類的。愛掏網(wǎng) - it200.com事實上也不是，它就是基于 JavaScript，在 React 當(dāng)中的一種語法擴展的實現(xiàn)。愛掏網(wǎng) - it200.com
JSX 被用來創(chuàng)建 React 當(dāng)中的 Elements，React 當(dāng)中的元素。愛掏網(wǎng) - it200.com然后 React 再通過一些方法，把 JSX 創(chuàng)建的元素，渲染成我們在瀏覽器當(dāng)中看到的 DOM元素。愛掏網(wǎng) - it200.com
在正式介紹 JSX 的相關(guān)知識前，我再強調(diào)幾遍：
JSX 盡管使用了非常多的類似 HTML 的標(biāo)簽語法，但 JSX 只是一種在 JavaScript 當(dāng)中書寫 UI 的實現(xiàn)，所以你在理解的時候不要把 HTML 的相關(guān)知識先入為主地代入。愛掏網(wǎng) - it200.com不要問為什么可以這樣寫，怎么能這么寫，怎么和 HTML 不一樣？一類的問題，因為本來就不是同一種東西，另外也不要覺得 JSX 奇怪，不要覺得不適應(yīng)，你寫寫就適應(yīng)了。愛掏網(wǎng) - it200.com而且相信我，JSX 已經(jīng)是書寫 UI 最高效還保持了良好可讀性的一種實現(xiàn)了。愛掏網(wǎng) - it200.com
另外 JSX 也有一些和 HTML 語法的差異，本篇教程的內(nèi)容不可能涵蓋全部，但以后出現(xiàn)在教程代碼中的特例我都會強調(diào)說明。愛掏網(wǎng) - it200.com
我們想要在瀏覽器里直接運行采用 JSX 語法的 JavaScript 顯然暫時是不可能實現(xiàn)的，在實際的生產(chǎn)過程中，我們需要利用 Babel 一類的轉(zhuǎn)譯器來將我們的 JSX 語法或者 ES6 語法轉(zhuǎn)譯成瀏覽器可以直接運行的 JavaScript，事實上 JSX 在經(jīng)過轉(zhuǎn)譯之后，會變成 React 創(chuàng)建 Element 的一個方法：
ReactDOM.render(
Hello world!
,
document.getElementById('container')
)
轉(zhuǎn)譯之后就會變成下面這樣：
// 事實上你書寫的所有標(biāo)簽語法最后都會被轉(zhuǎn)換成創(chuàng)建元素的 JS 方法。愛掏網(wǎng) - it200.com
ReactDOM.render(
React.createElement('p',null,`Hello world!`),
document.getElementById('container')
)
在本地配置 React 的開發(fā)環(huán)境是相對來說比較復(fù)雜的操作。愛掏網(wǎng) - it200.com為了讓同學(xué)們盡快上手，我們一開始還是在在線代碼編輯器里編寫我們的代碼。愛掏網(wǎng) - it200.com
比如我們可以使用 React 官方推薦的 Codepen。愛掏網(wǎng) - it200.com
打開 Codepen 網(wǎng)站，當(dāng)然為了方便你日后的學(xué)習(xí)，保存你的代碼，最好注冊一個賬號。愛掏網(wǎng) - it200.com（注冊理所當(dāng)然需要 Google 人機驗證等步驟，所以請自備梯子，學(xué)習(xí)編程這方面的技能早晚要掌握，如果你怎么都打不開這個網(wǎng)站或者怎么都注冊不好，可以先放過，老老實實使用大清局域網(wǎng)）。愛掏網(wǎng) - it200.com
之后我們新建一個 Pen，然后在 JS 編輯窗口的設(shè)置面板里添加 react 和 react-dom 兩個庫，再將 preprocessor 預(yù)處理器設(shè)置成 Babel，確定保存，就可以開始愉快地編碼啦！
看一個Codepen的在線示例：
當(dāng)然，如果你的網(wǎng)速較慢或者無法順利訪問到國際網(wǎng)絡(luò)，還可以使用離線Web應(yīng)用 Codepan。愛掏網(wǎng) - it200.com
const title = React Learning
我們用JSX創(chuàng)建的元素對象一般來說是不變的，所以通過 const關(guān)鍵字來聲明一個 React元素，而不是我們以往經(jīng)常使用的 var。愛掏網(wǎng) - it200.com
為了能讓我們的 JSX 元素在頁面上渲染出來預(yù)覽查看，我們還需要添加兩段代碼：
在 HTML 窗格里添加：
在JS窗格的最底部添加：
// 這便是將 JSX元素渲染成 DOM 的方法
ReactDOM.render(title,document.getElementById('root'))
我們通過 ReactDOM 的 render 方法，將 title 元素渲染至 id 為 root 的頁面容器當(dāng)中。愛掏網(wǎng) - it200.com
JSX 的標(biāo)簽同樣可以擁有自己的屬性：
const title = React Learning
但它和 HTML 又不是完全相同的，例如我們想要為 JSX標(biāo)簽添加 class 的時候需要：
// 注意是 className 而不是 class
const title = React Learning
所有支持的 HTML屬性在這里可以查閱。愛掏網(wǎng) - it200.com
JSX 的標(biāo)簽也可以像 HTML 一樣相互嵌套，一般有嵌套解構(gòu)的 JSX 元素外面，我們習(xí)慣于為它加上一個小括號：
const title = (
React Learning
Let's learn JSX
)
需要注意的是，JSX 在嵌套時，最外層有且只能有一個標(biāo)簽，否則就會出錯喲：
// 這是一個錯誤示例
const title = (
React Learning
Let's learn JSX
)
在 JSX 元素中，我們同樣可以使用 JavaScript 表達式，在 JSX 當(dāng)中的表達式需要用一個大括號括起來：
function sayhi(name) {
return 'Hi,' + name;
}
const title = (
React Learning
Let's learn JSX. {sayhi('you')}
)
好了，有關(guān) JSX 的基礎(chǔ)知識，我們掌握到這里就差不多了。愛掏網(wǎng) - it200.com在之后的課程中，隨著我們學(xué)習(xí)的進一步深入，也會在需要的時候介紹更深入的有關(guān) JSX 的知識。愛掏網(wǎng) - it200.com
- Tutorial: JSX
- Getting Started With React and JSX
- Getting Started with React and JSX
- Understand JSX at a Deeper Level