こちらのページを参考にしました。
Displaying Data with Props
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">
const app = document.getElementById('app')
function Header(props) {
console.log(props.title)
return <h1>{props.title}</h1>
}
function HomePage() {
const names = ['夏目漱石', '島崎藤村', '森鴎外']
return (
<div>
<Header title="こんにちは" />
<ul>
{names.map((name) => (
<li key={name}>{name}</li>
))}
</ul>
</div>
)
}
const root = ReactDOM.createRoot(app)
root.render(<HomePage />)
</script>
May/12/2022 AM 10:05<br />
</body>
</html>
ブラウザーでアクセスした結果
