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

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第10天，点击查看活动详情

React

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

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>

在这里插入图片描述