Ir a la página de inicio
Home / Posts
Compartir en Twitter
Go to Homepage

GUÍA COMPLETA PARA APRENDER REACT EN 2025

December 1, 2025

Introducción a React: Fundamentos y Configuración

React es una biblioteca de JavaScript diseñada para construir interfaces de usuario interactivas y escalables, especialmente para aplicaciones de una sola página (SPA). Desarrollada por Meta AI, su enfoque basado en componentes permite a los desarrolladores crear aplicaciones modulares y reutilizables. En 2025, React sigue siendo una de las herramientas más populares en el desarrollo web, gracias a su flexibilidad y rendimiento optimizado. Esta guía explora los conceptos esenciales de React, desde la configuración inicial hasta la creación de aplicaciones dinámicas, con ejemplos prácticos para programadores de todos los niveles.

Para comenzar con React, necesitas un entorno de desarrollo adecuado. La herramienta recomendada es crear una aplicación React con Create React App o Vite, que simplifican la configuración inicial. Asegúrate de tener Node.js y npm instalados. Ejecuta el siguiente comando para iniciar un proyecto:

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

Este comando genera una estructura básica y abre la aplicación en el navegador en http://localhost:3000. La estructura incluye carpetas como src para el código fuente y public para archivos estáticos.

mi-aplicacion/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── App.js
│   ├── index.js
│   └── App.css
├── package.json
└── README.md

Componentes: La Base de React

Los componentes son los bloques fundamentales de cualquier aplicación React. Cada componente representa una parte de la interfaz de usuario, como un botón, un formulario o una barra de navegación. Existen dos tipos principales: funcionales y de clase, aunque en 2025 los componentes funcionales son la norma debido a su simplicidad y soporte para hooks.

Un componente funcional es una función de JavaScript que devuelve JSX, una sintaxis similar a HTML que React interpreta para renderizar elementos en el DOM. Aquí tienes un ejemplo de un componente funcional básico:

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

export default Saludo;

Para usar este componente, impórtalo en otro archivo, como App.js:

import Saludo from "./Saludo";

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

export default App;

JSX permite combinar HTML y JavaScript, lo que facilita la creación de interfaces dinámicas. Por ejemplo, puedes incluir expresiones de JavaScript dentro de llaves {}:

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

export default Saludo;

Props: Comunicación Entre Componentes

Las props (propiedades) son el mecanismo de React para pasar datos de un componente padre a un hijo, haciendo que los componentes sean reutilizables. Las props son de solo lectura, lo que garantiza que los datos no se modifiquen accidentalmente dentro del componente hijo. Considera el siguiente ejemplo:

function Saludo({ nombre, edad }) {
    return (
        <div>
            <h1>¡Hola, {nombre}!</h1>
            <p>Tienes {edad} años.</p>
        </div>
    );
}

function App() {
    return <Saludo nombre="Ana" edad={25} />;
}

export default App;

En este caso, el componente Saludo recibe nombre y edad como props y las renderiza. Puedes pasar cualquier tipo de dato como prop, incluidos objetos, arreglos o funciones.

Para manejar listas, usa el método map junto con la prop key para optimizar el renderizado:

function ListaUsuarios({ usuarios }) {
    return (
        <ul>
            {usuarios.map((usuario) => (
                <li key={usuario.id}>{usuario.nombre}</li>
            ))}
        </ul>
    );
}

function App() {
    const usuarios = [
        { id: 1, nombre: "Ana" },
        { id: 2, nombre: "Luis" },
    ];
    return <ListaUsuarios usuarios={usuarios} />;
}

export default App;

La prop key ayuda a React a identificar elementos únicos, mejorando el rendimiento al actualizar el DOM.

Estado: Gestión de Datos Dinámicos

El estado permite a los componentes manejar datos que cambian con el tiempo, como entradas de formularios o contadores. En componentes funcionales, el hook useState es la herramienta principal para gestionar el estado. Aquí tienes un ejemplo de un contador:

import { useState } from "react";

function Contador() {
    const [contador, setContador] = useState(0);

    return (
        <div>
            <p>Contador: {contador}</p>
            <button onClick={() => setContador(contador + 1)}>
                Incrementar
            </button>
        </div>
    );
}

export default Contador;

El hook useState devuelve un array con dos elementos: la variable de estado (contador) y una función para actualizarla (setContador). Llamar a setContador provoca que el componente se vuelva a renderizar con el nuevo valor.

Para manejar formularios, usa el estado para rastrear los valores de los inputs:

import { useState } from "react";

function Formulario() {
    const [nombre, setNombre] = useState("");

    const manejarCambio = (e) => {
        setNombre(e.target.value);
    };

    return (
        <div>
            <input type="text" value={nombre} onChange={manejarCambio} />
            <p>Nombre: {nombre}</p>
        </div>
    );
}

export default Formulario;

Efectos: Interacciones con el Mundo Externo

El hook useEffect permite realizar efectos secundarios, como llamadas a APIs o suscripciones, después de que un componente se renderiza. Es ideal para integrar datos externos en tu aplicación. Por ejemplo, para obtener datos de una API:

import { useState, useEffect } from "react";

function ListaPosts() {
    const [posts, setPosts] = useState([]);

    useEffect(() => {
        fetch("https://jsonplaceholder.typicode.com/posts")
            .then((response) => response.json())
            .then((data) => setPosts(data));
    }, []);

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

export default ListaPosts;

El segundo argumento de useEffect, un array de dependencias ([]), indica cuándo debe ejecutarse el efecto. Un array vacío significa que el efecto se ejecuta solo una vez, al montar el componente.

Hooks Personalizados: Reutilización de Lógica

Los hooks personalizados permiten extraer lógica reutilizable de los componentes. Por ejemplo, un hook para manejar datos de una API:

import { useState, useEffect } from "react";

function useFetch(url) {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch(url)
            .then((response) => response.json())
            .then((data) => setData(data));
    }, [url]);

    return data;
}

