概要
CDNでReactライブラリを読み込んでHTMLファイル1つだけでReactを利用するためのスケルトンコード
コード
TinyReact.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tiny React</title>
<script type="text/babel">
function App() {
return (
<div>
</div>
);
};
</script>
<style>
</style>
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/@mui/material/umd/material-ui.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
</script>
</body>
</html>
Reactとp5.jsを一緒に使う
TinyReactP5.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tiny React P5</title>
<script type="text/babel">
const Sketch = props => {
const containerRef = React.useRef();
const _Sketch = (p) => {
p.setup = () => {
p.getAudioContext().suspend();
p.createCanvas(p.windowWidth, containerRef.current.clientHeight);
}
p.draw = () => {
}
p.windowResized = function () {
p.resizeCanvas(p.windowWidth, containerRef.current.clientHeight);
}
}
React.useLayoutEffect(
() => {
let s = new p5(_Sketch, containerRef.current);
return () => s.remove();
},
[]
);
return (
<div className="sketch-container" ref={containerRef}></div>
);
}
const App = () => {
const [count, setCount] = React.useState(0);
const handleClick = React.useCallback(
() => setCount((n) => n + 1),
[setCount]
);
return (
<div className="App">
<Sketch />
</div>
);
};
</script>
<style>
</style>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/p5/lib/p5.min.js"></script>
<script src="https://unpkg.com/p5/lib/addons/p5.sound.min.js"></script>
<script crossorigin src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/@mui/material/umd/material-ui.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
</script>
</body>
</html>