ReactJS - Stato

Stateè il luogo da cui provengono i dati. Dobbiamo sempre cercare di rendere il nostro stato il più semplice possibile e ridurre al minimo il numero di componenti stateful. Se abbiamo, ad esempio, dieci componenti che richiedono dati dallo stato, dovremmo creare un componente contenitore che manterrà lo stato per tutti loro.

Utilizzo dello stato

Il codice di esempio seguente mostra come creare un componente stateful utilizzando la sintassi EcmaScript2016.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
		
      this.state = {
         header: "Header from state...",
         content: "Content from state..."
      }
   }
   render() {
      return (
         <div>
            <h1>{this.state.header}</h1>
            <h2>{this.state.content}</h2>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

Questo produrrà il seguente risultato.