全棧React: 第2天 什么是 JSX?
本文轉(zhuǎn)載自：眾成翻譯
譯者：iOSDevLog
鏈接：http://www.zcfy.cc/article/3797
原文：https://www.fullstackreact.com/30-days-of-react/day-2/
現(xiàn)在我們知道React是什么孕荠，讓我們來看看這個系列的其余部分將會出現(xiàn)的幾個術(shù)語和概念蒸健。
在我們前面的文章中，我們看了一下[React]（https://facebook.github.io/react/），并在高級別上討論了它的工作原理。 在本文中，我們將介紹React生態(tài)系統(tǒng)的一部分：ES6和JSX涛浙。
## JSX/ES5/ES6 什么鬼東西??!
在互聯(lián)網(wǎng)上的任何粗略的搜索尋找React材料，毫無疑問，你已經(jīng)遇到了術(shù)語JSX轿亮，ES5和ES6疮薇。這些難懂的首字母縮略詞可能會很快混亂。
ES5（ES 代表ECMAScript）基本上是“常規(guī)JavaScript”我注。第5次更新JavaScript按咒，ES5在2009年完成。它已被所有主要瀏覽器支持多年仓手。因此胖齐，如果你在最近寫過或看過任何JavaScript，很可能是ES5嗽冒。
ES6是一個新版本的JavaScript呀伙，添加了一些不錯的語法和功能添加。它在2015年完成添坊。ES6 幾乎完全支持 所有主要的瀏覽器剿另。但這將是一段時間，直到較舊版本的Web瀏覽器逐步停止使用贬蛙。例如雨女，Internet Explorer 11不支持ES6，但是具有大約12％的瀏覽器市場份額阳准。
為了獲得ES6的好處今天氛堕，我們必須做一些事情，使它工作在盡可能多的瀏覽器野蝇，我們可以：
我們必須 轉(zhuǎn)換 我們的代碼讼稚，以便更廣泛的瀏覽器了解我們的JavaScript。這意味著將ES6 JavaScript轉(zhuǎn)換為ES5 JavaScript绕沈。
We have to include a shim or polyfill that provides additional functionality added in ES6 that a browser may or may not have.
我們必須包括一個墊片或polyfill锐想，提供在ES6中添加的瀏覽器可能具有或可能沒有的附加功能。
我們將在本系列的稍后部分看到我們?nèi)绾巫龅竭@一點乍狐。
我們將在本系列中編寫的大多數(shù)代碼都可以輕松地轉(zhuǎn)換為ES5赠摇。在我們使用ES6的情況下，我們將首先介紹功能浅蚪，然后通過它藕帜。
我們將看到，所有的React組件都有一個render函數(shù)惜傲，它指定了React組件的HTML輸出耘戚。JavaScript eXtension，或更常見的JSX操漠，是一個React擴(kuò)展收津，允許我們編寫看起來像 HTML的JavaScript 饿这。
盡管在以前的范例中，將JavaScript和標(biāo)記包含在同一個地方被認(rèn)為是一種不好的習(xí)慣撞秋，但是結(jié)果是將視圖與功能相結(jié)合使得對視圖的推理變得非常簡單长捧。
看看這是什么意思，想象一下吻贿，我們有一個React組件來呈現(xiàn)一個h1 HTML標(biāo)簽串结。JSX允許我們以非常類似于HTML的方式聲明這個元素：
class Header extends React.Component {
render() {
return (
<h1 className='large'>Hello World</h1>
);
}
}
這個HelloWorld組件中的render()函數(shù)看起來像它的返回HTML，但其實這是JSX舅列。JSX 在運行時被翻譯成常規(guī)JavaScript肌割。那個組件，翻譯后帐要，看起來像這樣：
class HelloWorld extends React.Component {
render() {
return (
React.createElement(
'h1',
{className: 'large'},
'Hello World'
)
);
}
}
雖然JSX看起來像HTML把敞，但它實際上只是一種更靈敏的方式React.createElement()來編寫聲明。當(dāng)組件渲染時榨惠，它輸出一個React元素樹或該組件輸出的HTML元素的虛擬表示奋早。React然后將基于此React元素表示來確定對實際DOM所做的更改。在HelloWorld組件的情況下赠橙，React寫入DOM的HTML將如下所示：
<h1 class='large'>Hello World</h1>
在
class extends我們在第一個作出反應(yīng)組件使用的語法是ES6語法耽装。它允許我們使用熟悉的面向?qū)ο髽邮骄帉憣ο蟆?br> 在ES6中，class語法可能翻譯為：
> var HelloWorld = function() {}
> Object.extends(HelloWorld, React.Component)
> HelloWorld.prototype.render = function() {}
>
因為JSX是JavaScript期揪，我們不能使用JavaScript保留字掉奄。這包括class和像for。
React提供了我們的屬性className凤薛。我們使用它在HelloWorld來設(shè)置我們的h1標(biāo)簽上的large 類姓建。還有一些其他屬性，如標(biāo)簽上的屬性for為轉(zhuǎn)換htmlFor 枉侧，因為for 也是保留字引瀑。當(dāng)我們開始使用它們時狂芋，我們將看看這些榨馁。
如果我們想要編寫純JavaScript而不是依賴于JSX編譯器，我們可以只寫該React.createElement()函數(shù)帜矾，而不必?fù)?dān)心抽象層翼虫。但我們喜歡JSX。它特別是更復(fù)雜的組件可讀性屡萤≌浣＃考慮下面的JSX：
<div>
<h1>Welcome back Ari</h1>
</div>
傳送到瀏覽器的JavaScript看起來像這樣：
React.createElement("div", null,
React.createElement("img", {src: "profile.jpg", alt: "Profile photo"}),
React.createElement("h1", null, "Welcome back Ari")
);
再提一下，雖然你可以跳過JSX并直接編寫后者死陆，但JSX語法非常適合表示嵌套的HTML元素招拙。
現(xiàn)在我們了解JSX唧瘾，我們可以開始編寫我們的第一個React組件。明天加入我們别凤，當(dāng)我們跳進(jìn)我們的第一個React應(yīng)用程序饰序。
