<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Greta Van Fleet Page</title>
</head>
<body>
<div id="radice"></div>
<!-- Inclusione di React e React-dom -->
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<!-- Inclusione del transpiler Babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
function Intestazione() {
return (
<h1>Greta Van Fleet Fan Fun</h1>
);
}
function App() {
return (
<div>
<Logo />
<Intestazione />
<h3>Discografia</h3>
<Discografia />
</div>
);
}
function Item(props) {
return <li>{props.message}</li>;
}
function Discografia() {
const todos = ['Black Smoke Rising', 'From the Fires', 'Anthem of the Peaceful Army', 'The Battle at Garden\'s Gate'];
return (
<ul>
{todos.map((message) => <Item key={message} message={message} />)}
</ul>
);
}
function Logo() {
return (
<div>
<img src="img/gretalogo.png" alt="Logo"/>
</div>
);
}
const radice = document.querySelector('#radice');
ReactDOM.render(App(), radice);
</script>
</body>
</html>
Comments