Componentes React mediante clases ES6

  • Por
Explicación y ejemplos sobre la alternativa de desarrollo de componentes React basada en la utilización de clases ES6.

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. 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.

Nota: Para ir ajustándonos a un proyecto real, en lo sucesivo trabajaremos sobre una instalación de Create React App, que nos facilita tener el entorno ya listo, con transpiladores, linters, live reload, etc. Recuerda que esto ya lo explicamos y lo probamos en el artículo de los primeros pasos con ReactJS, así que esperamos que puedas despejar tus dudas allí.

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 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.

Nota: Seguimos la regla de hacer componentes pequeños, con una responsabilidad acotada, igual que en la programación orientada a objetos las clases deben tener una responsabilidad limitada. Si te preocupa que sean muchos archivos pequeños, y eso produzca un sitio poco optimizado, cabe decir que más adelante en el proceso de "build" se empaquetarán en un "bundle", que es un archivo compactado, que recoge el código de nuestra aplicación en un solo bloque. Esto es algo que hace Webpack, que es otra de las cosas que nos incluye Create React App.

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 códigos 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.

Nota: Yo personalmente como regla prefiero no usar nombres de archivos o carpetas en el disco duro con mayúsculas y separo las palabras con guiones. Pero en React la costumbre más habitual es colocar mayúsculas en los archivos, de modo que sean igual que el nombre de las clases. En realidad poco importa en la práctica, sólo acuérdate el nombre de tu carpeta para cuando la tengas que importar, en el momento que quieras usar ese 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 método render del componente App que hay en App.js. Simplificado al máximo, nos podrá quedar algo como esto.

class App extends Component {
  render() {
    return (
      <FeedbackMessage />
    );
  }
}

Ahora en nuestra App lo único que tenemos es el componente, pero como ya conoces un poco JSX sabes que podrás colocar otro tipo de HTML que sea necesario.

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, vamos a intentar centrarnos en el manual en el desarrollo mediante clases ES6 en lo sucesivo.

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir