Curso de React Online: SPA, Hooks y React Router

Construí tu primera SPA profesional con React

Al finalizar el curso vas a tener una single-page app completa construida con React, ruteo en el cliente, formularios con validación, consumo de APIs, estado global y primeras pruebas automatizadas. Todo desarrollado en grupos reducidos de máximo 6 personas, con feedback constante para que tu proyecto quede listo para tu portfolio o como base en un entorno laboral.

150+
10 clases en vivo (2 h cada una)
10+
Proyecto final: SPA con React + Router
Grupos reducidos (máx. 6 personas por cohorte)
Certificado de finalización del curso de React

Inscripción a los cursos de programación

Elegí tu camino: frontend, backend o full stack. Inscribite en los cursos online en vivo y empezá a construir proyectos profesionales en grupos reducidos. Ver próximas fechas

Curso de React para Interfaces Web Modernas

2 hs de clases en vivo por día

10 clases en vivo

Lunes Miércoles Hs

Fecha de inicio:

2026-01-20

Precio $150000 ARG Oferta especialDisponible por 0 Días y 00:00:00 Hs

Curso de React Nivel Inicial

Este curso está pensado para quienes ya dominan HTML, CSS y los fundamentos de JavaScript y quieren dar el salto a construir interfaces modernas con componentes y hooks. Es un recorrido práctico orientado a desarrollo frontend profesional, ideal si querés trabajar con React en el día a día o preparar el camino para pasar a Next.js. Las clases se dictan en grupos reducidos de hasta 6 personas, lo que asegura acompañamiento cercano, correcciones de código y mucha práctica guiada.

Personas que vienen de JavaScript y desean profesionalizar su frontend con componentes reutilizables, hooks y SPA.
Desarrolladores que necesitan consolidar patrones de estado, ruteo, formularios y buenas prácticas con React.
Perfiles de diseño/UX que quieren convertir prototipos en interfaces reales construidas con React.
Equipos que buscan estandarizar estructura, calidad, testing y convenciones en proyectos React.

MODALIDAD

¿Cómo vas a aprender React en este curso?

Aprendés React en clases online en vivo, trabajando sobre una SPA real desde la primera semana. Las cohortes son chicas (máximo 6 personas) para compartir pantalla, revisar código con el docente y avanzar a buen ritmo sin quedarte atrás.

Clases en vivo orientadas a proyecto

Implementación paso a paso, resolución de dudas en el momento y revisión de tus entregables para aplicar React en situaciones reales.

Material de apoyo y ejemplos

Guías, snippets y ejemplos comentados para practicar entre clases y reforzar los conceptos clave del curso de React.

Temario del Curso de React para Interfaces Web

En este curso de React online en vivo vas a aprender a construir interfaces web modernas, modulares y mantenibles usando componentes y hooks. A lo largo de las clases desarrollás una single-page application (SPA) con ruteo, formularios, consumo de APIs, manejo de estado y pruebas básicas de componentes. Trabajamos con buenas prácticas del ecosistema actual (Vite, ESLint, Testing Library) en grupos reducidos de máximo 6 personas, para que tengas seguimiento real, feedback sobre tu código y bases sólidas para dar el siguiente paso a Next.js.

Fundamentos de React y ecosistema

JSX, componentes y props en aplicaciones React
Renderizado de listas, uso correcto de keys y composición de componentes
Configuración del proyecto con Vite, estructura de carpetas, alias y scripts de desarrollo

Estado y eventos en componentes

useState y flujo de datos de arriba hacia abajo
Lifting state up, composición y patrones de reutilización
Manejo de eventos, formularios controlados y componentes interactivos

Efectos y ciclo de vida con `hooks`

useEffect: dependencias, cleanup y patrones frecuentes
Sincronización con APIs del navegador (localStorage, eventos, título de la página)
Buenas prácticas para evitar renders innecesarios y loops infinitos

Ruteo en SPA con React Router

Conceptos de routing del lado del cliente en una SPA
Rutas anidadas, parámetros dinámicos y navegación programática
Rutas protegidas con un mock de autenticación y manejo de accesos

Formularios y validación en React

Formularios controlados vs. no controlados en React
Validación con APIs nativas del navegador y patrones reutilizables
Manejo de errores, mensajes accesibles y UX cuidada en formularios

Contexto, `reducers` y `hooks` personalizados

Context API: cuándo usarlo y buenas prácticas
useReducer para manejar estado complejo en la interfaz
Diseño de hooks personalizados reutilizables para encapsular lógica

Data fetching y asincronía en React

fetch/async-await, cancelación de requests y reintentos básicos
Manejo de estados de carga, error, vacíos y render condicional
Introducción a patrones de cacheo y separación de capa de datos

Calidad de código y performance

ESLint/Prettier, estructura escalable y convenciones de estilo
Testing de componentes con React Testing Library y primeros tests
Optimización con memo, useMemo, useCallback, code-splitting y lazy loading

Accesibilidad y mejores prácticas de UI

Uso de ARIA roles y atributos en componentes React
Navegación por teclado, foco visible y atajos básicos
Patrones de UI accesible aplicados a la SPA