function ListaPosts() {
    const posts = useFetch("https://jsonplaceholder.typicode.com/posts");

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

export default ListaPosts;

Este hook, useFetch, puede reutilizarse en cualquier componente que necesite datos de una API, reduciendo la duplicación de código.

Enrutamiento: Navegación en Aplicaciones SPA

Para crear aplicaciones de múltiples páginas, React Router es la biblioteca estándar en 2025. Permite manejar rutas y navegación sin recargar la página. Instálalo con:

npm install react-router-dom

Configura las rutas en tu aplicación:

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

function Inicio() {
    return <h1>Página de Inicio</h1>;
}

function Acerca() {
    return <h1>Acerca de Nosotros</h1>;
}

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Inicio />} />
                <Route path="/acerca" element={<Acerca />} />
            </Routes>
        </BrowserRouter>
    );
}

export default App;

Añade enlaces para navegar entre páginas:

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

function Inicio() {
    return <h1>Página de Inicio</h1>;
}

function Acerca() {
    return <h1>Acerca de Nosotros</h1>;
}

function App() {
    return (
        <BrowserRouter>
            <nav>
                <Link to="/">Inicio</Link> | <Link to="/acerca">Acerca</Link>
            </nav>
            <Routes>
                <Route path="/" element={<Inicio />} />
                <Route path="/acerca" element={<Acerca />} />
            </Routes>
        </BrowserRouter>
    );
}

export default App;

React Router mejora la experiencia de usuario al permitir una navegación fluida en aplicaciones SPA.

Estilos: Personalización de la Interfaz

React soporta varias formas de aplicar estilos, como CSS puro, módulos CSS y bibliotecas como Tailwind CSS. Para usar CSS puro, importa un archivo CSS en tu componente:

import "./Estilos.css";

function Boton() {
    return <button className="boton-personalizado">Clic Aquí</button>;
}

export default Boton;

/* Estilos.css */
.boton-personalizado {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
}

Los módulos CSS ofrecen un enfoque más modular, evitando conflictos de nombres:

import styles from "./Boton.module.css";

function Boton() {
    return <button className={styles.boton}>Clic Aquí</button>;
}

export default Boton;

/* Boton.module.css */
.boton {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
}

Tailwind CSS es otra opción popular en 2025, ya que permite aplicar estilos directamente en el JSX:

function Boton() {
    return (
        <button className="bg-blue-500 text-white py-2 px-4 rounded">
            Clic Aquí
        </button>
    );
}

export default Boton;

Manejo de Formularios Avanzado

Los formularios complejos requieren un manejo cuidadoso del estado. Usa múltiples estados o un objeto para rastrear varios campos:

import { useState } from "react";

function FormularioRegistro() {
    const [formulario, setFormulario] = useState({
        nombre: "",
        email: "",
    });

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

    const manejarEnvio = (e) => {
        e.preventDefault();
        console.log(formulario);
    };

    return (
        <form onSubmit={manejarEnvio}>
            <input
                type="text"
                name="nombre"
                value={formulario.nombre}
                onChange={manejarCambio}
                placeholder="Nombre"
            />
            <input
                type="email"
                name="email"
                value={formulario.email}
                onChange={manejarCambio}
                placeholder="Email"
            />
            <button type="submit">Enviar</button>
        </form>
    );
}

export default FormularioRegistro;

Este formulario usa un objeto para manejar múltiples campos, actualizando el estado dinámicamente con el operador spread (...).

Optimización del Rendimiento

React es rápido, pero las aplicaciones grandes pueden volverse lentas si no se optimizan. Usa el hook useMemo para memorizar cálculos costosos:

import { useState, useMemo } from "react";

function ListaFiltrada({ elementos }) {
    const [filtro, setFiltro] = useState("");

    const elementosFiltrados = useMemo(() => {
        return elementos.filter((elemento) =>
            elemento.toLowerCase().includes(filtro.toLowerCase())
        );
    }, [elementos, filtro]);

    return (
        <div>
            <input
                type="text"
                value={filtro}
                onChange={(e) => setFiltro(e.target.value)}
                placeholder="Filtrar elementos"
            />
            <ul>
                {elementosFiltrados.map((elemento, index) => (
                    <li key={index}>{elemento}</li>
                ))}
            </ul>
        </div>
    );
}

export default ListaFiltrada;

El hook useCallback es útil para memorizar funciones y evitar renders innecesarios en componentes hijos:

import { useState, useCallback } from "react";

function ContadorHijo({ incrementar }) {
    return <button onClick={incrementar}>Incrementar</button>;
}

function ContadorPadre() {
    const [contador, setContador] = useState(0);

    const incrementar = useCallback(() => {
        setContador((prev) => prev + 1);
    }, []);

    return (
        <div>
            <p>Contador: {contador}</p>
            <ContadorHijo incrementar={incrementar} />
        </div>
    );
}

export default ContadorPadre;

Conclusiones

React sigue siendo una herramienta poderosa y versátil en 2025 para construir interfaces de usuario modernas. Su enfoque basado en componentes, combinado con hooks y bibliotecas como React Router, permite a los desarrolladores crear aplicaciones dinámicas y escalables con relativa facilidad. Desde la configuración inicial hasta la optimización del rendimiento, esta guía ha cubierto los fundamentos esenciales, proporcionando ejemplos prácticos para ayudarte a dominar React. Continúa explorando conceptos avanzados, como Redux para la gestión global del estado o Next.js para aplicaciones renderizadas en el servidor, para llevar tus habilidades al siguiente nivel.