【全棧React】第2天: 什麼是 JSX?

本文轉載自：衆成翻譯
譯者：iOSDevLog
連接：http://www.zcfy.cc/article/3797
原文：https://www.fullstackreact.com/30-days-of-react/day-2/

如今咱們知道React是什麼，讓咱們來看看這個系列的其他部分將會出現的幾個術語和概念。

在咱們前面的文章中，咱們看了一下React，並在高級別上討論了它的工做原理。 在本文中，咱們將介紹React生態系統的一部分：ES6和JSX。

JSX/ES5/ES6 什麼鬼東西??!

在互聯網上的任何粗略的搜索尋找React材料，毫無疑問，你已經遇到了術語JSX，ES5和ES6。這些難懂的首字母縮略詞可能會很快混亂。

ES5（ES 表明ECMAScript）基本上是「常規JavaScript」。第5次更新JavaScript，ES5在2009年完成。它已被全部主要瀏覽器支持多年。所以，若是你在最近寫過或看過任何JavaScript，極可能是ES5。

ES6是一個新版本的JavaScript，添加了一些不錯的語法和功能添加。它在2015年完成。ES6 幾乎徹底支持 全部主要的瀏覽器。但這將是一段時間，直到較舊版本的Web瀏覽器逐步中止使用。例如，Internet Explorer 11不支持ES6，可是具備大約12％的瀏覽器市場份額。

爲了得到ES6的好處今天，咱們必須作一些事情，使它工做在儘量多的瀏覽器，咱們能夠：

1. 咱們必須 轉換 咱們的代碼，以便更普遍的瀏覽器瞭解咱們的JavaScript。這意味着將ES6 JavaScript轉換爲ES5 JavaScript。
2. We have to include a shim or polyfill that provides additional functionality added in ES6 that a browser may or may not have.
3. 咱們必須包括一個墊片或polyfill，提供在ES6中添加的瀏覽器可能具備或可能沒有的附加功能。

咱們將在本系列的稍後部分看到咱們如何作到這一點。

咱們將在本系列中編寫的大多數代碼均可以輕鬆地轉換爲ES5。在咱們使用ES6的狀況下，咱們將首先介紹功能，而後經過它。

咱們將看到，全部的React組件都有一個render函數，它指定了React組件的HTML輸出。JavaScript eXtension，或更常見的JSX，是一個React擴展，容許咱們編寫看起來像 HTML的JavaScript 。

儘管在之前的範例中，將JavaScript和標記包含在同一個地方被認爲是一種很差的習慣，可是結果是將視圖與功能相結合使得對視圖的推理變得很是簡單。

看看這是什麼意思，想象一下，咱們有一個React組件來呈現一個h1 HTML標籤。JSX容許咱們以很是相似於HTML的方式聲明這個元素：

class Header extends React.Component {
  render() {
    return (
      <h1 className='large'>Hello World</h1>
    );
  }
}

這個HelloWorld組件中的render()函數看起來像它的返回HTML，但其實這是JSX。JSX 在運行時被翻譯成常規JavaScript。那個組件，翻譯後，看起來像這樣：

class HelloWorld extends React.Component {
  render() {
    return (
      React.createElement(
        'h1',
        {className: 'large'},
        'Hello World'
      )
    );
  }
}

雖然JSX看起來像HTML，但它實際上只是一種更靈敏的方式React.createElement()來編寫聲明。當組件渲染時，它輸出一個React元素樹或該組件輸出的HTML元素的虛擬表示。React而後將基於此React元素表示來肯定對實際DOM所作的更改。在HelloWorld組件的狀況下，React寫入DOM的HTML將以下所示：

<h1 class='large'>Hello World</h1>

在class extends咱們在第一個做出反應組件使用的語法是ES6語法。它容許咱們使用熟悉的面向對象樣式編寫對象。
在ES6中，class 語法可能翻譯爲：

var HelloWorld = function() {}
Object.extends(HelloWorld, React.Component)
HelloWorld.prototype.render = function() {}

由於JSX是JavaScript，咱們不能使用JavaScript保留字。這包括class和像for。

React提供了咱們的屬性className。咱們使用它在HelloWorld來設置咱們的h1標籤上的large 類。還有一些其餘屬性，如標籤上的屬性for爲轉換htmlFor ，由於for 也是保留字。當咱們開始使用它們時，咱們將看看這些。

若是咱們想要編寫純JavaScript而不是依賴於JSX編譯器，咱們能夠只寫該React.createElement()函數，而沒必要擔憂抽象層。但咱們喜歡JSX。它特別是更復雜的組件可讀性。考慮下面的JSX：

<div>
  <img src="profile.jpg" alt="Profile photo" />
  <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元素。

如今咱們瞭解JSX，咱們能夠開始編寫咱們的第一個React組件。明天加入咱們，當咱們跳進咱們的第一個React應用程序。