Proyecto final: SPA profesional en React

Integración de rutas, formularios, estado global y consumo de APIs externas
Manejo de errores, loaders y mensajes al usuario en toda la app
Deploy de la SPA en Vercel/Netlify y documentación técnica del proyecto

¿Necesito saber JavaScript avanzado para empezar?

Necesitas una base sólida de los fundamentos: variables, arreglos (map, filter), objetos, destructuring y arrow functions. No hace falta ser un experto, pero si te cuesta el DOM o las funciones, te recomendamos repasar JS primero.

¿Enseñan Componentes de Clase o Funcionales?

Enseñamos 100% Componentes Funcionales y Hooks. Los componentes de clase son legacy (código antiguo). Nos enfocamos en cómo se escribe React hoy en la industria moderna.

¿Por qué usan Vite en lugar de Create React App (CRA)?

Porque CRA ha quedado obsoleto y es lento. Vite es el estándar actual: es instantáneo, ligero y ofrece una experiencia de desarrollo mucho mejor. Te enseñamos a configurar el entorno profesionalmente.

¿Vemos Redux en este curso?

No. Para el 90% de las aplicaciones modernas, **Context API** y `useReducer` (que sí vemos a fondo) son suficientes. Redux añade una complejidad que solemos reservar para arquitecturas más grandes o cursos avanzados.

¿Qué es una SPA (Single Page Application)?

Es una web que carga una sola vez y luego navega instantáneamente sin recargar la página, brindando una experiencia tipo 'app nativa'. React es la librería líder para crear este tipo de sitios.

¿Qué es el Virtual DOM?

Es la magia de React. Una copia en memoria de la interfaz que permite actualizar solo lo que cambió (ej: un contador) sin volver a pintar toda la pantalla, haciendo tu web súper rápida.

¿Vemos TypeScript en este curso?

Este curso se centra en la lógica de React usando **JavaScript** para asegurar que entiendas bien el ciclo de vida y los hooks sin la capa extra de complejidad de los tipos. (Para TS tenemos un curso específico).

¿Qué son los Hooks?

Son funciones que nos permiten 'enganchar' el estado y el ciclo de vida a los componentes funcionales. `useState` y `useEffect` serán tus herramientas de todos los días.

¿Cómo se manejan los formularios en React?

Aprenderás el concepto de 'Componentes Controlados', donde el estado de React es la única fuente de la verdad para los inputs, permitiendo validaciones en tiempo real.

¿Qué es React Router?

Es la librería estándar para manejar la navegación. Aprenderás a crear rutas dinámicas (`/producto/:id`), rutas anidadas y protección de rutas privadas (login).

¿Este curso me sirve para aprender Next.js luego?

Es el requisito obligatorio. Next.js es un framework de React. Si no entiendes props, state y effects, no podrás usar Next.js. Este curso te da la base sólida para dar ese salto.

¿Por qué grupos de solo 6 personas?

Porque React tiene una curva de aprendizaje donde es fácil perderse en el flujo de datos. Con 6 personas, el profesor puede ver tu pantalla y explicarte por qué tu `useEffect` se está ejecutando infinitamente.

¿Qué es el 'Prop Drilling'?

Es el problema de pasar datos de abuelo a nieto manualmente. Aprenderemos a evitarlo usando composición de componentes y Context API.

¿Vemos consumo de APIs?

Sí, es fundamental. Aprenderás a usar `fetch` y `async/await` dentro de `useEffect` para traer datos reales (clima, productos, usuarios) y mostrarlos en pantalla.

¿Qué es JSX?

Es una sintaxis que parece HTML pero es JavaScript. Te permite escribir la estructura visual de tu componente directamente dentro de la lógica. Al principio es raro, luego lo amarás.

¿Qué proyecto final hacemos?

Una SPA completa, como un pequeño E-commerce o Dashboard, que incluya listados, detalles, carrito/favoritos y navegación, lista para tu portfolio.

¿Vemos Testing?

Sí, una introducción sólida. Usamos **React Testing Library** para escribir pruebas básicas que aseguren que tus botones y formularios funcionan como esperas.

¿Qué son las Custom Hooks?

Son hooks propios que creamos para reutilizar lógica. Por ejemplo, crear un hook `useFetch` que puedas usar en cualquier componente para pedir datos.

¿Cómo publico mi app de React?

En el último módulo vemos cómo hacer el 'build' de producción y desplegarlo gratuitamente en plataformas como Vercel o Netlify.

¿Qué es ESLint y Prettier?

Son herramientas de calidad de código. Te enseñamos a configurarlas para que te avisen si cometes errores y para que tu código se formatee automáticamente.

¿React sirve para SEO?

React puro (SPA) tiene dificultades con el SEO. Por eso, en este curso aprendemos las bases y explicamos por qué para SEO fuerte luego necesitarás Next.js (SSR).

¿Qué son las 'Keys' en las listas?

Es un atributo especial que React necesita para identificar qué ítems han cambiado en una lista. Aprenderás por qué usar el `index` del array como key es una mala práctica.

¿Qué es el 'Lifting State Up'?

