React Developer Roadmap 2025: Guía Completa en Español

📚 Phase 1: React Fundamentals (Semanas 1-4)

Semana 1: Introducción a React

🔍 ¿Qué es React y por qué usarlo?

React es una librería de JavaScript creada por Facebook para construir interfaces de usuario (UI). Imagínate que tienes una página web como un puzzle - React te permite crear piezas (componentes) reutilizables que puedes combinar para formar páginas completas.

¿Por qué React es tan popular?

• Reutilización: Creas un botón una vez, lo usas en toda la app
• Rapidez: Solo actualiza lo que cambió, no toda la página
• Mercado laboral: 67% de las ofertas de frontend lo requieren
• Ecosistema: Miles de librerías y herramientas disponibles

⚙️ Configuración del entorno: Vite vs Create React App

Para crear proyectos React tienes 2 opciones principales:

Comando para crear tu primer proyecto:

# Con Vite (recomendado)
npm create vite@latest mi-app-react -- --template react
cd mi-app-react
npm install
npm run dev

# Con Create React App
npx create-react-app mi-app-react
cd mi-app-react
npm start

🧩 Tu primer componente React

Un componente React es como una función que devuelve HTML. Aquí tienes tu primer ejemplo:

// App.js - Tu primer componente
function App() {
  return (
    <div>
      <h1>¡Hola, soy tu primer componente React!</h1>
      <p>Esto es mucho más poderoso de lo que parece.</p>
    </div>
  );
}

export default App;

¿Qué está pasando aquí?

• function App() - Creamos una función llamada App
• return (...) - Devolvemos HTML (que en realidad es JSX)
• export default - Permitimos usar este componente en otros archivos

📝 JSX: La sintaxis de React

JSX parece HTML pero con superpoderes. Te permite escribir HTML dentro de JavaScript:

// ✅ Esto es JSX válido
const mensaje = "¡Hola desde JavaScript!";

function Saludo() {
  return (
    <div>
      <h2>{mensaje}</h2>
      <p>Puedes usar variables JavaScript entre llaves {}</p>
      <button onClick={() => alert("¡Funciona!")}>
        Haz clic
      </button>
    </div>
  );
}

Reglas importantes de JSX:

• Siempre devuelve UN elemento padre (usa <div> o <React.Fragment>)
• className en lugar de class
• onClick en lugar de onclick
• Cierra todas las etiquetas: <img /> en lugar de <img>

💻 Proyecto: "Hola Mundo" interactivo

Vamos a crear tu primer proyecto React que hace algo real:

// HolaMundo.js
import { useState } from 'react';

function HolaMundo() {
  const [nombre, setNombre] = useState('');
  const [mostrarSaludo, setMostrarSaludo] = useState(false);
  
  const manejarSaludo = () => {
    if (nombre.trim()) {
      setMostrarSaludo(true);
    }
  };

  return (
    <div style={{padding: '20px', textAlign: 'center'}}>
      <h1>Mi Primera App React</h1>
      
      <input 
        type="text" 
        placeholder="Escribe tu nombre"
        value={nombre}
        onChange={(e) => setNombre(e.target.value)}
        style={{padding: '10px', marginRight: '10px'}}
      />
      
      <button 
        onClick={manejarSaludo}
        style={{padding: '10px 20px', backgroundColor: '#6366f1', color: 'white', border: 'none', borderRadius: '5px'}}
      >
        Saludar
      </button>
      
      {mostrarSaludo && (
        <div style={{marginTop: '20px', padding: '15px', backgroundColor: '#f0f9ff', borderRadius: '8px'}}>
          <h2>¡Hola, {nombre}! 👋</h2>
          <p>¡Acabas de crear tu primera interacción con React!</p>
        </div>
      )}
    </div>
  );
}

export default HolaMundo;

¿Qué aprendes con este proyecto?

• useState: Para manejar datos que cambian
• Eventos: onClick y onChange
• Renderizado condicional: Mostrar/ocultar elementos
• Estilo en línea: CSS directamente en JSX

Semana 2: Componentes y Props

🏗️ Componentes funcionales vs de clase

En React hay dos formas de crear componentes. En 2025, solo necesitas saber los componentes funcionales (los de clase están obsoletos):

// ✅ Componente funcional (moderno - React 2025)
function MiComponente() {
  return <h1>¡Hola desde un componente funcional!</h1>;
}

// ❌ Componente de clase (antiguo - no usar)
class MiComponenteViejo extends React.Component {
  render() {
    return <h1>No uses esto en 2025</h1>;
  }
}

