[React] JSX 的語法介紹

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

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

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


首先先讓我們再複習一次,什麼是 JSXJSX 就只是簡化 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

這句話,我使用 HTMLclass 進行說明:

一般我們在使用 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 功能: