Tutorial React: Introducción a React y su ecosistema

¿Qué es React?

React es una biblioteca de JavaScript de código abierto, mantenida por Meta (anteriormente Facebook) y una comunidad de desarrolladores individuales y empresas. Su propósito principal es facilitar la creación de interfaces de usuario (UI) compuestas por componentes reutilizables. React sigue una arquitectura basada en componentes, lo que permite a los desarrolladores construir aplicaciones web complejas y escalables de manera eficiente.

Características principales de React

• Componentes: React se basa en el uso de componentes. Un componente es una unidad reutilizable de código que define una parte de la interfaz de usuario. Los componentes pueden ser combinados para construir aplicaciones complejas.

function Saludo({ nombre }) {
  return <h1>Hola, {nombre}</h1>;
}

• JSX: JSX es una extensión de sintaxis para JavaScript que permite escribir código similar a HTML dentro de archivos JavaScript. Aunque es opcional, JSX es una característica comúnmente utilizada en React porque facilita la creación de componentes visuales de manera declarativa.

createRoot(document.getElementById('root')).render(
    <Saludo nombre="Pablo"></Saludo>
)

• React Compiler: Anteriormente conocido como React Forget, el React Compiler optimiza automáticamente las renderizaciones de los componentes determinando qué necesita actualizarse. Esto reduce significativamente la necesidad de memoización manual (con useMemo, useCallback, etc.) y mejora el rendimiento sin requerir intervención del desarrollador.
• Server Components: React ahora soporta componentes que se pueden renderizar completamente en el servidor sin JavaScript del lado del cliente. Estos componentes nunca se hidratan en el navegador, lo que mejora el rendimiento y reduce el tamaño del bundle JavaScript enviado al cliente.
• Concurrent Rendering: React utiliza un motor de renderizado concurrente que permite priorizar actualizaciones de la interfaz, trabajar en múltiples actualizaciones simultáneamente y abortar o reanudar el trabajo según sea necesario, lo que resulta en interfaces más responsivas.
• Unidirectional Data Flow: React sigue un flujo de datos unidireccional, lo que significa que los datos fluyen en una sola dirección, desde los componentes padres a los componentes hijos. Este enfoque facilita el seguimiento de cómo se mueven los datos a través de la aplicación y hace que el estado de la aplicación sea más predecible.
• UI Declarativa: Con React, describes cómo debería verse tu interfaz de usuario en cualquier momento dado. Cuando los datos cambian, React se encarga de actualizar automáticamente la UI para que refleje esos cambios, sin que tengas que preocuparte por cómo hacerlo manualmente.

El ecosistema de React

• Next.js: Framework React que ahora incluye App Router (reemplazando al Pages Router tradicional), lo que permite una arquitectura basada en Server Components, rutas más intuitivas y mejor manejo de layouts anidados. También ofrece herramientas avanzadas para SSR, SSG y nuevos patrones como Partial Rendering y Streaming.
• React Router: La versión más reciente incorpora enrutamiento basado en loader/action, rutas anidadas más eficientes y capacidades para hacer data fetching durante la navegación. Ahora también se integra mejor con React Suspense.
• Gestión de Estado:
  • Zustand: Una alternativa ligera a Redux con una API minimalista que utiliza hooks.
  • Jotai: Sistema de estado atómico inspirado en Recoil, ideal para estado local y global.
  • TanStack Query: (anteriormente React Query) Para manejar estados de servidor y caché de datos.
  • Redux Toolkit: La forma moderna de usar Redux, con mucho menos boilerplate.
• Bibliotecas de UI:
  • MUI: (anteriormente Material-UI) Ahora con mejor soporte para Server Components y renderizado adaptable.
  • Tailwind CSS: Ganó mucha popularidad para estilos utilitarios en React.
  • Chakra UI: Framework de componentes accesibles y personalizables.
• Herramientas de desarrollo:
  • Vite: Reemplaza a Create React App como la herramienta recomendada para iniciar proyectos React.
  • React DevTools: Herramientas de desarrollo actualizadas con soporte para depurar Server Components.

