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