2024-09-05 11:25:53 +02:00
|
|
|
<html>
|
2024-09-11 14:53:45 +02:00
|
|
|
|
|
|
|
|
<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">
|
2024-09-05 14:44:41 +02:00
|
|
|
const domNode = document.getElementById('app');
|
2024-09-11 14:53:45 +02:00
|
|
|
|
|
|
|
|
function createTitle(title) {
|
|
|
|
|
if (title) {
|
|
|
|
|
return title;
|
|
|
|
|
} else {
|
|
|
|
|
return 'Default title';
|
|
|
|
|
}
|
|
|
|
|
}
|
2024-09-05 14:44:41 +02:00
|
|
|
|
2024-09-11 14:53:45 +02:00
|
|
|
function Header({ title }) {
|
|
|
|
|
return <h1>{title ? title : 'Default Title'}</h1>;
|
2024-09-05 14:44:41 +02:00
|
|
|
}
|
|
|
|
|
function HomePage() {
|
2024-09-11 14:53:45 +02:00
|
|
|
const names = ['Ada Lovlace', 'Grace Hopper', 'Margaret Hamilton'];
|
|
|
|
|
function handleClick(){
|
|
|
|
|
console.log("increment like count")
|
|
|
|
|
}
|
|
|
|
|
return( <div>
|
|
|
|
|
<Header title="Develop. Preview. Ship." />
|
|
|
|
|
<ul>
|
|
|
|
|
{names.map((name) => (
|
|
|
|
|
<li key={name}>{name}</li>
|
|
|
|
|
))}
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
<button onClick={handleClick}>Like</button>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
|
2024-09-05 14:44:41 +02:00
|
|
|
}
|
2024-09-11 14:53:45 +02:00
|
|
|
|
|
|
|
|
|
2024-09-05 14:44:41 +02:00
|
|
|
const root = ReactDOM.createRoot(domNode);
|
2024-09-06 14:34:17 +02:00
|
|
|
root.render(<HomePage />);
|
2024-09-05 11:25:53 +02:00
|
|
|
</script>
|
2024-09-11 14:53:45 +02:00
|
|
|
</body>
|
|
|
|
|
|
2024-09-05 11:25:53 +02:00
|
|
|
</html>
|
