Durante el mes de abril crearemos una app de React que conecta con la API de Giphy!!! Pero iremos desarrollándola de a poco.

Para el próximo Miércoles 6 las tareas son:

  1. Crear una aplicación de React con Create-React-App: https://github.com/facebook/create-react-app

Con Vite: https://vitejs.dev/guide/#scaffolding-your-first-vite-project

Ó con NextJs https://nextjs.org/docs/getting-started.

Para ello se puede seguir/consultar los siguientes tutoriales de Midudev:

Create-React-App: https://youtu.be/QBLbXgeXMU8

NextJs: https://github.com/midudev/curso-nextjs-twitter-clone

  1. Dentro de la app crear una carpeta components y luego crear un primer componente SearchBox, o con el nombre que quieran, que contenga un textbox y un boton Search (opcional).

Ejemplo:

Untitled

El botón puede ser reutilizable (recibir por props el texto que va a tener, entre otras cosas).

Guardar en un useState el value que el usuario va tipeando en el textbox. Para esto se puede consultar este video que vimos de Kent. https://egghead.io/lessons/react-controlling-form-values-with-react-b7e231a3

  1. Conectar con la api de Giphy usando fetch. No hace falta consumirla todavía, solo hacer el fetch y consologuear el resultado para comprobar que funciona.

Tenemos de ejemplo el fetch que hace Kent en el curso y también en el video de create-react-app de Midudev él conecta con la misma api (minuto 15:09).