<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id = 'example'> </div>
<script type = 'text/babel'>
// const element = <h1>hello world!</h1>
// ReactDOM.render(
// element,
// document.getElementById('example')
// )
function tick() {
const elemet = (
<div>
<h1>hello world!</h1>
<h2>现在是{new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
elemet,
document.getElementById('example')
);
}
setInterval(tick, 1000);
function NumberDescriber(props){
let description;
if(props.number % 2 == 0){
description = <strong>even</strong>
}else{
description = <i> odd </i>;
}
return <div>{ props.number } is an {description}number</div>
}
function NumberDescriber1(props){
let description;
if(props.number % 2 == 0){
description = <strong>even</strong>
}else{
description = <i>odd </i>
}
return <div>{ props.number} is an {description} number </div>
}
</script>
<h1>我的第一个标题</h1>
<p>我的第一个段落</p>
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<p>这是一个段落</p>
<p>这是另外一个段落</p>
<a href="http://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>