react基础语法1：render函数

react-dom: 把jsx语法（react独有的语法）转换为真实的dom元素

import React from 'react';
import ReactDOM from 'react-dom';


// ReactDOM.render() 把jsx元素渲染到页面中
// 参数1：jsx（react虚拟元素）
// 参数2：container（容器：想把元素放到哪个容器中）
// 参数三 callback（回调函数：当把内容放到页面中呈现的时候触发的回调函数,很少使用）

// jsx：javascript XML

// 定义一个变量存储数据
let name = 'dandan'
// 在es6中使用模板字符串使用变量 `<div>hello ${name}</div>`
// 而在react中，jsx使用{}来使用变量
ReactDOM.render(<div id="box">hello {name}</div>, document.body, () => {
let box = document.getElementById("box")
console.log(box.innerHTML)
 })

// 内容渲染成功，回调函数成功调用，但是会有警告：
// index.js:1 Warning: render(): Rendering components directly into document.body is discouraged, since its children are often manipulated by third-party scripts and browser extensions. This may lead to subtle reconciliation issues. Try rendering into a container element created for your app.
// react不建议我们直接将jsx放到body中，而是建议放在一个自己创建的容器里，一般放在一个id为root的div里

最终渲染的index.html文件里默认有一个id为root的div元素

正确执行方式

ReactDOM.render(<div id="box">hello {name}</div>, document.getElementById("root"), () => {
    let box = document.getElementById("box")
    console.log(box.innerHTML)
})