How to API calling in Reactjs

 

 

 ES6 Gives us a new syntax for defining functions using a fat arrwo. Arrow fucntions bring a lot of clarity & code reduction.

ES6 is different version of the ECMAScript specification. Which is the standard that defines the scripting language that javascript is based on.

ES6 release on 2015 and there are so many features Arrow function, classes, let and const for variables.

 

React

Certainly, reactjs is a JavaScript library developed by Facenook for building user interfaces. It allows developers to create reusable UI components and effciently manage the state of their applications. Here are some key aspects of Reactjs.


Component-Based Architecture: ReactJS follows a component-based architecture, where the user interface is divided into small, reusable components. Components encapsulate their own logic, state, and rendering, making it easier to build and maintain complex user interfaces.


Virtual DOM: ReactJS uses a virtual representation of the DOM (Document Object Model), known as the Virtual DOM. When the state of a component changes, React updates the Virtual DOM.


JSX: JSX is a syntax extension for JavaScript used in React. It allows developers to write HTML-like code within JavaScript, making it easier to describe the structure and appearance of components. JSX code is transpiled to regular JavaScript using tools like Babel before being executed in the browser.



Hooks: React introduced Hooks in version 16.8 as a way to use state and other React features in functional components. Hooks allow developers to write reusable logic and manage state within functional components without the need for class components. The most commonly used hooks are useState for managing state and useEffect for handling side effects such as fetching data or subscribing to events.


React Router: React Router is a popular routing library for React applications. It enables developers to create single-page applications with multiple views and handles routing between different components based on the URL.


State Management: React provides a flexible ecosystem of state management solutions. While React's built-in state management (useState ) is suitable for managing local component state, more complex applications may benefit from additional state management libraries like Redux. These libraries help manage global application state and provide predictable ways to update and access the state.



ReactJS has gained widespread popularity due to its performance, reusability, and declarative approach to building user interfaces. It has large community.

 

How to API calling in Reactjs

The code you provided is a React component called APICalling that fetches data from a movie API using the Axios library and displays it on the screen. 

1. Import Statements:

 

import axios from 'axios';
import React, { useEffect, useState } from 'react';

 

 

The code imports the axios library, which is a popular JavaScript library for making HTTP requests.

It also imports React's useEffect and useState hooks, which are used to manage state and handle side effects in a functional component.

 
2. APIURL Constant:

 

const APIURL = "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1";

This constant holds the URL of the movie API endpoint you want to fetch data from. It includes a query parameter for sorting movies by popularity, an API key, and a page number.



3. State Management:

 

const [search, setSearch] = useState("");

 
The useState hook is used to declare a state variable named search and its corresponding setter function setSearch. This state variable will be used to manage the search term.

4. getAllMovies Function:

 

const getAllMovies = () => {
    axios.get(APIURL)
    .then(
        (response) => {
            console.log(response.data.results);
            setSearch(response.data.results);
        }
    )
    .catch(
        (error) => {
            console.log(error);
        }
    )
}

 

getAllMovies is a function that makes an HTTP GET request to the APIURL using Axios.

When the request is successful, it logs the movie data received from the API and sets the search state with the movie results.

If there is an error in the request, it logs the error.



5. useEffect Hook:

 

useEffect(
    () => {
        if (search === "") {
            getAllMovies();
        } else {
            // getSearchedMovies();
        }
    },
    [search]
)

 

 

The useEffect hook is used to perform side effects in the component. In this case, it's used to fetch movie data when the search state changes.

The useEffect is set up with a dependency array [search], which means it will be triggered whenever the search state changes.

If the search state is empty, it calls the getAllMovies function to fetch the most popular movies. If search has a value, it could be used to implement searching for movies, but this part of the code is currently commented out (// getSearchedMovies();).




6. Render:

 

return (
   <div>APICalling</div>
)
 

 

 

The component's render function simply returns a <div> element with the text "APICalling". This is the content that will be displayed on the screen when this component is rendered.

Full Code

 

 

import axios from 'axios';
import React, { useEffect, useState } from 'react'
const APIURL = "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1";

function APICalling() {

    const [search, setSearch] = useState("");

    const getAllMovies = () => {
        axios.get(APIURL)
        .then (
            (response) => {
                console.log(response.data.results);
                setSearch(response.data.results);
            }
        )
        .catch(
            (error) => {
                console.log(error)
            }
        )
    }

    useEffect(
        () => {
            if(search === "") {
                getAllMovies();
            } else {
                //getSearchedMovies();
            }
        },
        [search]
    )
      
  return (
    <div>APICalling</div>
  )
}

export default APICalling

 

 

 
In summary, this React component fetches movie data from an API when it's mounted or when the search state changes (though the search functionality is currently commented out), and it logs the results to the console. The actual movie data is stored in the search state variable, which can be used for rendering movie information in the component's UI.

Output

 

Disclaimer

All tutorials are for informational and educational purposes only and have been made using our own routers, servers, websites and other vulnerable free resources. we do not contain any illegal activity. We believe that ethical hacking, information security and cyber security should be familiar subjects to anyone using digital information and computers. Hacking Truth is against misuse of the information and we strongly suggest against it. Please regard the word hacking as ethical hacking or penetration testing every time this word is used. We do not promote, encourage, support or excite any illegal activity or hacking.