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

Eirunye 發布于2019-08-20 18:29 / 1352人閱讀

摘要：代表基本上是常規。第次更新，在年完成。幾乎完全支持所有主要的瀏覽器。但這將是一段時間，直到較舊版本的瀏覽器逐步停止使用。這意味著將轉換為。在組件的情況下，寫入的將如下所示在我們在第一個作出反應組件使用的語法是語法。

本文轉載自：眾成翻譯
譯者：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的好處今天，我們必須做一些事情，使它工作在盡可能多的瀏覽器，我們可以：

我們必須轉換我們的代碼，以便更廣泛的瀏覽器了解我們的JavaScript。這意味著將ES6 JavaScript轉換為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中添加的瀏覽器可能具有或可能沒有的附加功能。

我們將在本系列的稍后部分看到我們如何做到這一點。

我們將在本系列中編寫的大多數代碼都可以輕松地轉換為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 (
      Hello World
    );
  }
}

這個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將如下所示：

Hello World

在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：


  
  Welcome back Ari

傳送到瀏覽器的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應用程序。

GPU云服務器云服務器全棧是什么什么是全棧全棧是什么意思全棧開發是什么

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84575.html

【全棧React】第13天: 重復元素

摘要：在我們的應用中添加太多的復雜度來加載外部數據之前今天我們將快速了解如何在應用中重復組件元素。出于性能原因使用虛擬嘗試限制在重新視圖時需要更新的元素的數量。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3826原文：https://www.fullstackreact.com/30-days-of-react/day-13/ 今...

RaoMeng 2019-08-20 18:33 評論0 收藏0
【全棧React】第5天: 數據驅動

摘要：今天，我們將把我們的組件設置為由數據驅動，訪問外部數據。介紹屬性允許我們以與相同的語法向組件發送數據，使用組件上的特性或屬性。我們將我們的活動項目移動到我們將針對每個項目運行的項目中。本周，我們使用概念更新了由數據驅動的組件。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3821原文：https://www.fullstack...

inapt 2019-08-20 18:29 評論0 收藏0
【全棧React】第9天: 樣式

摘要：我們將為組件賦值，并使用選擇器來定位頁面上的元素，讓瀏覽器處理樣式。的工作方式是將因此命名父樣式作為子樣式的樣式。這通常是錯誤的原因，因為類通常具有通用名稱，并且易于覆蓋非特定類的類樣式。反之，我們的樣式名稱需要使用駝峰命名方式。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3820原文：https://www.fullsta...

zilu 2019-08-20 18:33 評論0 收藏0
【全棧React】React 30天教程索引

摘要：今天我們將討論創建組件的最終方案，即無狀態函數的純組件。今天我們正在研究一種處理提出的復雜數據的方法，稱為體系結構。第天部署介紹今天，我們將探討部署我們的應用所涉及的不同部分，以便外界可以使用我們的應用。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3758原文：https://www.fullstackreact.com/3...

appetizerio 2019-08-20 18:33 評論0 收藏0
【全棧React】第1天: 什么是 React?

摘要：本文轉載自眾成翻譯譯者鏈接原文今天，我們從一開始就開始。讓我們看看是什么，是什么讓運轉起來。什么是是一個用于構建用戶界面的庫。它是應用程序的視圖層。所有應用程序的核心是組件。組件是可組合的。虛擬完全存在于內存中，并且是網絡瀏覽器的的表示。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3765原文：https://www.ful...

ralap 2019-08-20 18:29 評論0 收藏0