ReactJS

Axios Enjoy this cheat sheet at its fullest within  Dash , the macOS documentation browser. General GET request // Make a request for a user with a given ID axios . get ( '/user?ID=12345' ) . then ( function ( response ) { console . log ( response ); }) . catch ( function ( error ) { console . log ( error ); }); // Optionally the request above could also be done as axios . get ( '/user' , { params : { ID : 12345 } }) . then ( function ( response ) { console . log ( response ); }) . catch ( function ( error ) { console . log ( error ); }); POST request axios . post ( '/user' , { firstName : 'Fred' , lastName : 'Flintstone' }) . then ( function ( response ) { console . log ( response ); }) . catch ( function ( error ) { console . log ( error ); }); Multiple concurrent requests function getUserAcc...

1.       Create a new axios-main.js:   import axios from 'axios';   const intance = axios.create({                 baseURL: ' https://react-my-burger-8eda4.firebaseio.com/ ' });   export default instance   2.       In another file you can import the axios instance:   import axios from '../../axios-main';   axios.get('/orders.json')                                                                 .then(res => {             ...

Axios  is a popular, promise-based HTTP client that sports an easy-to-use API and can be used in both the browser and Node.js. Making HTTP requests to fetch or save data is one of the most common tasks a client-side JavaScript application will need to do. Third-party libraries — especially jQuery — have long been a popular way to interact with the more verbose browser APIs, and abstract away any cross-browser differences. As people move away from jQuery in favor of improved native DOM APIs, or front-end UI libraries like React and Vue.js, including it purely for its  $ . ajax  functionality makes less sense. Let’s take a look at how to get started using Axios in your code, and see some of the features that contribute to its popularity among JavaScript developers. Axios vs Fetch As you’re probably aware, modern browsers ship with the newer Fetch API built in, so why not just use that? There are several differences betwe...

Lazy Loading:   1. Create an asyncComponent.js:   import React, { Component } from 'react';   const asyncComponent = (importComponent) => {     return class extends Component {         state = {             component: null         }           componentDidMount () {             importComponent()                 .then(cmp => {                     this.setState({component: cmp.default});                 });         }     ...

Render Props   The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function.   A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.   <DataProvider render={data => (   <h1>Hello {data.target}</h1> )}/>   Note :   It’s important to remember that just because the pattern is called “render props” you don’t have to use a prop named render to use this pattern. In fact, any prop that is a function that a component uses to know what to render is technically a “render prop”.   Using Props Other Than render   Although the examples above use render, we could just as easily use the children prop!   <Mouse children={mouse => (   <p>The mouse position is {mouse.x}, {mouse.y}</p> )}/>   S...

Context   Context provides a way to pass data through the component tree without having to pass props down manually at every level.   In a typical React application, data is passed top-down (parent to child) via props, but this can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.   Using context, we can avoid passing props through intermediate elements.   React.createContext   const MyContext = React.createContext(defaultValue);   Creates a Context object. When React renders a component that subscribes to this Context object it will read the current context value from the closest matching Provider above it in the tree.   The defaultValue argument is only used when a component does not have a matching Provider ...