React por Santiago Soñora

“Hola, mundo” en React

El 'Hola mundo' en React es la creación de un componente funcional simple. A nivel intermedio, podrías demostrar un componente con estado básico usando `useState`.

import React, { useState } from 'react';

function Saludo() {
  const [nombre, setNombre] = useState('mundo');
  return <h1>Hola, {nombre}!</h1>;
}

export default Saludo;

Resultado:

Hola, mundo!

Comandos básicos

Familiarizarse con estos comandos es esencial para interactuar eficientemente con React:

• Crear una nueva aplicación React
  📋 Copiar

  npx create-react-app mi-app

  Inicializa una estructura de proyecto React usando Create React App (una opción común para empezar).
• Crear aplicación React (con Vite)
  📋 Copiar

  npm create vite@latest mi-app --template react

  Inicializa una estructura de proyecto React usando Vite, una opción más rápida para el desarrollo.
• Iniciar el servidor de desarrollo
  📋 Copiar

  npm start

  Ejecuta la aplicación en modo desarrollo con hot-reloading. (O `npm run dev` si usas Vite).
• Construir la aplicación para producción
  📋 Copiar

  npm run build

  Genera una versión optimizada y minificada de la aplicación lista para desplegar.
• Usar `useState` para estado
  📋 Copiar

  const [estado, setEstado] = useState(valorInicial);

  Declara una variable de estado (`estado`) y una función para actualizarla (`setEstado`). `valorInicial` puede ser cualquier tipo de dato.
• Usar `useEffect` para efectos secundarios
  📋 Copiar

  useEffect(() => {
    // Lógica del efecto (ej: fetching, suscripción)
    return () => { /* Función de limpieza (ej: cancelar suscripción) */ };
  }, [dependencia1, dependencia2]); // Array de dependencias

  Ejecuta una función con efectos secundarios después del renderizado. El array de dependencias controla cuándo se vuelve a ejecutar el efecto.
• Crear un Contexto
  📋 Copiar

  const MiContexto = createContext(valorPorDefecto);

  Crea un objeto Contexto. `valorPorDefecto` se usa cuando un componente consume el contexto sin un Provider arriba en el árbol.
• Proveer un Contexto
  📋 Copiar

  <MiContexto.Provider value={valor}> {children} </MiContexto.Provider>

  Envuelve los componentes que necesitan acceder al Contexto y proporciona el `value` que será accesible.
• Consumir un Contexto con `useContext`
  📋 Copiar

  const valorContexto = useContext(MiContexto);

  Hook para acceder al valor actual del Contexto en un componente funcional.
• Usar `useRef`
  📋 Copiar

  const miReferencia = useRef(valorInicial);

  Crea un objeto de referencia mutable. La propiedad `.current` persiste entre renderizados y no causa re-renderizado al cambiar.
• Definir Rutas con React Router v6
  📋 Copiar

  import { Routes, Route } from 'react-router-dom';
  
  <Routes>
    <Route path="/" element={<HomePage />} />
    <Route path="/usuarios/:id" element={<UserPage />} />
  </Routes>

  Define las rutas de la aplicación y qué componente se renderiza para cada URL (usando `react-router-dom` v6).
• Navegar con `Link` (React Router)
  📋 Copiar

  import { Link } from 'react-router-dom';
  
  <Link to="/about">Acerca de</Link>

  Crea un enlace de navegación dentro de la aplicación SPA sin recarga de página.
• Obtener parámetros de URL con `useParams`
  📋 Copiar

  import { useParams } from 'react-router-dom';
  
  const { idUsuario } = useParams();

  Hook que devuelve un objeto con los parámetros dinámicos de la URL definidos en la ruta.
• Memorizar componente con `React.memo`
  📋 Copiar

  const MiComponenteMemorizado = React.memo(MiComponente);

  Envuelve un componente funcional para que no se re-renderice a menos que sus props cambien (comparación superficial).
