React JS notes with examples - AGN HUB

  Axios in React.js What is Axios? Axios is a popular JavaScript library used to make HTTP requests (GET, POST, PUT, DELETE) in React applications. It is based on Promises and provides a simple way to interact with APIs. Why Use Axios? ✅ Supports request and response interceptors ✅ Handles automatic JSON conversion ✅ Supports error handling ✅ Can cancel requests using abort controllers ✅ Works in browsers and Node.js 1. Installing Axios in React Before using Axios, install it in your React project: npm install axios 2. Making a GET Request (Fetching Data) Axios is commonly used to fetch data from an API inside useEffect() . Example: Fetching Data with Axios ( GET Request) import React , { useEffect , useState } from 'react' ; import axios from 'axios' ;   const UserList = () => {       const [ users , setUsers ]   = useState ([]);       // web loading web mounting      ...

  Conditions in React.js In React, conditional rendering is used to display different UI elements based on conditions. There are multiple ways to handle conditions in React. 1. Using if-else Statements (Inside Function Components) Traditional if-else statements can be used inside a function. Example: Conditional Rendering Using if-else import React from 'react' ;   const Message = ({ isLoggedIn }) => {       if ( isLoggedIn )     {         return < h2 > Welcome back, User! </ h2 > ;     }     else {         return < h2 > Please log in. </ h2 > ;     }   }   export default Message ; App.js   import './App.css' ; import Message from './components/Message' ; function App () {   return (     < div className = "App" >         < Message isLoggedIn = "" />   ...