class component

Introducción

Utilizar la sintaxis de class es una de las formas más comunes de definir un componente React. Las class en javascript se introdujeron en ECMAScript 2015 (ES6) con el objetivo de tener una sintaxis mucho más clara y simple para crear objetos y lidiar con la herencia.

Para crear un class component utilizaremos la herencia ya que extenderemos de una class llamada Component que viene con react.​

Gracias a extender de esta clase podremos hacer cosas cómo manejar el state del componente, escuchar el ciclo de vida, etc. Cosas que vamos a ir viendo mas adelante.

Creando un class component

Veamos un ejemplo básico de cómo sería un class component.

import React, { Component } from 'react';
​
class MyComponent extends Component {
  render() {
    return (
      <div>Hello word</div>
    );
  }
}
​
export default MyComponent;

Cómo podemos ver, importamos Component para poder extenderlo. El método render de nuestro componente es el que va a dibujar en el HTML la UI. Siempre debe retornar algo (react element, string, null, etc). El método render es obligatorio que lo definamos en nuestros componentes.

Accediendo a las Props

En secciones anteriores habíamos dicho que todo componente de react recibía una serie de props y retornaba un react element. Los class component también reciben props y devuelven un react element (con el método render).

Veamos un ejemplo de cómo leemos las props en un class component.

import React, { Component } from 'react';
​
class MyComponent extends Component {
  render() {
    return (
      <div>{this.props.content}</div>
    );
  }
}
​
export default MyComponent;

Cómo pueden ver, las props las tenemos dentro de this, es la única diferencia con el resto de los components (componentes funcionales, o stateless components).

Ejecutando class methods

Es muy común que los eventos de los class components estén escritos en un método de la class, por ejemplo:

import React, { Component } from 'react';
​
class MyComponent extends Component {
  constructor() {
    // El bind lo usamos para que el contexto dentro de execute, sea this
    this.execute = this.execute.bind(this);
  }
​
  execute(event) {
    console.log('click');
  }
​
  render() {
    return (
      <button onClick={this.execute}>
        Label
      </button>
    );
  }
}
​
export default MyComponent;

Un detalle es la asignación del método execute en el constructor utilizando bind(). Esto lo hacemos para que el método execute tenga acceso al this de la class cuando se llame. Existe una alternativa a utilizar el bind() que es utilizar arrow functions introducidas en ES6:

import React, { Component } from 'react';
​
class MyComponent extends Component {​
  execute = (event) => {
    console.log('click');
  }
​
  render() {
    return (
      <button onClick={this.execute}>
        Label
      </button>
    );
  }
}
​
export default MyComponent;