JSX


在 JavaScript 中類似 HTML 標籤的語法


Why JSX?


可以直觀且方便的產生 React Element


如何使用 JSX ?

前面實作的範例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>My Component</title>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <script>
            window.addEventListener("load", ()=>{
                //1. 建立自訂的React組件實體
                let myHead = React.createElement("H1", null, "Hello World")

                //2. 將建立好的React組件實體畫到容器中
                ReactDOM.render(myHead, document.body);
            })
        </script>
    </head>
</html>


使用 JSX 改寫後：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>My Component</title>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <!-- 載入Babel編譯器套件 -->
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <!-- 包含JSX語法的JavaScript 必須使用type="text/babel" -->
        <script type="text/babel">
            //設計組件類別
            class MyHead extends React.Component
            {
                render(){
                    return <h1>Hello World</h1>;  //React.createElement("H1", null, "Hello World");
                }
            }

            window.addEventListener("load", ()=>{
                //1. 建立自訂的React組件實體
                let myHead = <MyHead/>; // React.createElement(MyHead, null);

                //2. 將建立好的React組件實體畫到容器中
                ReactDOM.render(myHead, document.body);
            })
        </script>
    </head>
</html>


有那些不一樣的地方呢?

  • 瀏覽器並 不支援 JSX 語法，所以我們必須要用 Babel 將 JSX 轉換為瀏覽器相容的程式，我們可以先到 Babel官網 尋找 CDN link

    <!-- 1. 載入Babel編譯器套件 -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <!-- 2. 包含JSX語法的JavaScript 必須使用type="text/babel" -->
    <script type="text/babel">
        .
        .
        .
    </script>
  • class 的語法改變如下：
    //設計組件類別
    class MyHead extends React.Component
    {
        render(){
            //1. React.createElement("H1", null, "Hello World");
            return <h1>Hello World</h1>;  
        }
    }

    window.addEventListener("load", ()=>{
        // 2. React.createElement(MyHead, null);
        let myHead = <MyHead/>; 

        ReactDOM.render(myHead, document.body);
    })


小結

回顧上面我們知道如何導入 JSX 以及使用 Babel 編譯，並利用 JSX 改寫原生的 React.createElement。


Refernece