HTTP | Mastering React: An In-Depth Zero to Hero Video Series
Summary
TLDRIn this React JS tutorial for beginners, the instructor explains how to make HTTP requests using Fetch and Axios. The video covers the basics of HTTP, different types of requests, and the differences between Fetch and Axios. The instructor demonstrates fetching data from an API using both methods in a React application, replacing hardcoded data with dynamic content. A practical task is suggested, involving creating a card that links to a GitHub repository using the GitHub API, and viewers are encouraged to try it themselves.
Takeaways
- 🌐 HTTP is the protocol used to access data on the World Wide Web, and it's essential for data retrieval from backend databases in applications.
- 🔍 Common HTTP request methods include GET, POST, PUT, and DELETE, each serving a specific purpose in data handling.
- 📚 React lacks built-in tools for making HTTP requests, unlike frameworks like Angular, which have an inbuilt HTTP module.
- 🛠️ Axios and Fetch are popular choices for making HTTP requests in React; Axios is a third-party library, while Fetch is a built-in browser API.
- 🔄 Axios automatically handles data serialization and provides JSON-formatted responses by default, simplifying data handling.
- 📦 Fetch requires manual conversion of responses to JSON, adding an extra step compared to Axios.
- 💡 The video demonstrates how to use both Fetch and Axios to perform GET requests and retrieve data for a React application.
- 🎯 The tutorial includes a practical example using an API to fetch data and dynamically render it in a React application.
- 🔗 The video suggests a task for viewers to practice: creating an application that fetches user data from a GitHub API and displays it.
- 🔗 The video provides a GitHub repository link for viewers to access the solution code for the tutorial and the suggested task.
Q & A
What is the main topic of the React JS - Zero to Hero series?
-The main topic of the React JS - Zero to Hero series is to teach beginners how to learn React JS from scratch.
What was explained in the previous video of the series?
-In the last video, the useContext hook was explained and how it can be used to avoid props drilling.
What is the purpose of the HyperText Transfer Protocol (HTTP)?
-HTTP is a protocol used to access data on the World Wide Web, typically to get data from backend databases.
What are the different types of HTTP requests mentioned in the script?
-The different types of HTTP requests mentioned are GET, POST, PUT, and DELETE.
How does one perform a GET request in React according to the video?
-To perform a GET request in React, one can use either Axios or Fetch. The video demonstrates using Fetch with useEffect and then converting the response to JSON.
What are the differences between Axios and Fetch when making HTTP requests in React?
-Axios is a third-party library that automatically stringifies data and provides JSON responses by default, while Fetch is a built-in API that requires manual serialization of data and conversion of responses to JSON.
Why might someone prefer Axios over Fetch according to the video?
-The video suggests that Axios might be preferred due to its ease of use, automatic JSON handling, and because it is a third-party library specifically designed for HTTP requests.
How does the video demonstrate fetching data from an API?
-The video demonstrates fetching data by using the useEffect hook to call Fetch or Axios, then setting the state with the fetched data to render it in the React application.
What is the task suggested by the video for practice?
-The suggested task is to create a small application where clicking a card takes the user to the respective GitHub repo, using the GitHub users API with Axios or Fetch.
How can one access the solution code for the suggested task?
-The solution code for the suggested task can be accessed from a repository, the link to which is provided in the video description.
What is the final call to action from the video presenter?
-The presenter asks viewers to like the video, subscribe to the channel, and support them.
Outlines
🌐 Introduction to HTTP Requests in React
This paragraph introduces the topic of making HTTP requests in React, a crucial skill for fetching data from backend databases. The instructor explains the basics of HTTP, including the different types of requests (GET, POST, PUT, DELETE) and their purposes. The focus of this video is on demonstrating how to perform a GET request in React. The instructor contrasts React's approach with that of Angular, noting that React lacks built-in tools for HTTP requests and instead relies on third-party libraries like Axios or the native Fetch API. The differences between Axios and Fetch are highlighted, with Axios being favored for its ease of use and built-in JSON handling.
🔧 Practical Demonstration of Fetch and Axios in React
The instructor provides a hands-on demonstration of how to use both Fetch and Axios to retrieve data in a React application. The Fetch API is first explored, with the instructor showing how to make a request and handle the promise-based response, including the necessary conversion of the response to JSON format. The process of setting up state and rendering data using the map function is also covered. Following this, the instructor moves on to Axios, starting with its installation and then showing how it simplifies the process of making HTTP requests by automatically handling JSON data. The video concludes with a practical task suggestion for viewers to build an application that fetches user data from a GitHub API using either Fetch or Axios, and the instructor provides a link to the solution code in the video description.
Mindmap
Keywords
💡React JS
💡useContext hook
💡HTTP requests
💡GET request
💡Axios
💡Fetch API
💡Promise-based
💡JSON
💡useState
💡useEffect
💡CRUD operations
Highlights
Introduction to React JS Zero to Hero series for beginners.
Explanation of useContext hook to avoid props drilling.
Introduction to making HTTP requests in React.
Definition and purpose of HTTP in web applications.
Types of HTTP requests: GET, POST, PUT, DELETE.
Demonstration of performing a GET request in React.
Comparison between inbuilt HTTP module in Angular and React's approach.
Introduction to Axios and Fetch for making HTTP requests in React.
Differences between Axios and Fetch in terms of installation and usage.
Explanation of Axios's automatic stringification of data.
Fetch API's requirement to serialize data into a JSON string.
Axios's default JSON response data access.
Fetch API's additional step to convert response to JSON.
Personal preference for Axios over Fetch API.
Example of using Fetch to get data from an API.
Use of useEffect hook to make a fetch call on page load.
Conversion of fetch response to JSON and state management.
Rendering data from HTTP request using map function.
Introduction to using Axios for HTTP requests in React.
Installation and usage of Axios in a React application.
Axios's get method and handling of JSON response data.
Task suggestion to create an application using GitHub users API.
Providing a solution code for the suggested task.
Call to action for likes, subscriptions, and support.
Transcripts
Hi Friends
Welcome back to React JS - Zero to Hero series.
This series is for beginners who wants to learn React JS from Scratch.
In the last video I have explained about useContext hook and how we can use that to avoid props
drilling.
In this video, I am going to explain about how we can invoke HTTP requests in react.
Let's start.
HTTP stands for HyperText Transfer Protocol.
It is a protocol used to access the data on the World Wide Web.
In most of our applications, we get the data from backend, that means from some kind of
database.
We achieve this using HTTP.
There are different types of requests we can do.
They are
GET - to get some data POST - to create some new data
PUT - to update some existing data DELETE - to remove some data
And, in this video I am going to show you how we can do a GET request in react.
And as part of advanced concept series, I am going to create a separate video to cover
all the CRUD operations.
Ok.
In frameworks like Angular, HTTP module is inbuilt.
But React does not have any tools or objects or functions for making HTTP requests.
So we commonly use either Axios or Fetch to make requests in react.
Axios is a third-party HTTP client library for making requests.
We need to install that.
Fetch is a promise-based built-in API, hence we don't have to install or import anything.
When sending JavaScript objects to the API, Axios automatically stringifies data but while
using fetch, we need to serialize data into a JSON string
In Axios, the response data is available as a JSON by default, hence we can immediately
access it using the data property.
With Fetch, there is one more step we have to take before accessing the response data.
We need to convert it to JSON.
Even though Fetch API is a native interface with more possibilities than Axios, it can
often be a little harder to use.
And my personal preference is Axios.
Ok, let me show you how we can use Axios and Fetch in react.
I have taken the code of the images and styles task solution.
Here you can see, all these data are hardcoded.
And so you can see this.
And, I have also kept all these data in a table in MySQL and I have exposed an API using
Node JS.
The API is already up and running in port 5000.
Ok, let's first use fetch to get the data.
Like I told before, to use fetch we don't want to install anything.
Let me use an useEffect which runs once on page load.
Inside that, let me do fetch call.
To this, I need to pass the URL.
And as fetch is promise based, we can use the then callback to resolve that.
So, inside the then callback, let me print the response.
We can see it is not in JSON.
So, we need to first convert that to JSON.
Like this.
This is going to be another promise and so let me resolve this also and let me print
this response now.
We can see a data object here.
So first, let me create a state to hold this data.
And here, let me set the state.
And here, let me comment all these hard coded things.
Now you will not see anything in the screen.
Ok, let me use map to render all the characters.
I can pass the respective props.
Also, I need to add a key.
I can use the id for that.
Now we can see, our application is working, but this time we are getting data through
HTTP.
Ok, now let's see how we can use Axios.
For that, first we need to install axios.
Let me quickly stop my server, install axios and restart it.
Ok. let me comment this fetch call.
And so, we can see the data is not visible in the UI.
To use axios, first we need to import that from axios.
Now we can use axios in our application.
Let me create another useEffect and inside that let me use axios.
We can use the get method from axios and for that we can pass the same URL.
This is also going to give us a promise.
But if I resolve that promise, and if I console log the response, we can see it is already
in JSON.
So, we can set the state directly.
Like this.
Now our application is working.
Hope you understood how we can use fetch and axios to invoke HTTP requests in React.
Ok, let me suggest you a task.
You can create this small application.
When you click any card, it should take you to the respective github repo.
To get the data, you can use this github users api url.
For name, you can use the login parameter, for image, you can use this avatar url and
for hyperlink url, you can use this html url.
You can either use fetch or axios.
Try this, if you need the solution code, you can get it from this repo.
The link is also available in the description.
That's all for today.
Please like this video.
Subscribe to my channel and support me.
Thank you.
Bye.
関連動画をさらに表示
Components | Mastering React: An In-Depth Zero to Hero Video Series
Asp.Net Core Web API Client/Server Application | Visual Studio 2019
Communication between components | Mastering React: An In-Depth Zero to Hero Video Series
Images and Styles | Mastering React: An In-Depth Zero to Hero Video Series
Handling forms | Mastering React: An In-Depth Zero to Hero Video Series
useContext Hook | Mastering React: An In-Depth Zero to Hero Video Series
5.0 / 5 (0 votes)