react学习之路

1. 先引入文件

<!-- 引入react的核心库-->
    <script crossorigin src="./js/react.production.min.js"></script>
    <!-- 引入react的Dom操作库核心库-->
    <script crossorigin src="./js/react-dom.production.min.js"></script>
    <!-- 引入babel -->
    <script src="./js/babel.js"></script>

1. 创建容器

<div id="test"></div>

1. 准备数据

let id = "box";
let data = ["react", "vue", "angular"];

1. 自己创建虚拟dom

const VDOM1 = (
        <h1 id={id} className="title" style={{ color: "red" }}>
          {data.map((item, i) => {
            return <li>{item}</li>;
          })}
        </h1>
      );

1. 渲染dom

ReactDOM.render(VDOM1, document.getElementById("test"));

6、注意：准备数据、创建虚拟dom，渲染dom都是写在script中，但是script的type值必须为text/babel，不能为text/javascript

1. 完整内容（js文件自己引入，自己改）

<div id="test"></div>

<!-- 引入react的核心库-->
<script crossorigin src="./js/react.production.min.js"></script>
<!-- 引入react的Dom操作库核心库-->
<script crossorigin src="./js/react-dom.production.min.js"></script>
<!-- 引入babel -->
<script src="./js/babel.js"></script>

<script type="text/babel">

  // 1、自动创建虚拟DOM
  let id = "box";
  let data = ["react", "vue", "angular"];

  const VDOM1 = (
    <h1 id={id} className="title" style={{ color: "red" }}>
      {data.map((item, i) => {
        return <li>{item}</li>;
      })}
    </h1>
  );

  ReactDOM.render(VDOM1, document.getElementById("test"));

</script>