Ejercicios Basicos

1. Hola Mundo en React

  • Crea un componente que simplemente muestre «¡Hola Mundo!» en el navegador.

2. Componente con Props

  • Diseña un componente que acepte name como prop y muestre «Hola, [name]».

3. Lista de Elementos

  • Renderiza una lista de nombres desde un array usando el método .map() en un componente.

4. Estado y Eventos

  • Crea un componente con un botón que al hacer clic cambie el texto de «No clickeado» a «Clickeado».

5. Contador

  • Desarrolla un componente que tenga un botón y un display numérico. Cada vez que se presione el botón, incrementa el valor en el display.

6. Componente de Formulario

  • Implementa un componente que contenga un input de texto y muestre en tiempo real lo que escribes en él.

7. Componente de Búsqueda

  • Crea un componente con un input de búsqueda que filtre elementos de una lista mostrando solo aquellos que coinciden con la entrada.

8. Toggle Component

  • Diseña un componente que al hacer clic en un botón alterne entre dos estados (por ejemplo, True/False, On/Off).

9. Componente con Estilos Condicionales

  • Implementa un componente donde el color del texto cambie basándose en un estado (por ejemplo, rojo para «error» y verde para «correcto»).

10. Componente Tab

  • Crea un componente que tenga múltiples tabs y permita cambiar entre diferentes vistas o contenidos al hacer clic en cada tab.

11. Cronómetro Simple

  • Construye un componente que actúe como un cronómetro, con botones para iniciar, detener y resetear.

12. API Fetch con useEffect

  • Utiliza useEffect para hacer una solicitud a una API pública (como la API de JSONPlaceholder) y muestra los datos en la pantalla.

13. Infinito Scroll

  • Implementa un componente que carga más datos de una API cuando el usuario llega al final de la página.

14. Componente Modal

  • Diseña un componente modal que se abra con un botón y se pueda cerrar.

15. Uso de useRef

  • Crea un componente que use useRef para enfocar un input cuando se monta el componente.

16. Context API

  • Implementa un tema oscuro/claro usando Context API que cambie los colores de fondo y texto de tu aplicación.

17. Reducer para Manejo de Estado

  • Usa useReducer para manejar el estado de un formulario con múltiples campos de entrada.

18. Validación de Formulario

  • Desarrolla un formulario con validación en tiempo real que muestre mensajes de error cuando la entrada no sea válida.

19. Componente de Acordeón

  • Crea un componente de acordeón que expanda y colapse secciones de contenido cuando se haga clic en ellos.

20. Rutas con React Router

  • Configura React Router para una aplicación que tenga al menos tres páginas navegables.