React
React Native
Node.js
Python
Rust
PostgreSQL
Solana
Claude
AI Agents
Go
Containers
AWS SDKs

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 Highlights Summary

JSX and Elements Components and Props State with useState Effects and Side Effects Refs and DOM Access Context and Composition Lists Keys and Conditionals Forms and Controlled Inputs Custom Hooks Patterns Performance Idioms React 19 APIs TypeScript with 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 Highlights Summary

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

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 Highlights Summary

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 Highlights Summary

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 Highlights Summary

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 Lista de verificación de auditoría para nuevas aplicaciones React Auditoría de banderas rojas de aplicaciones React Auditoría de React de un Vistazo Mejores prácticas de arquitectura React y Next.js Migrar una aplicación heredada a React + Next.js Lista de verificación de auditoría de producción de Next.js + React Lista de Verificación de Separación Código-Contenido Highlights Summary

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)Highlights Summary

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 Highlights Summary

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 Highlights Summary

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 Highlights Summary

Formularios y Estado

Lista de Verificación de Decisiones Fundamentos de Formularios y Validación Lista de Verificación para Descubrir la Lógica de Campos 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 Highlights Summary

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 Highlights Summary

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 Highlights Summary

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 Highlights Summary

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 Highlights Summary

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 Highlights Summary

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 Highlights Summary

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 Highlights Summary

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 Highlights Summary

Fundamentos de postMessage Patrones Intermedios de postMessage Patrones Avanzados de postMessage Seguridad de postMessage Highlights Summary

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 Highlights Summary

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 Highlights Summary

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

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 Highlights Summary

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 Highlights Summary

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 Highlights Summary

Escenarios de errores de hidratación y SSR Escenarios de bugs de state y re-renderizado Escenarios de bugs de obtención de datos Escenarios de errores de enrutamiento y navegación Escenarios de bugs de formularios e inputs Escenarios de errores de integración con API Escenarios de problemas de layout y CSS Escenarios de bugs de debouncing y throttling Escenarios de ejemplo de refactorización Snippets de refactorización para code review Highlights Summary

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 Highlights Summary

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 Highlights Summary

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 Highlights Summary

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 Highlights Summary

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

Lista de verificación de onboarding de desarrolladores

Premium Content

This page is premium content, available to React SME paid plan members only.

View Plans Go back

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

Recurso educativo independiente y no oficial. Sin afiliación, respaldo ni patrocinio de los propietarios o responsables de las marcas.

Este sitio está en fase beta y puede contener imprecisiones o errores.

Todos los ejemplos de código son genéricos, con fines de aprendizaje y solo para entornos de desarrollo/pruebas. No se ofrece ninguna garantía a los usuarios. Consulta los términos.

Buscar en la documentación

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