0x00 前言
- CTF 加解密合集
- CTF Web合集
- 网络安全知识库
次笔记仅记录学习React过程中的笔记，因为有必要掌握一门前端的框架， 在vue和React中选择了React。
0x01 正文
目标：
实现Demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello_react</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="js/react.development.js"></script>
<script type="text/javascript" src="js/react-dom.development.js"></script>
<script type="text/javascript" src="js/babel.min.js"></script>
<script type="text/babel">
const VDOM = <h1>Hello,react</h1>
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
0x02 笔记
1.引用库
react.development.js是react核心库
react-dom.development.js是跨站库
babel.min.js是转换库，主要作用是为了将jsx转为js
2.js写法
相对于正常的js而言，需要将type中的内容转为：text/babel
举例：文章来源地址https://www.toymoban.com/news/detail-699955.html
<script type="text/babel">
const VDOM = <h1>Hello,react</h1>
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
3.基本渲染写法
reactDOM.render的方式给容器赋值文章来源：https://www.toymoban.com/news/detail-699955.html
举例：
<script type="text/babel">
const VDOM = <h1>Hello,react</h1>
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
到了这里，关于React 第一个Demo的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
