Learn React Js - CodingTute https://codingtute.com/tag/learn-react-js/ Learn to code in an easier way Sun, 01 May 2022 07:59:21 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.3 https://codingtute.com/wp-content/uploads/2021/06/cropped-codingtute_favicon-32x32.png Learn React Js - CodingTute https://codingtute.com/tag/learn-react-js/ 32 32 187525380 How to Make API Calls in JavaScript https://codingtute.com/how-to-make-api-calls-in-javascript/ Fri, 19 Nov 2021 13:47:45 +0000 https://codingtute.com/?p=2922 In this tutorial, you will learn how to make API calls in javascript in 4 different ways. XMLHttpRequest JQuery Fetch API Axios XML HTTP Request XMLHttpRequest is one of the javascript global window objects. Before ES6, it is the only way of making API calls. It works in both old and new browsers and it ... Read more

The post How to Make API Calls in JavaScript appeared first on CodingTute.

]]>
In this tutorial, you will learn how to make API calls in javascript in 4 different ways.

  1. XMLHttpRequest
  2. JQuery
  3. Fetch API
  4. Axios

XML HTTP Request

XMLHttpRequest is one of the javascript global window objects. Before ES6, it is the only way of making API calls. It works in both old and new browsers and it is deprecated in ES6 but still widely used.

var request = new XMLHttpRequest();
request.open('GET', 'https://jsonplaceholder.typicode.com/todos')
request.send();
request.onload = ()=>{
    console.log(JSON.parse(request.response));
}

jQuery Ajax

ajax method in jQuery is used to perform asyncronous API calls. To use jQuery, we need to include the jQuery script file to access its methods.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

$(document).ready(function(){
    $.ajax({
        url: "https://jsonplaceholder.typicode.com/todos",
        type: "GET",
        success: function(result){
            console.log(result);
        }
    })
})

Fetch

fetch is similar to XMLHttpRequest but here we can make async calls in a simpler way. It returns the promise and .then() method is used to perform the action on the response. Fetch is only supported in modern browsers and doesn’t work in old browsers.

fetch('https://jsonplaceholder.typicode.com/todos').then(response =>{
    return response.json();
}).then(data =>{
    console.log(data);
})

Axios

Axios is one of the popular open-source libraries to make API calls. We can also include it as a script in an HTML file to make API calls. It also returns a promise as fetch API.

It is one of the modern and preferred by most developers to make HTTP requests.

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

axios.get("https://jsonplaceholder.typicode.com/todos")
.then(response =>{
    console.log(response.data)
})

JavaScript API Calls Cheatsheet

JavaScript API Calls
JavaScript API Cheat Sheet

Follow us on Facebook, YouTube, Instagram, and Twitter for more exciting content and the latest updates.

The post How to Make API Calls in JavaScript appeared first on CodingTute.

]]>
2922
React Developer Roadmap https://codingtute.com/react-developer-roadmap/ Sun, 10 Oct 2021 06:43:26 +0000 https://codingtute.com/?p=2753 React Developer Roadmap will help to guide a well-structured learning path to the beginner frontend or React developers and also provides a basic overview of React ecosystem. Happy learning 🙂

The post React Developer Roadmap appeared first on CodingTute.

]]>
React Developer Roadmap will help to guide a well-structured learning path to the beginner frontend or React developers and also provides a basic overview of React ecosystem.

React Developer Roadmap
React Developer Roadmap

Follow us on Facebook, YouTube, Instagram, and Twitter for more exciting content and the latest updates.

Happy learning 🙂

The post React Developer Roadmap appeared first on CodingTute.

]]>
2753
Create a New React App https://codingtute.com/create-a-new-react-app/ Sun, 03 Jan 2021 07:46:19 +0000 https://codingtute.com/?p=2491 In this article, you will learn how to create React Js app and run it. To create a react js application make sure you installed Node.js and have an updated version of npm. Open terminal/command prompt Navigate to the path where we need to create a react application. Now run the following commands Note: npx ... Read more

The post Create a New React App appeared first on CodingTute.

]]>
In this article, you will learn how to create React Js app and run it. To create a react js application make sure you installed Node.js and have an updated version of npm.

  1. Open terminal/command prompt
  2. Navigate to the path where we need to create a react application.
  3. Now run the following commands
npx create-react-app my-app
cd my-app

Note: npx commands supports only npm version >=5.2

If you are using npm version <5.2 then you need to run the following commands

npm install -g create-react-app
create-react-app my-app
cd my-app

In the above commands my-app represents your react application name, you can use any name in place of my-app.

By running the above commands you have created a new react application. To run your react application, run the below command.

npm start

Below you can find complete video tutorial.

That’s all about creating a new react application.

The post Create a New React App appeared first on CodingTute.

]]>
2491