0Pricing
React Academy icon

React Academy

JSXFrontendWebMobileBeginner

Domina ReactJS para construir interfaces de usuario dinámicas con ReactJS Academy.

🤖 Impulsado por IA📚 88 cursos👥 100.000+ estudiantes⭐ Calificación 4,9
Descripción general del curso

Construye Interfaces Reales con React

React es la biblioteca de JavaScript que define cómo se construyen la mayoría de las IUs de producción hoy en día — desde aplicaciones de una sola página y sitios Next.js hasta aplicaciones móviles y de escritorio multiplataforma. Esta ruta cubre la disciplina completa: arquitectura de componentes, gestión de estado, obtención de datos, rendimiento, testing y despliegue. Se fundamenta en cómo React realmente funciona — el reconciliador, el modelo de fibers, semántica de hooks — no solo su API de superficie.

Qué Aprenderás

Comenzarás con JSX, props, state y componentes controlados, luego avanzarás a useEffect, useRef y useReducer. Los cursos prácticos cubren enrutamiento con React Router v6, manejo de formularios con React Hook Form, estado del servidor con React Query y SWR, estado global con Redux Toolkit, Zustand y Jotai. Trabajarás con TypeScript en React, escribirás tests de integración y E2E, construirás sistemas de diseño con Storybook, manejarás IUs en tiempo real sobre WebSockets e implementarás APIs type-safe con tRPC. La ruta también incluye Next.js App Router, componentes del servidor, server actions y autenticación con NextAuth.js.

La Ruta de Aprendizaje

Noventa y cinco cursos van desde A1 hasta C1. Los cursos A1 y A2 establecen los fundamentos de React, renderizado JSX, animaciones CSS, persistencia en almacenamiento local y modo oscuro. Los cursos B1 generan confianza con patrones de context, i18n, React Spring, Framer Motion, drag-and-drop con dnd-kit y tablas de datos complejas con TanStack Table. Los cursos B2 abordan renderizado y memoización, Suspense, code splitting, React Native para desarrolladores de React, despliegue a Vercel y AWS y Electron para aplicaciones de escritorio. El nivel C1 finaliza con temas avanzados: Arquitectura de Micro-Frontends, SSR e Hidratación en Profundidad, Module Federation, Arquitectura de Islands con Astro, Integración WebAssembly, Renderizado en Edge con Cloudflare Workers y OpenTelemetry para observabilidad frontend.

Cómo Funciona

Cada curso está dividido en lecciones cortas y enfocadas que completas en el editor de código integrado con retroalimentación en tiempo real. Un tutor de IA está disponible siempre que te atasques en un concepto o una prueba fallida. Puedes trabajar a través de la ruta secuencialmente o saltar al nivel que coincida con tu experiencia actual.

Comienza a aprender →

Cómo Aprenderás

🎯
Lecciones Interactivas
Ejercicios de codificación prácticos con retroalimentación en tiempo real
🤖
Tutor de IA
Obtén ayuda instantánea de nuestro IA cuando te atasques
💻
Editor Integrado
Escribe y ejecuta código directamente en tu navegador
🏆
Certificado
Obtén un certificado al completar el curso
Plan de Estudios

88 Cursos

Todos los cursos en la ruta de aprendizaje React Academy.

01

Inicio de React: conceptos y configuración

A13 lecciones

Comience con los fundamentos de React: componentes, interfaz de usuario declarativa y cómo el diffing actualiza el DOM de forma eficiente.…

02

Fundamentos de JSX y renderizado

A13 leccionesPRO

Aprenda las reglas de JSX: expresiones y atributos, devolución de fragments, renderizado de listas con keys, condicionales sencillos y opci…

03

React DevTools y depuración

A24 leccionesPRO

Domine la extensión de navegador React DevTools para inspeccionar árboles de componentes, analizar renderizados y depurar eficazmente el es…

04

Animaciones y transiciones CSS en React

A24 leccionesPRO

Cree animaciones fluidas de entrada, salida y cambio de estado en React mediante transiciones CSS y keyframes, sin necesidad de una bibliot…

05

Elevación del estado y soluciones al prop drilling

A24 leccionesPRO

Comparta el estado entre componentes hermanos elevándolo, y comprenda cuándo el prop drilling se convierte en un problema que conviene reso…

06

Almacenamiento local y persistencia del estado

A24 leccionesPRO

Conserve el estado de React entre recargas de página mediante localStorage, gestione la sincronización entre pestañas y elija la API de alm…

07

Modo oscuro con React

