ReactJS - État

Stateest l'endroit d'où proviennent les données. Nous devons toujours essayer de rendre notre état aussi simple que possible et de minimiser le nombre de composants avec état. Si nous avons, par exemple, dix composants qui nécessitent des données de l'état, nous devons créer un composant conteneur qui conservera l'état pour tous.

Utilisation de l'état

L'exemple de code suivant montre comment créer un composant avec état à l'aide de la syntaxe 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'));

Cela produira le résultat suivant.