<App/>

Header

Nav

Main

Card

Card

⚛️

ComponentesHooksEstadoJSX

React te permite construir interfaces con componentes reutilizables. Aprende programación declarativa, hooks y patrones usados por millones de desarrolladores en todo el mundo.

Tutorial Gratuito

Aprende React - Crea Apps Web Modernas

Domina React, la biblioteca de JavaScript más popular para construir interfaces de usuario. Aprende componentes, hooks, gestión de estado y patrones modernos usados por empresas líderes.

📋 Requisitos previos

Antes de aprender React, deberías sentirte cómodo con los fundamentos de JavaScript, incluyendo ES6+ como funciones flecha, destructuring y módulos.

Revisar el Tutorial de JavaScript Funciones de ES6+

Temas de React (25 Lecciones)

🟢 Fundamentos

Los bloques esenciales que todo desarrollador React debe conocer.

Introducción a React

Qué es React y por qué usarlo para crear interfaces de usuario

Fundamentos de JSX

Comprende la sintaxis de JSX y cómo combina HTML con JavaScript

Crear y componer componentes funcionales

Pasar datos a los componentes con props

Estado y useState

Gestionar el estado del componente con el hook useState

Manejo de eventos

Responder a las interacciones del usuario en React

Renderizado condicional

Renderizar diferentes UI según condiciones

Renderizar listas de datos y entender las keys

Formularios y componentes controlados

Manejar inputs de formularios y componentes controlados

🔵 Hooks y Efectos

Domina los hooks de React — la forma moderna de gestionar estado y efectos secundarios.

Efectos secundarios, obtención de datos y gestión del ciclo de vida

useContext, useRef, useMemo, useCallback y hooks personalizados

useRef y Manipulación del DOM

Refs para acceso al DOM, handles imperativos y valores mutables entre renderizados

🟡 Estilos y Enrutamiento

Construye aplicaciones de una sola página hermosas y navegables.

Estilos en React

Módulos CSS, styled-components y Tailwind CSS

Enrutamiento y navegación del lado del cliente

🟠 Estado y Datos

Patrones de gestión de estado y estrategias de obtención de datos.

Gestión de estado

Context API, Redux y Zustand para el estado global

Integración con APIs

Obtener datos de APIs con fetch y React Query

Patrones de Obtención de Datos

Desde useEffect hasta TanStack Query, SWR, Suspense y Server Components

🔴 Patrones Avanzados

Patrones de producción, testing, rendimiento y funciones modernas de React.

React con TypeScript

Props tipados, hooks, eventos, contexto y patrones genéricos con TypeScript

Optimización de rendimiento

Memorización, code splitting y buenas prácticas de React

Error Boundaries y Suspense

Manejo de errores y carga diferida con Error Boundaries y Suspense

Patrones de React

Compound Components, Render Props, HOC y patrones avanzados de composición

Testing en React

Testing unitario, de integración y end-to-end para aplicaciones React

Implementa auth con JWT, OAuth, rutas protegidas y gestión de sesiones

⚡ React 19 y Más Allá

Las últimas funciones de React y el futuro del framework.

Novedades de React 19

Server Components, Actions, nuevos hooks y lo último de React 19

Server Components

Componentes de Servidor de React — arquitectura, patrones y buenas prácticas

Recursos de aprendizaje relacionados

React se apoya en los fundamentos de JavaScript. Asegúrate de tener una base sólida antes de sumergirte en React.

← Tutorial JavaScript ← Tutorial CSS Guía de Desarrollo Web