Hello React

准备工作

第一步: 引入React相关的JS库

• React核心库

<!-- React 核心库 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/9ml/cdn@main/js/react/v16.8.4/react.development.js"></script>

• React提供操作DOM的扩展库

<!-- 操作 DOM 的扩展库 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/9ml/cdn@main/js/react/v16.8.4/react-dom.development.js"></script>

• 解析JSX语法代码转为JS代码的库

<!-- 解析 JSX 语法库 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/9ml/cdn@main/js/react/v16.8.4/babel.min.js"></script>

第二步: 编写script标签

<!-- type="text/babel" 表示此标签内编写的是 JSX 语法脚本 -->
<script type="text/babel">
  //...
</script>

注意

1. React相关库的引入顺序不能乱
2. script标签要加上type="text/babel"表示标签内编写的是JSX语法脚本

编码实现

步骤:

1. 准备一个容器
2. 引入React相关库
3. 在script标签中编写代码实现

• 代码示例

<!-- 准备一个容器 -->
<div id="app"></div>
<!-- React 核心库 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/9ml/cdn@main/js/react/v16.8.4/react.development.js"></script>
<!-- 操作 DOM 的扩展库 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/9ml/cdn@main/js/react/v16.8.4/react-dom.development.js"></script>
<!-- 解析 JSX 语法库 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/9ml/cdn@main/js/react/v16.8.4/babel.min.js"></script>
<!-- type="text/babel" 表示此标签内编写的是 JSX 语法脚本 -->
<script type="text/babel">
  // 1. 创建虚拟 DOM, 不要写引号, 因为不是字符串
  const VDOM = <h1>Halo React</h1>;
  // 2. 渲染虚拟 DOM 到页面
  ReactDOM.render(VDOM, document.getElementById("app"));
</script>