React desde cero: construye interfaces con componentes
Aprende a crear aplicaciones web que reaccionan a lo que hace la gente: componentes reutilizables, estado, formularios, datos de internet y un proyecto final completo. Cada lección tiene un editor de React que se ejecuta en tu navegador, sin instalar nada.
Empezar la lección 1 Ver el temarioEditor de React en vivo
Escribes JSX y componentes en la lección y ves la aplicación funcionando, con su consola.
Apuntes claros
Explicaciones con recuadros de nota, advertencia y consejo, y un glosario en cada lección.
Ejercicios que se prueban de verdad
Tu aplicación se ejecuta y se usa por ti: se hace clic, se escribe y se comprueba el resultado.
Autoevaluación
Preguntas con respuesta inmediata y explicación al final de cada lección.
Antes de empezar
- Saber **JavaScript** (funciones, arrays, objetos y eventos): haz antes el curso de JavaScript.
- Conocer HTML y CSS: los cursos de HTML y CSS.
- Un navegador moderno: el editor de React está dentro de cada lección, sin instalar nada.
Lo que construirás
- Componentes reutilizables con **props**.
- Interfaces que cambian con **estado** y eventos.
- Listas, formularios y pantallas que piden **datos de internet**.
- Estado compartido con **Context** y **useReducer**.
- Un **carrito de compras** completo como proyecto final.
Temario · ≈ 16 horas
-
LECCIÓN 01
Qué es React y tu primer componente
Qué problema resuelve React, qué es un componente, JSX, el montaje y cómo crear un proyecto con Vite.
Disponible -
LECCIÓN 02
JSX a fondo
Diferencias con HTML, expresiones entre llaves, atributos dinámicos, estilos y fragmentos.
Disponible -
LECCIÓN 03
Componentes y props
Pasar datos con props, desestructurar, valores por defecto, children y composición.
Disponible -
LECCIÓN 04
Estado con useState
useState, eventos, actualizaciones funcionales y estado con objetos y arrays sin mutar.
Disponible -
LECCIÓN 05
Listas, claves y renderizado condicional
map, la prop key, ternarios, AND, retornos anticipados y filtros con valores derivados.
Disponible -
LECCIÓN 06
Formularios y componentes controlados
Componentes controlados, un solo estado para muchos campos, onSubmit y validación.
Disponible -
LECCIÓN 07
Efectos con useEffect
useEffect, dependencias, limpieza, localStorage y cuándo no usar un efecto.
Disponible -
LECCIÓN 08
Compartir estado: elevar y Context
Elevar el estado, prop drilling, Context, Provider y hooks de consumo.
Disponible -
LECCIÓN 09
Más hooks: useRef, useReducer y hooks propios
useRef, useReducer, useMemo, useCallback y hooks personalizados.
Disponible -
LECCIÓN 10
Datos de internet
fetch en efectos, estados de carga y error, respuestas obsoletas y un hook useDatos.
Disponible -
LECCIÓN 11
Proyectos reales con Vite y el ecosistema
Vite, módulos, estilos, rutas, variables de entorno, GitHub Pages y el ecosistema.
Disponible -
PROYECTO FINAL
Proyecto: carrito de compras
Un carrito de compras completo con reductor, Context, buscador y persistencia.
Disponible