1⃣React 基础案例 JSX

**旧版**react相关文件

Untitled

  1. babel.min.js
    1. 语法转换 ES6→ES5 比如 import ES6 语法 浏览器是不认识的 得借助ES6 转ES5
    2. JSX → JS
  2. prop-type.js
    1. 16版本之后这个库专门负责propTypes的验证
  3. react.development.js
    1. react核心库
  4. react-dom.development.js
    1. react扩展库 操作DOM

1.先倒入三个包：

【先引入react.development.js，后引入react-dom.development.js】

react.development.js
react-dom.development.js
babel.min.js

2.创建一个容器

3.创建虚拟DOM，渲染到容器中

代码

01_helloworld\01_hello_react.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <style></style>
  <body>
    <div id="test"></div>
    <!-- 核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 操作dom库-->
    <script src="../js/react-dom.development.js"></script>
    <!--babel jsx 转 js-->
    <script src="../js/babel.min.js"></script>
    <!--babel标签不能少 babel 将jsx 翻译成javascript 不写默认javascript-->
    <script type="text/babel">
      // 创建虚拟DOM元素
      const vDom = <h1>Hello React</h1>; // 千万不要加引号 因为不是字符串
      // 渲染虚拟DOM到页面真实DOM容器中
      ReactDOM.render(vDom, document.getElementById('test'));
    </script>
  </body>
</html>

这样，就会在页面中的这个div容器上添加这个h1.