¿Qué son los Componentes?

Cuando desarrollamos aplicaciones Web o de escritorio, es normal tratar de separar nuestra aplicación en pequeños archivos que luego vamos incluyendo dentro de otros más grande. Todo esto con múltiple finalidad, como separar las responsabilidades de cada componente, reducir la complexidad y reutilizarlos al máximo.

En React, es exactamente lo mismo, los componentes nos permiten crear pequeños fragmentos de interface gráfica, que luego vamos uniendo como si fuera un rompecabezas.

La relación entre Components y Web Component

Para comprender que es un Component, es importante entender antes el concepto de Web Components, para lo cual voy a citar su definición de Mozilla:

“Web Components consiste en distintas tecnologías independientes. Puedes pensar en Web Components como en widgets de interfaz de usuario reusables que son creados usando tecnología Web abierta. Son parte del navegador, y por lo tanto no necesitan bibliotecas externas como jQuery o Dojo. Un Web Component puede ser usado sin escribir código, simplemente añadiendo una sentencia para importarlo en una página HTML. Web Components usa capacidades estándar, nuevas o aún en desarrollo, del navegador.”-- mozilla.org

Web Components es una tecnología experimental

A pesar que el desarrollo web ya está apuntando al desarrollo de aplicaciones con Web Components, la realidad es que todavía está en una fase experimental o en desarrollo.

Como vimos, los Web Componentes son pequeños widgets que podemos simplemente ir añadiendo a nuestra página con tan solo importarlos y no requiere de programación.

En la imagen podemos ver la típica estructura de una página, la cual está construida mediante una serie de componentes que son importados para crear una página más compleja, la cual se convierte en un nuevo Componente más complejo.

Puede que esta imagen no impresione mucho, pues todas las tecnologías Web nos permiten crear archivos separados y luego simplemente incluirlos o importarlos en nuestra página, pero existe una diferencia fundamental, los Web componentes viven del lado del cliente y no del servidor. Además, en las tecnologías tradicionales, el servidor no envía al navegador un Web Component, por ejemplo, un tag <App>, si no que más bien hace la traducción del archivo incluido a HTML, por lo que al final, lo que recibe el navegador es HTML puro.

Con los Web Componentes pasa algo diferente, pues el navegador si conoce de Web Components y es posible enviarle un tag personalizado como <App>.

En React, si bien los componentes no son como tal Web Components, es posible simular su comportamiento, ya que es posible crear etiquetas personalizadas que simplemente utilizamos en conjunto con etiquetas HTML, sin embargo, React no regresa al navegador las etiquetas custom, si no que las traduce a HTML para que el navegador las pueda interpretar, con la gran diferencia que esto lo hace del lado del cliente.

Es posible que, en el futuro, cuando los navegadores soporte Web Components en su totalidad, React pueda evolucionar para hora si, crear Web Components reales.

Componentes con estado y sin estado

Una característica de los componentes, es su estado, el cual determina tanto la información que se muestras hasta como se representa, de esta forma, el estado puede cambiar la apariencia gráfica de un componente hasta la forma en que se muestra la información. Un ejemplo básico de un estado, es, por ejemplo, un formulario que puede pasar de modo lectura a escritura:

Como vemos en la imagen, una componente puede pasar de un formulario que no permite la edición a otro donde los valores se muestran en <input> para que el usuario pueda cambiar sus valores. Al guardar los cambios, el componente puede regresar a su estado inicial.

No vamos a entrar en los detalles de lo que es un estado, ni cómo es posible modificarlo, pues más adelante tenemos una sección especialmente para ello, por ahora, solo quiero que tengas una idea de lo que es el estado y cómo puede afectar la forma en que se muestra un componente.

Componentes sin estado

Este tipo de componentes son los más simples, pues solo se utilizan para representar la información que les llega como parámetros. En algunas ocasiones, estos componentes pueden transformar la información con el único objetivo de mostrarla en un formato más amigable, sin embargo, estos compontes no consumen datos de fuentes externas ni modifican la información que se les envía.

Nuevo concepto: Componentes sin estado

Los componentes sin estado también son llamados componentes de presentación, pero son mejor conocidos como Stateless Component por su nombre en inglés.

Para ejemplificar mejor este tipo de componentes vamos el siguiente componente, el cual representará un ítem de una lista de productos:

1import React from 'react'
2import Image from 'next/image'  
3	  
4class ItemList extends React.Component{  
5    
6    constructor(props){  
7    super(props)  
8    }  
9    
10    render(){  
11    return(  
12        <li>{this.props.product.name} - {this.props.product.price}</li>  
13    )  
14    }  
15}  
16export default ItemList  
17

Este componte utiliza algo que hasta ahora no habíamos utilizado, las propiedades (Props), las cuales son parámetros que son enviados durante la creación del componente. En este caso, se le envía una propiedad llamada product, la cual debe de tener un nombre (name) y un precio (price).

Nuevo concepto: Propiedades (Props)

Las propiedades o simplemente props, son parámetros que se le envían a un componente durante su creación. Los props pueden ser datos para mostrar o información para inicializar el estado. Como regla general, las props son inmutables, lo que quieres decir, que son de solo lectura.

Observemos que el componente ItemList solo muestra las propiedades que recibe como parámetro, sin realizar ninguna actualización sobre ella.

Componentes con estado

