React recipe search App
Recently I am trying to find some React app to practice. All kinds of API make us easier to fetch data. I am using the API called EDAMAM. It upgraded to V2 .
- set up the react app
npx create-react-app <app-name>
2.App.js
search-form includes input text and a button.
when the input text is changing, the search value should change in State.
when clicking the button, the final search state is done, and it becomes query state .
To manipulate the data, you need to fetch the data from API.
For the API URL document
using async and await to get data.
Sign up for the account for the private API key, it’s free.
`https://api.edamam.com/api/recipes/v2?type=public&q=${query}&app_id=${APP_ID}&app_key=${APP_KEY}&random=true`
When you console.log() the data,showing below:
so the resource you need for recipes are data.hits
with useEffect() to run the API when query changing,meaning when click the button.
3. The individual recipe is a component.
4. Styling the components
For one component style,using {style.className}. Build the file recipe.module.css
Giving some styles.and import it in Recipe.js
App.css
I didn’t put time on CSS. There is more space for improving it though.😊
