認識react和環境搭建

時間 2019-12-05

標籤認識 react 環境搭建欄目 React 简体版

原文原文鏈接

react

react是一個JavaScript庫,解決數據不斷變化的大型應用。數據變化會帶來兩個嚴重的問題：1.大量的DOM操做 2.邏輯極其複雜。react就解決了這個問題。
react的特色：聲明式編程（自動DOM操做）
核心是組件，組件的設計目的是提高代碼的複用率，下降測試難度，下降代碼複雜度。
react的開發環境配置
a) react.js : react的核心庫
b) react-dom.js : 提供操做DOM相關的功能
c) browser.js : 將使用的JSX語法轉換成JvaScript語法
三者引用順序必須是 a b c 的順序。

新建html文檔，引入三個js文件html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react筆記</title>
    <script src="js/react.min.js"></script>
    <script src="js/react-dom.min.js"></script>
    <script src="js/browser.js"></script>
</head>
<body>
    <div id="wrap"></div>
    <script type="text/babel">
        consoloe.log(React);
        consoloe.log(ReactDOM);
    </script>
</body>
</html>
複製代碼

在React中，有兩個屬性createElement(t,e,n)和createClass(t)。這兩個屬性都是建立react節點。前者使用原生js，基本上不使用;後者使用JSX語法。
在ReactDOM中，有一個render(e, t ,n)，將建立的組件渲染出來。

createElement屬性的三個參數:
1. t : 表示建立的元素標籤
2. e : 表示元素屬性
3. n : 表示子節點
//使用createElement建立一個react節點
    <div id="demo1"></div>
    <script type="text/babel">
        var oD = document.getElementById("demo1"),
            HelloReact = React.createElement(
            "h1", 
            null, 
            "Hello React"
        );
        //渲染
        ReactDOM.render(HelloReact, oD);
    </script>
複製代碼

使用createElement屬性在div中插入子元素時,要注意n參數不能直接寫變量,須要再使用createElement,例子以下:react

<div id="demo2"></div>
    <script type="text/babel">
        var oD = document.getElementById("demo2");
        var HelleWorld = React.createElement(
            "div",
            null,
            React.createElement(
                "h1", 
                {
                    "style" : {
                        "color" : "blue"
                    }
                }, 
                "Hello React"
            )
        );
        //渲染
        ReactDOM.render(HelloWrold, oD);
    </script>
複製代碼

createClass屬性一個參數:
1. t : {
    render : function(){
        renture XXXX;
    }
}
//使用createClass建立一個react節點
    <div id="demo3"></div>
    <script type="text/babel"> //bable:支持JSX語法
        var oD = document.getElementById("demo3");
        //首字母必須大寫HelloWrold
        var HelloWorld = React.createClass({
            render(){
                return <div>Hello Wrold</div>
            }
        });
        //調用組件的時候必須使用<HelloWorld />格式來寫
        ReactDOM.render(<HelloWrold/>, oD);
    </script>
    注意事項:  
        1. type類型 type="text/babel"  
        2. 變量首字母必須大寫  
        3. 調用組件的時候必須使用<HelloWrold/>格式來寫  
          單標籤 <HelloWrold/>
          雙標籤 <HelloWrold></HelloWrold>
        4. 引用browser.js
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。