ZWH ZONE

[React] JSX 的語法介紹

zhiwei. huang -

在前一篇文章 [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 部分是由 兩個 {} 組成

Facebook 功能：