Lab 09: Working with APIs in React.js

Objective

• React Basics: Learn how to build a React app
• State management: Utilize the useState hook to manage the app’s state
• Event handling: Implement event listeners to handle user interactions
• Routing: Employ React Router to implement navigation between different components
• React Hooks:
  • Use fetch with useState in response to user event.
  • Use fetch with useEffect when the component loads.

Lab Description

Create a React application that allows users to search for recipes and view recipe details including ingredients, instructions, and images.

• You’ll use a free API, Spoonacular API, to fetch recipes.

  • Sign up for an account and generate a new api key.
    • Once you’re logged in, navigate to the “Profile” section and view or generate an API key.
  • Read the docs on how to use the following API end points:
    • api.spoonacular.com/recipes/complexSearch
    • api.spoonacular.com/recipes/{id}/information
  • Below is an example of using this end point. You may copy this into Postman and see the JSON response.

  https://api.spoonacular.com/recipes/complexSearch?apiKey=PASTE_YOUR_API_KEY_HERE&query=pasta
  
  https://api.spoonacular.com/recipes/716429/information?apiKey=PASTE_YOUR_API_KEY_HERE
  

Submission

• Please submit a link to your project on CodeSandbox.io.
  • Create a project on CodeSandbox.io, be sure it is set to public, click on share, and copy link.