Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Fetch Api data with React
Rating: 4.7 out of 5(16 ratings)
92 students

Fetch Api data with React

Learn how to create a React Project that fetches api data
Created byTelmo Sampaio
Last updated 6/2020
English
English [Auto],

What you'll learn

  • Learn how to fetch api data using React

Course content

1 section • 8 lectures • 1h 10m total length

  • Introduction1:25

    Fetch api data with react by using the Chuck Norris api to display a random joke on page load and search by keyword for jokes related to music or food.

  • Create the Starting Project9:44

    Build a starting React project to fetch API data using the Chuck Norris API, with a search input that displays jokes based on your keyword.

  • Building the Frontend Interface17:24

    Build the frontend interface with React and Bootstrap, add a Chuck Norris image and a two-column search card, and apply styling to center content and color the title yellow.

  • Fetching the API11:00

    Fetch api data with React shows getting a random Chuck Norris joke via axios and useEffect. Install axios, perform a get request, await the response, and extract data.value.

  • Displaying the API data7:32

    Fetch and display API data in a React app by fetching jokes with Axios inside a useEffect, manage state with useState, and render the joke from the API.

  • Search for multiple api results7:45

    Master searching a word and fetching multiple jokes from the Chuck Norris API using React, while handling input via onChange and updating the search keyword in state.

  • Display the searched results15:22

    Learn to fetch Chuck Norris jokes in a React app by searching with keywords, building a query with axios get, and displaying a random joke from the API results.

  • All Project Files0:03

Requirements

  • Should be familiar with basics of React

Description

In this course you are going to learn how to fetch Api data using React

We are going to use the free Chuck Norris API, where you will be able to search for different keywords, and get back some jokes related to the category you just searched.

And finally don’t worry I will cover every single detail so you guys can easily follow along, even if you have little experience, I will add the full code in the end of the course!

By taking this course you will learn:

Learning outcome:

  • How to work with an API

  • How to Fetch API data with React

  • How to select multiple results

  • and much more…

Who this course is for:

  • React developers who want to learn how to work with Apis

Report abuse