A24 leccionesPRO

Cree un sistema robusto de modo oscuro mediante propiedades personalizadas de CSS, el contexto de React y la media query prefers-color-sche…

08

Props y composición

A23 leccionesPRO

Pase datos mediante props , establezca defaults sencillos mediante destructuring, componga interfaces con children y prefiera la composició…

09

Fundamentos esenciales de estado y eventos

A23 leccionesPRO

Domine useState y el manejo de eventos: actualice el estado correctamente, gestione onClick/onChange y prepárese para los inputs controlado…

10

Formularios y validación (introducción)

A23 leccionesPRO

Aprenda a crear formularios controlados con múltiples inputs, aplicar validaciones básicas y gestionar los envíos correctamente en React.

11

Fundamentos del enrutamiento

A23 leccionesPRO

Comprenda el enrutamiento del lado del cliente: cómo las SPA cambian de vista sin recargar toda la página, las rutas y los parámetros básic…

12

useRef y el DOM

A23 leccionesPRO

Domine useRef : conserve valores entre renderizados sin provocar nuevos renderizados, acceda a nodos del DOM y gestione temporizadores de f…

13

Linting y convenciones

A23 leccionesPRO

Mantenga el código limpio con ESLint y las reglas de React, y aplique formato automático con Prettier . Añada scripts y corrija problemas r…

14

Componentes controlados y no controlados

A22 leccionesPRO

Domine los inputs controlados y no controlados: sepa cuándo elegir cada uno, conozca patrones sencillos con refs y use valores predetermina…

15

React Strict Mode y mejores prácticas

B14 leccionesPRO

Aprenda qué hace StrictMode, qué advertencias muestra y qué convenciones de código facilitan el mantenimiento de las aplicaciones React.

16

Portals y modales en React

B14 leccionesPRO

Renderice contenido fuera de la jerarquía DOM principal mediante React Portals para crear modales, tooltips y superposiciones.

17

API de hijos de React y patrón de slots

B14 leccionesPRO

Trabaje con props.children y las utilidades React.Children, e implemente API flexibles de componentes basadas en slots.

18

Componentes no controlados y cargas de archivos

B14 leccionesPRO

Use entradas no controladas con useRef, lea los valores de entradas de archivo y gestione flujos de carga de archivos en React.

19

Patrones de Context de React y rendimiento

B14 leccionesPRO

Diseñe proveedores de Context que minimicen los renderizados mediante memorización, división de contextos y patrones de selectores.

20

Internacionalización (i18n) en React

B14 leccionesPRO

Añada compatibilidad con varios idiomas a sus aplicaciones React mediante react-i18next, gestione archivos de traducción y controle el camb…

21

API del navegador en React

B14 leccionesPRO

Integre potentes API del navegador —Clipboard, Geolocation, Notifications e IntersectionObserver— en componentes React, gestionando correct…

22

Debouncing y throttling en React

B14 leccionesPRO

Evite renders y llamadas a API excesivos implementando patrones debounce y throttle como hooks reutilizables de React para eventos de búsqu…

23

Autocompletado de formularios y búsqueda type-ahead

B14 leccionesPRO

Cree desde cero componentes de autocompletado accesibles y navegables con teclado usando el estado y las refs de React, sin necesidad de ni…

24

Gestión de formularios con React Hook Form

B14 leccionesPRO

Cree formularios flexibles y de alto rendimiento en React con React Hook Form: registro, validación, visualización de errores e integración…

25

Gestión del estado con Zustand

B14 leccionesPRO

Use Zustand para gestionar el estado global en aplicaciones React: stores, acciones, selectores, persistencia e integración con devtools.

26

Patrones avanzados de React Router v6

B14 leccionesPRO

Vaya más allá de las rutas básicas con diseños anidados, loaders, actions, rutas protegidas y gestión del estado de los parámetros de búsqu…

27

TypeScript con React: tipado de componentes y hooks

B14 leccionesPRO

Añada TypeScript a proyectos React: defina los tipos de props, eventos, hooks, context y componentes genéricos con confianza.

28

TanStack Table: tablas de datos complejas

B14 leccionesPRO

Cree tablas de datos listas para producción con ordenación, filtrado, paginación y selección de filas usando la potente arquitectura headle…

29

Jotai: gestión de estado atómica

B14 leccionesPRO

Gestione el estado de React con el modelo atómico y minimalista de Jotai: átomos componibles que derivan valores, gestionan operaciones así…

30

SWR: obtención de datos de Vercel

B14 leccionesPRO

