React SME Cookbook

Preguntas frecuentes

Secciones

React

Fundamentos de React Flujo de decisiones para componentes JSX y TSX Componentes Variaciones de sintaxis de componentes de función Renderizado condicional Listas y claves Manejo de eventos Formularios Refs Buenas prácticas de fundamentos de React

Conceptos Básicos de React Hooks Hooks Personalizados useEffect Hook Hook useState Hook useContext Hook useReducer Hook useMemo Hook useCallback Hook useRef Hook useId Hook useTransition Hook useDeferredValue Hook useActionState Hook useOptimistic Hook use Mejores Prácticas de React Hooks

Guía paso a paso: Custom Hooks useDebounce useThrottle useScrollToTop useLocalStorage useMediaQuery useClickOutside useCopyToClipboard useIntersectionObserver useWindowSize useKeyboardShortcut useToggle usePrevious useFetch useInterval useEventListener

Conceptos básicos de React Patterns La composición sobre la herencia Render Props Componentes de Orden Superior Componentes Compuestos Componentes Controlados vs No Controlados Máquinas de Estado para la Lógica de UI Límites de Error React Portals Límites de Suspense Patrones de Context Optimización de Rendimiento de React Mejores Prácticas de Patrones React

Novedades en React 19 Componentes del Servidor Acciones del Servidor Acciones de Formulario Hook use()useOptimistic Ref como prop Metadatos del Documento Carga de Recursos React Compiler Mejores prácticas de React 19

50 Reglas de React y Next.js 40 Reglas de Next.js 30 reglas de API para Next.js 30 Reglas de UX en React Problema/Solución Decisiones de Arquitectura en React y Next.js

Lista de Verificación de Decisiones de Arquitectura en React Errores Comunes & Trampas en Arquitectura React Decisiones de Refactoring en React y TypeScript Lista de verificación de refactor de UI

Flujo de decisión de componentes Botón Modal Card Acordeón Pestañas Notificación Dropdown Información flotante Entrada Avatar Badge Esqueleto Barra lateral Migas de Pan Paginación Textarea Select Casilla de verificación Grupo de Radio Interruptor Etiqueta Deslizador Grupo de Toggle Separador AspectRatio ScrollArea Popover Alerta Grupo de Código (Pestañas Multi-Runtime)

Conceptos Básicos de Eventos en React Eventos de Ratón Eventos de Teclado Eventos de Formularios Eventos de enfoque Eventos del Portapapeles Eventos Arrastrar y Soltar Eventos de Tacto Eventos de scroll Eventos de Puntero Eventos de Medios y Animaciones Las Mejores Prácticas de React Events

Conceptos básicos de rendimiento Evitando Re-renderizados Innecesarios useMemo, useCallback & React.memo Compilador de React (React Forget)React DevTools Profiler Detectar y Corregir Fugas de Memoria Optimización de tamaño de bundle Desempeño de Server Components Rendimiento de Suspense y Streaming Rendimiento de imágenes y fuentes Optimización de Core Web Vitals Rendimiento en la gestión de estado Rendimiento en Obtención de Datos Caching profundo en Next.js Lista de Verificación de Auditoría de Rendimiento Mejores prácticas de rendimiento

TypeScript + React: Lo Básico Fundamentos de TypeScript para React Tipado de Props Tipando State Tipando Eventos Tipado de Refs Tipando Context Genéricos en React Uniones Discriminadas Tipos Utilitarios para React Tipificación de respuestas de API Tipificación de Componentes de Servidor Tipado de Manejadores de Rutas Patrones de Modo Estricto Estrechamiento de tipos Archivos de Declaración Referencia de expresiones regulares Mejores prácticas de TypeScript + React

Formularios y Estado

Lista de Verificación de Decisiones Fundamentos de Formularios y Validación Entradas Controladas vs No Controladas Conceptos básicos de Zod Tipos Zod Transformaciones de Zod Zod Infer React Hook Form RHF + Zod Formularios con Server Actions Patrones de Formularios Básicos Patrones de Formularios Complejos Patrones de Formularios Carga de Archivos Visualización de Errores de Formulario shadcn Form Formularios Optimistas Accesibilidad de formularios useReducer Formularios Multi-Paso

Instalación y configuración de SWR Obtención básica de datos con SWR Fetching condicional y dependiente Mutaciones y actualizaciones optimistas Paginación con SWR Estrategias de revalidación Estrategias de almacenamiento en caché Manejo de errores SWR con React Suspense TypeScript con SWR SWR con React Server Components Middleware de SWR

Configuración y uso básico de Zustand Patrones de diseño de store Selectores y rendimiento Acciones asíncronas Patrón de slices Middleware de Zustand Middleware de persistencia Middleware de Immer TypeScript con Zustand Context frente a Zustand Zustand con Next.js Probar stores de Zustand Integración con Redux DevTools

Next.js

Configuración básica de Next.js Next.js + Tailwind v4 + shadcn/ui Banderas CLI de create-next-app Next.js + Prisma + PostgreSQL Next.js + Auth.js v5 Sitio de documentación Next.js + MDX Next.js en un Monorepo de Turborepo Iniciador SaaS de Next.js Desplegar Next.js en EC2 / Servidor Independiente Desplegar Next.js en ECS / EKS (Contenedores)Mejores prácticas de configuración de Next.js

Conceptos básicos de App Router Layouts Rutas Dinámicas Grupos de Rutas Carga y Manejo de Errores Middleware Rutas Interceptadas Rutas paralelas Navegación Mejores prácticas de enrutamiento en Next.js

