<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>React, uso di proprietà e composizione</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 Hello(props) {
return <h1>Ciao, {props.nome} {props.cognome}</h1>;
}
class App extends React.Component {
attivaLasers(event) {
this.setState({colore:red});
};
constructor(){
super();
this.state = {
colore : "white"
};
}
render(){
return(
<div style={{backgroundColor: this.state.colore}} >
<Hello id="LP" nome="Lorenzo" cognome="Patta" />
<Hello nome="Marcel" cognome="Jacobs" />
<Hello nome="Eseosa" cognome="Desalu" />
<Hello nome="Fabrizio" cognome="Tortu" />
<button onClick={() => {
this.setState({ colore: "blue"});
}}>
Blu!
</button>
<button onClick={() => {
this.setState({ colore: "yellow"});
}}>
Giallo!
</button>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('radice'));
</script>
</body>
</html>
Comments