react-jsx
2020-11-01 本文已影响0人
antlove
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>react prototype</title>
<style>
a {
display: block;
width: 50px;
height: 20px;
border: 1px solid #ccc;
border-radius: 4px;
text-align: center;
line-height: 20px;
font-size:12xp;
cursor: pointer;
user-select:none;
}
a:hover {
background-color: #eaeaea;
}
</style>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="like_button_container"></div>
<script type="text/babel">
// 创建element
const element = <a onClick={() => console.log('trigger click jsx')}><span>Like</span></a>;
// 获取dom元素
const domContainer = document.querySelector('#like_button_container');
// 渲染
ReactDOM.render(element, domContainer);
</script>
</body>
</html>