Diferencia de React con Angular y Vue

React, Angular y Vue son tres de las tecnologías de frontend más populares en la actualidad. Cada una de ellas presenta características y enfoques distintos que las hacen adecuadas para diferentes tipos de proyectos y estilos de desarrollo.

React es una biblioteca de JavaScript centrada en la construcción de interfaces de usuario mediante componentes reutilizables. A diferencia de Angular y Vue, React se enfoca únicamente en la capa de vista, delegando la gestión del estado y el enrutamiento a bibliotecas externas como Redux y React Router.

Angular es un framework completo desarrollado por Google que proporciona una solución integral para el desarrollo de aplicaciones. Incluye herramientas para la gestión del estado, enrutamiento, validación de formularios, y más. Angular utiliza TypeScript como su lenguaje principal, lo que añade ventajas como la tipificación estática y herramientas avanzadas de desarrollo.

Vuejs es un framework progresivo que se encuentra en algún punto intermedio entre React y Angular. Al igual que React, Vue se centra en la capa de vista, pero también ofrece una serie de herramientas oficiales para la gestión del estado (Vuex) y el enrutamiento (Vue Router). Vue es conocido por su facilidad de integración y su curva de aprendizaje relativamente suave.

Comparativa de características

Arquitectura:

• React: Biblioteca centrada en la vista con arquitectura basada en componentes. Ahora con Server Components y Concurrent Rendering como diferenciadores clave.
• Angular: Framework completo, mantiene su arquitectura basada en módulos y componentes con un enfoque más integral.
• Vue: Con Vue 3, ha adoptado la Composition API que se asemeja más a los hooks de React, manteniendo su enfoque progresivo.

Renderizado:

• React: Utiliza React Compiler y Concurrent Rendering para optimizar actualizaciones de UI, superando las limitaciones del Virtual DOM tradicional.
• Angular: Utiliza el motor de renderizado Ivy con detección de cambios mejorada.
• Vue: Utiliza un sistema de reactividad basado en proxies en Vue 3, mejorando significativamente el rendimiento.

Gestión del estado:

• React: Context API mejorado, hooks nativos (useState, useReducer) y un ecosistema de soluciones de terceros (Zustand, Jotai).
• Angular: Servicios y el uso de RxJS, con signals como adición reciente.
• Vue: Pinia ha reemplazado a Vuex como la solución recomendada para gestión de estado.

Ejemplo de un componente básico

React:

import React from 'react';

function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

export default HelloWorld;

Angular:

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: '<h1>Hello, World!</h1>',
})
export class HelloWorldComponent {}

Vue:

<template>
  <h1>Hello, World!</h1>
</template>

<script>
export default {
  name: 'HelloWorld',
};
</script>

Todos estos componentes, aunque implementados de manera diferente, logran el mismo resultado: mostrar un encabezado con el texto "Hello, World!" en una aplicación web.

Comparativa de usar React vs JavaScript vanilla

Usar React en lugar de JavaScript vanilla presenta diferencias significativas en términos de desarrollo de aplicaciones web, mantenimiento del código y rendimiento. React introduce una serie de conceptos y herramientas que facilitan la creación de interfaces de usuario complejas y escalables, mientras que JavaScript vanilla implica trabajar directamente con el DOM y gestionar manualmente el estado y la lógica de la aplicación.

Desarrollo paralelo cliente-servidor:

• JavaScript vanilla: Requiere separar completamente la lógica del servidor y cliente.
• React: Con Server Components, permite un modelo unificado donde algunos componentes se ejecutan exclusivamente en el servidor y otros en el cliente.

Optimización automática:

• JavaScript vanilla: Requiere optimización manual del DOM y gestión de rendimiento.
• React: El React Compiler optimiza automáticamente qué partes de la UI necesitan actualizarse sin necesidad de intervención manual.

Suspense y carga progresiva:

• JavaScript vanilla: Requiere implementación manual de estados de carga y manejo de errores.
• React: El patrón Suspense permite declarar estados de carga y manejar de forma elegante la obtención de datos asíncrona.