• Memorizar función con `useCallback`
  📋 Copiar

  const manejarEvento = useCallback(() => { /* lógica */ }, [dependencias]);

  Devuelve una versión memorizada de una función callback. Útil para optimizar componentes hijos que dependen de esa función como prop.
• Memorizar valor calculado con `useMemo`
  📋 Copiar

  const valorCalculado = useMemo(() => { /* cálculo costoso */ }, [dependencias]);

  Devuelve un valor memorizado. Solo recalcula el valor si alguna de las dependencias cambia. Útil para cálculos costosos.

Conceptos Clave

Comprender estos conceptos fundamentales te ayudará a dominar React de forma más organizada y eficiente:

• Hooks Fundamentales (`useState`, `useEffect`, `useContext`, `useRef`):

  Estos hooks permiten usar estado (`useState`), realizar efectos secundarios (`useEffect`), acceder a contextos (`useContext`) y gestionar referencias mutables (`useRef`) en componentes funcionales, reemplazando funcionalidades que antes solo estaban disponibles en componentes de clase.

• Ciclo de Vida de Componentes Funcionales con `useEffect`:

  `useEffect` se utiliza para gestionar los efectos secundarios (operaciones que interactúan con el mundo exterior) y puede replicar la lógica de los métodos de ciclo de vida de las clases (`componentDidMount`, `componentDidUpdate`, `componentWillUnmount`) controlando su ejecución mediante el array de dependencias y la función de limpieza retornada.

• Composición de Componentes:

  El patrón preferido en React. Consiste en construir interfaces combinando componentes más pequeños y especializados. Los componentes se comunican principalmente a través de props y el patrón `children` es una forma poderosa de composición.

• Context API:

  Proporciona una forma de compartir datos (como estado o funciones) que se consideran 'globales' para una parte del árbol de componentes, sin tener que pasar props manualmente en cada nivel intermedio (props drilling).

• Introducción a la Gestión de Estado Global:

  Para aplicaciones más grandes, la gestión de estado que necesitan múltiples componentes distantes puede volverse compleja. Context API es una opción para estado simple; librerías externas como Redux, Zustand o Recoil ofrecen soluciones más robustas para estado de aplicación complejo.

• Reglas de los Hooks:

  Comprender y seguir las dos reglas básicas (llamar hooks solo en la parte superior de componentes funcionales o custom hooks, y no llamarlos dentro de bucles, condiciones o funciones anidadas) es fundamental para evitar errores y asegurar que los hooks funcionen correctamente.

• Creación de Custom Hooks:

  Una forma de reutilizar lógica con estado (como fetching de datos, suscripciones, lógica de formularios) entre diferentes componentes funcionales. Un custom hook es simplemente una función JavaScript cuyo nombre comienza con 'use' y que puede llamar a otros hooks.

• Enrutamiento del Lado del Cliente con React Router:

  Una biblioteca estándar para manejar la navegación en SPAs con React. Permite definir rutas basadas en la URL, enlazar componentes a esas rutas y navegar programáticamente o declarativamente entre ellas, gestionando la historia del navegador.

• Optimización del Rendimiento (Memorización):

  Técnicas como `React.memo` (para componentes), `useCallback` (para funciones) y `useMemo` (para valores calculados) ayudan a evitar re-renderizados innecesarios de componentes, lo que puede mejorar el rendimiento de la aplicación, especialmente con listas grandes o componentes complejos.

• Error Boundaries:

  Componentes de clase (solo los componentes de clase pueden ser boundaries de error) que se utilizan para capturar y manejar errores de JavaScript que ocurren en sus componentes hijos, impidiendo que toda la aplicación falle y mostrando una UI de reserva amigable.

Casos de uso

Algunos ejemplos de aplicaciones prácticas donde se utiliza React:

• Fetching y visualización avanzada de datos de APIs externas:

  Implementar lógica para obtener datos de APIs utilizando `useEffect`, manejar estados de carga y error, paginación o scroll infinito, y renderizar los datos de forma dinámica.

