React Basics - Class 6

Lecture 54 :- React Basics - Class 6

In "React Basics - Class 6," we'll continue exploring more advanced React concepts and build on what we learned in the previous classes. We'll cover topics such as handling HTTP requests, using external APIs, and rendering lists of data.

Step 1: Handling HTTP Requests in React

To handle HTTP requests in React, we can use the fetch API or external libraries like Axios. We'll use Axios, which is a popular and easy-to-use library for making HTTP requests.

Install Axios:

Open your terminal and run the following command to install Axios:

bashCopy code

npm install axios

Step 2: Fetching Data from an External API

Let's create a simple example where we fetch data from an external API and display it in our React application.

Create a new component called UserList.js inside the src folder with the following content:

jsxCopy code

import React, { useEffect, useState } from 'react'; import axios from 'axios'; function UserList() {  const [users, setUsers] = useState([]);  useEffect(() => {    axios      .get('https://jsonplaceholder.typicode.com/users')      .then((response) => {        setUsers(response.data);      })      .catch((error) => {        console.error('Error fetching data:', error);      });  }, []);  return (    <div>      <h2>User List</h2>      <ul>        {users.map((user) => (          <li key={user.id}>{user.name}</li>        ))}      </ul>    </div>  ); } export default UserList;

In this example, we use the useEffect Hook to fetch data from the JSONPlaceholder API (a fake online REST API for testing and prototyping). The fetched user data is then stored in the users state, and we render a list of user names.

Step 3: Using the UserList Component

Now, let's use the UserList component in the App.js.

jsxCopy code

import React from 'react'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; import Home from './Home'; import About from './About'; import Form from './Form'; import ParentComponent from './ParentComponent'; import UserList from './UserList'; function App() {  return (    <Router>      <div>        <h1>Hello, React!</h1>        <nav>          <ul>            <li>              <Link to="/">Home</Link>            </li>            <li>              <Link to="/about">About</Link>            </li>          </ul>        </nav>        <Route exact path="/" component={Home} />        <Route path="/about" component={About} />        <Form />        <ParentComponent />        <UserList />      </div>    </Router>  ); } export default App;

Now, when you run the application, the UserList component will fetch data from the API and display a list of user names.

Step 4: Handling Loading and Error States

Fetching data from an API may take some time, and we should handle loading and error states to provide a better user experience.

Let's update the UserList component to handle loading and error states.

jsxCopy code

import React, { useEffect, useState } from 'react'; import axios from 'axios'; function UserList() {  const [users, setUsers] = useState([]);  const [loading, setLoading] = useState(true);  const [error, setError] = useState(null);  useEffect(() => {    axios      .get('https://jsonplaceholder.typicode.com/users')      .then((response) => {        setUsers(response.data);        setLoading(false);      })      .catch((error) => {        setError('Error fetching data');        setLoading(false);      });  }, []);  if (loading) {    return <div>Loading...</div>;  }  if (error) {    return <div>{error}</div>;  }  return (    <div>      <h2>User List</h2>      <ul>        {users.map((user) => (          <li key={user.id}>{user.name}</li>        ))}      </ul>    </div>  ); } export default UserList;

In this example, we added loading and error states to manage the loading and error states. While the data is being fetched, the loading state is set to true, and a loading message is displayed. If there's an error during the fetch, the error state is set, and the error message is displayed.

Step 5: Using Components Together

Now, with the updated UserList component handling loading and error states, let's use it again in the App.js.

jsxCopy code

import React from 'react'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; import Home from './Home'; import About from './About'; import Form from './Form'; import ParentComponent from './ParentComponent'; import UserList from './UserList'; function App() {  return (    <Router>      <div>        <h1>Hello, React!</h1>        <nav>          <ul>            <li>              <Link to="/">Home</Link>            </li>            <li>              <Link to="/about">About</Link>            </li>          </ul>        </nav>        <Route exact path="/" component={Home} />        <Route path="/about" component={About} />        <Form />        <ParentComponent />        <UserList />      </div>    </Router>  ); } export default App;

Congratulations! You've completed the sixth class of React Basics. You've learned about handling HTTP requests, using external APIs, and rendering lists of data.

React provides powerful tools to build dynamic and interactive user interfaces. As you continue your React journey, you can explore more advanced topics like React context, custom hooks, and state management libraries.

Keep practicing, building more complex applications, and exploring the vast possibilities of React! Happy coding!