<react學習筆記(1)>認識react和環境搭建

liangsheng0111發表於2018-12-01
React筆記

react

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

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

<!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>
複製程式碼
  1. 在React中，有兩個屬性createElement(t,e,n)和createClass(t)。這兩個屬性都是建立react節點。前者使用原生js，基本上不使用;後者使用JSX語法。
  2. 在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,例子如下:

    <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
複製程式碼

相關文章