Cómo crear componentes reutilizables en React: qué son las props y estructura del proyecto

Una de las principales características de React es la capacidad de crear componentes reutilizables. Esto permite desarrollar aplicaciones más organizadas, mantenibles y escalables. Sin embargo, para aprovechar completamente esta ventaja, es esencial comprender cómo manejar correctamente las props. Además, la estructura del proyecto, aplicar estilos de forma modular y controlar los eventos (similares a los del DOM) de manera eficiente hará que estos componentes sean mucho más accesibles y flexibles a la hora de volver a utilizarlos.

A continuación, vamos a explorar estos aspectos en profundidad para ayudarte a escribir mejores componentes en tus aplicaciones React.

Reutilización de componentes con props

En React, las props son el mecanismo principal para pasar datos de un componente padre a un hijo. Es lo que hace los componentes reutilizables de manera dinámica y sencilla. La manera que mostramos a continuación es con componentes funcionales, en los componentes basados en función (a partir de React 16.8, la sintaxis varías ligeramente).

Destructuring o no

Cuando recibimos props dentro de un componente, tenemos dos formas de acceder a ellas:

Sin destructuring:

function Card(props) {
  return <h2>{props.titulo}</h2>;
}

Con destructuring:

function Card({ titulo}) {
  return <h2>{titulo}</h2>;
}

Usar destructuring mejora la legibilidad del código repetitivo. Es especialmente útil cuando un componente recibe múltiples props.

Estructura de archivos y organización de componentes

A medida que tu aplicación crece, tener una estructura de proyecto clara se vuelve crucial.

Una buena manera de tenerlo organizado es almacenar todos los componentes en una carpeta components, donde cada componente tenga su propio archivo con el mismo nombre, ejemplo

/src
  /components
    Header.jsx
    Card.jsx
    Button.jsx

Incluso, para mejorar aún más la organización, puedes crear una carpeta por componente si incluye archivos adicionales, como archivo de estilos:

/components
  /Header
    Header.jsx
    Header.css

De esta manera, los archivos que guardan cierta relación están agrupados y es más sencillo dar con ellos, lo cual facilita el mantenimiento y las modificaciones en proyectos largos cuando tienes que volver a tocar el código que había escrito tiempo atrás.

Estilos: CSS modular por componente

En React, al trabajar con componentes, se vuelve interesante asociar un archivo CSS al componente que lo usa, nombrando al CSS de la misma manera que el componete:

// Header.jsx
import './Header.css';

function Header() {
  return <h1 className="title">Bienvenido a bordo</h1>;
}

No obstante, tenemos que tener en cuenta, que este estilo no está limitado al componente que lo importa.

Como los estilos de CSS afectan al documento de forma global cuando están presentes si otro componente utiliza una clase con el mismo nombre, por ejemplo «.titulo» cualquier objeto que esté en el documento se verá afectado. En otro artículo veremos cómo hacer usando módulos de CSS, estos sí encapsulan los estilos por componente automáticamente.

Otra opción para evitar estos problemas es usar CSS dentro del JS con librerías como styled-components que directamente escribe el CSS dentro de tu componente de React.

La prop children: contenido dinámico dentro de componentes

React tiene una prop propia del mismo, llamada children, que reprensenta todo lo que está dentro de las etiquetas de apertura y cierre del componente.

Ejemplo:

function MiComponente(props) {
  return <li><button>{props.children}</button></li>;
}

<MiComponente>¡Haz click!</MiComponente>

Aquí, "¡Haz click!" se pasa como contenido al componente, y se renderiza dentro del botón.

Al igual que con las props se puede extraer usando destructuring.

Este patrón es útil a la hora de crear tarjetas, secciones, barras de navegación, etc.

Reaccionando a eventos en React

En el JavaScript de toda la vida, hemos usado para manejar el DOM addEventListener con selectores tipo querySelector. En React esto no funciona de la misma manera.

En lugar de manipular directamente el DOM, en React se pasan funciones directamente como props de los elementos, usando nombres como onClick, onChange, etc.

function handleClick() {
alert('¡Has hecho clic!');
}

<button onClick={handleClick}>Click aquí</button>

Ojo, es importante no ejecutar la función directamente al pasarla como prop. Es decir, no pongas paréntesis:

// Incorrecto: se ejecuta inmediatamente, según se renderiza
<button onClick={handleClick()}></button>

// Cuando haces clic es cuando se ejecuta
<button onClick={handleClick}></button>

Pasar funciones como props

Otra característica de React, es que podemos pasar funciones a los componentes hijos a través de props y accionarlas desde estos,

function Padre() {
  function handleSelect() {
    console.log('Elemento seleccionado');
  }

  return <Hijo onSelect={handleSelect} />;
}

function Hijo({ onSelect }) {
  return <button onClick={onSelect}>Seleccionar</button>;
}

De esta forma desde el hijo la ejecutamos cuando el evento ocurre.

Custom arguments a funciones de eventos

En ocasiones necesitamos que la función handler conozca datos específicos del elemento que ha disparado el evento —por ejemplo, su ID —.
Si pasamos la referencia de la función directamente:

onSelect={handleSelect}

handleSelect no recibirá información sobre el elemento desde el que se hizo clic, salvo el propio objeto event.

Para enviarle argumentos personalizados basta con envolver la llamada en una función anónima (normal o arrow):

onSelect={() => handleSelect()}

De este modo, la función se ejecutará solamente cuando ocurra el evento y con los parámetros que le especifiquemos. Este patrón resulta especialmente útil, por ejemplo, cuando recorremos listas y queremos que cada elemento pase su ID a la función, como por ejemplo para eliminar un elemento de una lista.

filteredClients.map((client) => (
    <button onClick={() => handleDeleteClient(cliente.id)}>Eliminar</button>
));

Donde filteredClients puede contener en este caso un array con los diferentes clientes de una lista filtrados.

Para terminar y a modo resumen

En resumen, React es una herramienta poderosa que ayuda a los desarrolladores a construir aplicaciones web de manera más ordenada y eficiente. Permite crear componentes reutilizables que simplifican el trabajo y hacen que el código sea más fácil de manejar. También facilita que estos componentes se comuniquen entre sí de forma clara, lo que mejora la flexibilidad del proyecto.

Además, React fomenta una estructura organizada y un enfoque práctico para manejar el diseño y las interacciones del usuario, evitando complicaciones comunes. Esto resulta en aplicaciones que no solo funcionan bien, sino que también son más sencillas de actualizar o expandir con el tiempo.