Roadmap React: qué aprender para ser desarrollador React
Quieres aprender React y cada tutorial te habla de una herramienta distinta. No sabes qué es imprescindible y qué puede esperar. Un mapa de ruta ordena ese caos.
No tienes que recorrerlo entero: te enseña dónde estás, adónde quieres ir y qué bloques hay por el camino.
El mapa original: react-developer-roadmap
Lo creó Adam Golab en junio de 2018 como respuesta a una pregunta que le hacían a menudo: «¿Qué debo aprender a continuación como desarrollador React?». Es un diagrama hecho con draw.io y una lista de recursos en el README, con traducción al español (README-ES.md). Tiene casi 19 000 estrellas en GitHub y licencia CC BY-NC-SA 4.0.
Su propio aviso lo deja claro: el mapa sirve para darte una idea del panorama, no para empujarte a lo que está de moda.
El recorrido tiene 19 bloques. Los primeros siguen siendo válidos:
| Bloque | Qué propone |
|---|---|
| Base | HTML, CSS (con grid y flexbox) y JavaScript: DOM, hoisting, propagación de eventos, prototipos, AJAX y ES6+ |
| Habilidades generales | Git, HTTP y sus métodos, la terminal, algoritmos y patrones de diseño |
| React | El tutorial oficial o un curso |
| Herramientas | npm, yarn o pnpm, y un empaquetador como Webpack, Rollup o Parcel |
Después vienen estilos, gestión de estado, tipos, formularios, rutas, clientes de API, utilidades, testing, internacionalización, renderizado en servidor, móvil, escritorio y realidad virtual.
La versión al día: roadmap.sh
roadmap.sh es un proyecto comunitario creado por Kamran Ahmed. Su repositorio en GitHub es uno de los más populares de la plataforma. El roadmap de React es interactivo: cada nodo abre una explicación con enlaces, y puedes marcar tu progreso si te registras.
Comparado con el de 2019, refleja el React actual:
- Componentes funcionales y hooks (
useState,useEffect,useContext,useReducer, hooks propios…) en lugar de clases. - Herramientas actuales: Vite como punto de partida, TypeScript, Zod para validar datos y Tailwind CSS o CSS Modules para estilos.
- Estado y datos: Context, Zustand, Jotai, TanStack Query o SWR.
- Testing: Vitest o Jest, React Testing Library y pruebas de extremo a extremo con Playwright o Cypress.
- Frameworks: Next.js, React Router y Astro.
Cómo sacarle partido sin agobiarte
- Empieza por la base: HTML, CSS y JavaScript. React es JavaScript; si flojeas ahí, todo lo demás cuesta el doble.
- Sigue el orden, no la lista completa. El mapa enseña todo lo que existe, no todo lo que necesitas para tu primer trabajo. Elige una opción por bloque y sigue.
- Aprende con el tutorial oficial de react.dev antes de saltar a librerías.
- Un proyecto pequeño por bloque: una lista de tareas para el estado, un buscador que llame a una API para los datos.
- Añade tests pronto. Probar tus componentes desde el principio evita malas costumbres.
El mapa enseña todo lo que existe, no todo lo que necesitas.
Para quién es y para quién no
- Encaja si empiezas con React o vienes de otra tecnología y quieres ver el panorama de un vistazo.
- No encaja si buscas un curso: ninguno de los dos mapas enseña React, solo te dicen qué aprender.
- Ten en cuenta que ambos están en inglés, salvo el README traducido del original.
Alternativas
- react.dev/learn: la guía oficial de React. No es un mapa, pero es el mejor punto de partida para el bloque central.
- Roadmap de frontend en roadmap.sh: si aún no tienes claro que React sea tu camino, muestra el recorrido general del desarrollo web.
Si necesitas reforzar JavaScript antes de saltar a React, tienes una selección en recursos de JavaScript en español.
Fuentes
Consultado el 7 de noviembre de 2026:
- adam-golab, react-developer-roadmap: README (ruta «en 2019», aviso, lista de recursos, licencia) y API de GitHub (creado en junio de 2018, último commit de octubre de 2019, unas 18 900 estrellas).
- React Developer Roadmap en roadmap.sh, presentado como la versión de 2026; los temas, sacados del contenido de ese roadmap en su repositorio. Autoría, en roadmap.sh/about.
- Se ha quitado la imagen del mapa que el original enlazaba desde GitHub: es de otro autor y se ve en su repositorio.