HTTP | Mastering React: An In-Depth Zero to Hero Video Series

Summary

In 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

00:00

🌐 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.

05:01

🔧 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.

Keywords

💡React JS

React JS is a popular open-source JavaScript library for building user interfaces, particularly for single-page applications. It is maintained by Facebook and a community of individual developers and companies. In the video, React JS is the main focus as the tutorial series aims to teach beginners how to use it from scratch, including advanced concepts like making HTTP requests.

💡useContext hook

The useContext hook is a feature in React that allows you to share values across the React component tree without having to explicitly pass props through every level. In the script, it is mentioned that the previous video explained the useContext hook, emphasizing its role in avoiding 'props drilling', a common challenge in React where props are passed down through multiple layers of components.

💡HTTP requests

HTTP requests are a fundamental aspect of web development, used to exchange data between a client and a server. The video script discusses invoking HTTP requests in React, which is crucial for fetching data from a backend or database to display in the application. The script explains different types of HTTP requests such as GET, POST, PUT, and DELETE.

💡GET request

A GET request is one of the HTTP methods used to retrieve data from a specified resource. In the context of the video, the script demonstrates how to perform a GET request in React to fetch data from an API, which is a typical operation in web development to load information into a user interface.

💡Axios

Axios is a third-party library used for making HTTP requests from both browser and node.js environments. It is mentioned in the script as a preferred tool for making HTTP requests in React, due to its ease of use and built-in features like automatic JSON data handling. The video shows how to install and use Axios to fetch data in a React application.

💡Fetch API

The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It is a modern alternative to XMLHttpRequest and is built into most browsers. The script explains how to use Fetch to make HTTP requests in React, including the process of converting the response to JSON format.

💡Promise-based

A promise in JavaScript is an object representing the eventual completion or failure of an asynchronous operation. The Fetch API is described as promise-based in the script, meaning it returns a promise that resolves with the response of the HTTP request. This is contrasted with Axios, which simplifies the process by providing the response data in JSON format by default.

💡JSON

JSON (JavaScript Object Notation) is a lightweight data-interchange format that is easy for humans to read and write and easy for machines to parse and generate. In the context of the video, JSON is used as the format for the data being exchanged between the React application and the server, with both Axios and Fetch handling JSON data differently.

💡useState

The useState hook in React is used to hold and set the state in a functional component. The script mentions creating a state to hold the data fetched from the API, which is a common pattern in React applications to manage and update the UI based on the data.

💡useEffect

The useEffect hook in React allows you to perform side effects in function components. In the script, useEffect is used to run code after the component renders, specifically to make HTTP requests to fetch data when the component mounts. This is a common use case for useEffect in data-fetching scenarios.

💡CRUD operations

CRUD is an acronym for Create, Read, Update, and Delete, representing the four basic functions of persistent storage. The video script mentions that a separate video will cover CRUD operations, indicating that the tutorial series will delve into more advanced topics beyond just fetching data, such as manipulating data on the server.

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.