Use la estrategia stale-while-revalidate de SWR para obtener datos de forma rápida y fiable, con revalidación automática, mutaciones y comp…

31

dnd-kit: arrastrar y soltar accesible

B14 leccionesPRO

Cree interfaces React accesibles y adaptadas al uso táctil con arrastrar y soltar mediante dnd-kit: listas ordenables, tableros kanban e in…

32

React Spring: animaciones basadas en física

B14 leccionesPRO

Cree animaciones fluidas basadas en física de muelles en React con react-spring, desde simples transiciones de valores hasta complejas inte…

33

Server-Sent Events y polling en React

B14 leccionesPRO

Implemente flujos de datos en tiempo real en React mediante Server-Sent Events y estrategias de polling, comprendiendo sus ventajas y desve…

34

Análisis profundo de useEffect

B13 leccionesPRO

Comprenda useEffect : cuándo se ejecuta respecto al renderizado, cómo los arrays de dependencias lo controlan y cómo escribir funciones de…

35

Patrones para obtener datos

B13 leccionesPRO

Diseñe interfaces de datos resistentes: gestione los estados de carga , error , vacío y éxito con información clara y skeletons ligeros.

36

Context y useReducer

B13 leccionesPRO

Comparta el estado entre componentes distantes con Context para evitar el prop drilling; configure un Provider y lea valores mediante useCo…

37

Hooks personalizados

B13 leccionesPRO

Extraiga lógica reutilizable en hooks personalizados : defina parámetros claros, devuelva valores/acciones estables y mantenga los efectos…

38

Fundamentos esenciales de accesibilidad

B13 leccionesPRO

Construya interfaces inclusivas: use semántica real, etiquetas y roles claros, y gestione el foco del teclado para facilitar la navegación.

39

Animaciones con Framer Motion

B14 leccionesPRO

Añada animaciones y transiciones fluidas a aplicaciones React con Framer Motion: componentes motion, variantes, gestos y animaciones de lay…

40

Límites de error y robustez

B13 leccionesPRO

Capture errores durante el renderizado con Error Boundaries, muestre alternativas seguras y mantenga el resto de la aplicación receptiva.

41

TypeScript con React (opcional)

B13 leccionesPRO

Añada tipos ligeros a los componentes de React. Empiece por las props y después extraiga genéricos reutilizables para mantener el código de…

42

Estructura del proyecto y convenciones

B13 leccionesPRO

Organice aplicaciones React: carpetas orientadas a funcionalidades, primitivas de UI pequeñas frente a componentes compuestos, hooks y prue…

43

Listas virtualizadas con react-window

B24 leccionesPRO

Renderice miles de elementos de una lista sin degradar el rendimiento mediante react-window para virtualizar la salida del DOM y renderizar…

44

Patrones asíncronos en React: Promises y concurrencia

B24 leccionesPRO

Gestione operaciones asíncronas de forma idiomática en React con useEffect, useTransition, useDeferredValue y Suspense.

45

Patrones de React: render props y HOC

B24 leccionesPRO

Comprenda render props y los componentes de orden superior como patrones clásicos de reutilización de código, anteriores a la sustitución p…

46

useLayoutEffect frente a useEffect

B24 leccionesPRO

Comprenda la diferencia sutil pero fundamental entre useEffect y useLayoutEffect —cuándo se ejecuta cada uno respecto al commit del DOM— y…

47

Redux Toolkit y RTK Query

B24 leccionesPRO

Gestione estados complejos de aplicaciones con slices y thunks de Redux Toolkit, y use RTK Query para la caché y sincronización del estado…

48

Server Components y funciones de React 19

B24 leccionesPRO

Comprenda los React Server Components, el hook use(), las Actions y otras API de React 19 que cambian la forma en que fluyen los datos en l…

49

React Query: gestión del estado del servidor

B24 leccionesPRO

Gestione el estado del servidor con TanStack Query: obtención, caché, nueva obtención en segundo plano, mutaciones y paginación.

50

Pruebas de React: integración y E2E

B24 leccionesPRO

Escriba pruebas de integración con React Testing Library y pruebas de extremo a extremo con Playwright para validar flujos de usuario reale…

51

Sistemas de diseño de componentes y Storybook

B24 leccionesPRO

Documente, desarrolle y pruebe componentes de interfaz de React de forma aislada con Storybook, historias CSF3 y addons.

52

Interfaces en tiempo real con WebSockets y React

B24 leccionesPRO

Construya interfaces React con actualizaciones en tiempo real mediante WebSockets y bibliotecas como Socket.IO para chats, notificaciones y…

