Introducing JSX（翻譯）

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

introducting JSX原文 翻譯並不許確，仍是看原文好。

JSX介紹

看下面的代碼

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

這個有趣的鏈接語法既不是字符串也不是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 = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

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

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

JSX也是一種表達式

經過編譯以後，JSX表達式會編譯成爲一個普通的JavaScript對象。
這就意味着，你能夠在if聲明以及for循環中使用JSX，能夠將它賦值給變量，將它做爲函數參數或者返回值使用。

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

在JSX中定義屬性

你可使用引號標註字符串做爲屬性值；

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

你也能夠用在花括號中寫JavaScript表達式做爲屬性值；

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

注意不要給表達式加引號，否則JSX會將該表達式做爲字符串處理。因此，你應該要麼字符串加引號使用，要麼花括號中寫表達式，不要二者同時用。

在JSX中定義Children(?)

若是標籤不閉合，能夠經過/>關閉標籤，就像XML

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

JSX標籤包含子元素

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

警告：JSX語法相比HTML更接近JavaScript，React DOM使用`camelCase`(駝峯命名)屬性命名規定代替HTML屬性名。
例如：`class`在JSX中是`className`，`tabindex`是`tabIndex`。

JSX能夠防止注入攻擊（XSS）

經過JSX傳入數據會更安全

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

默認狀況，React DOM在渲染JSX以前會排除嵌入的輸入值，所以確保在你的應用中不會注入任何不明確的書面值。任何值在渲染以前都會轉換爲字符串。這就避免了XSS攻擊。

JSX表現爲對象

Babel經過調用React.createElement()來編譯JSX
下面兩段代碼是相同的

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

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元素，而且保持更新。