My Coding Reference

Redirect in React Router Redirect can use to redirect page to given path        when page doesn't exsist , it can be used instead of        showing 404 error page, so when user enter in wrong url        it will redirect to certain given path import   React   from   'react' import  { Route  ,  Switch ,  Redirect }  from   "react-router-dom" import   Contact   from   './RContact' import   About   from   './RAbout' import   ErrorMsg   from   './ErrorMsg' import   Navbar   from   './Navbar' import   User   from   './UseParams' import   Search   from   './RSearch' ; let   Service ...

useHistory in React Router import   React   from   'react' ; import  { useHistory }  from   'react-router-dom' ; let   User  = ()  => {         var   history  =  useHistory ();      return (          < >    <h1> user page </h1>     < button   onClick = { () => history . goBack () } > GO Back </ button >   < br />< br />< hr />     < button   onClick = { () => history . push ( '/' ) } > Hompage </ button >          </ >     ) } export   default   User ; useHistory gives the information about pages with visited , so that we can go back to previous  page using goBack()   function and can visit to any page we want using pu...

         useLocation in React Router import   React   from   'react' ; import  { useParams ,  useLocation }  from   'react-router-dom' ; let   User  = ()  => {      var  { fname ,  lname } =  useParams ();  // variable name must be same as you metion in route path                                      // we have to get it as object in {}        var   location  =  useLocation ();      // console.log(location);      return (          < >    ...

              useParams in React Router 1 st create Link user :  < NavLink    activeClassName = "active_class"   to = "/user" >  User  </ NavLink > 2nd metion link in route : < Switch >      { /* To Pass The Props to bellow about component */ }        < Route   exact   path = "/"   component = { () => < About   text = "About US"   /> } />        { /* We can also use render in place of component like bellow */ }        < Route   exact   path = "/contact"   render = { Contact } />          < Route   path = "/contact/service"   component = { Service } />     ...

Router in React To use router concept in React , first you have to  perform following steps. 1st : TO install Router  $ npm install  --save react-router-dom 2nd :  import following in index.js file import  { BrowserRouter }  from   "react-router-dom" 3nd :  Use of BrowserRouter in index.js file ReactDOM . render (    < BrowserRouter > < App /> </ BrowserRouter >   ,    document . getElementById ( 'root' ) ); 4th : Router.jsx , where we give path of pages import   React   from   'react' import  { Route  ,  Switch }  from   "react-router-dom" import   Contact   from   './RContact' import   About   from   './RAbout' import   ErrorMsg   from   './ErrorMsg' import   Navbar   from   './Navbar' let   Service  = () => {    return ( < >     < h1 > This...

React API call using  axios and useEffect Axios will fetch the data from react api  syntax :  asynx function functionName(){ const  res = await axios.get("url"); } example :   React API Call to Get Pokemon JSON Data using Axios and useEffect in ReactJS import   React , {  useState ,  useEffect  }  from   'react' ; import   Axios   from   'axios' ; let   AxiosPokemon  = ()  =>  {      let  [ num , setNum ] =  useState ();      let  [ name , setName ] =  useState ( "" );      let  [ move , setMove ] =  useState ();      useEffect (() => {          async   function   getData (){              const   res  =  await   Axios . get ( `...

Changing the Title  of Website on Button Click in React Hook filename : ChgTitle.jsx import   React , {  useState ,  useEffect  }  from   'react' ; let   ChgTitle  = ()  =>  {      let  [ num ,  setNum ] =  useState ( 0 );      useEffect (() => {          document . title  =  `Clicked me 😎 ${ num }` ;     })      return  (          < >              < center >                  < br   />< br   />                  < button   onClick = { ()  => ...

useEffect() in React // Here We are learning the useEffect concept in Hook // useEffect call it's callback function to perform some operation after render // In Real example , we are performing some operation like after clicking on button // number will be increment , so if we want that after executing this operation some another // operation will execute like show some message then this time we can use useEffect concept as follow // note : useEffect will show message (execute operation) even if number will increment or not (onClick operation will execute or not ) //Hope you will understand , let's Use filename: UseEffect.jsx import   React , {  useState ,  useEffect  }  from   'react' ; // Here We are learning the useEffect concept in Hook  // useEffect call it's callback function to perform some operation after render  // In Real...

useContext() in React We can use useContext to receive the data directly from context provider instead of using complex context consumer  file hierchy :  ContextAPI.jsx ==> ComA.jsx ==> comB.jsx    we are sending data directly from ContextAPI.jsx to ComB.jsx. File : ContextAPI.jsx import   React , {  createContext  }  from   'react' ; import   ComA   from   './ComA' ; var   FilmName  =  createContext (); var   Earned  =  createContext (); let   ContextAPI  = ()  =>  {      return  (          < >              < FilmName.Provider   value = { 'GolMaal film' } >                  < Earned.Provider   value = { '25 crore' } > ...

Context API in React The  Context API  is a component structure provided by the React framework, which enables us to share specific forms of data across all levels of the application.    A.jsx  ==> B.jsx ==> C.jsx if we want to send the data from A to C , then we have to pass it through B via concept of props , but if we want to send the data directly from A to C .  So for that we need to use concept of context API . Practical of this concept as follow :  File hierachy is as Follow :               ContextAPI.jsx ==> ComA.jsx ==> ComB.jsx ==>ComC.jsx file :  ContextAPI.jsx   import   React , {  createContext  }  from   'react' ; import   ComA   from   './ComA' ; var   FilmName  =  createContext (); let   ContextAPI  = ()  =>  {      return  (       ...