ReactJS - Estado

Statees el lugar de donde provienen los datos. Siempre debemos intentar hacer nuestro estado lo más simple posible y minimizar el número de componentes con estado. Si tenemos, por ejemplo, diez componentes que necesitan datos del estado, deberíamos crear un componente contenedor que mantendrá el estado de todos ellos.

Usando el estado

El siguiente código de muestra muestra cómo crear un componente con estado utilizando la sintaxis 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'));

Esto producirá el siguiente resultado.