GUÍA COMPLETA DE REACT PARA PRINCIPIANTES EN 2026

Introducción a React en la era actual

React sigue siendo la biblioteca de JavaScript más utilizada para construir interfaces de usuario interactivas y eficientes. En enero de 2026, la versión estable actual es React 19.2.4, que incorpora mejoras significativas en rendimiento, Server Components estables y nuevas capacidades como Actions para manejar formularios y mutaciones de forma optimizada. Esta guía explora los conceptos esenciales que todo desarrollador frontend debe dominar para crear aplicaciones modernas.

React divide la interfaz en componentes reutilizables, lo que facilita el mantenimiento y la escalabilidad del código. Su enfoque declarativo permite describir cómo debe verse la interfaz en cada estado, y React se encarga de actualizar el DOM de manera eficiente.

Para empezar con React para principiantes 2026, se recomienda tener conocimientos sólidos de JavaScript moderno, incluyendo funciones flecha, desestructuración, módulos import/export y promesas/async-await.

Instalación y creación de un proyecto React

La forma oficial y recomendada para iniciar un proyecto en React 19 es mediante herramientas como Vite o el nuevo create-react-app actualizado, aunque Vite ofrece mejor rendimiento en desarrollo.

Ejecuta el siguiente comando para crear una aplicación básica:

npm create vite@latest mi-app -- --template react

Luego ingresa al directorio e instala las dependencias:

cd mi-app
npm install
npm run dev

Esto inicia un servidor de desarrollo en http://localhost:5173. La estructura inicial incluye archivos clave como main.jsx y App.jsx.

Alternativamente, si prefieres la herramienta clásica:

npx create-react-app mi-app
cd mi-app
npm start

En 2026, muchos proyectos migran a Vite por su velocidad superior en hot module replacement.

Componentes en React explicados

Todo en React gira alrededor de componentes. Un componente es una función (o clase, aunque las funciones con hooks son el estándar) que retorna JSX.

Ejemplo básico de componente funcional:

function Saludo() {
    return <h1>Hola, mundo!</h1>;
}

Para usarlo en otro componente:

function App() {
    return (
        <div>
            <Saludo />
        </div>
    );
}

Los componentes pueden anidarse libremente, formando árboles que representan la interfaz. Esta modularidad promueve la reutilización y facilita las pruebas.

Sintaxis JSX y sus particularidades

JSX permite escribir markup similar a HTML dentro de JavaScript. React transpila JSX a llamadas a React.createElement.

Ejemplo simple:

const elemento = <h1>Este es un título</h1>;

Puedes incrustar expresiones JavaScript con llaves:

const nombre = "Arturo";
const saludo = <p>Hola, {nombre.toUpperCase()}!</p>;

Atributos como class se escriben como className porque class es reservado en JavaScript:

<div className="contenedor-principal">
    <img src="logo.png" alt="Logo empresa" />
</div>

JSX es estricto: todas las etiquetas deben cerrarse correctamente, o se genera un error claro.

Manejo de estado con useState hook

El hook useState permite agregar estado local a componentes funcionales. Es fundamental para interfaces dinámicas.

Ejemplo de contador básico:

import { useState } from "react";

function Contador() {
    const [conteo, setConteo] = useState(0);

    return (
        <div>
            <p>Has hecho clic {conteo} veces</p>
            <button onClick={() => setConteo(conteo + 1)}>Incrementar</button>
        </div>
    );
}

El hook retorna un array con dos elementos: el valor actual del estado y la función para actualizarlo. Nunca modifiques el estado directamente; usa siempre la setter function.

Puedes tener múltiples estados en un componente:

const [nombre, setNombre] = useState("");
const [edad, setEdad] = useState(0);

Propiedades o props entre componentes

Las props permiten pasar datos de componentes padres a hijos. Son inmutables dentro del hijo.

Ejemplo de paso de props:

