¿Qué es React?
React es una biblioteca de JavaScript desarrollada por Meta para construir interfaces de usuario (UI) de forma eficiente mediante componentes reutilizables.
Se utiliza principalmente para desarrollar Single Page Applications (SPA), donde la navegación entre vistas se realiza sin recargar completamente la página.
React se centra exclusivamente en la capa de presentación (View) y suele combinarse con otras bibliotecas para gestionar el enrutamiento, el estado o las peticiones HTTP.
Conceptos fundamentales
Para comprender React es imprescindible conocer los siguientes conceptos:
- Componente: unidad reutilizable que representa una parte de la interfaz.
- JSX: sintaxis que combina JavaScript y HTML.
- Props: datos que un componente recibe desde otro componente.
- State: datos internos que puede modificar un componente.
- Virtual DOM: representación virtual del DOM utilizada para optimizar las actualizaciones.
Funcionamiento de React
Cuando el estado de una aplicación cambia:
Cambio de estado
↓
Virtual DOM
↓
Comparación (Diffing)
↓
Actualización del DOM real
↓
Interfaz actualizada
React compara el nuevo Virtual DOM con el anterior y únicamente modifica los elementos que han cambiado.
Características de React
React presenta las siguientes características:
- Basado en componentes.
- Utiliza Virtual DOM.
- Arquitectura declarativa.
- Reutilización de código.
- Alta eficiencia en la actualización de la interfaz.
- Gran ecosistema de bibliotecas.
Componentes
Los componentes son bloques independientes que encapsulan estructura, lógica y comportamiento.
Existen principalmente dos tipos:
- Componentes funcionales.
- Componentes de clase (actualmente menos utilizados).
Los componentes funcionales son el estándar moderno y permiten utilizar Hooks.
JSX
JSX (JavaScript XML) es una extensión de sintaxis que permite escribir estructuras similares a HTML dentro del código JavaScript.
Ejemplo:
function App() {
return <h1>Hola Mundo</h1>;
}
Aunque parece HTML, JSX se transforma en llamadas a funciones JavaScript durante el proceso de compilación.
Props
Las Props (Properties) permiten pasar información de un componente padre a un componente hijo.
Características:
- Son de solo lectura.
- Se reciben como parámetros.
- Favorecen la reutilización de componentes.
Ejemplo conceptual:
Componente Padre
↓
Props
↓
Componente Hijo
State
El State representa la información interna de un componente que puede cambiar durante su ejecución.
Cuando el State cambia:
- React vuelve a renderizar el componente.
- Se actualiza el Virtual DOM.
- Solo se modifican los elementos necesarios del DOM real.
Hooks
Los Hooks permiten utilizar funcionalidades de React dentro de componentes funcionales.
Los más importantes son:
| Hook | Función |
|---|---|
| useState | Gestiona el estado del componente. |
| useEffect | Ejecuta efectos secundarios. |
| useContext | Accede al contexto compartido. |
| useRef | Referencia elementos o valores persistentes. |
| useMemo | Memoriza cálculos costosos. |
Virtual DOM
El Virtual DOM es una representación en memoria del DOM real.
Su funcionamiento es:
- Se genera un nuevo Virtual DOM.
- React compara ambos árboles (Diffing).
- Detecta únicamente los cambios.
- Actualiza exclusivamente esos elementos en el DOM real.
DOM Virtual Antiguo
↓
Comparación
↓
DOM Virtual Nuevo
↓
DOM Real actualizado
Ciclo de renderizado
Cada vez que cambia el State o las Props:
- React vuelve a ejecutar el componente.
- Genera un nuevo Virtual DOM.
- Compara ambos árboles.
- Actualiza únicamente los cambios necesarios.
Este proceso recibe el nombre de Reconciliación (Reconciliation).
Comparación React vs JavaScript tradicional
| React | JavaScript tradicional |
|---|---|
| Basado en componentes | Manipulación directa del DOM |
| Virtual DOM | DOM real |
| Declarativo | Imperativo |
| Reutilización sencilla | Código más repetitivo |
| Actualización optimizada | Actualizaciones manuales |
Caso práctico
Situación
Una aplicación muestra un contador.
Cada vez que el usuario pulsa un botón:
- El valor aumenta.
- Cambia el State.
- React vuelve a renderizar el componente.
- Solo se actualiza el número mostrado.
Botón
↓
State cambia
↓
Renderizado
↓
Virtual DOM
↓
DOM actualizado
Ventajas e inconvenientes
Ventajas
- Componentes reutilizables.
- Alto rendimiento gracias al Virtual DOM.
- Gran comunidad.
- Amplio ecosistema.
- Fácil mantenimiento.
- Desarrollo declarativo.
Inconvenientes
- Curva de aprendizaje inicial.
- Necesita bibliotecas adicionales para proyectos completos.
- Cambios frecuentes en el ecosistema.
- Requiere comprender JavaScript moderno.
Errores habituales
- Pensar que React es un framework completo.
- Confundir Props con State.
- Modificar directamente las Props.
- Creer que React actualiza siempre toda la página.
- Pensar que JSX es HTML puro.
- Abusar del State cuando bastan las Props.
Cómo evitarlos
- Diferenciar claramente Props y State.
- Comprender el funcionamiento del Virtual DOM.
- Utilizar componentes reutilizables.
- Recordar que React solo gestiona la interfaz de usuario.
- Practicar con Hooks básicos como useState y useEffect.
Relaciones con otros temas
React está directamente relacionado con:
- JavaScript.
- ECMAScript.
- HTML.
- CSS.
- DOM.
- Virtual DOM.
- SPA (Single Page Applications).
- Node.js.
- APIs REST.
- JSON.
Conceptos clave para recordar
[!NOTE]
- React es una biblioteca de JavaScript para construir interfaces de usuario.
- Está basado en componentes reutilizables.
- Utiliza JSX para describir la interfaz.
- Emplea un Virtual DOM para optimizar las actualizaciones.
- Las Props permiten comunicar componentes.
- El State almacena la información dinámica de un componente.
- Los Hooks añaden funcionalidades a los componentes funcionales.
- React utiliza una arquitectura declarativa.
- Es habitual utilizar React para desarrollar Single Page Applications (SPA).
- React solo gestiona la capa de presentación (View) y suele combinarse con otras bibliotecas para construir aplicaciones completas.