React 教程第一篇—— JSX 語法

時間 2019-12-07

標籤 react 教程一篇 jsx 語法欄目 React 简体版

原文原文鏈接

JSX 語法

一種特殊的 js 語法糖，能夠在代碼中把 html 標籤當對象使用，其能夠總結成如下幾個特色：javascript

不加任何引號

之前在 js 中使用 html 標籤都是加上引號當成字符串使用，而在 jsx 語法中不用加引號，直接當對象使用html

var html = <h1>React</h1>;

標籤必定要有對應的結束標標籤或結束標識：

有時候咱們在寫 html 結構的時候，都沒有把對應的結束標識加上，但瀏覽器能正常解析，但在 jsx 語法當中，則要強制寫標準的 html 結構
這一段 html　標籤在瀏覽器是能正常解析java

<input type="text" value="React">

這一段在 jsx 語法當中則會報錯react

var html = <input type="text" value="React">;

jsx 正確寫法應該是這樣的git

var html = <input type="text" value="React" />;
    var div = <div>React</div>;

只能有一個根節點

在 jsx 語法當中，最頂層的結構必定只有一個節點，不能出現兄弟節點github

var html = 
    <div>
        <h1>Tom</h1>
        <h1>Lucy</h2>
    </div>

不能在標籤當中加註釋

在 jsx 語法當中，html 標籤是一個對象，是一種數據結構，而不是真實的 dom 節點，也不是字符串，因此在標籤當中不能添加註釋。
下面的代碼是在標籤當中添加了註釋，因此會報錯。express

var html = 
    <div>
        <!--不能添加註釋，這裏會報錯-->
        <h1>Tom</h1>
        <h1>Lucy</h2>
    </div>

jsx 語法容許 html 標籤和 javascript 代碼混寫

在 jsx 語法當中，要在 html 標籤中用到 js 代碼，則用花括號（{expression}）括起來。瀏覽器

var name = "DK";
    var style = {fontSize: '12px', color: 'red'};
    var html = <span style={style}>{name}</span>;

最終上面的代碼將會解析成babel

<span style="font-size:12px; color:red">DK</span>

React 使用

React 是一個第三方的框架庫，因此在使用前要先把相關的庫文件引入。

<!--React 核心庫-->
    <script src="../../../../libs/react/react.js"></script>
    <!--React 跟 Dom 相關的功能庫-->
    <script src="../../../../libs/react/react-dom.js"></script>
    <!--babel 庫，將 JSX 語法轉爲 JavaScript 語法-->
    <script src="../../../../libs/react/browser.min.js"></script>

React 是基於 jsx 語法去實現，因此須要明確 script 的類型爲 text/babel

<script type="text/bebal"></script>

使用 React 的核心對象和方法`ReactDOM.render`進行將 html 標籤渲染到指定的容器

<body>
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>

        <!--jsx 語法-->
        <script type="text/babel">
            //將標籤直接渲染到容器 div1 當中
            ReactDOM.render(<h1>DK</h1>, document.getElementById('div1'));

            var _style = {fontSize: '12px', color: 'red'};
            var _name = "Tom";
            var _obj = {name: "DK", age: 18};
            //標籤與 js 代碼混寫
            ReactDOM.render(<h1 style={_style}>{_obj.age + (1 + 2)}</h1>, document.getElementById('div2'));

            var array = ["Tom", "Lucy", "Lily"];
            //多級標籤和 js 代碼混寫
            ReactDOM.render(
                <div>
                    <ul>
                        {
                            array.map(function(arg1, arg2){
                                return <li key={arg2}>{arg1}</li>;
                            })
                        }
                    </ul>
                    <ul><li>Sam</li></ul>
                    <ul><li><input type="text" /></li></ul>
                </div>,
                document.getElementById('div3')
            );
        </script>
    </body>

效果預覽數據結構