Let's build a react giphy app!
Here is a working version of the basic Giphy App
-
Go to the Giphy docs HERE, read them
-
Create an account and get your Free API key.
-
Diagram your App:
- What components will you have?
- Where would state "live"?
- Where would you setup
useEffect
? - Where do you need to pass props?
- Where do you need to make the API call?
- Minimum of the following 3 components: App (already present), Gif and Form.
- A single gif should rendered when the page initially loads (think ComponentDidMount)
- On submission of the form make another API call update state with the new Gif
- If the form is submitted with text then search for that type of Giph
- If the form is submitted with no text than search for a random Giph
- Create a new context in App and have the Giph Component consume it.
Here is a working version with Context Added
- Create a side list of all the previous Giphs that have been retrieved
- Allow the user to click on any of them and display it in the main section