Introducción a React: Tutorial Completo para Principiantes 2026

¿Por qué aprender React en 2026?

React, creado por Meta, es la librería de JavaScript más utilizada para construir interfaces de usuario. Con más del 40% de cuota de mercado entre frameworks frontend, React domina tanto en startups como en grandes empresas. Su ecosistema incluye Next.js para aplicaciones full-stack, React Native para apps móviles, y una comunidad enorme con miles de librerías y recursos.

Este tutorial asume que tienes conocimientos básicos de HTML, CSS y JavaScript. Si sabes crear una página web simple y entiendes funciones, arrays y objetos en JavaScript, estás listo para empezar con React.

Configuración del proyecto

La forma más rápida de crear un proyecto React en 2026 es con Vite, que reemplaza al antiguo Create React App.

# Crear proyecto con Vite
npm create vite@latest mi-app-react -- --template react
cd mi-app-react
npm install
npm run dev

Abre http://localhost:5173 en tu navegador y verás la página de bienvenida de Vite + React. La estructura del proyecto incluye src/App.jsx que es tu componente principal y src/main.jsx que monta React en el DOM.

Componentes: los bloques de construcción

En React, todo es un componente. Un componente es una función de JavaScript que retorna JSX, una sintaxis similar a HTML que se escribe directamente en JavaScript.

// Un componente simple
function Saludo() {
  return (
    <div>
      <h1>¡Hola Mundo!</h1>
      <p>Este es mi primer componente React.</p>
    </div>
  );
}

export default Saludo;

Los componentes se pueden componer como piezas de LEGO. Un componente App puede contener un componente Header, un Sidebar y un MainContent, cada uno con sus propios componentes internos.

function App() {
  return (
    <div className="app">
      <Header />
      <main>
        <Sidebar />
        <MainContent />
      </main>
      <Footer />
    </div>
  );
}

Props: pasando datos entre componentes

Las props son la forma de pasar datos de un componente padre a un componente hijo. Funcionan como los atributos de HTML.

// Componente que recibe props
function TarjetaUsuario({ nombre, email, rol }) {
  return (
    <div className="tarjeta">
      <h3>{nombre}</h3>
      <p>{email}</p>
      <span className="badge">{rol}</span>
    </div>
  );
}

// Usando el componente con diferentes datos
function ListaUsuarios() {
  return (
    <div>
      <TarjetaUsuario nombre="Ana" email="ana@correo.com" rol="Admin" />
      <TarjetaUsuario nombre="Carlos" email="carlos@correo.com" rol="Editor" />
      <TarjetaUsuario nombre="María" email="maria@correo.com" rol="Viewer" />
    </div>
  );
}

Estado con useState

El estado es la forma en que React maneja datos que cambian con el tiempo. Cuando el estado cambia, React re-renderiza automáticamente el componente para reflejar los nuevos datos.

import { useState } from 'react';

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

  return (
    <div>
      <p>Has hecho clic {cuenta} veces</p>
      <button => setCuenta(cuenta + 1)}>
        Incrementar
      </button>
      <button => setCuenta(0)}>
        Resetear
      </button>
    </div>
  );
}

Estado con objetos

function FormularioContacto() {
  const [formulario, setFormulario] = useState({
    nombre: '',
    email: '',
    mensaje: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormulario(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Enviando:', formulario);
  };

  return (
    <form
      <input name="nombre" value={formulario.nombre} placeholder="Tu nombre" />
      <input name="email" value={formulario.email} placeholder="Tu email" />
      <textarea name="mensaje" value={formulario.mensaje} placeholder="Tu mensaje" />
      <button type="submit">Enviar</button>
    </form>
  );
}

Efectos con useEffect

El hook useEffect te permite ejecutar código cuando el componente se monta, cuando alguna dependencia cambia, o cuando se desmonta. Es ideal para llamadas a APIs, suscripciones y manipulación del DOM.

import { useState, useEffect } from 'react';

function ListaPosts() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
      .then(res => res.json())
      .then(data => {
        setPosts(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []); // [] = ejecutar solo al montar

  if (loading) return <p>Cargando...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.body}</p>
        </li>
      ))}
    </ul>
  );
}

Renderizado condicional y listas

function Dashboard({ usuario }) {
  // Renderizado condicional
  if (!usuario) {
    return <p>Por favor inicia sesión</p>;
  }

  return (
    <div>
      <h2>Bienvenido, {usuario.nombre}</h2>
      {usuario.esAdmin && (
        <button>Panel de administración</button>
      )}
      {usuario.notificaciones.length > 0 ? (
        <ul>
          {usuario.notificaciones.map((notif, index) => (
            <li key={index}>{notif.mensaje}</li>
          ))}
        </ul>
      ) : (
        <p>No tienes notificaciones</p>
      )}
    </div>
  );
}

Ejemplo completo: lista de tareas

import { useState } from 'react';

function TodoApp() {
  const [tareas, setTareas] = useState([]);
  const [nuevaTarea, setNuevaTarea] = useState('');

  const agregarTarea = (e) => {
    e.preventDefault();
    if (!nuevaTarea.trim()) return;
    setTareas([...tareas, { id: Date.now(), texto: nuevaTarea, completada: false }]);
    setNuevaTarea('');
  };

  const toggleTarea = (id) => {
    setTareas(tareas.map(t =>
      t.id === id ? { ...t, completada: !t.completada } : t
    ));
  };

  const eliminarTarea = (id) => {
    setTareas(tareas.filter(t => t.id !== id));
  };

  return (
    <div className="todo-app">
      <h1>Mis Tareas</h1>
      <form
        <input
          value={nuevaTarea} => setNuevaTarea(e.target.value)}
          placeholder="Nueva tarea..."
        />
        <button type="submit">Agregar</button>
      </form>
      <ul>
        {tareas.map(tarea => (
          <li key={tarea.id} style={{ textDecoration: tarea.completada ? 'line-through' : 'none' }}>
            <span => toggleTarea(tarea.id)}>{tarea.texto}</span>
            <button => eliminarTarea(tarea.id)}>Eliminar</button>
          </li>
        ))}
      </ul>
      <p>{tareas.filter(t => !t.completada).length} tareas pendientes</p>
    </div>
  );
}

Próximos pasos

Con estos fundamentos puedes construir aplicaciones React funcionales. Los siguientes temas a explorar son React Router para navegación entre páginas, Context API para estado global, custom hooks para reutilizar lógica, y Next.js para aplicaciones full-stack con server-side rendering. React es un ecosistema enorme, pero los conceptos que aprendiste aquí, componentes, props, estado y efectos, son la base de todo lo demás.