¿Por qué solo componentes funcionales?

• Más simples: Menos código para hacer lo mismo
• Hooks: useState, useEffect funcionan solo en funcionales
• Performance: React los optimiza mejor
• Futuro: React está enfocado en componentes funcionales

📦 Props: Pasando datos entre componentes

Los Props (propiedades) son la forma de pasar información de un componente padre a un componente hijo. Es como darle ingredientes a una receta:

// Componente hijo que recibe props
function Saludo(props) {
  return (
    <div>
      <h2>¡Hola, {props.nombre}!</h2>
      <p>Tu edad es: {props.edad} años</p>
    </div>
  );
}

// Componente padre que envía props
function App() {
  return (
    <div>
      <Saludo nombre="Ana" edad={25} />
      <Saludo nombre="Carlos" edad={30} />
    </div>
  );
}

Versión mejorada con destructuring (más elegante):

// Mejor práctica: destructuring de props
function Saludo({ nombre, edad }) {
  return (
    <div>
      <h2>¡Hola, {nombre}!</h2>
      <p>Tu edad es: {edad} años</p>
    </div>
  );
}

🧩 Composición de componentes

La composición es combinar componentes pequeños para crear interfaces complejas. Es como construir con bloques de LEGO:

// Componentes pequeños y específicos
function Avatar({ imagen, nombre }) {
  return (
    <img 
      src={imagen} 
      alt={nombre} 
      style={{width: '50px', height: '50px', borderRadius: '50%'}}
    />
  );
}

function InfoUsuario({ nombre, email, rol }) {
  return (
    <div>
      <h3>{nombre}</h3>
      <p>{email}</p>
      <span style={{background: '#6366f1', color: 'white', padding: '4px 8px', borderRadius: '4px'}}>
        {rol}
      </span>
    </div>
  );
}

// Componente compuesto que usa los anteriores
function TarjetaUsuario({ usuario }) {
  return (
    <div style={{border: '1px solid #ccc', padding: '20px', borderRadius: '8px', display: 'flex', gap: '15px'}}>
      <Avatar imagen={usuario.imagen} nombre={usuario.nombre} />
      <InfoUsuario 
        nombre={usuario.nombre} 
        email={usuario.email} 
        rol={usuario.rol} 
      />
    </div>
  );
}

✅ PropTypes para validación

PropTypes te ayuda a detectar errores verificando que los props sean del tipo correcto:

import PropTypes from 'prop-types';

function Producto({ nombre, precio, disponible }) {
  return (
    <div>
      <h3>{nombre}</h3>
      <p>Precio: €{precio}</p>
      <p>{disponible ? '✅ Disponible' : '❌ Agotado'}</p>
    </div>
  );
}

// Validación de props
Producto.propTypes = {
  nombre: PropTypes.string.isRequired,      // String obligatorio
  precio: PropTypes.number.isRequired,      // Número obligatorio
  disponible: PropTypes.bool                // Boolean opcional
};

// Valores por defecto
Producto.defaultProps = {
  disponible: true
};

💻 Proyecto: Tarjeta de perfil reutilizable

Vamos a crear un sistema completo de tarjetas de perfil que puedas usar en cualquier proyecto:

// TarjetaPerfil.js
import PropTypes from 'prop-types';

function TarjetaPerfil({ 
  nombre, 
  apellido, 
  email, 
  avatar, 
  rol, 
  activo, 
  redesSociales 
}) {
  const estiloTarjeta = {
    border: '1px solid #e2e8f0',
    borderRadius: '12px',
    padding: '24px',
    maxWidth: '300px',
    textAlign: 'center',
    boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
    transition: 'transform 0.2s ease',
    cursor: 'pointer'
  };

  const estiloAvatar = {
    width: '80px',
    height: '80px',
    borderRadius: '50%',
    margin: '0 auto 16px',
    objectFit: 'cover'
  };

  const estiloRol = {
    background: rol === 'Admin' ? '#ef4444' : '#6366f1',
    color: 'white',
    padding: '4px 12px',
    borderRadius: '20px',
    fontSize: '12px',
    fontWeight: 'bold'
  };

  return (
    <div 
      style={estiloTarjeta}
      onMouseOver={(e) => e.target.style.transform = 'translateY(-5px)'}
      onMouseOut={(e) => e.target.style.transform = 'translateY(0)'}
    >
      <img src={avatar} alt={`${nombre} ${apellido}`} style={estiloAvatar} />
      
      <h3 style={{margin: '0 0 8px 0', color: '#1f2937'}}>
        {nombre} {apellido}
      </h3>
      
      <p style={{color: '#6b7280', margin: '0 0 12px 0'}}>
        {email}
      </p>
      
      <div style={{marginBottom: '16px'}}>
        <span style={estiloRol}>{rol}</span>
        {activo && (
          <span style={{marginLeft: '8px', color: '#22c55e'}}>
            ● Activo
          </span>
        )}
      </div>
      
      {redesSociales && (
        <div style={{display: 'flex', justifyContent: 'center', gap: '10px'}}>
          {redesSociales.linkedin && (
            <a href={redesSociales.linkedin} style={{color: '#0077b5'}}>LinkedIn</a>
          )}
          {redesSociales.github && (
            <a href={redesSociales.github} style={{color: '#333'}}>GitHub</a>
          )}
        </div>
      )}
    </div>
  );
}

