React, proprietà ed eventi

<!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/react@16.7.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0/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>