第
一起来学习React元素的创建和渲染
目录React和ReactDOMReact初体验创建React元素JSXJSX初体验总结React是一个用于构建用户界面的JavaScript库
它包括两个库：react.js和react-dom.js
react.js：React的核心库，提供了React.js的核心功能，比如创建React组件、组件的生命周期等react-dom.js：提供了和浏览器交互的DOM功能，比如：将组件渲染到页面上
React和ReactDOM
我们可以通过官方提供的CDN链接引入react.js和react-dom.js这两个库，从而在HTML中使用
scriptcrossoriginsrc=/react@16/umd/duction.min.js/script
scriptcrossoriginsrc=/react-dom@16/umd/duction.min.js/script
React是React库的入口。如果你通过使用script标签的方式来加载React，则可以通过React全局变量对象来获得React的顶层API
如果你使用一个script标签引入react-dom，所有的顶层API都能在全局ReactDOM上调用
先来看看React和ReactDOM是什么：
console.log(React)
console.log(ReactDOM)
React
ReactDOM
可以看到是两个对象，并且拥有很多方法，暂时不必深究每个方法
React初体验
首先我们在html中引入：react.jsreact-dom.js
scriptcrossoriginsrc=/react@17/umd/react.development.js/script
scriptcrossoriginsrc=/react-dom@17/umd/react-dom.development.js/script
目前我们的代码写在html中，所以都通过script标签引入这两个库（后续不再赘述）
接着我们在界面上添加一个根元素：
divid=root/div
如果我们想给这个根元素添加一段文字比如：Hello,React!，我们可以这么做：
divid=root
Hello,React!
/div
现在用React的方式来将这个标题渲染到页面上
我们要用到ReactDOM提供的API：ReactDOM.render()
ReactDOM.render(Hello,React!,document.getElementById(root),()={
console.log(渲染完执行回调函数);
事实上，render方法接受3个参数：
要渲染的内容（Hello,React!）渲染内容的接收容器（此处的根元素）可选的回调函数（回调函数会在内容被渲染后执行）
创建React元素
如果我们想要渲染的内容是一个标题h1或者一个段落p，甚至是更复杂的元素嵌套该怎么办呢
!--比如--
h1Hello,React!/h1
p第一次学习React，太简单了吧/p
!--甚至--
div
header
h1Hello,React!/h1
/header
section
p第一次学习React，太简单了吧/p
/section
/div
React提供了创建并返回React元素的API：
React.createElement(
type,
[props],
[...children]
该方法接受3个参数：
type：指定元素类型，比如h1、pprops：可选参数，元素的属性值对对象，比如
{className:bg-red,id:title}
可选参数，元素的子元素
创建元素并渲染到指定容器
consth1=React.createElement(h1,null,Hello,React!);
constp=React.createElement(p,null,第一次学react，