JSX 簡介

2018-09-11

jsx, react

React 以 Component 為基礎，為了增進效率，我們常會在撰寫 React Component 時使用 JSX 的方式來提升程式撰寫效率。

JSX 是一種可以讓 HTML 標記直接寫在 JavaScript 程式碼中的擴充語法，為了它是 React 自創的 React.createElement 的一種簡寫法，需要經過 babel 工具編譯才能執行，可視為是創建元素的語法糖，在使用 React 的时候，JSX 並不是强制要求的,你可以選擇性的使用。

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

上面的 <h1>Hello, world!</h1> 乍看之下跟 HTML 並無二異，但這卻是不折不扣的 JSX，因為它跟一般人較為熟悉的 HTML 語法相似也較易維護，這也是為何我們會選擇用 JSX 而不用 React.createElement 的原因。

以下的例子是完全相同的：

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

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

Babel 會幫我們把上面 JSX 的程式碼編譯成下面 React.createElement 的程式碼。事實上，React 並沒有強制我們一定要使用 JSX，如果你完全不用 JSX 也是可以的，只是因為 JSX 程式碼閱讀起來較為友善，所以 JSX 成為了撰寫 React 的主流，如果你想更詳細了解 JSX 如何轉譯成 React.createElement，可用 Babel 提供的轉譯器做測試。

雖然 JSX 跟 HTML 語法類似，但請記住一件事，JSX 骨子裡還是 JavaScript，以下是 JSX 的一些小眉角。

JSX 的花括號

花括號可把任意的 JavaScript 表達式嵌入到 JSX 中。例如，2 + 2， user.avatarUrl 和 formatName(user)，這些都是可用的表達式。

在下面的例子中，我們調用 JavaScript 函數 formatName(user) 的結果嵌入到 <h1> 元素中。

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')
);

又或者用花括號嵌入一個 JavaScript 表達式作為屬性值

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

多行 JSX 需以小括號包覆

JSX 分割成多行時，必須使用小括號將 JSX 包裹起來，避免分號自動插入。

正確來說是讓JS認為這行語句尚未結束，而不會作ASI的來結束語句。如果return後面沒有加上圓括號的開頭符號(()，ASI會起作用然後會幫你自動加上分號(;)，這將會造成語法錯誤或是不預期的結果。
https://eyesofkids.gitbooks.io/react-basic-zh-tw/content/day06_es6_arrow_func/

//Wrong
function Avengers(){
    return
      <ul>
        <li>IronMan</li>
        <li>Hulk</li>
        <li>Thor</li>
        <li>Caption American</li>
      </ul>
}

//Right
function Avengers(){
    return (
      <ul>
        <li>IronMan</li>
        <li>Hulk</li>
        <li>Thor</li>
        <li>Caption American</li>
      </ul>
    )
}

JSX 的駝峰式寫法

React DOM 使用 Camel-Case 駝峰式命名而不是一般的 HTML 屬性命名，所以 tabindex 在 JSX 要寫作 tabIndex，class 是 JavaScript 中的保留字，所以 class 屬性用 className 替代。

const name = 'Clementine';ReactDOM.render(
  <h1 className="hello">My name is {name}!</h1>,
  document.getElementById('root')
);

JSX 註解語法

JSX 註解以 {/ 與 /} 包覆欲註解的語句

function UserInfo(props) {
  return (
    <div className="UserInfo">
      {/* <Avatar user={props.user} /> */}
      <div className="UserInfo-name">{props.user.name}</div>
    </div>
  );
}

參考連結:
React 16 - The Complete Guide
React - DOM界的彼方
 JSX 介绍
 深入 JSX
一看就懂的 JSX 簡明入門教學指南

uncategorized

JSX 的花括號

多行 JSX 需以小括號包覆

JSX 的駝峰式寫法

JSX 註解語法