// Validación de props
TarjetaPerfil.propTypes = {
  nombre: PropTypes.string.isRequired,
  apellido: PropTypes.string.isRequired,
  email: PropTypes.string.isRequired,
  avatar: PropTypes.string.isRequired,
  rol: PropTypes.oneOf(['Usuario', 'Admin', 'Moderador']).isRequired,
  activo: PropTypes.bool,
  redesSociales: PropTypes.shape({
    linkedin: PropTypes.string,
    github: PropTypes.string
  })
};

export default TarjetaPerfil;

Cómo usar el componente:

// App.js
import TarjetaPerfil from './TarjetaPerfil';

function App() {
  const usuarios = [
    {
      nombre: "Ana",
      apellido: "García",
      email: "ana@studycodepro.com",
      avatar: "https://randomuser.me/api/portraits/women/1.jpg",
      rol: "Admin",
      activo: true,
      redesSociales: {
        linkedin: "https://linkedin.com/in/ana-garcia",
        github: "https://github.com/ana-garcia"
      }
    },
    {
      nombre: "Carlos",
      apellido: "López",
      email: "carlos@studycodepro.com",
      avatar: "https://randomuser.me/api/portraits/men/2.jpg",
      rol: "Usuario",
      activo: false
    }
  ];

  return (
    <div style={{display: 'flex', gap: '20px', padding: '20px'}}>
      {usuarios.map((usuario, index) => (
        <TarjetaPerfil 
          key={index}
          ...usuario
        />
      ))}
    </div>
  );
}

export default App;

import React, { useState } from 'react';

function Contador() {
  // useState devuelve [valor, función para cambiar el valor]
  const [numero, setNumero] = useState(0);

  return (
    <div>
      <h2>Contador: {numero}</h2>
      <button onClick={() => setNumero(numero + 1)}>
        Aumentar
      </button>
    </div>
  );
}

function ComponenteEventos() {
  const [mensaje, setMensaje] = useState('Hola!');

  // Evento de click
  const manejarClick = () => {
    setMensaje('¡Hiciste click!');
  };

  // Evento de input
  const manejarCambio = (evento) => {
    setMensaje(evento.target.value);
  };

  // Evento de mouse
  const manejarHover = () => {
    setMensaje('Mouse encima!');
  };

  return (
    <div>
      <h3>{mensaje}</h3>
      
      <button onClick={manejarClick}>
        Hacer Click
      </button>

      <input 
        type="text" 
        value={mensaje}
        onChange={manejarCambio}
      />

      <div 
        onMouseEnter={manejarHover}
        style={{padding: '20px', border: '1px solid #ccc'}}
      >
        Pasa el mouse por aquí
      </div>
    </div>
  );
}

function FormularioRegistro() {
  const [usuario, setUsuario] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errores, setErrores] = useState({});

  // Validación en tiempo real
  const validarFormulario = () => {
    const nuevosErrores = {};

    if (usuario.length < 3) {
      nuevosErrores.usuario = 'Usuario debe tener al menos 3 caracteres';
    }

    if (!email.includes('@')) {
      nuevosErrores.email = 'Email no válido';
    }

    if (password.length < 6) {
      nuevosErrores.password = 'Contraseña debe tener al menos 6 caracteres';
    }

    setErrores(nuevosErrores);
    return Object.keys(nuevosErrores).length === 0;
  };

  const manejarSubmit = (e) => {
    e.preventDefault();
    
    if (validarFormulario()) {
      alert(`¡Registro exitoso para ${usuario}!`);
    }
  };

  return (
    <form onSubmit={manejarSubmit}>
      <div>
        <label>Usuario:</label>
        <input
          type="text"
          value={usuario}
          onChange={(e) => setUsuario(e.target.value)}
        />
        {errores.usuario && <span style={{color: 'red'}}>{errores.usuario}</span>}
      </div>

      <div>
        <label>Email:</label>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        {errores.email && <span style={{color: 'red'}}>{errores.email}</span>}
      </div>

      <div>
        <label>Contraseña:</label>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        {errores.password && <span style={{color: 'red'}}>{errores.password}</span>}
      </div>

      <button type="submit">Registrarse</button>
    </form>
  );
}

