首先引入CDN

<!-- 引入react -->
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<!-- 引入babel 解释器 作用就是把reactjs的内容 转换为标准的 js语言 -->

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

babel javascript 解释器 负责编辑ES6 jsx的内容

jsx语法 不是新的语法 实际上还是js语法

type="text/babel" 要比 type="text/javascript" 优化

两者执行过程

jacascript 执行过程  js-> 浏览器下载->下载到浏览器->执行

babel 执行过程  js-> 浏览器下载->下载到浏览器->babel转换器转换成js-> 执行

ReactDOM  react的dom操作对象 

render()  渲染方法 

    render方法中具有两个参数 第一个参数是要渲染的内容 第二个参数是渲染内容的位置 

    可以简单理解为 把第一个参数渲染到第二个参数里面 注意 第二个参数只能用原生表示

    注意：

    第一个参数必须是一个完整的元素  不能出现兄弟元素

    第二个参数必须是原生元素

ReactDOM.render(
<div>
    <h1>论语</h1>
    <h1>大学</h1>
    <h1>中庸</h1>
    <h1>孟子</h1>
</div>    
,document.getElementById('app'));

jsx 语法 

1.遇到heml语法就按照html去解析

2.遇到{ }就把{ }里面的内容按照js进行解析

ReactDOM.render(
<div>
    <p>1+1={1+1}</p>    
</div>,document.getElementById('app'))