React的基本使用

官网https://react.docschina.org/

安装react

第一种通过react应用安装

第二种通过CDN安装

 

 

React 它提供了react相关的api

React-dom 提供了操作浏览器DOM的一些方法

这两个都要引入，否则就没法把jsx渲染到浏览器中

我们可以输出一下React和ReactDOM

consloe.log(React)


consloe.log(ReactDOM)

ReactDOM.render() 将jsx组件渲染到指定的节点容器，有三个参数，第一个参数就是我们的jsx组件，第二个参数就是我们的节点对象(document来获取)，第三个是回调函数

新建一个文件index.html

<body>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>   //引入react核心库
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>   //引入react-dom，用于支持react支持dom
    <div id="app">
    </div>
    <script type="text/babel">
        var h2=<h2>hello</h2>;    //创建虚拟DOM
            ReactDOM.render(   //渲染虚拟DOM
                 h2,
                 document.getElementById('app')
            );
    </script>
</body>

 此时我们打开页面之后会报错

 

 是因为在script标签中，需要写js语言，但是这里的jsx语法通过标签形式来写，所以js识别不了这种语法就会报错

所以我们在引入一个标签

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>  //  引入bable，用于将jsx转为js

 编译jsx语法，同时在script标签里面需要添加type属性，属性值就是 text/babel

React.createElement()

React.createElement()就是jsx语法编译的结果，这个函数的返回值是一个Virtual DOM(虚拟对象)

我们看下面案例

  <div id="app">
    </div>
    <script type="text/babel">
        var h2=React.createElement('h2',null,'hello');  
            ReactDOM.render(  
                 h2,
                 document.getElementById('app')
            );
    </script>

 

 我们可一输出这个h2查看一下，返回的是一个Virtual DOM(虚拟对象)

 

posted @ 2021-11-15 20:47  keyeking  阅读(180)  评论(0)  编辑  收藏  举报