function Tarjeta({ titulo, descripcion }) {
    return (
        <div className="tarjeta">
            <h2>{titulo}</h2>
            <p>{descripcion}</p>
        </div>
    );
}

function App() {
    return (
        <Tarjeta
            titulo="Aprende React"
            descripcion="Guía completa para dominar la biblioteca"
        />
    );
}

También se pueden pasar funciones como props para comunicación ascendente:

function Padre() {
    const [mensaje, setMensaje] = useState("");

    const manejarClick = (texto) => {
        setMensaje(texto);
    };

    return (
        <div>
            <Hijo onClick={manejarClick} />
            <p>Mensaje: {mensaje}</p>
        </div>
    );
}

function Hijo({ onClick }) {
    return <button onClick={() => onClick("¡Clic detectado!")}>Enviar</button>;
}

Flujo de datos unidireccional

En React, los datos fluyen de arriba hacia abajo mediante props. Los hijos pueden comunicar al padre mediante funciones pasadas como props. Este patrón mantiene la predictibilidad del estado.

Para compartir estado entre componentes lejanos, se usan Context API o librerías externas, pero para la mayoría de casos, lifting state up (elevar el estado) resuelve el problema.

Manejo de eventos del usuario

React normaliza eventos del navegador. Usa handlers como onClick, onChange, onSubmit.

Ejemplo con input controlado:

function Formulario() {
    const [valor, setValor] = useState("");

    const manejarCambio = (event) => {
        setValor(event.target.value);
    };

    return (
        <input
            type="text"
            value={valor}
            onChange={manejarCambio}
            placeholder="Escribe aquí"
        />
    );
}

Los eventos sintéticos contienen información útil y se pueden prevenir con event.preventDefault().

Efectos secundarios con useEffect

El hook useEffect maneja operaciones que ocurren fuera del flujo normal de renderizado, como fetch de datos o suscripciones.

Ejemplo básico que se ejecuta en cada render:

useEffect(() => {
    console.log("Componente renderizado");
});

Con array de dependencias vacío, se ejecuta solo al montar:

useEffect(() => {
    console.log("Componente montado");
    // fetch datos aquí
}, []);

Con dependencias específicas:

useEffect(() => {
    document.title = `Conteo: ${conteo}`;
}, [conteo]);

Limpieza (cleanup) para evitar memory leaks:

useEffect(() => {
    const timer = setInterval(() => console.log("Tick"), 1000);
    return () => clearInterval(timer);
}, []);

Renderizado condicional y listas

Muestra elementos según condiciones:

{
    esAdmin ? <PanelAdmin /> : <PanelUsuario />;
}

Para listas, usa map y asigna key única:

const items = ["React", "Hooks", "Componentes"];

<ul>
    {items.map((item) => (
        <li key={item}>{item}</li>
    ))}
</ul>;

La key ayuda a React a identificar cambios eficientemente.

Formularios y manejo avanzado

En React 19, las Actions simplifican el manejo de formularios, especialmente con Server Actions.

Ejemplo tradicional con useState:

function LoginForm() {
    const [datos, setDatos] = useState({ email: "", password: "" });

    const manejarSubmit = (e) => {
        e.preventDefault();
        console.log("Enviando:", datos);
    };

    return (
        <form onSubmit={manejarSubmit}>
            <input
                type="email"
                value={datos.email}
                onChange={(e) => setDatos({ ...datos, email: e.target.value })}
            />
            <button type="submit">Iniciar sesión</button>
        </form>
    );
}

En React 19 puedes usar form actions para envíos directos.

Conclusiones

React continúa evolucionando y en 2026 con la versión 19 ofrece herramientas potentes para construir aplicaciones web performantes y mantenibles. Dominar componentes, JSX, estado con useState, props, eventos y useEffect proporciona la base sólida necesaria para proyectos reales. Practica construyendo aplicaciones pequeñas como listas de tareas, formularios dinámicos o dashboards simples. La práctica constante y la exploración de patrones avanzados como Context y Server Components te permitirán crear interfaces modernas y escalables.