React の使い方 (その3) #React

こちらのページを参考にしました。
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 />)
//
// ---------------------------------------------------------------

ブラウザーでアクセスした結果