Proyecto creado siguiendo esta serie de videos -> Curso gratis de ReactJS 2020 con clases en vivo (Lista en Youtube), de este grande del desarrollo frontend -> Midudev (Miguel Ángel Durán: Blog, Youtube, Twitter, Instagram)

---

Giffydb - Acerca de este proyecto:

Se trata de un buscador de Gifs que utiliza la API de GIPHY.

---

Visited sites:

MDN - Lazy loading

• https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading

Vercel - Environment Variables

• https://vercel.com/docs/environment-variables

Hiding API Keys in Your Code

• https://dev.to/ivana_croxcatto/hiding-api-keys-in-your-code-1h0a

Hiding Secret Keys in Create-React-App

• https://www.pluralsight.com/guides/hiding-secret-keys-in-create-react-app

How do I hide API key in create-react-app?

• https://stackoverflow.com/questions/48699820/how-do-i-hide-api-key-in-create-react-app

How to hide your API keys in React.

• https://dev.to/thepuskar/how-to-hide-your-api-keys-in-react-4k55

CRA - Injecting Data from the Server into the Page

• https://create-react-app.dev/docs/title-and-meta-tags/#injecting-data-from-the-server-into-the-page

CRA - Adding Custom Environment Variables

• https://create-react-app.dev/docs/adding-custom-environment-variables/

CRA - Using the Public Folder

• https://create-react-app.dev/docs/using-the-public-folder/

Add a web app manifest with Create React App

• https://web.dev/add-manifest-react/

favicon.ico Generator

• https://www.favicon.cc/

---

---

---

Run

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

---

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

---

Mis notas

Depuración

• Desarrollo con VSCode, el cual me permite depurar la aplicación presionando la tecla F5 (la primera vez que se hace esto se crea un archivo llamado "launch.json" en la carpeta ".vscode", donde se debe especificar junto a la url localhost el puerto en el que está corriendo la aplicación, la cual previamente inicié ejecutando yarn start, y que por defecto es el 3000.

• Esta depuración se inicia en una ventana de Chrome limpia de extensiones, que se ejecuta extremadamente rápido y permite que se utilicen breakpoints establecidos desde VSCode así como también consultar fácilmente la pila de llamadas, las variables globales y mucho más.

• En esta ventana de Chrome instalé las extensiones React Developer Tools y Redux DevTools extension

Giphy API Explorer

• https://developers.giphy.com/explorer

Paquetes NPM interesantes

• unfetch (Recomendado para cuando un navegador no provee nativamente el uso de fetch por medio de su, seguramente desactualizada, API)

---