HelloReact

单页面中使用React

  • 在单页面中使用React需要引入三个js：React的核心库、依赖核心库、babel（编译JSX）
  1. <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  2. <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  3. <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

1、React.createElement

  • React.createElement用来创建一个React元素，称作虚拟DOM，本质上是一个对象
    1. 参数1：元素类型，如果是字符串，一个普通的HTML元素
    2. 参数2：元素的属性，一个对象
    3. 后续参数：元素的子节点
创建一个span元素

var span = React.createElement("span", {}, "一个span元素");

2、ReactDom.render

  1. 参数1: jsx
  2. 参数2: 要挂在到哪个节点上

举个栗子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
  <!-- React的核心库，与宿主环境无关 -->
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <!-- 依赖核心库，将核心的功能和页面结合 -->
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- 编译JSX -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <script type="text/babel">
    var h1 = <h1 title="第一个React元素">Hello World</h1>
    ReactDOM.render(h1, document.getElementById("root"));
  </script>
</body>
</html>
posted @ 2023-03-03 21:32  HuangBingQuan  阅读(11)  评论(0)  编辑  收藏  举报