React JSX基本语法
0x00 前言
- CTF 加解密合集
- CTF Web合集
- 网络安全知识库
文中工具皆可关注 皓月当空w 公众号 发送关键字 工具 获取
0x01 JSX
jsx 全程是 Javascrip XML，react 是一种XML的js扩展语法，本质上是一种语法糖。主要的作用是用来简化创建虚拟DOM
1.基本写法
<!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 id="title">Hello,react</h1>
)
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
0x02 语法规则
1.定义虚拟dom得到时候，不需要写引号
<!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 = (
<h2 id="cs">
<span>hello world!</span>
</h2>
)
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
2.标签中使用js变量的时候，需要使用花括号
<!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 myId="ceshi"
const myData="Hello"
const VDOM = (
<h2 id={myId}>
<span>{myData}</span>
</h2>
)
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
3.样式的类名执行用className
<!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>
<style>
.title{
background-color: orange;
width: 200px;
}
</style>
</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 myId="ceshi"
const myData="Hello"
const VDOM = (
<h2 className="title" id={myId}>
<span>{myData}</span>
</h2>
)
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
4. 内联样式需要使用{{}}的形式，传入键值对来进行生效
<!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>
<style>
.title{
background-color: orange;
width: 200px;
}
</style>
</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 myId="ceshi"
const myData="Hello"
const VDOM = (
<h2 className="title" id={myId}>
<span style={{color:'white',fontSize:'29px'}}>{myData}</span>
</h2>
)
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
5. 标签只能有一个根标签
<!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>
<style>
.title{
background-color: orange;
width: 200px;
}
</style>
</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 myId="ceshi"
const myData="Hello"
const VDOM = (
<div>
<h2 className="title" id={myId}>
<span style={{color:'white',fontSize:'29px'}}>{myData}</span>
</h2>
</div>
)
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
6. 标签必须闭合
<!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>
<style>
.title{
background-color: orange;
width: 200px;
}
</style>
</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 myId="ceshi"
const myData="Hello"
const VDOM = (
<div>
<h2 className="title" id={myId}>
<span style={{color:'white',fontSize:'29px'}}>{myData}</span>
</h2>
<input type="text"/>
</div>
)
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
0x03 other
欢迎大家关注我朋友的公众号 皓月当空w 分享漏洞情报以及各种学习资源，技能树，面试题等。
以上