【譯】介紹JSX

下面是react官方文檔的我的翻譯，若有翻譯錯誤，請多多指出
原文地址：https://facebook.github.io/re...
特別感謝Hevaen，同時也向豪大React羣全部成員表示感謝，從大家身上我學到不少。

介紹JSX

咱們來看一下下面的變量聲明

const element = <h1>Hello, world!</h1>;

這是有意思的標記語法既不是字符串又不是HTML。

It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.

咱們稱他爲JSX。它是屬於JavaScript的語法拓展。咱們但願react用jsx去描述UI應該是什麼樣子的。JSX也許會讓你想到某些模板語言,但它帶有JavaScript的所有威力。

JSX produces React "elements". We will explore rendering them to the DOM in the next section. Below, you can find the basics of JSX necessary to get you started.

JSX 生成React的「元素」。咱們將會在下一章探索他們是怎麼在DOM裏渲染的。接下來，你能找到JSX最重要的基礎知識來讓你開始學習

Embedding Expressions in JSX

在JSX裏面插入表達式

You can embed any JavaScript expression in JSX by wrapping it in curly braces.
你能用花括號包住JavaScript 表達式而後插入JSX裏

For example, 2 + 2, user.firstName, and formatName(user) are all valid expressions:
例如，2 + 2, user.firstName,和 formatName(user)都是合法的表達式。

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

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

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

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

We split JSX over multiple lines for readability. While it isn't required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of automatic semicolon insertion.

爲了可讀性，咱們把JSX分到多個行裏。雖然不是必需的,當這樣作時,咱們還建議包在大括號來避免自動分號的陷阱。

JSX is an Expression Too

JSX也是一個表達式
After compilation, JSX expressions become regular JavaScript objects.
編譯後,JSX表達式成爲常規的JavaScript對象。
This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions:
這意味着您能夠在JSX中使用 if語句和循環,將其分配給變量,接受它做爲參數,並從函數中返回。

Specifying Attributes with JSX

You may use quotes to specify string literals as attributes:

你可使用引號指定字符串的屬性:

const element = <div tabIndex="0"></div>;

You may also use curly braces to embed a JavaScript expression in an attribute:
你也可使用括號將JavaScript表達式嵌入到一個屬性:

const element = <img src={user.avatarUrl}></img>;

Don't put quotes around curly braces when embedding a JavaScript expression in an attribute. Otherwise JSX will treat the attribute as a string literal rather than an expression. You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.

嵌入表達式的時候，不要在花括號裏面在寫引號。不然JSX將屬性做爲一個字符串,而不是一個表達式。你應該用引號(對字符串而言)或大括號(表達式),但不是在同一個屬性上同時使用他。

Specifying Children with JSX

JSX中指定子元素

If a tag is empty, you may close it immediately with />, like XML:
若是一個標籤是空的,你能夠當即關閉它/ >,如XML:

const element = <img src={user.avatarUrl} />;

JSX tags may contain children:
JSX標籤能夠包含子元素:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

Caveat:
Since JSX is closer to JavaScript than HTML, React DOM uses camelCase property naming convention instead of HTML attribute names.
For example, class becomes className in JSX, and tabindex becomes tabIndex.
警告:自從JSX更接近JavaScript而不是HTML， React DOM中咱們使用class做爲標籤的屬性，而在JSX中咱們使用className（由於class是js的保留字）
例如,類成爲JSX className,tabindex變成了tabindex。

JSX Prevents Injection Attacks

JSX防止注入攻擊

It is safe to embed user input in JSX:

JSX中直接嵌套用戶在表單表單中輸入的值是安全的。

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

By default, React DOM escapes any values embedded in JSX before rendering them.
默認狀況下,React DOM會在渲染元素前轉義JSX中的任何嵌套的值
Thus it ensures that you can never inject anything that's not explicitly written in your application.
所以,確保你永遠不能注入任何沒有明確的寫在您的應用程序
Everything is converted to a string before being rendered.
一切都是在渲染以前轉換爲一個字符串。
This helps prevent XSS (cross-site-scripting) attacks.
這有助於防止XSS攻擊(跨站腳本)。

JSX Represents Objects

JSX對象

Babel compiles JSX down to React.createElement() calls.
Babel 編譯 JSX 成 React.createElement() 調用。

These two examples are identical:
這兩個例子都是相同的:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement() performs a few checks to help you write bug-free code but essentially it creates an object like this:

React.createElement()執行幾個檢查,幫助你寫出沒有錯誤代碼但本質上它建立一個對象是這樣的:

// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

These objects are called "React elements". You can think of them as descriptions of what you want to see on the screen.React reads these objects and uses them to construct the DOM and keep it up to date.We will explore rendering React elements to the DOM in the next section.

這些對象被稱爲「React元素」。你能夠把它們做爲描述你想在屏幕上看到的東西。React讀取這些對象,並使用它們構造DOM並保持更新。在下一節,咱們將探討渲染React元素到DOM上。