Es 'elevar el estado'. La técnica de mover el estado al componente padre común para que dos componentes hermanos puedan compartir información.

¿Vemos estilos (CSS)?

Nos enfocamos en la lógica de React, pero usaremos CSS Modules o estilos estándar para que la app se vea bien. (Para estilos avanzados tenemos el curso de Tailwind).

¿Qué es `useEffect` cleanup?

Es la función de limpieza que evita fugas de memoria, como cancelar una suscripción o un temporizador cuando el componente desaparece de la pantalla.

¿Puedo usar librerías de componentes (Material UI / Chakra)?

Recomendamos aprender a construir tus propios componentes primero. Usar librerías externas sin entender las bases suele generar código difícil de mantener.

¿Qué es la 'Composición de Componentes'?

Es un patrón avanzado (usando `children`) que permite crear componentes flexibles y reutilizables, evitando el exceso de props.

¿Qué es `memo` y `useMemo`?

Son herramientas de optimización. Aprenderás a usarlas para evitar que componentes pesados se rendericen de nuevo innecesariamente.

¿Qué es el 'Strict Mode'?

Es una herramienta de desarrollo que nos ayuda a encontrar problemas. Explicaremos por qué hace que tus `useEffect` se ejecuten dos veces en desarrollo.

¿Cómo manejo el Loading y Error states?

Aprenderás patrones de UI para mostrar esqueletos de carga (skeleton screens) o mensajes de error amigables mientras la API responde.

¿Qué es el contexto global?

Es como una 'nube' de datos en tu app. Permite que el usuario logueado o el tema (oscuro/claro) esté disponible en toda la aplicación sin pasar props manualmente.

¿Vemos autenticación real?

Simulamos la autenticación (guardando tokens en localStorage) y protegemos rutas, lo cual es la base para integrar cualquier servicio de auth real luego.

¿React es MVC?

No, React es solo la 'V' (Vista). Por eso necesitamos aprender sobre Estado y Router para construir una aplicación completa.

¿Qué son los Fragmentos (`<>...</>`)?

Una forma de agrupar elementos sin agregar nodos extra al DOM, manteniendo tu HTML limpio y semántico.

¿Es difícil configurar el entorno?

Con Vite es muy fácil. En la primera clase dejamos tu VS Code listo con las extensiones necesarias para autocompletado y formateo de React.

¿Qué son las Props?

Son los argumentos de la función. Es la forma en que pasamos información de un componente padre a un hijo. Son de solo lectura.

¿Qué es el Estado (State)?

Es la memoria del componente. A diferencia de las variables normales, cuando el estado cambia, React actualiza la pantalla automáticamente.

¿Vemos Lazy Loading?

Sí, aprenderás a usar `React.lazy` y `Suspense` para dividir tu código y que la app cargue más rápido, bajando solo lo que el usuario necesita.

¿Qué es la Accesibilidad (ARIA) en React?

React no arregla la accesibilidad por magia. Enseñamos a no perder el foco del teclado y a usar roles ARIA para que tu SPA sea usable por todos.

¿Vemos manejo de localStorage?

Sí, crearemos hooks para persistir datos (como el carrito de compras) en el navegador para que no se pierdan al recargar la página.

¿Qué es un 'Side Effect'?

Cualquier cosa que pase fuera del renderizado puro (llamadas API, timers, DOM manual). `useEffect` es la herramienta para manejarlos correctamente.

¿Por qué no usar jQuery con React?

Porque React necesita control total del DOM. Manipular el DOM manualmente con jQuery rompe la lógica de React. Te enseñaremos a pensar 'a la manera de React'.

¿Vemos Firebase?

El curso se enfoca en React. Consumimos APIs, que podrían ser de Firebase o cualquier backend. Lo importante es aprender el patrón de consumo en el frontend.

¿Qué son las 'Default Props'?

Valores por defecto para tus componentes. Veremos cómo definirlos de forma moderna usando parámetros por defecto de ES6.

¿Qué es el 'Batching' automático?

Una mejora de React 18 que agrupa múltiples actualizaciones de estado en un solo renderizado para mejorar el rendimiento. Explicaremos cómo te beneficia.

¿Cómo debuggeo React?

Te enseñaremos a usar las **React Developer Tools** en el navegador para inspeccionar componentes, ver sus props y estado en tiempo real.

¿Qué es `useCallback`?

Un hook para memorizar funciones. Es vital cuando pasamos funciones a componentes hijos optimizados para evitar renderizados innecesarios.

¿React Native es igual a React?

La lógica (Estado, Efectos, Componentes) es idéntica. Lo que cambia es que en vez de `<div>` usas `<View>`. Este curso es la base perfecta para luego aprender Native.

¿Hay soporte fuera de clase?

Sí, tenemos un grupo de chat exclusivo donde compartimos dudas y soluciones mientras desarrollamos el proyecto.

¿Cuál es la salida laboral?

React sigue siendo la librería número 1 en demanda laboral mundial. Saber React moderno es la puerta de entrada a la mayoría de los puestos Frontend hoy en día.

Métricas del curso

150+

10+