react---入门页面结构搭建1---三个连接的引入（react、react-dom、babel)--jsx语法

本文链接：https://blog.youkuaiyun.com/DcTbnk/article/details/107639186

React

React是facebook出的一款针对前端view视图层的library库。react使用了jsx语法(就是在js中写html标签)

https://zh-hans.reactjs.org/

jsx

…

三个链接的引入使用方式

在bootcdn.cn中引入三个网络文件，在是由于在bootcdn.cn中搜索到的babel文件加载很慢还容易使用不了，同时又试了babel网站文件链接的引入也很慢无法正常执行，就将其文件下载了下来，放入文件目录下来引入使用

此处代码不是最终使用的方法，仅仅此时展示过程,连接最终用法在文章最后面

<body>
    <!-- 所有的内容一会都将挂载#app这个节点上 -->
    <div id="app"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/16.13.1/umd/react.development.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.13.1/umd/react-dom.development.js"></script>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/6.26.0/babel.js"></script> -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </body>

react 16.13.1
react-dom 16.13.1
引入的时候一定要先引入react 在引入react-dom
在这里插入图片描述
容易出错，所以不使用这个

使用下面的babel链接,也很慢，就再换下一个方法
babel 6.26.0

在这里插入图片描述
babel最终的使用方法

三个文件下载完之后，新建一个名为libs的目录，存入进去，再去引入

    <title>第一个react组件</title>
  </head>
  <body>
    <!-- 所有的内容一会都将挂载#app这个节点上 -->
    <div id="app"></div>
    <script src="./libs/react.js"></script>
    <script src="./libs/react-dom.js"></script>
    <script src="./libs/babel.min.js"></script>
    <script type="text/babel">
      function HelloWord() {
        return <h1>大懒懒</h1>;
      }
      ReactDOM.render(<HelloWord />, document.getElementById("app"));
    </script>
  </body>

在这里插入图片描述