Componentes en React JS explicado con Jujutsu Kaisen

Última actualización: 01 - 2 - 2024

Para Empezar...

¿Qué son los componentes en React?

Los componentes son (en su mayoría) los elementos visuales que podemos apreciar dentro de una página o aplicación web.

En JJK cada hechicero tiene a su disposición diferentes herramientas para exorcisar maldiciones, vamos a llamar a esas herramientas componentes 🙂

También los accesorios de los personajes los podemos llamar componentes.

Tomemos de ejemplo a Satoru Gojo.

El componente más característico de Gojo son sus vendas y en el transcurso de la serie se las quita o los cambia por unos lentes de sol.

Otro ejemplo perfecto sería Maki Zenin.

Sus componentes principales serían sus lentes que tienen las propiedad de ver maldiciones, y sus armas de lucha.

En ejemplo de código vendrían a ser algo así:

import Glasses from "../components"
import Weapon from "../components"

const Maki = ( ) => {
return (
<>
<Glasses />
<Weapon />
</>
)
}
export default Maki

Componentes funcionales de React

En react, al menos en sus versiones más recientes, utiliza funciones para la renderización de los componentes que usa.

En algunos proyectos se sigue usando componentes de clases pero no abarcaremos este tema aquí.

¿Cómo crear un componente en React JS?

Esta es la sintaxixs de un componente funcional:

import React from "react"; //import por defecto

const Gojo = ( ) => {
return (
<>
{/* Todo el código sobre el personaje aquí */}
</>
)
}
export default Gojo

El componente está compuesto por sus import. Por defecto esté el de React pero este ya no es necesario en las nuevas versiones de la librería.

Aquí van todas los recursos que vayas a necesitar para las funciones del componente. Estos pueden ser hojas de estilo CSS, otros componentes, funciones que estén abstraídas de la lógica de esta sección, datos de otros archivos de Javascript y dependencias.

En segundo lugar tenemos una arrow function (función de flecha) que va a ser el componente como tal y este va a hacer un return de un elemento JSX.

Por último tenemos el export default del componente para que pueda ser utilizados en otros lugares de la aplicación.

El export también puede ir antes de la palabra reservada const.

Una manera fácil de hacer esta estructura básica es con un plugin llamado ES7 + React / Redux / React Native que con un snippet te permite crear la estructura de un componente funcional en un instante.

Otra forma de escribir un componente con una función normal va de la siguiente forma:

import React from "react"; //import por defecto

function Gojo ( ) {
return (
<>
{/* Todo el código sobre el personaje aquí */}
</>
)
}
export default Gojo

¿Cómo estructurar componentes?

Esta es una pregunta peliaguda.

React tiene la ventaja de ser muy flexible con su "developer experience" pero hay algunos estándares que debes cumplir para mantener el orden de tus componentes en tu proyecto. Para Empezar...

  1. Puedes crear un fichero llamado components donde vas a guardar todos los componentes que sean reutilizables en toda la app
  2. Puedes hacer sub carpetas con componentes especificos para ese módulo.
  3. Hacer carpetas estructurales
  4. Hacer lo que te de la gana y ganarte el odio de tus compañeros de equipo

¿Cómo usar un componente?

Exportar e importar componentes

Con estas acciones o directivas podrás ser capáz de utilizar el componente donde lo requieras

Toma en cuenta la dirección del fichero desde donde lo estás importando ya que es un error común equivocarse en esto.

Luego para renderizar o mostrar un componente en pantalla puedes llamarlo dentro de la función X con el callback render dentro de los fragments de JSX.

Ejemplos de componentes en React JS

Jerarquía de los componentes (El DOM / Virtual DOM o árbol de componentes)

En cualquier proyecto vamos a tener un componente principal llamado App.

Este es el encargado de renderizar y manejar la lógica de todo lo que desarrollemos dentro del proyecto.

Dentro del componente App van a estar anidados de forma jerarquica lo que se le llaman "Componentes hijos".

Estos subcomponentes a su vez tendrán dentro de si otros componentes según sea el caso, siendo "componentes nietos" o componentes "bisnietos" de App.

Algo así como un árbol genealógico de componentes (También conocido como DOM o VIrtual DOM en React)

De aquí la importancia de tener los componentes bien organizados ya que en un siguiente artículo voy a explicar cómo se pasa información entre componentes utilizando algo llamado propiedades.