所謂的JSX其實就是JavaScript物件。
render功能把元件渲染並且構造DOM樹。
要點：

• JSX是JavaScript語言的一種語法擴充套件，長得像HTML，但並不是HTML。
• React.js可以用JSX來描述你的元件長什麼樣的。
• JSX在編譯的時候會變成相應的JavaScript物件描述。
• react-dom 負責把這個用來描述UI資訊的JavaScript物件變成DOM元素，並且渲染到頁面上。

例子：

• 使用 React構建一個未讀訊息元件 Notification。
  通過 getNotificationsCount() 來獲取未讀訊息的數量 ，如果有未讀訊息 N 條，而且 N > 0，那麼 Notification 元件渲染顯示：

class Notification extends Component {
  render () {
    let N = getNotificationsCount()
    return (
        <div>
          <span>{N>0?`有(${N})條未讀訊息`:`沒有未讀訊息`}</span>
          // {N>0?<span>有({N})條未讀訊息</span>:<span>沒有未讀訊息</span>}
        </div>
      )
 

  }
}

• 用 JSX 完成兩個變數的定義：

第一個變數 title 為一個具有類名為 title 的 <h1> 元素，其內容為 ScriptOJ；

第二個變數 page 為一個具有類名為 content 的 <div> 元素，將之前定義的 title 變數插入其中作為它的內容。

const title = <h1 className="title">scriptOJ</h1>;
const page = <div className="content">{title}</div>;