[React Js] JSX 與 Babel 簡介

JSX 主要使用於 簡化 React 的 React.createElement() 的方法,實際範例如下:

React.createElement() 寫法:

React.createComponent('h1',null,'我是標題');

JSX 寫法:

<h1>我是標題</h1>

但是在每個 主流 瀏覽器中,是 不支援 JSX 的寫法的,讓我們繼續往下看:


就如剛剛所說的現階段的瀏覽器,並不支援 JSX 的語法,所以我們必須將 JSX 進行編譯,而 Babel 的作用就在這裡了


引入 Babel

BabelJSX 編譯成瀏覽器可接受的格式,以達到運行的結果

Babel 還可以用來編譯 ES6

這邊使用 網頁 載入的方式來運行 Babel,如下:

  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Babel 官方文件資料:Installation

另外在 <script> 的標籤中要設定 type 的屬性為 text/babel,下列範例展示:

<!DOCTYPE html>
<html>

<head>

  <!-- include react -->
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

  <!-- include Babel -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <meta charset="utf-8">

  <title> React app </title>

</head>

<body></body>

<script type='text/babel'>

  class MyApp extends React.Component{
    render(){
      return<h1>MyApp</h1>;
    }
  }

  ReactDOM.render(
    <MyApp/>,
    document.body
   )

</script>

</html>

Facebook 功能: