经过
初学react，在index.html文件中兴高采烈地敲击键盘：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<script>
function Clock(props) {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {props.date.toLocaleTimeString()}</h2>
</div>
);
}
function tick() {
ReactDOM.render(
<Clock date={new Date()} />,
document.getElementById('root')
)
}
setInterval(tick, 1000)
</script>
</body>
</html>
开启调试！但是发现页面上什么也没有显示，打开控制台发现报错：Uncaught SyntaxError: Unexpected token '<'
屑不肉！
发现问题
查了一大圈，发现原来需要添加babel才能在浏览器上用JSX：
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
...
</script>
真是可恶！又浪费了一个小时宝贵摸鱼时间！！