Conceptos Básicos de Datos en Next.js Obtención de datos en Componentes de Servidor Acciones del Servidor Revalidación Streaming y Suspense Almacenamiento en caché Parámetros de búsqueda Cookies y Headers Promesas Paralelas y Promise.all Generadores Asíncronos e Iteradores Utilidad de Fetch Centralizada con SWR Utilidad Centralizada de Fetch con Axios Mejores Prácticas de Datos en Next.js

Componentes del Servidor Componentes del Cliente Patrones de Composición Renderizado Estático vs Dinámico Prerrenderizado Parcial (PPR)Optimización de imágenes Optimización de Fuentes Mejores prácticas de renderizado en Next.js

Patrones de Autenticación Gestores de Rutas API Variables de Entorno Manejo de Errores Pruebas en Next.js Despliegue SEO y Metadatos Internacionalización (i18n)Mejores Prácticas de Patrones de Next.js

Librerías y APIs

Vercel AI SDK ORM de Prisma dnd-kit Arrastrar y soltar AWS SDK S3 AWS SDK Lambda AWS SDK Polly Utilidades de Lodash date-fns Manipulación de fechas TanStack Query (React Query)NextAuth.js / Auth.js v5 Mejores prácticas de bibliotecas React

Fundamentos de postMessage Patrones Intermedios de postMessage

Primeros pasos con Stripe Sesiones de Stripe Checkout Payment Intents (flujo de pago personalizado)Payment Element y Card Element Suscripciones Webhooks de Stripe Portal del cliente Hooks de Stripe para React Stripe con Server Actions Construcción de una página de precios Manejo de errores y casos límite Probar la integración con Stripe

Estilos e Interfaz

Configuración de Tailwind CSS v4 Ejemplos de Tailwind Utilidades de Tailwind Ejemplos de Grid Diseño responsive Modo oscuro Animaciones Utilidades personalizadas Colores de Tailwind

Configuración de shadcn/ui Button Dialog Form Tabla de datos Command Toast Sidebar

Iconos Lucide React React Icons Heroicons Optimización de imágenes en Next.js API de Unsplash API de Pixabay API de Pexels Iconos SVG Personalizados en React Placeholders de Imagen y Carga Favicons e Imágenes OG Mejores prácticas de imágenes e ícones

Pruebas y Calidad

Configuración de Vitest con Next.js Configuración de Jest con Next.js Fundamentos de React Testing Library Pruebas de componentes React Pruebas de hooks personalizados Simulación en tests Pruebas de formularios Pruebas de comportamiento asíncrono Pruebas de Context y gestión de state Probar Server Components y Actions Configuración E2E con Playwright Patrones E2E con Playwright Playwright avanzado Estrategia de testing y mejores prácticas Mejores prácticas de testing

Lista de verificación de decisiones para formularios con Gherkin De Gherkin a código Ejemplo de árbol de archivos De Gherkin al pipeline de despliegue

Escenarios de bugs de formularios e inputs Escenarios de ejemplo de refactorización

Configuración de ESLint para Next.js Reglas ESLint esenciales Plugins de ESLint Configuración de Prettier Integración de ESLint + Prettier Biome (Alternativa a ESLint + Prettier)Husky y lint-staged (Ganchos de pre-commit)EditorConfig y configuración de VS Code Modo Estricto de TypeScript y Verificaciones del Compilador Linting en CI/CD Mejores prácticas de linting y formateo

Herramientas y Flujo

Conceptos básicos de scripts de Node.js Instalar Node.js y npm pnpm vs npm Ejecutar Scripts de Node.js en JavaScript Ejecutar scripts de TypeScript Módulos ESM vs CommonJS ESLint para scripts de Node.js Patrones de Scripts de Utilidad Patrones de EventEmitter Creando servidores HTTP Mejores prácticas en scripts de Node.js

Skill de Dominio de React 19 Skill de profundización en el routing de Next.js Skill de obtención de datos en Next.js Skill de Estrategias de Renderizado en Next.js Skill de Patrones TypeScript en React Skill de Gestión de State con Zustand Skill de Creación de Hooks Personalizados Skill experto en formularios y validación Skill de Tailwind v4 + shadcn/ui Skill de mejores prácticas de React de Vercel Skill de experto en scripts de Node.js

Comandos Esenciales de Git Fusionar & Rebase Checklist de Resolución de Conflictos de Merge Introducción a Git Worktrees Ejemplos de Git Worktree GitHub CLI Utilidades de Git Configuración de Git

Conceptos Esenciales de Sysadmin Búsqueda y Expresiones Regulares Comandos de Desarrollador Node.js Productividad en Shell Mejores Prácticas de CLI de Linux

/

/

© 2026 @csjcode|SystemsArchitect.io: Cloud Systems Tools|Términos

Buscar en la documentación

Busca en todas las páginas de la documentación

React SME/APIs del Navegador

APIs del Navegador

2 pages in this section.

1

Fundamentos de postMessage

Una página padre envía un objeto de tema a un iframe incrustado. El iframe aplica el tema y envía un reconocimiento.

postMessage Iframe Cross Origin MessageEvent

2

Patrones Intermedios de postMessage

Un dashboard integra un widget de gráfico en un iframe. El padre envía actualizaciones de datos y recibe eventos de clic del gráfico.

postMessage Iframe Message Bus Request Response