当需要使用react写一个小demo时,可以使用cdn来使用react, 官方的教程似乎有点简陋,直接看教程大概率没办法用cdn使用上,似乎缺少一个babel的cdn链接。
通过以下代码,就可以直接在html中,直接使用react的cdn链接了. 需要注意的是:
- 跨域问题,所以添加了crossorigin属性(好像通过vscode的liver server插件也可以解决跨域问题)。
- 另一个是在 <script>标签中添加type="text/babel", 否则会报语法错误
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script crossorigin src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script crossorigin src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<script crossorigin src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.js"></script>
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Blog() {
return <li>Test</li>
}
ReactDOM.render(
<Blog />, document.getElementById('root'))
</script>
</body>
</html>