React, 在html中引入 react

// 引入 React、ReactDOM 的开发版本
// 引入 Babel Standalone，用于将 JSX 语法转换为 JavaScript
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

//  body 中创建一个容器 <div>，用于渲染 React 组件
<div id="root"></div>
	

// 在 <script> 标签中，使用 JSX 语法编写 React 组件
<script type="text/babel">
  // data
  let msg = 'Hello World!'

  // 函数/方法
  function btnClick() {
    msg = '你好，世界！'
    rootRender()
  }

  const root = ReactDOM.createRoot(document.querySelector('#root'))

  // render()函数
  function rootRender() {
    root.render((
      <div>
        <h2> {msg} </h2>
        <button onClick={btnClick}>Update msg</button>
      </div>
    ))
  }

  // 在页面中渲染
  rootRender()

</script>