mirror of
https://github.com/michivonah/nextjs.git
synced 2025-12-22 14:06:29 +01:00
53 lines
No EOL
1.3 KiB
HTML
53 lines
No EOL
1.3 KiB
HTML
<html>
|
|
<body>
|
|
<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 createTitle(title){
|
|
if(title){
|
|
return title;
|
|
}
|
|
else{
|
|
return "Default createTitle";
|
|
}
|
|
}
|
|
|
|
function Header({ title }){
|
|
return (<h1>{createTitle(title)}</h1>);
|
|
}
|
|
|
|
function HomePage(){
|
|
const names = ['Max Meier', 'Josef Berchtold', 'Margrit Barmettler'];
|
|
|
|
const [likes, setLikes] = React.useState(0);
|
|
|
|
function handleClick(){
|
|
setLikes(likes + 1);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<Header title="React" />
|
|
<Header title="something new" />
|
|
|
|
<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 />);
|
|
</script>
|
|
</body>
|
|
</html> |