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

       //引入react核心库
       //引入react-dom，用于支持react支持dom
    

    
    

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

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

所以我们在引入一个标签

  //  引入bable，用于将jsx转为js

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

React.createElement()

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

我们看下面案例

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