Llevas semanas, quizá meses, viendo tutoriales. Sabes hacer una función en JavaScript, tienes claro qué es un componente de React, puedes seguir un vídeo paso a paso. Pero cuando intentas construir algo tú solo, te quedas en blanco. No sabes por dónde empezar, qué va antes de qué, ni cuándo estás listo para el siguiente nivel.
Ese bucle tiene nombre: tutorial hell. Y la salida no es ver más tutoriales, es tener un orden. Eso es lo que hace este roadmap: te dice qué aprender, cuándo y por qué en ese orden concreto. También te dice qué ignorar, que es igual de importante.
No es un curso de fin de semana. Son cuatro meses de trabajo diario, con proyectos reales que construyen un portfolio que puedes enseñar cuando empieces a buscar trabajo.
Mes 1: HTML, CSS y JavaScript básico
Las dos primeras semanas son HTML semántico y CSS moderno. No el HTML de tutorials de 2015 — el semántico de verdad: <header>, <main>, <article>, <section>. Y CSS con Flexbox y Grid, que es como se hace layout hoy. Si aprendes a posicionar elementos con floats o tablas, vas a tener que desaprender eso después.
Las semanas 3 y 4 son JavaScript puro: variables, funciones, arrays, objetos, DOM. Sin React todavía. La razón es concreta: si llegas a React sin entender cómo funciona el DOM en JavaScript, cada error que te salga va a parecer magia negra. Aquí es donde la mayoría de los tutoriales de "React desde cero" cometen el error de saltar demasiado rápido.
Proyecto del mes 1: Una landing page responsive con un formulario de contacto y algo de JavaScript para interactividad — un menú que se abre, un contador, lo que sea. El objetivo es tener algo que funcione en móvil y en desktop y que puedas subir a GitHub.
Mes 2: JavaScript intermedio y herramientas
Las semanas 1 y 2 son JavaScript más serio: map, filter, reduce, Fetch API, manejo de errores con try/catch y localStorage. Estos métodos de array son los que más vas a usar en React — si no los tienes claros, el código de tus componentes va a parecer complicado cuando en realidad no lo es.
Las semanas 3 y 4 son herramientas: Git y GitHub en serio (ramas, pull requests, no solo commits al main), NPM, y Vite como build tool. ESLint y Prettier para que el código sea consistente. No es la parte más emocionante, pero es la que diferencia a alguien que sabe programar de alguien que puede trabajar en un equipo.
Proyecto del mes 2: Una app de clima que consuma una API real. Búsqueda por ciudad, manejo del caso en que la ciudad no existe, datos que persistan en localStorage para no repetir peticiones. Aquí aparece el primer error real que no te dice ningún tutorial: gestionar el estado de carga y error al mismo tiempo, sin que la interfaz se quede rota.
Mes 3: React fundamentals
Las semanas 1 y 2 son los conceptos base de React: JSX, componentes, props, state, eventos. La cosa que más cuesta al principio es entender que React re-renderiza el componente entero cuando el estado cambia — no actualiza solo el trozo que cambió. Cuando lo entiendes, muchas cosas que parecían raras empiezan a tener sentido.
Las semanas 3 y 4 son hooks: useState, useEffect y useContext. El useEffect es donde más gente se atasca porque el comportamiento de las dependencias no es obvio. Si pones un objeto en el array de dependencias sin entender la referencia, entras en un bucle infinito de renders. Eso me pasó la primera vez y tardé dos horas en entender por qué.
Proyecto del mes 3: Una todo app completa con CRUD, filtros por estado, persistencia en localStorage y componentes separados. No es el proyecto más original del mundo, pero obliga a entender el flujo de datos de arriba hacia abajo y cuándo hace falta elevar el estado.
Mes 4: React ecosystem y proyecto final
Las semanas 1 y 2 son el ecosistema: React Router para navegación entre páginas, React Hook Form para formularios (validación sin volverte loco), y Context API o Redux Toolkit para estado global. Mi recomendación: empieza con Context y pasa a Redux cuando notes que Context se queda corto. Si empiezas con Redux sin haber sentido ese dolor, no vas a entender para qué sirve.
Las semanas 3 y 4 son el proyecto final: una aplicación completa con autenticación simulada, varias rutas, estado global y deploy funcionando. Esto es lo que llevas a las entrevistas.
Proyecto del mes 4: Un e-commerce o un dashboard de gestión. Múltiples rutas, carrito o tabla de datos con CRUD, autenticación por contexto, y desplegado en Netlify o Vercel. Lo importante no es que sea bonito — es que funcione y el código esté organizado.
Stack recomendado (y qué ignorar)
Lo que necesitas: HTML5 semántico, CSS3 con Flexbox y Grid, JavaScript ES6+, React 18 con hooks, Git y GitHub, Vite, y ESLint con Prettier. Eso es suficiente para buscar trabajo junior.
Lo que no necesitas todavía: TypeScript (aprende JavaScript primero, TypeScript encima de JavaScript inestable es peor que ninguno), Next.js (React puro primero), Redux (Context API cubre el 80% de los casos y es más simple de entender), Tailwind (aprende CSS antes de usar una utilidad que genera CSS por ti) y SASS (CSS moderno con custom properties es potente de sobra).
Esto no significa que esas tecnologías sean malas. Significa que aprenderlas antes de tiempo es la forma más efectiva de no entender ninguna bien.
Un ejemplo de lo que construirás en el mes 3
Este es el formulario de registro que harás en React. Fíjate en cómo se gestiona el estado del formulario y los errores con dos useState separados:
// Ejemplo de formulario React que podrás crear
import { useState } from 'react';
function RegisterForm() {
const [formData, setFormData] = useState({
name: '', email: '', password: ''
});
const [errors, setErrors] = useState({});
const handleSubmit = async (e) => {
e.preventDefault();
// Validación
const newErrors = {};
if (!formData.name) newErrors.name = 'Nombre requerido';
if (!formData.email) newErrors.email = 'Email requerido';
if (!formData.password) newErrors.password = 'Contraseña requerida';
if (Object.keys(newErrors).length > 0) {
setErrors(newErrors);
return;
}
// Enviar datos
try {
await fetch('/api/register', {
method: 'POST',
body: JSON.stringify(formData)
});
alert('¡Registro exitoso!');
} catch (error) {
alert('Error en el registro');
}
};
return (
<form onSubmit={handleSubmit}>
<input
placeholder="Nombre"
value={formData.name}
onChange={(e) => setFormData({...formData, name: e.target.value})}
/>
{errors.name && <span>{errors.name}</span>}
<input
type="email"
placeholder="Email"
value={formData.email}
onChange={(e) => setFormData({...formData, email: e.target.value})}
/>
{errors.email && <span>{errors.email}</span>}
<input
type="password"
placeholder="Contraseña"
value={formData.password}
onChange={(e) => setFormData({...formData, password: e.target.value})}
/>
{errors.password && <span>{errors.password}</span>}
<button type="submit">Registrarse</button>
</form>
);
}Cuando llegues al mes 3, este código no va a parecerte intimidante. Vas a entender por qué el estado de errores es un objeto separado y no parte de formData, y por qué el onChange usa spread en vez de mutar el objeto directamente. Esas decisiones tienen una razón concreta.
Lo que nadie te dice sobre este proceso
El mes 2 es donde abandona la mayoría. No porque el contenido sea más difícil, sino porque el entusiasmo del principio se ha ido y todavía no ves el resultado. Llevas semanas aprendiendo JavaScript y todavía no has tocado React. Eso hace que parezca que no avanzas. Avanzas, pero el progreso no es visible todavía.
La diferencia entre seguir tutoriales y hacer proyectos reales es esta: en un tutorial alguien ya sabe dónde está el error y te lleva hasta él. En un proyecto tuyo, pasas 40 minutos mirando un bug que resulta ser una coma mal puesta. Eso es exactamente lo que te entrena para trabajar en un equipo real. No hay forma de acortar ese proceso.
React sin JavaScript sólido no funciona. No es opinión, es lo que pasa en la práctica: si no entiendes closures, el comportamiento de useEffect con funciones en el array de dependencias va a parecer inconsistente. Si no tienes claro cómo funciona map, escribirás JSX que no entiendes del todo. Tres semanas más en JavaScript en el mes 1 son tres semanas menos de bloqueos en el mes 3.
Y sobre las tecnologías que "necesitas aprender": cada año aparece algo nuevo que supuestamente hay que saber para conseguir trabajo. TypeScript, Next.js, Astro, Remix. No los ignores para siempre, pero tampoco los metas en el roadmap antes de tener JavaScript y React bien asentados. Una base sólida te permite aprender cualquier framework nuevo en días. Sin esa base, cada uno te va a costar semanas.
Cómo estructurar el tiempo de estudio
Dos o tres horas diarias funcionan mejor que siete horas los sábados. No porque sea más eficiente en papel, sino porque el cerebro consolida mejor con práctica distribuida. Lo que aprendes el lunes necesita tiempo para asentarse antes de poder aplicarlo el miércoles.
La rutina que funciona: una hora de contenido nuevo — documentación, vídeo, lo que sea — y el resto del tiempo escribiendo código. No copiando código de un tutorial, sino escribiéndolo tú con el tutorial cerrado. Cuando algo no funciona, antes de buscar la solución directa, lee el mensaje de error completo. El 70% de las veces te dice exactamente qué falla y en qué línea.
Lleva un registro semanal mínimo: qué aprendiste, cuántas horas codificaste, qué problema resolviste por ti solo. No para motivarte — para ver el progreso cuando el mes 2 te haga dudar de si vas bien.
Al final de los cuatro meses
Deberías tener cuatro proyectos en GitHub con commits regulares, un README decente en cada uno y el proyecto final desplegado y funcionando. Eso es lo que presentas cuando aplicas a posiciones junior. No el número de tutoriales que has visto.
Las habilidades que tendrás: HTML semántico, CSS responsive con Flexbox y Grid, JavaScript ES6+ incluyendo async/await y métodos de array, React con hooks, React Router, formularios, estado global básico, Git con ramas, consumo de APIs REST y deploy. Es exactamente lo que piden la mayoría de las ofertas junior en 2026.
Lo que no tendrás todavía: experiencia laboral real, TypeScript, testing avanzado, Next.js. Eso viene después. El objetivo de estos cuatro meses es poder entrar a una empresa y no perderte en el primer sprint.
StudyCode Pro
En StudyCode Pro no te damos las respuestas. Cuando te atascas en un proyecto, el sistema te hace preguntas para que encuentres el fallo tú solo — dónde está el error, qué parte del código no entiendes, qué has probado ya. Es más lento que mirar la solución directamente, pero es lo que hace que el conocimiento se quede.
Si ese enfoque te parece útil, apúntate a la lista de espera.