[React] JSX 的語法介紹

在前一篇文章 [React Js] JSX 與 Babel 簡介 中我們有提到關於 JSX 的作用，與使用 Babel 來編譯 JSX 的語法

這篇文章將對 JSX 的語法進行紀錄和說明：

建議在閱讀此篇文章之前，要先有些 React 的觀念，並有初步對 JSX 有認識

---

首先先讓我們再複習一次，什麼是 JSX，JSX 就只是簡化 React 的一種寫法而已，在文章中我會使用 React 的寫法與 JSX 進行比較

在開始前，要先對 JSX 有以下的認知：

JSX 並不是 HTML ， 他的骨子裡其實還是 JavaScrip

進入正題～

---

以下為兩種撰寫 React 的寫法範例： （可供下面的內容進行參考）

React 的使用 React.createElement() 寫法：

  class MyApp extends React.Component{
    render(){
      return React.createElement('h1',{className:"title",style:{color:'red'}}, '標題：' + this.props.message)
    }
  }

  ReactDOM.render(
    React.createElement(MyApp,{message:"Hello World !!"}),
    document.body
  )

React 的使用 JSX 的寫法 ：

  class MyApp extends React.Component{
    render(){
      return <h1 className='title' style={{color:'red'}}> 標題 {this.props.message}</h1>
    }
  }

  ReactDOM.render(
    <MyApp message="Hello World !!"/>,
    document.body
  )

---

JSX HTML tag 的語法：

React.createElement()：

React.createElement('h1')

JSX :

<h1>

---

JSX Component 的語法：

React.createElement()：

React.createElement({component 名稱});

JSX:

<{component 名稱}>

---

JSX 屬性 的語法：

React.createElement()：

React.createElement('h1',{message="Hello World"});

JSX:

<h1 message="Hello World"/>

另外 屬性 的部分這邊要特別提一下，在前面有提到說：

JSX 並不是 HTML ， 他的骨子裡其實還是 JavaScrip

這句話，我使用 HTML 的 class 進行說明：

一般我們在使用 HTML 在給予 元素 class 名稱 時，我們會這樣做：

<h1 class="title">Hello World !</h1>

但是在 JSX 中，我們的作法如下：

<h1 className="title">Hello World !</h1>

這邊有注意到了嗎？

在 JSX 中，我們是使用 className 而不是 class

這是因為 JSX 使用的其實還是 JavaScript ， 而 className 則是 HTML5 API 中，提供用來存放 class 的一個 屬性

結論來說我們還是需要以 JavaScript 的角度來去撰寫 JSX

---

JSX style inline-css 的語法：

React.createElement()：

React.createElement('h1',{style:{color:"red"});

JSX:

<h1 style={{color:'red'}}>Hello World !</h1>

注意 JSX 的 inline-css 部分是由 兩個 {} 組成

---