html引入react
- 效果
- 代码
- 注意
效果
分享react demo片段的时候，如果是整个工程项目就有点太麻烦了，打开速度慢，文件多且没必要，这个时候用html就很方便。
在html中能正常使用useState和useEffect等hook。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script type="text/babel">
function App() {
const [count, setCount] = React.useState(0);
React.useEffect(() => {
console.log('Component is mounted');
return () => {
console.log('Component will unmount');
};
}, []);
return (
<div>
<h1>Hello, React!</h1>
<p>This is a simple React component.</p>
<p>开始数字{count} </p>
<button onClick={() => setCount(count + 1)}>
点击
</button>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>
注意
这一段很重要，type="text/babel" 和 cdn 引用错误会导致失效。
<script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script type="text/babel">
