Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Passing a ref to the child component is called as forwarding ref. React provides a createRef function to create a ref for element.forwardRef is a function to pass the ref to child component.Example// ExampleRef.js const ExampleTextInput = React.forwardRef((props, ref) => ( )); const exampleInputRef = React.createRef(); class NewTextInput extends React.Component { handleFormSubmit = e => { e.preventDefault(); console.log(“Entered value: ”+exampleInputRef.current.value); }; render() { return ( this.handleFormSubmit(e)}> ... Read More
A24 JSON Wire protocol is the protocol in which is used when the web driver communicates with the browser. The working of the JSON is as below −In a server-client architecture, it is necessary that the client and server should be in sync and are able to receive and send the request and response.As the name suggests JSON(JavaScript Object Notation) is used to represent objects with a complex data structures. JSON wire protocol acts as a mediator between client libraries and Web Drivers. It sends transfers data between the client and the server on the web.The server doesn’t understand the ... Read More
In a typical web application, client makes a http request through browser and server sends html page in the response with data.But in a single page application (SPA), we have only one page and whenever client makes http request to server it generally responses with a json/xml formatted data.For making http request we have some of the below options −XmlHttpRequestAxiosWindows fetchAxios is easy to work with react and handing requests.Lets install it firstnpm install –save axiosImport it in the jsx file before usingimport Axios from ‘axios’;From the component lifecycle post, we observed that componentDidMount is the best place to make ... Read More
Understand the difference in stateless and stateful react componentsIn state management post, we learned how we can handle state in react if something is changed.Stateless components are simple functional component without having a local state but remember there is a hook in react to add state behavior in functional component as well.Stateful component can contains the state object and event handling function, user actions as well.Stateless component are pure in nature which does a very specific task.import React from 'react'; const player = (props) => { return ( I'm a Player: ... Read More
Use of proptypes ensures the type safety of receiving props on the components and also helps in making correct calculation.Example − If we are receiving name as string and age as number then it should be received with the same type. If we receive age in string then it can result into incorrect calculation.To use proptypes we have to install below package.npm install –save prop-typesThis package is provided by React Team. To use it on component, we will import it firstimport PropType from ‘prop-types’;we can use it on any type of component (Stateful or stateless).At the end of component before exporting ... Read More
The React context api is safe to use in production with the version 16.3 or latest. The reason for adding context api is to avoid the passing of props if there is a chain of children components.Without the use of context api, we have to pass the props through all the intermediate components. The other alternative solution is to use third party library such as Redux for maintaining a central store.Understanding the passing of props problemApp.js → props for books → BookList.js → passing the books as props again → Book.jsWith the increase in number of children components, the chain ... Read More
BUILDING A WORK-FLOW HELPS IN DOING BELOW THINGSIt optimizes codeUsing next-gen JavaScript (ES6)Its a standard way for single/multiple page appsProductive approachEasy integration of dependencies with NPM or YarnUse of bundler like web-pack for easier modular code and shipping codePre compiler like BabelWe can use a local development server to test appBuilding workflow looks complex but React community has made it simple for us with a single commandcreate-react-app.To use create-react-app, we will need to have node js install on our machine.You can check if node is installed using below command on terminal −node –versionIf not installed already, please install the latest ... Read More
Hooks allows the functional component in react to get the features available in class based component in make them more powerful.useState we will import from react. Import {useState} from ‘react’; This helps us in creating local state variables for functional component and provides method to update that variable.State in class is an object, but with useState we can create simple primitive data types and object if we want.const test=()=>{ const [age, setAge] = useState(25); return ( Age: {age} setAge(age+1)}>Increase Age ); ... Read More
The React hook useEffect helps in adding componentDidUpdate and componentDidMount combined lifecycle in React’s functional component.So far we know we can add lifecycle methods in stateful component only.To use it, we will need to import it from react −import React, { useEffect } from ‘react’; const tutorials=(props)=>{ useEffect( ()=>{ console.log(‘hello’); setTimeout( ()=>{ alert(‘hello’); }, 2000); }); }If we run it, we will see the console log and alert on every render cycle. Here we can call http requests also inside useEffect. Now this is similar to componentDidUpdate lifecycle of stateful component.We can ... Read More
useContext hook allows passing data to children elements without using redux.useContext is a named export in react so we can importin functional components like below −import {useContext} from ‘react’;It’s an easy alternative to Redux if we just need to pass the data to the children elements.Simple example creating a contextimport React, { createContext } from ‘react’; import ReactDOM from ‘react-dom’; const MessageContext = createContext(); myApp=()=>{ return ( ); }In child component Test we can ... Read More