53

tRPC: API type-safe de extremo a extremo

B24 leccionesPRO

Cree API completamente type-safe sin esquemas ni generación de código mediante tRPC, compartiendo automáticamente los tipos entre el fronte…

54

Apollo Client y React

B24 leccionesPRO

Integre GraphQL en aplicaciones React con Apollo Client: consulte y modifique datos, gestione la caché y mantenga la interfaz sincronizada…

55

UI optimista y patrones de mutación

B24 leccionesPRO

Cree interfaces rápidas y receptivas que muestren los resultados inmediatamente, antes de la confirmación del servidor, con rollback adecua…

56

Publicación de bibliotecas de componentes React

B24 leccionesPRO

Empaquete y publique bibliotecas de componentes React reutilizables en npm, gestionando salidas duales ESM/CJS, dependencias peer, tree sha…

57

Renderizado y memoización

B23 leccionesPRO

Comprenda las fases de render y commit de React, cuándo se actualizan los componentes y cuándo resulta útil la memoización.

58

Transiciones y Suspense (fundamentos)

B23 leccionesPRO

Aprenda los fundamentos de las interfaces concurrentes con useTransition : mantenga la escritura fluida, muestre una indicación de proceso…

59

División de código y estrategia de recursos

B23 leccionesPRO

Cargue solo lo necesario dividiendo el código de pantallas y widgets. Use React.lazy y Suspense para crear aplicaciones que transmitan mayo…

60

Pruebas de componentes React

B23 leccionesPRO

Configure pruebas con Vitest/Jest y React Testing Library ; renderice componentes, consulte por rol/etiqueta y ejecútelas en un entorno jsd…

61

Fundamentos del App Router de Next.js

B24 leccionesPRO

Construya aplicaciones web full-stack con el App Router de Next.js 14+: enrutamiento basado en archivos, layouts, componentes de servidor y…

62

Obtención y caché de datos en Next.js

B24 leccionesPRO

Obtenga, almacene en caché y revalide datos en el App Router de Next.js mediante opciones de fetch, unstable_cache y revalidación bajo dema…

63

Autenticación en Next.js con NextAuth.js

B24 leccionesPRO

Añada autenticación a aplicaciones Next.js mediante Auth.js (NextAuth v5): proveedores OAuth, credenciales, sesiones y protección de rutas.

64

Fundamentos de React Native para desarrolladores de React

B24 leccionesPRO

Traslade sus conocimientos de React al entorno móvil aprendiendo los elementos primitivos, estilos, navegación y API nativas de dispositivo…

65

Implementación de aplicaciones React: Vercel, AWS y Docker

B24 leccionesPRO

Implemente aplicaciones React y Next.js en producción mediante Vercel, AWS S3/CloudFront y contenedores Docker con canalizaciones de CI/CD.

66

Server Actions de React: formularios y mutaciones

B24 leccionesPRO

Use las Server Actions de React 19 y las acciones de formularios de Next.js para gestionar mutaciones en el servidor, eliminando las rutas…

67

Seguridad de aplicaciones React

B24 leccionesPRO

Refuerce las aplicaciones React frente a XSS, CSRF y otras vulnerabilidades con orientación práctica sobre Content Security Policy, gestión…

68

Sistemas de tokens de diseño para React

B24 leccionesPRO

Cree un sistema escalable de tokens de diseño que impulse bibliotecas de componentes React con múltiples temas, desde la definición de toke…

69

Electron.js: aplicaciones de escritorio con React

B24 leccionesPRO

Cree aplicaciones de escritorio multiplataforma con Electron y un frontend React, abordando la comunicación IPC, las API nativas y el empaq…

70

Componentes compuestos

B23 leccionesPRO

Construya componentes compuestos: el padre proporciona el contexto y los hijos lo consumen para ofrecer APIs flexibles.

71

Formularios a gran escala (sin librerías o con helpers ligeros)

B23 leccionesPRO

Construya formularios grandes con piezas pequeñas y robustas: arrays de campos, secciones dinámicas y flujos sencillos de validación.

72

Enrutamiento avanzado

B23 leccionesPRO

Vaya más allá de los fundamentos: layouts anidados, loaders de rutas a nivel conceptual e ideas sencillas de precarga para una navegación m…

73

Estado del servidor frente a estado de la interfaz

B23 leccionesPRO

Sepa qué debe pertenecer a la caché del servidor y qué es estado local de la interfaz. Obtenga y actualice datos sin mezclar responsabilida…