• Implementación de flujos de autenticación y autorización de usuario:

  Gestionar el estado de autenticación (usuario logueado/deslogueado) utilizando Context API o una librería de estado, y proteger rutas o componentes utilizando React Router y lógica condicional.

• Construcción de formularios controlados complejos con validación en tiempo real:

  Gestionar el estado de los inputs de formulario en el componente, implementar validación en cada cambio o al intentar enviar, y manejar el envío de datos a un backend.

• Creación y uso de Custom Hooks para lógica compartida:

  Identificar lógica común entre componentes (ej: lógica para manejar un modal, lógica para interactuar con localStorage, lógica para un contador complejo) y encapsularla en custom hooks reutilizables.

• Optimización del renderizado de grandes listas o árboles de componentes complejos:

  Aplicar técnicas de memorización con `React.memo`, `useCallback` y `useMemo` para reducir el número de re-renderizados innecesarios y mejorar la fluidez de la UI.

• Gestión de estado de aplicación global (temas, preferencias, información de usuario):

  Utilizar Context API para compartir estado que es relevante para muchos componentes en diferentes niveles del árbol, o integrar una librería de gestión de estado para manejar estado más complejo y flujos de datos.

Consejos para Principiantes

Aquí tienes algunas recomendaciones para facilitar tus inicios en React:

• Domina los Hooks Esenciales (`useState`, `useEffect`):

  Dedica tiempo a entender a fondo cómo funcionan `useState` (actualizaciones de estado síncronas vs asíncronas, funciones de actualización) y `useEffect` (efectos con y sin dependencias, función de limpieza). Son la base de la programación en React funcional.

• Comprende la Composición de Componentes a fondo:

  Es el patrón más importante en React. Practica la construcción de UI combinando componentes más pequeños. Usa props para pasar datos y `children` para componer UI más compleja.

• Aprende a Usar las Herramientas de Desarrollo de React:

  La extensión de React Developer Tools para Chrome/Firefox es tu mejor aliada. Te permite inspeccionar el árbol de componentes, ver su estado y props, y perfilar el rendimiento para identificar cuellos de botella.

• Entiende el Flujo de Datos Unidireccional y el 'Lifting State Up':

  En React, los datos fluyen principalmente hacia abajo a través de las props. Si varios componentes necesitan acceder o modificar el mismo estado, este debe 'subir' al ancestro común más cercano ('Lifting State Up').

• Considera Usar TypeScript:

  Si bien no es estrictamente necesario, usar TypeScript con React (TSX) añade una capa de seguridad y robustez a tu código al detectar errores de tipo en tiempo de desarrollo. Es una práctica común en proyectos intermedios y grandes.

• Elige una Estrategia para la Gestión de Estado Global:

  Para el estado que debe ser compartido globalmente, necesitas una estrategia. Empieza por entender Context API para casos simples, y luego explora librerías como Zustand (más simple) o Redux Toolkit (más robusto).

• Aprende a Crear Custom Hooks:

  Una vez que entiendas los hooks básicos, identifica lógica que se repite entre tus componentes y encapsúlala en custom hooks. Esto hará tu código más DRY (Don't Repeat Yourself) y mantenible.

Herramientas relacionadas

Si te interesa React, también podrías explorar estas herramientas:

• javascript
• typescript
• vite
• next.js (Framework)
• gatsby (Framework)
• redux (State Management)
• zustand (State Management)
• recoil (State Management)
• react-router-dom (Routing)
• jest (Testing Framework)
• react-testing-library (Testing Utility)
• cypress (E2E Testing)
• storybook (Component Development)
• chrome devtools (with React DevTools Extension)

Recursos útiles

Amplía tus conocimientos con estos enlaces y materiales:

• Documentación oficial de React (react.dev)
• Documentación oficial de Hooks
• Tutorial oficial de React (Nuevo)
• Documentación de Context API
• Documentación de React Router
• Redux Toolkit (State Management)
• React Testing Library