function PanelUsuario() {
  const [usuario, setUsuario] = useState(null);
  const [cargando, setCargando] = useState(false);
  const [error, setError] = useState(null);

  const simularLogin = () => {
    setCargando(true);
    setError(null);

    // Simular llamada a API
    setTimeout(() => {
      if (Math.random() > 0.5) {
        setUsuario({ nombre: 'Juan Pérez', rol: 'admin' });
      } else {
        setError('Credenciales incorrectas');
      }
      setCargando(false);
    }, 2000);
  };

  // Renderizado condicional con early return
  if (cargando) {
    return <div>⏳ Cargando...</div>;
  }

  return (
    <div>
      {/* Operador ternario */}
      {usuario ? (
        <div>
          <h2>¡Bienvenido, {usuario.nombre}!</h2>
          
          {/* Renderizado condicional anidado */}
          {usuario.rol === 'admin' && (
            <button>Panel de Administración</button>
          )}
          
          <button onClick={() => setUsuario(null)}>
            Cerrar Sesión
          </button>
        </div>
      ) : (
        <div>
          <h2>Iniciar Sesión</h2>
          <button onClick={simularLogin}>Login</button>
        </div>
      )}

      {/* Operador AND lógico para errores */}
      {error && (
        <div style={{color: 'red', marginTop: '10px'}}>
          ❌ {error}
        </div>
      )}
    </div>
  );
}

function CalculadoraCompleta() {
  const [display, setDisplay] = useState('0');
  const [operacion, setOperacion] = useState(null);
  const [valorAnterior, setValorAnterior] = useState(null);
  const [esperandoOperando, setEsperandoOperando] = useState(false);
  const [historial, setHistorial] = useState([]);
  const [mostrarHistorial, setMostrarHistorial] = useState(false);

  const inputNumero = (num) => {
    if (esperandoOperando) {
      setDisplay(String(num));
      setEsperandoOperando(false);
    } else {
      setDisplay(display === '0' ? String(num) : display + num);
    }
  };

  const inputOperacion = (nextOperacion) => {
    const inputValue = parseFloat(display);

    if (valorAnterior === null) {
      setValorAnterior(inputValue);
    } else if (operacion) {
      const resultado = calcular(valorAnterior, inputValue, operacion);
      
      // Añadir al historial
      const nuevaOperacion = `${valorAnterior} ${operacion} ${inputValue} = ${resultado}`;
      setHistorial(prev => [nuevaOperacion, ...prev].slice(0, 10));

      setDisplay(String(resultado));
      setValorAnterior(resultado);
    }

    setEsperandoOperando(true);
    setOperacion(nextOperacion);
  };

  const calcular = (firstValue, secondValue, operation) => {
    switch (operation) {
      case '+':
        return firstValue + secondValue;
      case '-':
        return firstValue - secondValue;
      case '*':
        return firstValue * secondValue;
      case '/':
        return secondValue !== 0 ? firstValue / secondValue : 'Error';
      default:
        return secondValue;
    }
  };

  const limpiar = () => {
    setDisplay('0');
    setValorAnterior(null);
    setOperacion(null);
    setEsperandoOperando(false);
  };

  return (
    <div style={{ maxWidth: '400px', margin: '0 auto', padding: '20px' }}>
      <h2>🧮 Calculadora React</h2>

      {/* Display */}
      <div style={{
        background: '#000',
        color: '#fff',
        padding: '20px',
        fontSize: '2rem',
        textAlign: 'right',
        marginBottom: '20px',
        borderRadius: '8px'
      }}>
        {display}
      </div>

      {/* Botones */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '10px' }}>
        <button onClick={limpiar} style={{gridColumn: 'span 2'}}>Clear</button>
        <button onClick={() => setMostrarHistorial(!mostrarHistorial)}>
          {mostrarHistorial ? 'Ocultar' : 'Historial'}
        </button>
        <button onClick={() => inputOperacion('/')}>÷</button>

        {[7, 8, 9].map(num => (
          <button key={num} onClick={() => inputNumero(num)}>{num}</button>
        ))}
        <button onClick={() => inputOperacion('*')}>×</button>

        {[4, 5, 6].map(num => (
          <button key={num} onClick={() => inputNumero(num)}>{num}</button>
        ))}
        <button onClick={() => inputOperacion('-')}>-</button>

        {[1, 2, 3].map(num => (
          <button key={num} onClick={() => inputNumero(num)}>{num}</button>
        ))}
        <button onClick={() => inputOperacion('+')}>+</button>

        <button onClick={() => inputNumero(0)} style={{gridColumn: 'span 2'}}>0</button>
        <button onClick={() => inputOperacion('=')} style={{gridColumn: 'span 2'}}>=</button>
      </div>

      {/* Historial */}
      {mostrarHistorial && (
        <div style={{ marginTop: '20px', padding: '15px', backgroundColor: '#f0f0f0' }}>
          <h3>📊 Historial</h3>
          {historial.length === 0 ? (
            <p>No hay operaciones aún</p>
          ) : (
            <ul>
              {historial.map((operacion, index) => (
                <li key={index}>{operacion}</li>
              ))}
            </ul>
          )}
        </div>
      )}
    </div>
  );
}

