GuíaBásico

Guía de Fundamentos de React

Aprende el modelo mental de React: construir interfaces como una función del estado. La guía cubre pensar en componentes y composición, JSX y renderizado (incluidas las listas y por qué la `key` importa), estado con `useState` —y por qué es un snapshot por render, no un valor que cambia al instante—, eventos y handlers, estado derivado frente a estado guardado, efectos para sincronizar con sistemas externos, y cómo levantar el estado compartido al ancestro común. El eje es que la interfaz es una función del estado: describes cómo se ve para un estado dado, y React se encarga de actualizar el DOM cuando ese estado cambia. Cada módulo ejecuta en Node.js la lógica pura detrás de React —el filtrado y orden derivado, el reducer del carrito, un mini render-a-string, el orden render-commit-effect— para verificar el razonamiento sin depender de un navegador. El hilo conductor es el storefront de Mercado: lo descompones en componentes, le agregas búsqueda con estado derivado, un carrito con estado levantado y un reducer, y un efecto que carga los productos. Es el core del ecosistema Fullstack de NIEVA, apoyado en la base de HTML y CSS.

64
lecciones
8
módulos
Inglés · Español
disponible en
certificado
Gratis
acceso
NIEVA

Resultados

Lo que vas a poder hacer

  • Descomponer una interfaz en componentes y componerlos, con props que fluyen hacia abajo
  • Escribir JSX real: expresiones, atributos, renderizado condicional, listas con `map` y por qué `key` importa (identidad estable, no el índice)
  • Manejar estado local con `useState` y entender por qué el estado es un snapshot del render, no un valor que se actualiza al instante
  • Responder a eventos (`onClick`, `onChange`) y pasar datos hacia arriba con callbacks
  • Derivar estado en vez de guardarlo: calcular filtrado y orden en cada render, no sincronizarlos a mano
  • Sincronizar con sistemas externos usando `useEffect`: el array de dependencias, el cleanup, y cuándo NO usar un efecto
  • Levantar el estado compartido al ancestro común y preferir composición sobre prop drilling
  • Construir el storefront completo de Mercado: lista de productos con búsqueda, carrito con reducer, y estado levantado en el componente raíz

Antes de empezar

Qué necesitas traer

Es para ti si...

  • Desarrolladores con JavaScript sólido que quieren aprender React desde el modelo mental correcto, no memorizando hooks sueltos
  • Quienes vienen de HTML y CSS y buscan el siguiente paso natural hacia interfaces interactivas
  • Devs que ya "usan" React pero no entienden por qué re-renderiza, por qué las listas necesitan `key`, o por qué el estado derivado no se guarda
  • Quienes se preparan para Next.js, estado global o sistemas de diseño y necesitan primero el fundamento de componentes

Requisitos y materiales

  • JavaScript ES6+ con soltura (funciones, arrays, destructuring, módulos)
  • HTML y CSS básicos, o haber completado la Guía de Fundamentos Web: HTML y CSS
  • Node.js instalado para ejecutar la lógica pura de cada módulo
  • Ningún conocimiento previo de React

Contenido

El temario, módulo por módulo

Abre cualquiera para ver sus lecciones.

Dudas frecuentes

Lo que suele preguntarse

Empieza cuando quieras

Reseñas

Lo que dicen los estudiantes

Estas reseñas son de estudiantes inscritos que completaron al menos el 50% del curso. Moderamos las reseñas solo por motivos de contenido (spam, lenguaje ofensivo, datos personales), nunca por ser críticas o negativas.

Aún no hay reseñas aprobadas.

¡Sé el primero en compartir tu experiencia!