Aprender React desde cero: tutorial paso a paso con ejemplos

Qué es React y por qué tanta gente lo usa

React es una biblioteca de JavaScript para construir interfaces de usuario. La creó Meta y hoy la gestiona la React Foundation, dentro de la Linux Foundation. Su idea central es sencilla: divides la interfaz en piezas independientes, los componentes, y describes cómo debe verse cada una según sus datos. Cuando los datos cambian, React actualiza la pantalla por ti.

React no es la única opción: Vue, Svelte o Angular resuelven el mismo problema con otros enfoques. Los comparamos en nuestra guía de frameworks de desarrollo web.

Prepara tu entorno de desarrollo

Necesitas tres cosas: Node.js en su versión LTS, un editor de código y un navegador. Si dudas qué editor usar, en nuestra comparativa de VS Code, Zed y Neovim tienes las claves; para empezar, VS Code es la opción más cómoda.

Para crear el proyecto usaremos Vite, una herramienta muy rápida que prepara todo lo necesario. Abre una terminal y escribe:

npm create vite@latest mi-primera-app -- --template react
cd mi-primera-app
npm install
npm run dev

Abre en el navegador la dirección que te indica la terminal y verás la aplicación de ejemplo. Cada vez que guardes un archivo, la página se actualizará sola.

Tu primer componente: JSX y props

Un componente es una función de JavaScript que devuelve lo que debe aparecer en pantalla. Lo que devuelve se escribe en JSX, una sintaxis que se parece a HTML pero vive dentro de JavaScript. Sustituye el contenido de src/App.jsx por esto:

function Saludo({ nombre }) {
  return <h2>Hola, {nombre}</h2>;
}

export default function App() {
  return (
    <main>
      <h1>Mi primera app con React</h1>
      <Saludo nombre="Ana" />
      <Saludo nombre="Luis" />
    </main>
  );
}

Fíjate en tres detalles. Los componentes empiezan por mayúscula, para que React los distinga de las etiquetas HTML. Lo que va entre llaves es JavaScript, así que puedes poner variables o expresiones. Y nombre es una prop: un dato que el componente padre pasa al hijo, igual que un atributo en HTML.

• En JSX se usa className en lugar de class, porque class es una palabra reservada de JavaScript.
• Un componente devuelve un solo elemento raíz. Si necesitas varios, envuélvelos en <>...</>.
• Las props son de solo lectura. Un componente nunca modifica las props que recibe.

Estado y eventos con useState

Las props vienen de fuera; el estado es la memoria propia del componente. Cuando cambia, React vuelve a dibujar el componente con el nuevo valor. Se crea con el hook useState:

import { useState } from "react";

export default function Contador() {
  const [cuenta, setCuenta] = useState(0);

  return (
    <button onClick={() => setCuenta(cuenta + 1)}>
      Has pulsado {cuenta} veces
    </button>
  );
}

useState(0) devuelve el valor actual y una función para cambiarlo. Nunca modifiques el estado directamente (cuenta = 5 no funciona): usa siempre la función setCuenta, que es la que avisa a React de que tiene que actualizar la pantalla.

Los hooks tienen dos reglas: se llaman solo dentro de componentes o de otros hooks, y siempre en el nivel superior, nunca dentro de condiciones o bucles.

Listas y renderizado condicional

Para mostrar una lista, recorres un array con map y devuelves un elemento por cada dato. Cada elemento necesita una prop key única, que React usa para saber qué ha cambiado:

const tareas = [
  { id: 1, texto: "Instalar Node.js", hecha: true },
  { id: 2, texto: "Crear el proyecto con Vite", hecha: true },
  { id: 3, texto: "Aprender useEffect", hecha: false },
];

export default function ListaTareas() {
  return (
    <ul>
      {tareas.map((tarea) => (
        <li key={tarea.id}>
          {tarea.texto} {tarea.hecha && "(hecha)"}
        </li>
      ))}
    </ul>
  );
}

La expresión tarea.hecha && "(hecha)" es la forma habitual de mostrar algo solo si se cumple una condición. Para elegir entre dos opciones, usa el operador ternario: {hecha ? "Sí" : "No"}.

Efectos y peticiones a una API con useEffect