74

Patrones para modales, toasts y overlays

B23 leccionesPRO

Cree overlays accesibles: renderícelos mediante portales, mantenga el foco dentro de ellos y permita cerrarlos rápidamente con Escape o el…

75

Compilar, analizar y publicar

B23 leccionesPRO

Prepare aplicaciones para producción: builds de desarrollo y producción, source maps, variables de entorno sencillas y pequeñas comprobacio…

76

useImperativeHandle y forwardRef

C14 leccionesPRO

Domine las API imperativas de React: exponga a los componentes padre valores personalizados de la instancia del componente mediante forward…

77

useSyncExternalStore: suscripción a stores externos

C14 leccionesPRO

Aprenda a utilizar el hook useSyncExternalStore de React 18, la forma correcta de sincronizar componentes de React con fuentes de estado ex…

78

Arquitectura de microfrontends con React

C14 leccionesPRO

Descomponga grandes frontends de React en microfrontends implementados de forma independiente mediante Module Federation y single-spa.

79

Profundización en SSR e hidratación de React

C14 leccionesPRO

Comprenda los mecanismos del renderizado del lado del servidor, la hidratación, la hidratación selectiva y el streaming de HTML con renderT…

80

Patrones avanzados de TypeScript para React

C14 leccionesPRO

Perfeccione sus conocimientos de TypeScript en React con uniones discriminadas, tipos mapeados, tipos condicionales y API de componentes co…

81

Rendimiento web: Core Web Vitals y React

C14 leccionesPRO

Mida y mejore los Core Web Vitals (LCP, INP, CLS) en aplicaciones React con herramientas de análisis, análisis de bundles y optimizaciones…

82

Monorepo y Nx para proyectos React

C14 leccionesPRO

Organice varias aplicaciones React y bibliotecas compartidas en un monorepo con Nx, usando una programación inteligente de tareas y CI basa…

83

Arquitectura de islas con Astro y React

C14 leccionesPRO

Evite la hidratación de páginas completas adoptando la arquitectura de islas: hidrate selectivamente solo los componentes React interactivo…

84

Integración de React y WebAssembly

C14 leccionesPRO

Integre módulos WebAssembly en aplicaciones React para tareas con gran carga computacional, desde módulos WASM de Rust hasta memoria compar…

85

Renderizado en el edge: Cloudflare Workers y React

C14 leccionesPRO

Sirva aplicaciones React desde el edge con latencia inferior a un milisegundo mediante Cloudflare Workers, SSR en streaming y estrategias d…

86

OpenTelemetry para la observabilidad de frontend en React

C14 leccionesPRO

Instrumente aplicaciones React con OpenTelemetry para recopilar trazas, medir el rendimiento de usuarios reales y correlacionar eventos del…

87

Streaming y carga progresiva en React

C14 leccionesPRO

Use el SSR en streaming de React 18 y Suspense para entregar HTML progresivamente al navegador, mejorando el rendimiento percibido sin espe…

88

Module Federation con React

C14 leccionesPRO

Implemente Webpack Module Federation para crear y desplegar micro frontends React de forma independiente, compartiendo dependencias, estado…

Preguntas frecuentes

Preguntas frecuentes

¿Es gratuito el curso React Academy?

Sí. Puedes empezar el curso React Academy gratis y completar sus lecciones interactivas sin costo alguno. Una suscripción opcional a PRO desbloquea herramientas avanzadas de IA y un certificado compartible.

¿Necesito experiencia previa para aprender JSX?

No. El curso comienza con los fundamentos y avanza gradualmente hacia temas más avanzados, así que puedes empezar incluso sin experiencia previa en JSX.

¿Cómo aprenderé JSX en CoddyKit?

Aprendes haciendo. Las lecciones interactivas cortas combinan una explicación clara con un ejercicio de codificación práctico que se ejecuta en tiempo real, y un tutor de IA disponible 24/7 te da ayuda personalizada siempre que te atasques.

¿Obtengo un certificado al completar React Academy?

Sí. Los aprendices PRO pueden hacer un examen y obtener un certificado compartible de finalización con un código verificable para el curso React Academy.

¿Puedo aprender JSX en mi teléfono?

Sí. CoddyKit está disponible en la web y como aplicaciones nativas para iOS y Android, así que puedes aprender JSX en cualquier dispositivo y tu progreso se sincroniza entre ellos.

Comienza React Academy Ahora

Únete a miles de estudiantes dominando programación con lecciones impulsadas por IA.

Empezar Gratis →Ver Todos los Cursos