GUÍA COMPLETA PARA APRENDER REACT EN 2025
Introducción a React para Principiantes
React es una biblioteca de JavaScript ampliamente utilizada para construir interfaces de usuario interactivas y escalables. Diseñada por Facebook, permite a los desarrolladores crear aplicaciones web modernas dividiendo la interfaz en componentes reutilizables. En esta guía, exploraremos los fundamentos de React, desde la configuración inicial hasta conceptos avanzados como hooks y gestión de estado, con ejemplos prácticos que facilitarán tu aprendizaje. Si eres nuevo en la programación o buscas dominar el desarrollo frontend, esta guía te proporcionará una base sólida para trabajar con React en 2025.
Antes de comenzar, es útil tener conocimientos básicos de HTML, CSS y JavaScript. Aunque no es obligatorio ser un experto, entender conceptos como funciones, objetos y el DOM te ayudará a asimilar los temas. React se basa en JavaScript, por lo que dedicar tiempo a reforzar estas habilidades puede marcar la diferencia.
Configuración del Entorno de Desarrollo
Para empezar a trabajar con React, necesitas configurar un entorno de desarrollo adecuado. La forma más sencilla es usar Vite, una herramienta moderna que genera proyectos de React rápidamente. Sigue estos pasos para crear una nueva aplicación:
- Asegúrate de tener Node.js instalado (versión 18 o superior).
- Abre una terminal y ejecuta el siguiente comando para crear un proyecto con Vite:
npm create vite@latest mi-aplicacion -- --template react
- Navega al directorio del proyecto e instala las dependencias:
cd mi-aplicacion
npm install
- Inicia el servidor de desarrollo:
npm run dev
Esto abrirá tu aplicación en http://localhost:5173. La estructura inicial del proyecto será similar a esta:
mi-aplicacion/
├── public/
│ ├── index.html
│ └── favicon.ico
├── src/
│ ├── App.jsx
│ ├── index.css
│ ├── main.jsx
│ └── assets/
│ └── react.svg
├── package.json
└── vite.config.js
El archivo index.html es el punto de entrada, mientras que src/main.jsx renderiza el componente principal App.jsx en el DOM. Puedes modificar App.jsx para comenzar a construir tu aplicación.
Componentes: Los Bloques Fundamentales
Los componentes son la base de cualquier aplicación React. Cada componente representa una parte de la interfaz, como un botón, un formulario o una barra de navegación. En 2025, los componentes funcionales son el estándar debido a su simplicidad y compatibilidad con hooks.
Un componente funcional es una función de JavaScript que devuelve JSX, una sintaxis similar a HTML que React utiliza para renderizar elementos. Aquí hay un ejemplo básico:
function Saludo() {
return <h1>Hola, mundo!</h1>;
}
export default Saludo;
Para usar este componente, impórtalo en App.jsx:
import Saludo from "./Saludo";
function App() {
return (
<div>
<Saludo />
</div>
);
}
export default App;
En este ejemplo, el componente Saludo se renderiza dentro de App. JSX permite combinar HTML y JavaScript, haciendo el código más intuitivo. Por ejemplo, puedes incluir expresiones de JavaScript dentro de llaves {}:
function Saludo({ nombre }) {
return <h1>Hola, {nombre}!</h1>;
}
export default Saludo;
Y en App.jsx:
import Saludo from "./Saludo";
function App() {
return (
<div>
<Saludo nombre="Desarrollador" />
</div>
);
}
export default App;
El componente recibe nombre como una prop, un mecanismo para pasar datos a los componentes.
Props: Comunicación entre Componentes
Las props (propiedades) permiten a los componentes ser dinámicos y reutilizables. Son datos que un componente padre pasa a un componente hijo. En el ejemplo anterior, nombre es una prop que personaliza el mensaje del componente Saludo.
Las props pueden ser cualquier tipo de dato: cadenas, números, objetos o funciones. Aquí hay un ejemplo más complejo:
function Tarjeta({ titulo, descripcion }) {
return (
<div>
<h2>{titulo}</h2>
<p>{descripcion}</p>
</div>
);
}
export default Tarjeta;
Uso en App.jsx:
import Tarjeta from "./Tarjeta";
function App() {
return (
<div>
<Tarjeta
titulo="Bienvenido a React"
descripcion="Aprende a construir interfaces modernas."
/>
<Tarjeta
titulo="Hooks en 2025"
descripcion="Domina la gestión de estado con hooks."
/>
</div>
);
}
export default App;
Las props hacen que los componentes sean flexibles, permitiendo reutilizar el mismo componente con diferentes datos.
Estado: Añadiendo Interactividad
El estado permite a los componentes reaccionar a las interacciones del usuario, como clics o entradas de texto. En componentes funcionales, el estado se gestiona con el hook useState. Este hook devuelve un valor de estado y una función para actualizarlo.
Aquí hay un ejemplo de un contador:
import { useState } from "react";
function Contador() {
const [count, setCount] = useState(0);
return (
<div>
<p>Conteo: {count}</p>
<button onClick={() => setCount(count + 1)}>Incrementar</button>
</div>
);
}
export default Contador;
En este código:
useState(0)inicializa el estadocounten 0.setCountactualiza el estado, lo que provoca que el componente se vuelva a renderizar.- El evento
onClickejecuta la función para incrementarcount.
El hook useState es fundamental para añadir interactividad, como formularios o botones dinámicos.
Efectos: Sincronización con Sistemas Externos
Algunas aplicaciones necesitan interactuar con sistemas externos, como APIs o el almacenamiento del navegador. El hook useEffect permite ejecutar código en respuesta a cambios en el estado o las props.
Por ejemplo, para obtener datos de una API al cargar un componente:
import { useState, useEffect } from "react";
function ListaUsuarios() {
const [usuarios, setUsuarios] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/users")
.then((response) => response.json())
.then((data) => setUsuarios(data));
}, []);
return (
<ul>
{usuarios.map((usuario) => (
<li key={usuario.id}>{usuario.name}</li>
))}
</ul>
);
}
export default ListaUsuarios;
En este ejemplo:
useEffectejecuta la llamada a la API cuando el componente se monta.- El array vacío
[]asegura que el efecto se ejecute solo una vez. - Los datos obtenidos se almacenan en el estado
usuariosy se renderizan como una lista.
El hook useEffect es esencial para manejar efectos secundarios, como suscripciones o actualizaciones del DOM.
Listas y Claves: Renderizado Dinámico
A menudo, necesitas renderizar listas de elementos, como los usuarios en el ejemplo anterior. React requiere que cada elemento de una lista tenga una prop key única para optimizar el renderizado.
Aquí hay un ejemplo con una lista de productos:
function ListaProductos() {
const productos = [
{ id: 1, nombre: "Manzana", esFruta: true },
{ id: 2, nombre: "Zanahoria", esFruta: false },
{ id: 3, nombre: "Plátano", esFruta: true },
];
return (
<ul>
{productos.map((producto) => (
<li
key={producto.id}
style={{ color: producto.esFruta ? "green" : "orange" }}
>
{producto.nombre}
</li>
))}
</ul>
);
}
export default ListaProductos;
La prop key ayuda a React a identificar qué elementos han cambiado, mejorando el rendimiento. Usa siempre un identificador único, como un ID, para las claves.
Manejo de Eventos
React permite manejar eventos del usuario, como clics o cambios en formularios, mediante controladores de eventos. Los nombres de los eventos en React usan camelCase (por ejemplo, onClick en lugar de onclick).
Aquí hay un ejemplo de un formulario controlado:
import { useState } from "react";
function Formulario() {
const [nombre, setNombre] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
alert(`Nombre ingresado: ${nombre}`);
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={nombre}
onChange={(e) => setNombre(e.target.value)}
placeholder="Ingresa tu nombre"
/>
<button type="submit">Enviar</button>
</form>
);
}
export default Formulario;
En este código:
onChangeactualiza el estadonombrecada vez que el usuario escribe.onSubmitmaneja el envío del formulario, mostrando una alerta con el valor ingresado.e.preventDefault()evita que la página se recargue al enviar el formulario.
El manejo de eventos en React es intuitivo y se integra fácilmente con el estado.
Estilos en React
Existen varias formas de aplicar estilos en React. Puedes usar CSS tradicional, módulos CSS o bibliotecas como Tailwind CSS. Aquí exploraremos dos enfoques comunes: estilos en línea y módulos CSS.
Estilos en Línea
Los estilos en línea se aplican directamente en los elementos JSX usando la prop style. El valor de style es un objeto JavaScript donde las propiedades CSS se escriben en camelCase:
function Boton() {
return (
<button
style={{
backgroundColor: "#007bff",
color: "white",
padding: "10px 20px",
border: "none",
borderRadius: "5px",
}}
>
Clic Aquí
</button>
);
}
export default Boton;
Los estilos en línea son útiles para casos simples, pero pueden volverse difíciles de mantener en aplicaciones grandes.
Módulos CSS
Los módulos CSS permiten escribir estilos en archivos separados con un alcance local, evitando conflictos de nombres. Crea un archivo Boton.module.css:
.boton {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
}
Luego, importa y usa el módulo en tu componente:
import styles from "./Boton.module.css";
function Boton() {
return <button className={styles.boton}>Clic Aquí</button>;
}
export default Boton;
Los módulos CSS son ideales para proyectos grandes, ya que mantienen los estilos organizados y reutilizables.
Rutas: Navegación en Aplicaciones
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 App.jsx:
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;
En este ejemplo:
BrowserRouterenvuelve la aplicación para habilitar el enrutamiento.Routescontiene las definiciones de las rutas.Routeasocia una URL con un componente.
Puedes añadir un componente de navegación:
import { Link } from "react-router-dom";
function BarraNavegacion() {
return (
<nav>
<Link to="/">Inicio</Link> | <Link to="/acerca">Acerca</Link>
</nav>
);
}
Incluye BarraNavegacion en App.jsx para que aparezca en todas las páginas.
Gestión de Estado Avanzada
A medida que las aplicaciones crecen, gestionar el estado globalmente se vuelve necesario. En 2025, bibliotecas como Zustand y el Context API son populares para manejar el estado sin la complejidad de Redux.
Context API
El Context API permite compartir datos entre componentes sin pasar props manualmente. Aquí hay un ejemplo para gestionar un tema claro/oscuro:
import { createContext, useContext, useState } from "react";
const TemaContext = createContext();
function TemaProvider({ children }) {
const [tema, setTema] = useState("claro");
const toggleTema = () => {
setTema(tema === "claro" ? "oscuro" : "claro");
};
return (
<TemaContext.Provider value={{ tema, toggleTema }}>
{children}
</TemaContext.Provider>
);
}
function BotonTema() {
const { tema, toggleTema } = useContext(TemaContext);
return (
<button onClick={toggleTema}>
Cambiar a {tema === "claro" ? "oscuro" : "claro"}
</button>
);
}
function App() {
return (
<TemaProvider>
<BotonTema />
</TemaProvider>
);
}
export default App;
El Context API es ideal para estados globales simples, como temas o autenticación.
Zustand
Para aplicaciones más complejas, Zustand ofrece una solución ligera. Instálalo con:
npm install zustand
Crea un almacén de estado:
import { create } from "zustand";
const useContadorStore = create((set) => ({
count: 0,
incrementar: () => set((state) => ({ count: state.count + 1 })),
decrementar: () => set((state) => ({ count: state.count - 1 })),
}));
Úsalo en un componente:
import { useContadorStore } from "./contadorStore";
function Contador() {
const { count, incrementar, decrementar } = useContadorStore();
return (
<div>
<p>Conteo: {count}</p>
<button onClick={incrementar}>Incrementar</button>
<button onClick={decrementar}>Decrementar</button>
</div>
);
}
export default Contador;
Zustand simplifica la gestión de estado global con una API minimalista.
Obtención de Datos con TanStack Query
Obtener datos de APIs es una tarea común en aplicaciones React. TanStack Query es una biblioteca poderosa para manejar consultas y caché. Instálala con:
npm install @tanstack/react-query
Configura un proveedor de consultas en main.jsx:
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import App from "./App";
const queryClient = new QueryClient();
function Root() {
return (
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>
);
}
export default Root;
Usa TanStack Query para obtener datos:
import { useQuery } from "@tanstack/react-query";
function ListaPosts() {
const { data, isLoading, error } = useQuery({
queryKey: ["posts"],
queryFn: () =>
fetch("https://jsonplaceholder.typicode.com/posts").then((res) =>
res.json()
),
});
if (isLoading) return <p>Cargando...</p>;
if (error) return <p>Error: {error.message}</p>;
return (
<ul>
{data.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}
export default ListaPosts;
TanStack Query maneja el estado de la consulta (cargando, error, datos) y optimiza las solicitudes con caché.
Conclusiones
React sigue siendo una de las bibliotecas más populares para el desarrollo frontend en 2025, gracias a su flexibilidad y ecosistema robusto. Esta guía ha cubierto los fundamentos, desde la configuración de un proyecto hasta la gestión de estado y la obtención de datos. Con componentes funcionales, hooks y herramientas modernas como Vite, React Router y TanStack Query, puedes construir aplicaciones escalables y eficientes. Practica creando proyectos pequeños, explora la documentación oficial y experimenta con las bibliotecas mencionadas para consolidar tu aprendizaje. React no es estático; evoluciona con la web, así que mantente curioso y sigue aprendiendo.
