Introducing JSX（翻譯）

hikui 發布于2019-08-20 18:56 / 901人閱讀

摘要：原文翻譯并不準確，還是看原文好。它稱之為它是的一種語法擴展。例如，以及等都是合法表達式。任何值在渲染之前都會轉換為字符串。這就避免了攻擊。讀取這些對象，然后使用它們去構造元素，并且保持更新。

開始學習React從過一遍官網資料開始。

introducting JSX原文翻譯并不準確，還是看原文好。

JSX介紹

看下面的代碼

const element = Hello,world

這個有趣的連接語法既不是字符串也不是HTML。
它稱之為JSX,它是JavaScript的一種語法擴展。我們推薦在React中使用它去編寫UI界面的樣子。JSX可能會使你想起模板語言，但是它帶來的是全套的JavaScript功能。

JSX生產React「元素」。在下一節我們將探索渲染React元素到DOM的過程。從下面的例子你能夠學到JSX的基礎知識。

表達式嵌套在JSX中

你可以將JavaScript表達式通過花括號嵌套在JSX中使用。
例如，2+2 user.firstName,以及formatName(user)等都是合法表達式。

function formatName(user) {
  return user.firstName + " " + user.lastName;
}

const user = {
  firstName: "Harper",
  lastName: "Perez"
};

const element = (
  
    Hello, {formatName(user)}!
  
);

ReactDOM.render(
  element,
  document.getElementById("root")
);

當我們書寫多行JSX代碼時候，為了良好的可讀性，雖不是必須，但還是推薦使用括號包裹避免產生JavaScript分號自動插入的問題。

JSX也是一種表達式

通過編譯之后，JSX表達式會編譯成為一個普通的JavaScript對象。
這就意味著，你可以在if聲明以及for循環中使用JSX，可以將它賦值給變量，將它作為函數參數或者返回值使用。

function getGreeting(user) {
  if (user) {
    return Hello, {formatName(user)}!;
  }
  return Hello, Stranger.;
}

在JSX中定義屬性

你可以使用引號標注字符串作為屬性值；

const element = 
;

你也可以用在花括號中寫JavaScript表達式作為屬性值；

const element = 關閉標簽，就像XML
const element = ;
JSX標簽包含子元素
const element = (
  
    Hello!
    Good to see you here.
  
);
警告：JSX語法相比HTML更接近JavaScript，React DOM使用`camelCase`(駝峰命名)屬性命名規定代替HTML屬性名。
例如：`class`在JSX中是`className`，`tabindex`是`tabIndex`。

JSX可以防止注入攻擊（XSS）
通過JSX傳入數據會更安全
const title = response.potentiallyMaliciousInput;
// This is safe:
const element = {title}
;
默認情況，React DOM在渲染JSX之前會排除嵌入的輸入值，因此確保在你的應用中不會注入任何不明確的書面值。任何值在渲染之前都會轉換為字符串。這就避免了XSS攻擊。
JSX表現為對象
Babel通過調用React.createElement()來編譯JSX
下面兩段代碼是相同的
const element = (
  
    Hello, world!
  
);
const element = React.createElement(
  "h1",
  {className: "greeting"},
  "Hello, world!"
);
React.createElement()展現了一些檢查項來幫助你減少代碼bug，但是本質上老說它創建了這樣的對象
// Note: this structure is simplified
const element = {
  type: "h1",
  props: {
    className: "greeting",
    children: "Hello, world"
  }
};
這些對象稱之為「React元素」.你可以把他們當做你想在界面上看到一種描述。React讀取這些對象，然后使用它們去構造DOM元素，并且保持更新。

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

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

Flux再進化：Introducing Relay and GraphQL譯

摘要：它的設計使得即使是大型團隊也能以高度隔離的方式應對功能變更。獲取數據數據變更性能，都是讓人頭痛的問題。通過維護組件與數據間的依賴在依賴的數據就緒前組件不會被渲染為開發者提供更加可預測的開發環境。這杜絕了隱式的數據依賴導致的潛在。關于Relay與GraphQL的介紹原文：Introducing Relay and GraphQL 視頻地址（強烈建議觀看）：https://www.y...

cncoder 2019-08-21 10:26 評論0 收藏0
react文檔 Hello World

摘要：最小的示例如下它會顯示一個的標題在頁面上。指南的指南在這個指南中，我們將會檢驗的建筑模塊和元素和組件。這是循序漸進的指南關于原則的第一章。它可能會花半小時到一個小時，但是好處是你不會感覺同時在學習和。注意此指南偶爾在示例中采用新的語法。 Hello World 最小的 React 示例如下： ReactDOM.render( Hello, world!, documen...

xuhong 2019-08-23 10:39 評論0 收藏0
React文檔翻譯系列（三）JSX簡介

摘要：文檔翻譯系列三簡介先來看一下下面的變量聲明這種有趣的標簽語法既不是字符串也不是。這種形式被稱作，他是的一種擴展語法。為便于閱讀，我們將分隔成多行。表示對象將編譯成調用。我們建議您為選擇的編輯器搜索語法方案，以便和代碼都能夠被正確高亮的顯示。 React文檔翻譯系列（三）JSX簡介先來看一下下面的變量聲明： const element = Hello world! 這種有趣的標簽語法既...

wean 2019-08-20 15:28 評論0 收藏0
# 翻譯：Shadow DOM隔離釋義

摘要：使用的一個主要好處是樣式隔離。假設我們仍然使用來掛接這個，如下所示請注意，元素位于模板元素內部，并與一起克隆到內。這允許在陰影根中定義的樣式規則作用域。封閉模式的設計目標是禁止對來自外部世界的中的節點進行任何訪問。使用shadow DOM的一個主要好處是樣式隔離。要了解這意味著什么，讓我們來假設我們要創建自定義進度條組件。我們可以使用兩個嵌套的DIV來顯示條形，使用另一個DIV來...

xi4oh4o 2019-08-23 13:53 評論0 收藏0
【全棧React】第2天: 什么是 JSX?

摘要：代表基本上是常規。第次更新，在年完成。幾乎完全支持所有主要的瀏覽器。但這將是一段時間，直到較舊版本的瀏覽器逐步停止使用。這意味著將轉換為。在組件的情況下，寫入的將如下所示在我們在第一個作出反應組件使用的語法是語法。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3797原文：https://www.fullstackreact....

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