Semana 4: Listas y Keys

• Renderizado de listas con map()
• Keys en React: ¿Por qué son importantes?
• Filtrado y búsqueda en listas
• Componentes de orden superior básicos
• Proyecto: Lista de tareas (Todo App) básica

⚡ Phase 2: React Hooks Avanzados (Semanas 5-8)

Semana 5: useEffect y Ciclo de Vida

• useEffect: El hook de efectos secundarios
• Cleanup functions
• Dependencias en useEffect
• Llamadas a APIs con useEffect
• Proyecto: Consumidor de API REST

Semana 6: useContext y Gestión Global

• Context API: Estado global sin props drilling
• useContext Hook
• Patrón Provider/Consumer
• Múltiples contextos
• Proyecto: Tema dark/light global

Semana 7: useReducer y Patrones Avanzados

• useReducer: Estado complejo
• Cuándo usar useReducer vs useState
• Combinando useReducer con useContext
• useMemo y useCallback para optimización
• Proyecto: Carrito de compras con useReducer

Semana 8: Custom Hooks

• Creando tus propios hooks
• Hooks para manejo de formularios
• Hooks para llamadas HTTP
• Hooks para localStorage
• Proyecto: Biblioteca de custom hooks reutilizables

🛣️ Phase 3: Navegación y Routing (Semanas 9-10)

Semana 9: React Router Fundamentals

• Instalación y configuración de React Router
• BrowserRouter vs HashRouter
• Route, Routes y navegación básica
• Link vs NavLink
• Proyecto: SPA multipage básica

Semana 10: Routing Avanzado

• Parámetros de ruta (useParams)
• Query strings (useSearchParams)
• Rutas anidadas
• Rutas protegidas y redirecciones
• Proyecto: Blog con rutas dinámicas

🔄 Phase 4: Gestión de Estado Avanzada (Semanas 11-12)

Semana 11: Zustand - Estado Global Moderno

• ¿Por qué Zustand sobre Redux?
• Configuración y stores básicos
• Middleware y persistencia
• Zustand con TypeScript
• Proyecto: E-commerce con Zustand

Semana 12: React Query - Server State

• Diferencia entre client state y server state
• Queries, mutations y caching
• Optimistic updates
• Infinite queries
• Proyecto: Dashboard con datos en tiempo real

🧪 Phase 5: Testing y Optimización (Semanas 13-14)

Semana 13: Testing en React

• Jest y React Testing Library setup
• Testing de componentes
• Mocking de APIs y hooks
• Integration tests
• Proyecto: Test suite completo para app anterior

Semana 14: Performance y Optimización

• React.memo y cuando usarlo
• useMemo y useCallback en profundidad
• Code splitting con React.lazy
• Bundle analysis y optimización
• Proyecto: Optimización de app existente

🚀 Phase 6: React 19 y Deployment (Semanas 15-16)

Semana 15: React 19 New Features

• Server Components básicos
• Actions y Forms mejorados
• use() Hook
• Nuevas APIs de React 19
• Proyecto: App usando React 19 features

Semana 16: Deployment y Producción

• Build optimization para producción
• Deployment en Vercel y Netlify
• Environment variables
• Monitoring y analytics
• Proyecto: Portfolio React desplegado