Crea una app con React usando create-react-app

midudev

Resumen

Este vídeo es una guía práctica para crear una aplicación de búsqueda de GIFs desde cero utilizando React. El autor explora diferentes formas de inicializar un proyecto (Webpack, Next.js y Create React App), decantándose por esta última por su sencillez y rapidez. A lo largo de la sesión, se cubren conceptos fundamentales como el uso de hooks (useState y useEffect) para manejar el estado y efectos secundarios, la estructura de directorios, la interacción con APIs externas, el renderizado de listas con .map y la implementación de un router ligero. Finalmente, se ofrecen consejos sobre cómo mantener el código limpio separando componentes y manejando correctamente las dependencias del estado.

Capítulos

  1. 2:50Elección de herramientas
  2. 3:34Preparación y entorno
  3. 3:54Instalación de Node
  4. 5:31Ejecución con NPX
  5. 11:20Archivos clave
  6. 13:01Configuración interna
  7. 18:55Manejo de estado
  8. 19:19Uso de useState
  9. 22:17Renderizado de listas
  10. 33:15Uso de useEffect
  11. 35:09Consumo de API
  12. 36:08Estructura del proyecto
  13. 42:30Extracción de servicios
  14. 1:12:53Implementación de rutas
  15. 1:19:12Enrutamiento y navegación
  16. 1:19:20Navegación sin refresco

Temas tratados

  • Estrategias de inicio de proyecto
  • Entorno de desarrollo y Node
  • Uso de NPX vs NPM global
  • Manejo del estado con useState
  • Efectos secundarios con useEffect
  • Interacción con APIs y Fetch
  • Single Page Application con Router

Extracto de la transcripción

Vamos a hacer la aplicación de GIF desde cero y el tema es que tenemos diferentes opciones para empezar esta aplicación. Una de estas aplicaciones, eh una de estas formas que podríamos empezar la aplicación sería partiendo de la base de este proyecto que hicimos de aprender webpack paso a paso desde cero y lo dejamos en un punto donde ya podíamos haber utilizado React. Así que una opción podría ser empezar esta aplicación desde aquí. No lo vamos a hacer así, pero puede ser algo interesante. Si os interesa, pues miraros el vídeo y empezáis desde ahí, ¿vale? Esa podría ser una posibilidad. Perfecto. Ahora, ¿qué más? Eh, tendríamos una segunda opción que sería utilizar NextGS, que NextJS pues lo que tiene, que es muy interesante es que es como un framework que ya viene preparado en un montón de cosas, ¿vale? O sea, pues se prepara el tema del enrutado, se prepara también el tema del SEO, ti…