Componentes de React 101: Creación de piezas de interfaz de usuario reutilizables y mantenibles
Aprenda por qué dividir las interfaces de usuario en pequeños componentes React mejora la reutilización, la legibilidad y la colaboración en equipo, y luego cree su primer componente funcional.
Un escenario familiar para cualquier desarrollador frontend
Imagínese esto: es su primera semana en una nueva startup.
Su jefe se acerca a su escritorio y le dice,
"La página principal debe estar lista para el viernes."
Abre el diseño en Figma.
Está compuesto por estas secciones:
- Un menú de navegación en la parte superior
- Un gran banner principal
- Una zona de barra de búsqueda
- Una sección para mostrar productos destacados
- Una sección con testimonios de clientes
- Una tabla de precios
- Un bloque con preguntas frecuentes
- Un formulario de suscripción al boletín
- Un pie de página del sitio
La tarea parece lo suficientemente sencilla.
Crea un único archivo HTML y comienza a desarrollar cada sección en orden.
Para el viernes, todo está listo.
Todo funciona correctamente.
Se siente muy contento con el resultado.
Un mes después, el producto ha crecido.
El equipo de marketing desea un diseño nuevo para el banner.
Los diseñadores modifican la barra de navegación.
El equipo del producto quiere una sección adicional para los niveles de precios.
Las reseñas de clientes ahora deben cargarse dinámicamente.
Antes de darse cuenta, ese único archivo ya supera las 2,000 líneas.
Encontrar un solo botón se convierte en una búsqueda a través de un laberinto de código.
Peor aún, modificar ligeramente una parte de la página puede dañar algo completamente ajeno.
¿Le suena familiar?
Este problema exacto fue lo que llevó a los desarrolladores a adoptar un enfoque diferente para crear interfaces.
En lugar de construir una sola página enorme, ¿qué tal si la armaran a partir de muchas piezas pequeñas y reutilizables?
En React, estas piezas se denominan Componentes.
Por qué un único archivo gigante falla
Imagínese una página web típica creada a la antigua usanza.
Homepage.html
---------------------------------------------------
Navigation
Hero Section
Featured Products
About Us
Testimonials
Pricing
FAQ
Newsletter
Footer
---------------------------------------------------
Cada elemento de la página se encuentra dentro de ese único archivo.
A medida que el proyecto crece, notará:
- El archivo sigue aumentando de tamaño.
- Trabajar en equipo se vuelve más difícil.
- Nada puede reutilizarse realmente.
- Los errores comienzan a aparecer con más frecuencia.
- Mantener el código se vuelve agotador.
Ahora observe cómo React maneja la misma página.
App
│
├── Navbar
├── Hero
├── Products
│ ├── ProductCard
│ ├── ProductCard
│ └── ProductCard
├── Testimonials
├── FAQ
└── Footer
En lugar de meter todo en un solo archivo, cada sección se convierte en una unidad autónoma.
Este patrón se conoce como Arquitectura Basada en Componentes.
Definir un componente de React
En esencia, un componente no es más que un fragmento de interfaz de usuario reutilizable.
Puede pensar en él como una función de JavaScript que devuelve algo de JSX.
En lugar de incluir toda la página en un único archivo, se divide en partes más pequeñas y específicas.
Cada parte se encarga exactamente de una tarea.
Por ejemplo:
La barra de navegación se convierte en un componente por sí misma.
El pie de página es otro componente.
La ficha del producto es aún otro.
La sección de perfil del usuario también se convierte en un componente.
Luego se ensamblan estos componentes para formar la aplicación completa.
El resultado es un conjunto de código mucho más fácil de leer, probar y mantener con el tiempo.
Cambiando la forma en que piensas sobre la interfaz de usuario
Este es uno de los cambios mentales más importantes que experimentarás al aprender React.
Deja de pensar en términos de páginas completas.
Comienza a pensar en términos de partes individuales.
En lugar de preguntarte:
"¿Cómo debería construir esta página de inicio?"
Prueba a preguntar:
"¿Qué piezas más pequeñas se combinan para formar esta página principal?"
Una vez que se comprende este cambio, React comienza a parecer mucho más intuitivo.
Una comparación cotidiana
Imagina armar una ciudad con LEGO.
No fabricarías un ladrillo completamente nuevo cada vez que lo necesitaras.
En lugar de eso, utilizas los ladrillos que ya tienes.
Algunos ladrillos forman paredes.
Otros se convierten en ventanas.
Y otros componen los techos.
Al mezclar y combinar estos mismos ladrillos reutilizables, puedes construir innumerables edificios diferentes.
Los componentes de React funcionan exactamente de la misma manera.
Un único componente Button podría aparecer:
- En la pantalla de inicio de sesión
- Dentro de una ventana modal
- En la página de pago
- Dentro de la barra de navegación
Lo creas una sola vez.
Luego lo insertas donde sea necesario.
Ese es el verdadero valor que aportan los componentes.
La lógica detrás del modelo de componentes de React
React se basa en los componentes porque resuelven problemas reales y prácticos.
1. Reutilización
Créalo una vez.
Reúsalo indefinidamente.
En lugar de recrear el mismo código de botón veinte veces, defines un único componente Button y lo integras donde sea necesario en toda la aplicación.
2. Legibilidad
Considera dos escenarios uno al lado del otro.
Un archivo con 2,000 líneas.
Frente a...
Veinte archivos separados, cada uno con un propósito claro y único.
¿Cuál preferirías volver a consultar en seis meses?
Los componentes más pequeños son simplemente más fáciles de comprender.
3. Mantenibilidad
Imagínese un escenario en el que su empresa decida cambiar el color del botón principal.
Si no hubiera dividido su interfaz de usuario en componentes, ese cambio significaría buscar y editar docenas de archivos.
Pero con un único componente Button reutilizable, realiza la edición en un solo lugar.
Toda pantalla que utilice ese botón refleja la actualización al instante.
4. Colaboración en equipo
Imagínese a cinco desarrolladores asignados al mismo código fuente.
Una persona se encarga de la Navbar.
Otra se ocupa de la sección Hero.
Un tercero crea las tarjetas de producto.
Una cuarta trabaja en el pie de página.
La tarea del quinto desarrollador es combinar todas estas partes.
Dado que cada funcionalidad está en su propio componente, nadie tiene que interferir con el trabajo de los demás ni esperar a que un archivo quede libre.
Este tipo de flujo de trabajo paralelo es precisamente la razón por la cual los componentes son tan importantes en los equipos de desarrollo del mundo real.
Componentes funcionales
Los conjuntos de código de React actuales dependen casi en su totalidad de los componentes funcionales.
En esencia, un componente funcional no es más que una función de JavaScript que devuelve JSX.
Aquí está la versión más básica que se puede escribir:
function Welcome() {
return <h1>Hello, React!</h1>;
}
A primera vista, esto parece una función ordinaria de JavaScript, porque lo es.
Lo que la diferencia es que, en lugar de devolver algo como un número o una cadena, devuelve JSX, y React utiliza ese JSX para determinar qué dibujar en la pantalla.
Analicémoslo paso a paso:
function Welcome()
Aquí declaramos una función llamada Welcome.
Preste atención a la “W” mayúscula al principio del nombre.
React observa específicamente esa primera letra en mayúscula para saber si una función debe tratarse como un Componente.
A continuación está esta línea:
return <h1>Hello, React!</h1>;
La función tiene como tarea devolver JSX.
Así que cada vez que React renderiza Welcome, es este encabezado el que se muestra.
Eso es todo.
Creando su primer Componente
Cuando un proyecto comienza a crecer, los desarrolladores suelen asignar a cada componente su propio archivo dedicado.
Un layout típico de carpetas podría verse así:
src
├── App.jsx
└── components
└── Welcome.jsx
Esto es lo que hay dentro de Welcome.jsx:
function Welcome() {
return <h1>Welcome to React!</h1>;
}
export default Welcome;
Dividir los componentes en archivos separados mantiene su base de código ordenada y mucho más fácil de navegar a medida que crece.
Exportando componentes
Puede tener curiosidad por el propósito de esta línea:
export default Welcome;
Imaginemos que acabamos de escribir un componente sólido y reutilizable.
Mientras solo esté dentro de su propio archivo, nada más en la aplicación podrá acceder a él.
La exportación es lo que permite utilizarlo en otros lugares.
Es un poco como publicar un manuscrito.
Una vez que está disponible, cualquiera puede tomarlo y leerlo.
La misma lógica se aplica aquí: una vez que exportas un componente, cualquier otro archivo del proyecto puede importarlo y utilizarlo.
Existen otras formas de exportar componentes, las cuales abordaremos en una futura parte de esta serie, pero export default es la opción principal al comenzar.
Importación de componentes
Trayamos Welcome a App.jsx y utilícelo.
import Welcome from "./components/Welcome";
Esta línea está, en esencia, instruyendo a React:
“Toma el componente
Welcomede este archivo para que pueda usarlo aquí mismo.”
Una vez importado, renderizarlo requiere casi ningún esfuerzo:
function App() {
return (
<>
<Welcome />
</>
);
}
Echa un vistazo más de cerca a esta parte de la sintaxis:
<Welcome />
Aunque Welcome comenzó como una función normal de JavaScript, podemos usarlo tal como si fuera una etiqueta HTML nativa.
Esta es una de las partes más elegantes al trabajar con React: tus funciones personalizadas se convierten en bloques reutilizables para la interfaz.
Cómo ve React un componente
Cuando React se encuentra con esta línea:
<Welcome />
no la interpreta como marcado.
En cambio, lo que sucede en el fondo se parece más a esto:
Call the Welcome() function
↓
Receive JSX
↓
Convert JSX
↓
Update the Virtual DOM
↓
Render the UI
En pocas palabras, cada componente se reduce a una llamada a función que devuelve una parte de la interfaz.
Una vez que se comprende esa idea, los Components dejan de parecer algún tipo de magia especial.
Reglas de nombramiento
Existen algunas convenciones de nombramiento que vale la pena interiorizar.
Nombres que funcionan bien:
- Navbar
- Footer
- Hero
- ProductCard
- UserProfile
Nombres que se deben evitar:
- navbar
- footer
- component
- abc
¿Cuál es la razón de esto?
React se basa en la mayúscula como señal para diferenciar tus Components personalizados de las etiquetas HTML integradas.
Toma este ejemplo:
<Navbar />
React interpreta esto como una referencia a tu propio Component personalizado.
Compáralo con esto:
<div>
que React interpreta como un elemento HTML estándar e integrado.
Elegir nombres claros y descriptivos también resulta beneficioso cuando otros desarrolladores necesiten leer y comprender tu código más adelante.
Puntos clave
Aquí tienes un resumen rápido de lo tratado hasta ahora.
- Un Componente es un fragmento de interfaz de usuario autónomo y reutilizable.
- Crear una aplicación React en realidad significa simplemente ensamblar y combinar Componentes.
- Los Componentes funcionales son funciones de JavaScript simples que devuelven JSX.
- Dividir una aplicación en Componentes mejora su legibilidad, reutilización y mantenibilidad a largo plazo.
- Un Componente bien diseñado se enfoca en hacer una sola cosa.
- Es una práctica común guardar cada Componente en su propio archivo e importarlo donde sea necesario.
- La mayúscula es la forma en que React distingue tus Componentes personalizados de los elementos HTML ordinarios.
Lecturas relacionadas
- Construyendo un modelo mental para React: Reconciliación, estado y hooks — Aprende el razonamiento detrás de los conceptos fundamentales de React: reconciliación, componentes, props, estado y hooks, para desarrollar intuición en lugar de memorizar APIs.
- Manejo de estados UI del mundo real con renderizado condicional en React — Aprende cómo crear interfaces de autenticación, roles, permisos, carga, errores y estado vacío en React utilizando patrones prácticos de renderizado condicional.
catch () lanza un Error de Sintaxis en JavaScript — Aprenda por qué una lista vacía de parámetros en catch interrumpe por completo el análisis del lenguaje JavaScript, y vea las dos formas gramaticalmente correctas de escribir un bloque catch sin parámetros.