Este repositorio contiene mi proceso de aprendizaje de React, que se basa en los cursos Aprenda React e Introduction to React Router impartidos por Bob Ziroll. Aquí documentaré mi progreso, proyectos y notas clave relacionadas con React y React Router.
React es una biblioteca de JavaScript ampliamente utilizada para construir interfaces de usuario interactivas y dinámicas. Este repositorio es un registro de mi viaje para dominar React.
Aquí se encuentran los proyectos que he desarrollado como parte de mi aprendizaje de React:
-
Primeros pasos - Toma de contacto con React y páginas básicas. Puedes consultar mi tarjeta de visita digital creada como resultado de esta parte.
-
Clon de experiencias Airbnb - Clon de la página de experiencias de Airbnb para el aprendizaje de manejo de datos con React. Puedes consultar el diario de viaje creado como resultado de esta parte, donde los datos se renderizan de manera dinámica en la página basándose en un arreglo de datos.
-
Generador de memes - Página de generación de memes para el aprendizaje de páginas web interactivas. Puedes consultar el generador de memes creado como resultado de esta parte, donde es usada la API de Imgflig para obtener las imágenes y el texto se agrega de manera dinámica en la parte superior e inferior de la imagen.
-
Proyectos de Práctica - En esta etapa final del curso, se han desarrollado proyectos que permiten aplicar los conocimientos previamente adquiridos.
- WebApp de Notas: Una aplicación web que permite almacenar y organizar notas en una base de datos de Google Firebase. Las notas se ordenan automáticamente según la fecha de modificación.
- Juego de Tenzies: Un emocionante juego en el que el objetivo es igualar las caras de los 10 dados en el menor tiempo posible. El juego registra el tiempo de juego, el número de movimientos y el mejor tiempo, este último en el almacenamiento local. Si logras una nueva marca, se actualizará automáticamente.
-
Proyecto final Quizzical: Un emocionante juego de preguntas que pondrá a prueba tus conocimientos y tu agudeza mental. Quizzical obtiene preguntas de diversas categorías y niveles de dificultad a través de la API de Open Trivia Database. Estas preguntas, junto con sus opciones de respuesta, se presentan de manera aleatoria en un desafío interactivo.
-
Funciones Destacadas:
- Diversidad de Preguntas: Quizzical ofrece una amplia variedad de preguntas que abarcan numerosas categorías y niveles de dificultad, proporcionando desafíos para jugadores de todos los niveles.
- Aleatoriedad Inteligente: Las opciones de respuesta se ordenan aleatoriamente en cada pregunta, lo que garantiza que la respuesta correcta no ocupe siempre la misma posición.
- Comprobación de Respuestas: Una vez respondidas todas las preguntas, Quizzical verifica tus respuestas, indicando cuántas fueron correctas e incorrectas. También resalta la respuesta correcta en caso de errores.
- Nuevo Juego: Si deseas volver a probar tu suerte, Quizzical te permite iniciar un nuevo juego en cualquier momento, reiniciando el desafío.
-
Cómo Jugar:
- Ingresa al sitio web de Quizzical.
- Selecciona una dificultad y comienza a responder preguntas de diferentes categorías.
- Una vez respondidas todas las preguntas, Quizzical comprobará tus respuestas y te mostrará tus resultados.
- Si lo deseas, puedes iniciar un nuevo juego para otro emocionante desafío.
-
Tecnologías Utilizadas:
- Quizzical está desarrollado en React, una popular biblioteca de JavaScript para crear interfaces de usuario interactivas.
-
Contribuciones y Problemas: ¡Disfruta jugando Quizzical y demuestra tus conocimientos! Siéntete libre de contribuir o reportar problemas en este repositorio.
-
-
Proyecto Extra: Sumz - Resumidor de Artículos en Español
Sumz es una práctica herramienta que te permite obtener resúmenes en español de tus artículos favoritos en línea, con solo unos pocos clics. Utiliza la potente API de RapidAPI Article Extractor and Summarizer para ofrecer un servicio de resumen de alta calidad.
-
Características Destacadas:
Sumz ofrece una serie de características impresionantes:
- Resumir en Español: No importa la longitud o el tema del artículo, Sumz puede resumirlo en español de manera efectiva.
- Tecnología de Procesamiento de Lenguaje Natural: Utiliza algoritmos de procesamiento de lenguaje natural para generar resúmenes precisos y coherentes.
- Almacenamiento Local: Guarda los resúmenes generados localmente, lo que te permite acceder a ellos más tarde o compartirlos con otros.
-
Tecnologías Utilizadas:
He empleado las siguientes tecnologías para desarrollar Sumz:
- Frontend Amigable: La interfaz de usuario se ha creado utilizando React y Next.js, lo que proporciona una experiencia suave y agradable.
- Diseño Estilizado: Tailwind CSS se ha utilizado para diseñar y dar estilo a la web, creando una apariencia atractiva y moderna.
-
-
React Router - Como parte del proceso de aprendizaje de React, esta parte del repositorio está dedicada a todo lo relacionado con React Router. Esta parte forma parte de un segundo curso tomado en Coursera, y puedes encontrar el enlace de este curso en la sección de recursos.
- Week 1: En este módulo se abarcan los temas básicos de introducción a React Router, como BrowserRouter, Routes y Route.
- Week 2: Este módulo explora las rutas anidadas en React Router 6, que se utilizan para crear estructuras de rutas complejas y jerárquicas dentro de las aplicaciones React.
- Week 3: Este módulo se sumerge en el uso de parámetros de búsqueda y enlaces en React Router 6, permitiendo a los desarrolladores implementar la navegación con parámetros de consulta en sus aplicaciones React.
- Week 4: Este módulo explora en cargadores y errores en React Router 6, que se utilizan para manejar los estados de carga y manejo de errores dentro de los componentes de enrutamiento de sus aplicaciones.
- Week 5: Este módulo explora acciones y rutas protegidas en React Router 6, implementa autenticación y autorización protegiendo rutas y realizando acciones basadas en roles o permisos de usuario.
- Week 6: Este módulo profundiza en los datos diferidos en React Router 6, que permite a los desarrolladores cargar y mostrar datos bajo demanda de forma eficiente para rutas específicas, mejorando el rendimiento y la experiencia del usuario.
Aquí encontrarás una lista de recursos útiles que he utilizado en mi proceso de aprendizaje de React:
- Enlace al curso "Aprenda React": Enlace al curso que estoy siguiendo.
- Enlace al curso "Introduction to React Router": Enlace al curso enfocado en React Router.
- Documentación de React: Documentación oficial de React.
- MDN Web Docs: Una fuente completa de información sobre JavaScript y tecnologías web.
- Enlace al curso de JavaScript Mastery: Curso adicional donde se desarrollan tres proyectos desde la base para aprender un mejor manejo de las API en las aplicaciones.
¡Todas las contribuciones son bienvenidas! Si deseas contribuir con correcciones, sugerencias o nuevas ideas, por favor abre un "issue" o envía una solicitud de extracción (pull request). Tu contribución es muy apreciada.