useEffect sirve para sincronizar el componente con algo externo: una API, un temporizador, una suscripción. El ejemplo típico es cargar datos al mostrar el componente:

import { useEffect, useState } from "react";

export default function Usuarios() {
  const [usuarios, setUsuarios] = useState([]);
  const [cargando, setCargando] = useState(true);

  useEffect(() => {
    let cancelado = false;

    fetch("https://jsonplaceholder.typicode.com/users")
      .then((respuesta) => respuesta.json())
      .then((datos) => {
        if (!cancelado) {
          setUsuarios(datos);
          setCargando(false);
        }
      });

    return () => {
      cancelado = true;
    };
  }, []);

  if (cargando) return <p>Cargando...</p>;

  return (
    <ul>
      {usuarios.map((u) => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

El array vacío del final indica que el efecto se ejecuta solo una vez, al montar el componente. La función que devuelve el efecto es la limpieza: evita actualizar el estado si el componente ya no está en pantalla. Para practicar con datos reales, en nuestra selección de APIs gratuitas para desarrolladores tienes decenas de opciones.

Otros hooks que usarás pronto

Sobre useMemo y useCallback, una buena noticia: React Compiler, que alcanzó su primera versión estable en 2025, aplica esas optimizaciones automáticamente. Mientras aprendes, no los uses salvo que midas un problema real.

Formularios con Actions

Las versiones recientes de React simplifican mucho los formularios. Puedes pasar una función directamente a la prop action y usar el hook useActionState para gestionar el resultado y el estado de envío:

import { useActionState } from "react";

async function suscribir(estadoAnterior, formData) {
  const email = formData.get("email");
  if (!email.includes("@")) return "Introduce un email válido";
  // Aquí enviarías el email a tu servidor
  return "¡Gracias por suscribirte!";
}

export default function Newsletter() {
  const [mensaje, accion, enviando] = useActionState(suscribir, "");

  return (
    <form action={accion}>
      <input name="email" type="email" placeholder="[email protected]" />
      <button disabled={enviando}>
        {enviando ? "Enviando..." : "Suscribirme"}
      </button>
      {mensaje && <p>{mensaje}</p>}
    </form>
  );
}

Para formularios grandes, con muchas validaciones, bibliotecas como React Hook Form siguen siendo muy útiles.

Navegación entre páginas con React Router

Una aplicación de React suele ser una sola página que cambia de contenido sin recargar. Para tener varias «páginas» con su propia dirección, la biblioteca estándar es React Router:

import { BrowserRouter, Routes, Route, Link } from "react-router";

export default function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Inicio</Link> | <Link to="/tareas">Tareas</Link>
      </nav>
      <Routes>
        <Route path="/" element={<h1>Inicio</h1>} />
        <Route path="/tareas" element={<ListaTareas />} />
      </Routes>
    </BrowserRouter>
  );
}

Instálalo con npm install react-router. Link cambia de página sin recargar el navegador, y con useParams puedes leer partes de la dirección, como el identificador de un producto.

En cuanto a los estilos, puedes usar CSS normal, módulos CSS o un framework como Tailwind, el más popular junto a React. Te ayudamos a elegir en nuestra comparativa de frameworks CSS modernos.

Buenas prácticas y siguientes pasos

Un asistente de IA te puede ayudar mucho mientras aprendes, siempre que entiendas el código que te propone en lugar de copiarlo sin más. Te explicamos cómo sacarle partido en nuestra guía de GitHub Copilot para programar con IA. Y si prefieres aprender con un libro al lado, hay buenos libros de React en español; comprueba que traten las versiones recientes.

Preguntas frecuentes sobre React

Conclusión: menos teoría, más componentes

Con componentes, props, useState, useEffect, listas y rutas ya puedes construir la mayoría de interfaces que te vas a encontrar. Todo lo demás, desde el estado global hasta el renderizado en servidor, se apoya en estas mismas piezas.

El mejor consejo es el más aburrido: escribe código cada día. Elige un proyecto pequeño que te apetezca de verdad, termínalo y después hazlo un poco más grande. Y cuando el código se te desordene, el formateador de código de TechRecursos lo deja limpio en un momento.