React

Interfaces reactivas y componibles

React es la librería de referencia para construir interfaces de usuario. Componentes, JSX, estado y hooks, y luego el manejo de datos, el rendimiento y la arquitectura: desde tu primer componente hasta los patrones de nivel experto.

Fundamentos

Principiante - lo básico, paso a paso

• Por qué React, tu primer componente y JSXDescubre qué es React, escribe tu primer componente y aprende las reglas básicas de JSX.
• Props: pasar datos a un componenteAprende a hacer que tus componentes sean reutilizables pasándoles datos mediante props.
• Estado local con useStateDale memoria a tus componentes con useState para poder mostrar valores que cambian a medida que el usuario interactúa.
• Eventos y renderizado condicionalReacciona a las acciones del usuario y muestra u oculta elementos según condiciones.
• Renderizar listas y el papel de las keysConvierte un array de datos en una lista de elementos en pantalla con map, e identifica cada elemento con keys.

Progresión

Intermedio - crear proyectos reales

• Formularios controladosAprende a controlar cada campo de un formulario desde el estado de React para poder validar y enviar datos fiables.
• useEffect: efectos, dependencias, limpiezaSincroniza tus componentes con el mundo exterior usando useEffect, dominando las dependencias y la limpieza.
• Elevar el estado y compartir datosColoca cada porción de estado en el ancestro común más cercano para compartir datos entre varios componentes sin duplicarlos.
• Composición: children y división en componentesConstruye componentes contenedor reutilizables con la prop children y divide tus pantallas en responsabilidades claras.
• Llamar a una API: fetch, carga y erroresCarga datos remotos con fetch dentro de un efecto, modelando de forma limpia los estados de carga y de error.

Avanzado

Competente - patrones avanzados y rendimiento

• useReducer para estado complejoEstructura el estado complejo con un reducer puro que centraliza las transiciones y descarta las combinaciones imposibles.
• Context: compartir sin prop drillingMueve datos sin prop drilling usando el context, manteniendo bajo control sus re-renders y sus límites.
• Hooks personalizados: extraer y reutilizar lógicaExtrae la lógica con estado en hooks reutilizables, componibles y testeables.
• Memoización: memo, useMemo, useCallbackAprende cuándo React.memo, useMemo y useCallback aceleran de verdad tu app, y cuándo la complican para nada.
• useRef y manipulación del DOMManipula el DOM y conserva valores de instancia con useRef, sin romper la pureza del render.

Maestría

Experto - arquitectura, internos y casos límite

• Bajo el capó: reconciliación, batching, renderizado concurrenteDescubre cómo Fiber reconcilia el árbol, agrupa las actualizaciones y hace que el renderizado sea interrumpible.
• Suspense, lazy y code splittingDomina el mecanismo de suspensión, la carga diferida de componentes y la división del bundle.
• Patrones expertos: compound components, inversión de controlDiseña APIs de componentes flexibles con los compound components, el state reducer y la elección correcta entre render props y hooks.
• React moderno: Server Components, use, useTransition, useOptimisticExplora los server components, la lectura de promesas con use y las actualizaciones optimistas de React 19.
• Calidad: Testing Library, StrictMode, ProfilerPrueba el comportamiento en lugar de la implementación, aprovecha las dobles invocaciones de StrictMode y mide los renderizados con Profiler.