piffy icon

React, proprietà ed eventi

piffy | PRO | 08/10/21 09:02:46 AM UTC | 0 ⭐ | 1329 👁️ | Never ⏰ | []
HTML 5 |

0 B

|

None

|

0 👍

/

0 👎

<!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