认识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
复制代码