案例：界面显示 hello world,点击按钮，文案变成hello react

依赖引入

引入3个依赖：

react： react核心代码
react-dom:dom渲染相关，之前这个包是在react中，后来react团队支持了native端，react-dom支持web和native端的渲染，一个是代码体积，另一个是对不同端的特殊操作？所以把渲染相关的单独抽出来。
babel:babel作用是把非js代码转换为浏览器识别的js代码，包括ts,.vue,.jsx,es6等转换诶普通js,在react项目中则是负责把jsx相关代码转换为js

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

依赖引入方式：

CDN，本地下载，npm

代码结构

html

<body>
    <div id='root'></div>
</body>

js

// 依赖引入
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  
  // react代码
  // 1、获取根DOM元素
  const root = ReactDOM.createRoot(document.querySelector('#root'))
  // 2 封装渲染函数,在根DOM元素中创建其余节点
   function rootRender () {
      root.render((
        <div>
          <h2>{message}</h2>
          <button onClick={btnClick}>点击按钮</button>
        </div>
      ))
    }
    
    // 3 页面初始化，执行rootRender渲染函数
    rootRender()
    
    // 4 定义变量message 和 函数btnClick
    let message = 'new hello world'
    const btnClick = function () {
      message = 'hello react'
      // react不会重新执行render，需要手动执行
      rootRender()
    }

特殊说明：

react在DOM中所有变量的引用，使用{}
react没有黑魔法，所有操作，需要自己执行代码逻辑，比如例子中的渲染函数，当依赖的data变化了，不会自动更新
原生事件，click=>onClick

04-hello react案例说明

依赖引入

依赖引入方式：

代码结构

html

js

特殊说明：