En el pasado artículo del Manual de React comenzamos a explicar cómo crear componentes. En aquella ocasión lo hicimos con el método createClass() y ahora conoceremos otro mecanismo más actual, basado en clases de las que nos aporta ECMAScript 2015.

No es que por hacer los componentes mediante clases podamos realizar cosas adicionales a las que nos permitía el método de createClass(), sino que nos permitirá organizar el código de nuestras aplicaciones de una manera diferente, más práctica y mantenible. Básicamente podremos colocar cada componente en su módulo independiente e importarlo cuando sea necesario con imports de ES6. Al mismo tiempo, el hecho de ser clases nos permitirá de beneficiarnos de los beneficios de la Programación Orientada a Objetos en general.

En la documentación de React afirman que los componentes con clases ES6 tienen un mejor desempeño que usar createClass(), que se notará en aplicaciones grandes. Como desventaja, tendremos que escribir algún código adicional que React ya te hace de manera automática si usas createClass(), como por ejemplo el bindeo del contexto (this) en los métodos defindos como manejadores de eventos. Hablaremos de ello con detalle llegado el momento.

Quizás pienses en que agregar ES6 te añade la dificultad en la operativa de desarrollo, por la necesidad de la transpilación. Pero dado que ya estamos en la necesidad de transpilar código JSX, será indiferente tener que transpilar también ES6.

Cada componente en su archivo

Ahora que vamos a trabajar con ES6, por facilitarnos la vida en lo que respecta a la organización del código del proyecto, vamos a tener el cuidado de crear cada componente en su propio archivo. Cuanto menores sean los archivos, más fáciles serán de mantener.

Cada archivo de código Javascript independiente forma parte de lo que se conoce como "módulo". Así que "cada componente en su módulo" sería más correcto de decir.

Los archivos de los componentes los colocarás en la carpeta "src", contenida en un proyecto en blanco de Create React App. Ya luego cómo desees organizar los módulos dentro de esa carpeta puede variar, pero una buena práctica sería crear una carpeta para cada componente o incluso carpetas de grupos de componentes que tengan una responsabilidad asociada. Iremos viendo estructuras más complejas en el futuro y también tus propios gustos y necesidades te irán marcando una pauta. Nosotros de momento nos contentaremos con colocar los archivos del componente en su carpeta independiente.

Así pues, dentro de src podrás crear una carpeta que se llame "MiComponente" o "mi-componente" o y dentro un "index.js" que tendrá el código del componente.

Pienso que casi ni hace falta, pero en la siguiente imagen tenemos una estructura de carpetas y archivo que vamos a crear.

Construir el componente, extendiendo de Component

Ahora dentro de nuestro index.js colocamos el código del componente. Comenzamos con la necesidad de importar React y la clase Component. React es la propia librería y Component es la clase de la que vamos a extender nuestros componentes.

import React, { Component } from 'react';

A continuación podemos hacer ya la clase ES6 en la que definimos el componente.

class FeedbackMessage extends Component {
    render() {
        return (
            <div>
                Bienvenido a FeedbackMessage!
            </div>
        )
    } 
}

Simplemente fíjate que estamos extendiendo de Component. El resto del código ya lo debes de reconocer, con su método render que devuelve el HTML a renderizar. Siendo que lo que hay en el return no es HTML, sino JSX.

Una vez tenemos la clase, nos tenemos que preocupar de exportarla, para que se conozca desde fuera de este módulo. Esto se consigue con la sentencia "export" de ES6.

export default FeedbackMessage

Estamos diciendo que exporte la clase "FeedbackMessage", que es la clase con la que hemos implementado el componente. Además con "default" estamos permitiendo que no tengamos que especificar el nombre de la clase cuando queremos importarla, en el siguiente paso.

Solo un detalle, que podríamos definir el export al mismo tiempo que declaramos la clase, con una cabecera combinada como esta:

export default class FeedbackMessage extends Component {

Usar un componente definido como clase

El único detalle nuevo ahora es que, para usar el componente, debemos importar su código definido en el módulo independiente. Lo conseguimos a partir de un "import" de ES6. Si estás familiarizado con esta práctica no tendrás duda alguna, pero vamos con ello.

import FeedbackMessage from './FeedbackMessage'

Ese import lo colocarás en cualquier módulo que desee usar tu componente nuevo. En el caso de un proyecto de Create React App tenemos el archivo App.js, que es donde se desarrolla todo el trabajo con la aplicación. Colocaremos allí el import de nuestro componente.

Una vez importado el componente lo podemos usar, ya dentro de un JSX. Usaremos el componente en el marcado que devolvemos mediante el método render del componente App que hay en App.js. Para que quede claro, este es el código que podríamos tener en el archivo App.js

import React, { Component } from 'react';
import FeedbackMessage from './FeedbackMessage'

class App extends Component {
  render() {
    return (
      <div>
        <h1>Manual de React</h1>
        <p>Creamos componentes con clases ES6</p>
        <FeedbackMessage />
      </div>
    );
  }
}

export default App;

Como puedes comprobar, una vez realizado el import del código del componente FeedbackMessage, podemos usarlo en el componente App. Para ello, en el JSX colocaremos la cantidad de código que sea necesario, junto con la etiqueta del componente que acabamos de crear.

Conclusión

Las clases ES6 nos facilitan muchas cosas en nuestro desarrollo y siempre es una buena idea tratar de aprovechar las ventajas de las versiones de Javascript más recientes. Para mantener una coherencia, en lo sucesivo del manual de React vamos a intentar centrarnos en el desarrollo mediante clases ES6.

Ten muy en cuenta Create React App, que te ofrece una estructura de proyecto con un entorno ya perfectamente configurado. También nuestros ejemplos los crearemos basando su funcionamiento en Create React App, porque así podemos abstraernos de varios aspectos de la configuración del proyecto. Recuerda que ya presentamos Create React App en el artículo de Primeros pasos con React.

En el próximo artículo comenzaremos con una de las utilidades más fundamentales para el desarrollo de componentes React: sus propiedades.