piffy

React, proprietà ed eventi

Aug 10th, 2021
690
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="it">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>React, uso di proprietà e composizione</title>
  6. </head>
  7. <body>
  8.  
  9. <div id="radice"></div>
  10.  
  11. <!-- Inclusione di React e React-dom -->
  12. <script src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
  13. <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
  14.  
  15. <!-- Inclusione del transpiler Babel -->
  16. <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  17.  
  18. <script type="text/babel">
  19.   function Hello(props) {
  20.     return <h1>Ciao, {props.nome} {props.cognome}</h1>;
  21.   }
  22.   class App extends React.Component {
  23.     attivaLasers(event) {
  24.       this.setState({colore:red});
  25.     };
  26.     constructor(){
  27.       super();
  28.       this.state = {
  29.         colore : "white"
  30.       };
  31.     }
  32.     render(){
  33.       return(
  34.               <div style={{backgroundColor: this.state.colore}} >
  35.                 <Hello id="LP" nome="Lorenzo" cognome="Patta" />
  36.                 <Hello nome="Marcel" cognome="Jacobs" />
  37.                 <Hello nome="Eseosa" cognome="Desalu" />
  38.                 <Hello nome="Fabrizio" cognome="Tortu" />
  39.                 <button onClick={() => {
  40.                   this.setState({ colore: "blue"});
  41.                 }}>
  42.                   Blu!
  43.                 </button>
  44.                 <button onClick={() => {
  45.                   this.setState({ colore: "yellow"});
  46.                 }}>
  47.                   Giallo!
  48.                 </button>
  49.               </div>
  50.       )
  51.     }
  52.   }
  53.  
  54.   ReactDOM.render(<App />, document.getElementById('radice'));
  55.  
  56. </script>
  57. </body>
  58. </html>
RAW Paste Data