こちらのページを参考にしました。
Adding Interactivity with State
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8">
</head>
<body>
Hello World!<br />
<div id="app"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/jsx" src="jsx01.js"></script>
May/12/2022 PM 13:25<br />
</body>
</html>
jsx01.js
// ---------------------------------------------------------------
//
// jsx01.js
//
// May/12/2022
//
// ---------------------------------------------------------------
const app = document.getElementById('app')
function Header(props) {
console.log(props.title)
return <h1>{props.title}</h1>
}
function HomePage() {
const [likes, setLikes] = React.useState(0)
const names = ['夏目漱石', '島崎藤村', '森鴎外']
function handleClick() {
console.log("increment like count")
setLikes(likes+1)
}
return (
<div>
<Header title="こんにちは" />
<ul>
{names.map((name) => (
<li key={name}>{name}</li>
))}
</ul>
<button onClick={handleClick}>Like({likes})</button>
</div>
)
}
const root = ReactDOM.createRoot(app)
root.render(<HomePage />)
//
// ---------------------------------------------------------------
ブラウザーでアクセスした結果
