7 PROYECTOS REACT PARA PRINCIPIANTES EN 2025
Introducción a los Proyectos React para Principiantes
React es una de las bibliotecas de JavaScript más populares para construir interfaces de usuario dinámicas e interactivas. En 2025, aprender React desde cero sigue siendo una habilidad valiosa para cualquier desarrollador web. Este tutorial presenta siete proyectos prácticos diseñados para principiantes que desean dominar los fundamentos de React utilizando solo la biblioteca principal, sin depender de frameworks de CSS o bibliotecas externas. Cada proyecto se enfoca en conceptos clave como el manejo de estados, eventos, y la interacción con APIs, ofreciendo ejemplos de código claros y aplicables. Estos proyectos son ideales para quienes buscan desarrollar habilidades prácticas mientras crean aplicaciones funcionales y atractivas.
Carrusel de Imágenes
Un carrusel de imágenes es un proyecto ideal para aprender a manejar el estado en React. Este componente permite a los usuarios navegar entre imágenes usando botones de avance y retroceso. El objetivo es almacenar las imágenes en un arreglo y usar el hook useState para gestionar la imagen actual. Cuando el usuario llega al final del arreglo, el carrusel debe volver al inicio, creando un ciclo continuo. También se puede mejorar con transiciones CSS para animar los cambios de imagen.
Para construir el carrusel, crea un componente que almacene un arreglo de URLs de imágenes. Usa useState para rastrear el índice de la imagen actual. Los botones de navegación actualizarán este índice, asegurándote de manejar los límites del arreglo para evitar errores. Por ejemplo, si el índice supera el tamaño del arreglo, vuelve a cero.
import { useState } from "react";
const Carousel = () => {
const images = ["img1.jpg", "img2.jpg", "img3.jpg"];
const [currentIndex, setCurrentIndex] = useState(0);
const nextImage = () => {
setCurrentIndex((prevIndex) =>
prevIndex === images.length - 1 ? 0 : prevIndex + 1
);
};
const prevImage = () => {
setCurrentIndex((prevIndex) =>
prevIndex === 0 ? images.length - 1 : prevIndex - 1
);
};
return (
<div>
<img src={images[currentIndex]} alt="carousel" />
<button onClick={prevImage}>Anterior</button>
<button onClick={nextImage}>Siguiente</button>
</div>
);
};
export default Carousel;
Los conceptos clave incluyen el uso de useState para manejar el estado, condicionales ternarios para la lógica de navegación y el método .map() para renderizar listas de imágenes, asegurándote de asignar una clave única a cada elemento.
Acordeón de Preguntas Frecuentes
Un acordeón es un componente interactivo que permite mostrar u ocultar contenido al hacer clic en un encabezado. Este proyecto es perfecto para aprender a manejar estados booleanos y renderizado condicional. Construirás una sección de preguntas frecuentes (FAQ) con múltiples acordeones, cada uno mostrando una pregunta y su respuesta al activarse.
El componente debe usar useState para alternar el estado de abierto/cerrado de cada acordeón. Usa el operador lógico && para mostrar el contenido solo cuando el acordeón esté abierto. Para crear múltiples acordeones, pasa los datos de cada pregunta como props y usa .map() para renderizarlos.
import { useState } from "react";
const Accordion = ({ title, content }) => {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<h3 onClick={() => setIsOpen(!isOpen)}>{title}</h3>
{isOpen && <p>{content}</p>}
</div>
);
};
const FAQ = () => {
const faqs = [
{
title: "¿Qué es React?",
content: "React es una biblioteca de JavaScript.",
},
{ title: "¿Por qué usar React?", content: "Es rápido y modular." },
];
return (
<div>
{faqs.map((faq, index) => (
<Accordion
key={index}
title={faq.title}
content={faq.content}
/>
))}
</div>
);
};
export default FAQ;
Aprenderás a manejar estados booleanos con useState, usar condicionales para el renderizado y pasar datos a través de props, además de renderizar listas dinámicas con .map().
Generador de Citas
El generador de citas introduce el uso de APIs externas y el hook useEffect para realizar solicitudes HTTP. Este proyecto consiste en obtener citas aleatorias de una API pública y mostrarlas en la interfaz, con un botón para generar una nueva cita.
Usa useEffect para realizar una solicitud al cargar el componente, almacenando las citas en un estado local. Selecciona una cita aleatoria del arreglo y actualiza el estado cuando el usuario presiona el botón “Nueva Cita”. Implementa el operador de encadenamiento opcional (?.) para evitar errores si los datos aún no están disponibles.
import { useState, useEffect } from "react";
const QuoteGenerator = () => {
const [quotes, setQuotes] = useState([]);
const [quote, setQuote] = useState(null);
useEffect(() => {
fetch("https://api.quotable.io/quotes")
.then((res) => res.json())
.then((data) => setQuotes(data.results));
}, []);
const getRandomQuote = () => {
const randomIndex = Math.floor(Math.random() * quotes.length);
setQuote(quotes[randomIndex]);
};
return (
<div>
<p>{quote?.content || "Cargando..."}</p>
<button onClick={getRandomQuote}>Nueva Cita</button>
</div>
);
};
export default QuoteGenerator;
Este proyecto enseña el uso de useEffect para efectos secundarios, solicitudes HTTP con la Fetch API y el operador de encadenamiento opcional para un manejo seguro de datos.
Lista de Compras
Una lista de compras permite a los usuarios agregar y eliminar ítems, lo que te ayudará a aprender a manipular arreglos en el estado. Este proyecto incluye un formulario para agregar ítems y botones para eliminarlos, con una funcionalidad opcional para tachar ítems completados.
Usa useState para almacenar la lista de ítems. Agrega nuevos ítems con el operador spread (...) y elimina ítems usando el método filter. Captura los valores del formulario con el evento onSubmit. Para mejorar el proyecto, implementa una funcionalidad de doble clic para tachar ítems.
import { useState } from "react";
const ShoppingList = () => {
const [items, setItems] = useState([]);
const [input, setInput] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
if (input) {
setItems([...items, { text: input, completed: false }]);
setInput("");
}
};
const removeItem = (index) => {
setItems(items.filter((_, i) => i !== index));
};
const toggleComplete = (index) => {
setItems(
items.map((item, i) =>
i === index ? { ...item, completed: !item.completed } : item
)
);
};
return (
<div>
<form onSubmit={handleSubmit}>
<input
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="Añadir ítem"
/>
<button type="submit">Agregar</button>
</form>
<ul>
{items.map((item, index) => (
<li
key={index}
onDoubleClick={() => toggleComplete(index)}
style={{
textDecoration: item.completed
? "line-through"
: "none",
}}
>
{item.text}
<button onClick={() => removeItem(index)}>
Eliminar
</button>
</li>
))}
</ul>
</div>
);
};
export default ShoppingList;
Aprenderás a actualizar listas con useState, usar el operador spread y el método filter, y manejar formularios con el evento onSubmit.
Buscador de Usuarios de GitHub
Este proyecto implica crear un buscador que consulta la API de GitHub para encontrar usuarios según su nombre de usuario o correo. Es ideal para practicar solicitudes HTTP dinámicas basadas en la entrada del usuario.
Almacena el valor del input en un estado llamado query. Usa la Fetch API para consultar la API de GitHub con el valor de query. Muestra los resultados, como el nombre, avatar y enlace al perfil del usuario. Para mejorar, implementa una búsqueda en tiempo real con una función de debounce para evitar excesivas solicitudes.
import { useState } from "react";
const GitHubSearch = () => {
const [query, setQuery] = useState("");
const [results, setResults] = useState([]);
const handleSearch = async (e) => {
e.preventDefault();
if (query) {
const res = await fetch(
`https://api.github.com/search/users?q=${query}`
);
const data = await res.json();
setResults(data.items);
}
};
return (
<div>
<form onSubmit={handleSearch}>
<input
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Buscar usuario"
/>
<button type="submit">Buscar</button>
</form>
<ul>
{results.map((user) => (
<li key={user.id}>
<img
src={user.avatar_url}
alt={user.login}
width="50"
/>
<a href={user.html_url}>{user.login}</a>
</li>
))}
</ul>
</div>
);
};
export default GitHubSearch;
Aprenderás a manejar formularios, realizar solicitudes HTTP dinámicas y mostrar datos de APIs externas.
Reproductor de Video
Este proyecto te enseña a trabajar con el elemento de video HTML y a levantar el estado en React. Los usuarios podrán cambiar entre diferentes videos usando un menú de selección con entradas de tipo radio.
Crea dos componentes: uno para el menú de selección y otro para el reproductor de video. Pasa funciones como props para actualizar el estado del video seleccionado desde el componente hijo. Para mejorar, agrega controles como reproducción automática o bucle.
import { useState } from "react";
const VideoPlayer = ({ src }) => {
return <video src={src} controls width="400" />;
};
const VideoMenu = ({ videos, onSelect }) => {
return (
<div>
{videos.map((video, index) => (
<label key={index}>
<input
type="radio"
name="video"
onChange={() => onSelect(video)}
/>
{video.name}
</label>
))}
</div>
);
};
const VideoApp = () => {
const videos = [
{ name: "Video 1", src: "video1.mp4" },
{ name: "Video 2", src: "video2.mp4" },
];
const [selectedVideo, setSelectedVideo] = useState(videos[0].src);
return (
<div>
<VideoMenu
videos={videos}
onSelect={(video) => setSelectedVideo(video.src)}
/>
<VideoPlayer src={selectedVideo} />
</div>
);
};
export default VideoApp;
Este proyecto cubre el uso de entradas de tipo radio, el paso de funciones como props y el patrón de levantar el estado.
Calculadora de IMC
Una calculadora de índice de masa corporal (IMC) permite a los usuarios introducir su peso y altura para calcular su IMC instantáneamente. Este proyecto utiliza el hook useMemo para realizar cálculos de manera eficiente.
Usa entradas de tipo rango para capturar peso y altura, almacenándolos en estados separados. Calcula el IMC usando la fórmula peso / (altura * altura) y usa useMemo para actualizar el cálculo solo cuando cambien los valores de entrada.
import { useState, useMemo } from "react";
const BMICalculator = () => {
const [weight, setWeight] = useState(70);
const [height, setHeight] = useState(1.7);
const bmi = useMemo(() => {
return (weight / (height * height)).toFixed(2);
}, [weight, height]);
return (
<div>
<label>
Peso (kg):
<input
type="range"
min="30"
max="150"
value={weight}
onChange={(e) => setWeight(Number(e.target.value))}
/>
{weight} kg
</label>
<label>
Altura (m):
<input
type="range"
min="1"
max="2.5"
step="0.01"
value={height}
onChange={(e) => setHeight(Number(e.target.value))}
/>
{height} m
</label>
<p>Tu IMC es: {bmi}</p>
</div>
);
};
export default BMICalculator;
Aprenderás a usar entradas de rango, realizar cálculos eficientes con useMemo y actualizar la interfaz en tiempo real.
Conclusiones
Estos siete proyectos proporcionan una base sólida para aprender React en 2025. Cada uno se centra en conceptos esenciales como el manejo de estados con useState y useEffect, el renderizado condicional, las solicitudes HTTP y el paso de props. Al construir estos proyectos, los principiantes pueden desarrollar habilidades prácticas mientras crean aplicaciones funcionales. Comienza con el carrusel o el acordeón para dominar los fundamentos, y avanza hacia proyectos como el buscador de GitHub o la calculadora de IMC para explorar conceptos más avanzados. Con práctica constante, estarás preparado para abordar proyectos React más complejos.
