ZWH ZONE

[React Js] JSX 與 Babel 簡介

zhiwei. huang -

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

React.createElement() 寫法：

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

JSX 寫法：

<h1>我是標題</h1>

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

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

引入 Babel

Babel 將 JSX 編譯成瀏覽器可接受的格式，以達到運行的結果

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 功能：