這個看起來很像HTML的標籤語法，但實際上他是JavaScript的語法所擴充出來的 JSX語法

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

React利用JSX產生的React元素經由render後顯示到畫面上。
JSX可以在JavaScript中很好的呈現html的結構，並具有JavaScript的功能。

JSX是React.createElement的語法糖（簡寫），需經過babel工具編譯成原生的JavaScript寫法React.createElement產生的元件，讓瀏覽器可以顯示。

根據scr/App.js裡的結構改寫一下做比較：

JSX語法

function App() {
  return (
/* JSX語法 */

  <h1 className="greeting" id="bolder">
    Hello, World!<span>HAHA</span>
  </h1>

/* JSX語法 */
)};

React.createElement

而原生React.createElement所產生React Element寫法如下：

React.createElement(type, [props], [children1,children2,...])

• type：React Component或html標籤，Component 命名首字大寫，html標籤則為小寫
• props：屬性，以物件表示
• children：React.createElement產生的節點中的子節點

第三個參數後皆為children子節點參數

function App() {
  return React.createElement(
  'h1',//標籤
  {className: 'greeting',id:'bolder'},//屬性
  'Hello, World!',//子節點1
	React.createElement('span',null,'HAHA')//子節點2
)};

如果用React.createElement寫法，要新增子節點就要使用巢狀的方法寫進參數中。
這樣比較起來就能看到JSX寫法的優點了：

• 有更加語意化且易懂的標籤
• 寫法更加簡潔

將JSX 和 UI Component結合在一起，對於在React撰寫JavaScript程式碼時的閱讀更加容易。

接著在下一章會繼續詳細介紹，如此方便的JSX該如何使用！