Ejercicios de React + TypeScript
20 ejercicios de práctica progresivos con React + TypeScript.
Ejercicios Fáciles (10 ejercicios)
1. Card de saludo personalizado
Crea un componente que reciba un nombre de usuario por props y muestre un mensaje de bienvenida personalizado dentro de una tarjeta.
2. Contador de likes interactivo
Desarrolla una tarjeta de post con un botón de "like" que incremente un contador cada vez que se haga clic.
3. Input controlado con preview
Implementa una tarjeta que contenga un input para escribir comentarios y muestre en tiempo real lo que se está escribiendo debajo del input.
4. Grid de mascotas
Renderiza un listado de mascotas en formato de grid usando tarjetas. Cada tarjeta debe mostrar el nombre y tipo de animal.
5. Toggle de información de perfil
Crea una tarjeta de perfil con un botón que permita mostrar u ocultar la información del usuario.
6. Indicador de estado de conexión
Desarrolla una tarjeta que muestre si un usuario está conectado o desconectado, con un botón para cambiar entre estados.
7. Formulario de registro básico
Implementa un formulario con campos de nombre y correo electrónico que muestre los datos ingresados en tiempo real debajo de los inputs.
8. Reloj digital en vivo
Crea un componente que muestre la hora actual y se actualice automáticamente cada segundo.
9. Lista de productos para carrito
Renderiza una lista de productos en tarjetas, cada una con un botón "Agregar al carrito" que simule la acción.
10. Buscador de usuarios
Implementa un input de búsqueda que filtre y muestre usuarios en tarjetas basándose en lo que se escriba.
Ejercios Normales (10 ejercicios)
11. Sistema de tema claro/oscuro
Desarrolla un toggle que cambie entre modo claro y oscuro en toda la aplicación, modificando los estilos globalmente.
12. Selector de cantidad de producto
Crea una tarjeta de producto con botones de incrementar y decrementar cantidad, mostrando el número actual.
13. Sistema de comentarios en posts
Implementa un post que permita agregar comentarios mediante un input y mostrar todos los comentarios agregados en una lista.
14. Dropdown de categorías
Desarrolla un selector dropdown que permita elegir entre diferentes categorías y muestre la selección actual.
15. Control de tamaño de texto
Crea una tarjeta con texto que tenga botones para aumentar y disminuir el tamaño de la fuente dinámicamente.
16. Catálogo de productos completo
Implementa un grid de productos donde cada tarjeta muestre nombre, precio y botón de compra con funcionalidad simulada.
17. Botón de seguir/dejar de seguir
Desarrolla una tarjeta de perfil de usuario con un botón que alterne entre "Seguir" y "Siguiendo".
18. Feed de posts con carga simulada
Crea un componente que simule la carga de posts desde una API usando useEffect con timeout.
19. Carrito de compras con total
Implementa un sistema donde se puedan agregar productos a un carrito y se calcule automáticamente el precio total.
20. Lista de tareas con filtros
Implementa un gestor de tareas donde puedas agregar, marcar como completadas y filtrar entre "Todas", "Pendientes" y "Completadas".