Desarrollo Frontend · FRO-110

React desde cero

Componentes, props, estado y renderizado condicional construyendo una aplicación React completa.

Bajo demanda Intermedio 7 módulos · 35 clases

Formato asíncrono Desarrollo, Alumnado React, JavaScript

DESARROLLO

Lo que aprenderás

Descomponer una interfaz en componentes con una responsabilidad clara cada uno.
Pasar datos con props y elevar el estado al ancestro común cuando dos componentes lo comparten.
Gestionar estado local con useState y efectos con useEffect sin provocar bucles de renderizado.
Renderizar listas con clave estable y aplicar renderizado condicional legible.
Construir formularios controlados con validación y mensajes de error.
Definir rutas con React Router y navegar entre vistas conservando el estado adecuado.

Contenido del curso

7 módulos · 35 clases en vídeo · práctica guiada en cada módulo

Módulo 1 · Primeros componentes 5 clases

Qué problema resuelve React frente al DOM manual
Crear el proyecto y recorrer su estructura
JSX: reglas y diferencias con HTML
Primer componente y composición
Herramientas de desarrollo de React en el navegador

Módulo 2 · Props y datos 5 clases

Pasar datos con props y tipos esperados
Componentes de presentación y de contenedor
children y composición flexible
Renderizar listas con clave estable
Renderizado condicional sin ensuciar el JSX

Módulo 3 · Estado 5 clases

useState y actualizaciones basadas en el valor previo
Estado que no debe estar en el estado
Elevar el estado al ancestro común
Inmutabilidad al actualizar objetos y arrays
Depurar renderizados inesperados

Módulo 4 · Formularios 5 clases

Componentes controlados frente a no controlados
Un estado para todo el formulario
Validación y mensajes de error accesibles
Envío, bloqueo y confirmación
Reutilizar campos como componentes propios

Módulo 5 · Datos externos 5 clases

useEffect: cuándo hace falta de verdad
Cargar datos y controlar estados de carga y error
Cancelar peticiones al desmontar el componente
Extraer la lógica a un hook propio
Errores clásicos: bucles y dependencias mal declaradas

Módulo 6 · Rutas 5 clases

Instalar y configurar React Router
Rutas, rutas anidadas y parámetros
Navegación programática y enlaces
Ruta no encontrada y redirecciones
Compartir datos entre vistas

Módulo 7 · Proyecto de cierre 5 clases

Enunciado: gestor de catálogo con alta y edición
Estructura de componentes y ubicación del estado
Integración con la API y estados de interfaz
Repaso de accesibilidad con teclado
Construcción para producción y despliegue estático

Requisitos

JavaScript moderno: funciones flecha, desestructuración, módulos, map y filter.
HTML y CSS a nivel de maquetación con Flexbox o Grid.
Haber trabajado antes con el DOM y con peticiones fetch.
Entorno local con Node instalado, o el entorno preparado del curso en el navegador.

Descripción

Actualizar la interfaz a mano con el DOM funciona hasta que la aplicación crece: entonces aparecen estados descoordinados, elementos que no se refrescan y código de sincronización repartido por todas partes. React resuelve eso describiendo la interfaz como función del estado, pero exige entender bien qué provoca un renderizado y dónde debe vivir cada dato.

El curso construye una aplicación completa desde el primer módulo y añade capacidades en cada bloque: componentes y props, estado local, listas con clave, formularios controlados, efectos para datos externos y rutas. Se insiste en los errores habituales de quien empieza, como mutar el estado, abusar de useEffect o usar el índice como clave de una lista.

Al terminar se puede desarrollar y mantener una aplicación React de tamaño medio y leer con soltura el código de un proyecto ajeno. El itinerario sigue en React avanzado, donde entran hooks personalizados, estado global, memorización y perfilado, y se conecta con Next.js para las aplicaciones que necesitan renderizado en servidor.

¿Para quién es este curso?

Desarrolladores web con base de JavaScript que van a incorporarse a un proyecto React.
Alumnado de ciclos de desarrollo que necesita una aplicación completa para su proyecto final.
Perfiles de backend que deben construir la interfaz de sus propios servicios.