Los componentes con estado se distinguen de los anteriores, debido a que estos tienen un estado asociado al componente, el cual manipulan a mediad que el usuario interactúa con la aplicación. Este tipo de componentes en ocasiones consumen servicios externos para recuperar o modificar la información.

Un ejemplo típico de componentes con estados, son los formularios, pues es necesario ligar cada campo a una propiedad del estado, el cual, al modificar los campos afecta directamente al estado. Veamos cómo quedaría un componente de este tipo.

Regresaremos al componente App y lo dejaremos de la siguiente manera:

1import React from 'react'
2import Image from 'next/image'  
3import { render } from 'react-dom'  
4import ItemItem from './ItemList'  
5	  
6class App extends React.Component{  
7  
8  constructor(){  
9    super(...arguments)  
10    this.state = {  
11            firstName: '',  
12            lastName: '',  
13            age: ''  
14        }  
15    }  
16	  
17    handleChanges(e){  
18    let newState = Object.assign(this.state, {[e.target.id]: e.target.value})
19    this.setState(newState)  
20    }  
21    
22    render(){  
23    
24        return (  
25            <form>  
26            <label htmlFor='firstName'>Nombre</label>  
27            <input id='firstName' type='text' value={this.state.firstName}  
28                onChange={this.handleChanges.bind(this)}/>  
29            <br/>  
30            <label htmlFor='lastName'>Apellido</label>  
31            <input id='lastName' type='text' value={this.state.lastName}  
32                onChange={this.handleChanges.bind(this)}/>  
33            <br/>  
34            <label htmlFor='age'>Edad</label>  
35            <input id='age' type='number' value={this.state.age}  
36                onChange={this.handleChanges.bind(this)}/>  
37            </form>  
38        )  
39    }  
40}  
41    
42render(<App/>, document.getElementById('root'));

Primero que nada, vemos que en la línea 9 se establece el estado inicial del componente, el cual tiene un firstName (nombre), lastName (apellido) y ege (edad). Los cuales están inicialmente en blanco.

Seguido, en la línea 16, tenemos la función genérica handleChanges que modifica el estado a medida que vamos capturando valores en los campos de texto.

Y finalmente en el método render, retornamos 3 campos, correspondientes a las 3 propiedades del estado, adicional, cada campo está ligado a una propiedad del estado mediante la propiedad value. Cuando el usuario captura valores en los campos, se dispara la función handleHanges para actualizar el estado.

Seguramente al ver esta imagen, no quede muy claro que está pasando con el estado, es por eso que utilizaremos el plugin React Developer Tools que instalamos en el segundo capítulo para analizar mejor como es que el estado se actualiza. Para esto, nos iremos al inspector, luego seleccionaremos el Tab Components:

Una vez en el tab Components, seleccionamos el tag <App> y del lado izquierdo veremos las propiedades y el estado. Con el inspector abierto, actualiza los campos de texto y verás cómo el estado también cambia.

Nuevo concepto: Componentes con estado

Se le conoce como componente con estado, a aquellos componentes que tiene estado y que adicional, manipulan el estado a medida que el usuario interactúa con ellos. Estos componentes también son conocidos como Componentes Contenedores, pero es más común llamarlos Stateless Components, por su nombre en inglés.

Jerarquía de componentes

Dada la naturaleza de React, es normal que en una aplicación tengamos muchos componentes y muchos de estos importarán otros compontes dentro de ellos, que, a su vez, contendrá más componentes. Ha esta característica de crear nuevos componentes utilizando otros, se le conoce como Jerarquía de compones. Esta jerarquía puede verse como un árbol, donde la raíz sería el componente que abarque a todos los demás.

La imagen anterior es particularmente interesante, pues muestra como una aplicación se visualiza (lado izquierdo) vs como es que los componentes se organizan de forma jerárquica (lado derecho) para lograr la representación que vemos en pantalla.

En React tan solo se requiere importar el componente dentro del componente en el que se quiere utilizar, una vez importado, el componente se puede utilizar como un <tag> en JSX. Para importarlo utilizamos el formato import <COMPONENT> from <FILE_PATH>, donde:

component: es el nombre del componente.
file_path: es el path al archivo que contiene el componente.

Un detalle super importante es que para que un componente pueda ser utilizado, es necesario que se exporte (línea 15), de lo contrario no será posible utilizarlo y marcar error al momento de querer utilizarlo.

1import React from 'react'
2import Image from 'next/image'
3
4class ItemList extends React.Component{
5
6    constructor(props){
7    super(props)
8    }
9
10    render(){
11    return(
12        <li>{this.props.product.name} - {this.props.product.price}</li>
13    )
14    }
15}
16export default ItemList

Referenciar correctamente el componente

Un error común cuando empezamos a programar en React, es querer llamar al componente por el nombre de la clase, sin embargo, el nombre del componente será el que le pongamos en la instrucción export default. Por lo que se aconseja que siempre lo exportemos con el mismo nombre de la clase.

Una vez exportado, lo podemos utilizar en otro componte, como veremos a continuación:

1import React from 'react'
2import Image from 'next/image'
3import {render} from 'react-dom'
4import ItemList from './ItemList'
5
6class App extends React.Component{
7
8  render(){
9    return (
10      <ItemList product={item} />
11    )
12  }
13}
14render(<App />, document.getElementById('root'));

El componente anterior realiza una importación al componente ItemList (línea 3) y después crea una instancia del componente (línea 9).