Guia de primer Proyecto parte 4

¡Construye tu primera aplicación web con ReactJS! 🔥 — Parte 4

Para los desarrolladores web, la idea de hacer componentes es el equivalente a encapsular nuestra interfaz en piezas de lego, los cuáles
podemos adaptar para que tomen las formas y colores que nosotros necesitamos, y con los cuáles, ensamblándolos entre sí, podemos
construir aplicaciones robustas y complejas.

Esta idea de componente es básicamente lo que hace a React lo que es hoy, una de las librerías más populares para construir interfaces de
usuarios, y es que no es para menos; si bien, algunas otras librerías también utilizan este concepto, React nos dió un entendimiento distinto de
cómo utilizarlos. No obstante, esa historia es más para otro artículo.
Por ahora, asumo que si has llegado hasta aquí, es porque has pasado por la tercera parte de este tutorial, y que estás ansioso por terminar
de desarrollar tu aplicación.

Así que, sin más, vamos allá.

Step 4 — Smart and Dumb Components

En el mundo real, durante el desarrollo de aplicaciones, los desarrolladores solemos sacarle muchísimo provecho a la idea de utilizar
componentes, los cuáles encapsulamos según nos convenga dentro de la aplicación. No obstante, esta idea de componentizar tiene 2
vertientes principales, que se utilizan de acuerdo a distintos casos de uso, y son los siguientes:

1. Smart components: Estos componentes tienen el objetivo de manejar la lógica de la aplicación, y suelen realizar operaciones a través del
estado y sus handlers correspondientes. También suelen (pero no obligatoriamente) no llevar estilos.
2. Dumb Components: Aparecen como funciones, que son llamadas dentro de un Smart Component, y que únicamente tienen elementos
de UI, sin ningún tipo de lógica, y abstraen todo el contenido de un elemento, convirtiéndolo a un sólo tag de JSX (ejemplo a
continuación).

Para realizar una implementación de este estilo en nuestra aplicación, debemos definir cuáles partes vamos a convertir en dumb components,
puesto que nuestro principal smart component será App.js

La arquitectura de componentes que manejaremos por ahora, será la siguiente, aunque después integraremos todavía más componentes: 

El smart component será nuestro App.js, el cuál controlará a los componentes task y title

Para organziar lo anterior, abriremos una carpeta dentro del directorio src/ de nuestra aplicación, la cuál llamaremos components/, y dentro
crearemos los archivos correspondientes a nuestros dumb components.

src/

|--components/

|--title.js

|--task.js

La estructura básica de un dumb component es simplemente una función, que retorna el componente en JSX, así que, de entrada, podemos
escribir esta estructura inicial en cada uno de los nuevos archivos, tanto title.js como task.js, reemplazando los bloques en negritas por la
información correspondiente:

import React from "react";function <Nombre del componente>() {

return (

<Componente>

);

}export default <Nombre del Componente>;

Como dije anteriormente, un dumb component es sólo una función que retorna los elementos de UI correspondientes a ese bloque, así que
podemos literalmente copiar y pegar las partes que queremos abstraer, tal como se muestra en las siguientes imagen:


Copia del componente de título desde App.js a title.js

Copia del componente de Task desde App.js a task.js

Nótese que para el componente de task.js envolví el task entre comillas, lo cuál únicamente va a renderizar texto, y lo arreglaremos en el paso
5.
Ahora, la forma de llamar estos componentes desde nuestro App.js, es importarlos (por eso es que usamos export default), haciendo uso de las
siguientes líneas en el inicio del documento:

import Task from './components/task';

import Title from './components/title';

Y para hacer uso de ellas, como un tag de JSX, sólo reemplazamos el componente de esta forma:

Resultado final de nuestro componente

Nota: De paso, eliminé el h2 debajo de form

Nótese que, en este paso, aprendimos a hacer uso de componentes para limpiar nuestro código, y hacerlo mucho más presentable. Sin
embargo, perdimos la funcionalidad de añadir tasks, ya que ahora, al publicar cada una, no contiene el nombre real de cada tarea, si no que
siempre dice “task”, y esto es ocasionado porque deberíamos poder acceder a los datos del mapping desde el componente.

Esto lo resolveremos en el siguiente paso.

Por ahora, ya tenemos una implementación sencilla de un par de componentes en nuestra aplicación, por lo que quisiera también enlistar
algunas posibles dudas que puedas tener:

1. ¿Los componentes tienen que estar forzosamente en la carpeta components/? R: No, de hecho, tú puedes definir la organización que
más te convenga. Sin embargo, en esta ocasión parece lo más adecuado, dado que nuestra aplicación no va a crecer significativamente.
2. ¿Puede haber más de un smart component? R: ¡Claro! De hecho, puedes construir una arquitectura como tú quieras, teniendo incluso
componentes inteligentes que contienen a otros componentes inteligentes, y así consecutivamente hasta que consideres necesario. Eso
ya te corresponde a ti y a tu equipo dependiendo de la situación.
3. ¿Cómo defino si un componente debe ser smart o dumb? R: En aplicaciones complejas, se vuelve algo complicado. No obstante, el tip
que te puedo dar es que cada nuevo componente que construyas, trates de hacerlo dumb, hasta que empiece a obtener demasiadas
funcionalidades; es ahí cuando deberás pasarlo a ser un smart component.

De cualquier forma, el patrón que deberías siempre de seguir es el que listé al inicio de este artículo. Para ello pregúntate primero qué 
tanta responsabilidad crees que tendrá ese componente.
4. ¿Esto es obligatorio? R: No. Pero quien lo recomienda es precisamente Dan Abramov en este artículo. Él es parte del equipo de desarrollo
de facebook que se encarga de mantener React, y suele poner los estándares de cómo utilizar la librería, por lo que este patrón lo
encontrarás muy frecuentemente.

Conclusión
Ahora que ya sabes aplicar el concepto de componentización, estás listo para aprender a interconectar componentes entre sí, con lo que
lograrás construir una aplicación mejor organizada y más legible para tus colaboradores, además de que puede seguir estándares de escritura
de código más especializados.
Lo importante de saber separar componentes, es que desarrolles el buen ojo de pensar mentalmente cómo puedes separar las partes de tu
aplicación en sus respectivos componentes, lo cuál te ayudará a escalar más fácil tus proyectos.

Última modificación: domingo, 12 de diciembre de 2021, 10:04

 