Found 198 Articles for React JS

Each stateful means class based component goes through four types of lifecycle phases.Mounting or CreationUpdatingUnmounting or DestroyError handling phaseReact.js Component Lifecycle - Mounting phaseThe methods that executes during creation lifecycle are −constructorcomponentWillMount (Only available till version 17 )rendercomponentDidMountconstructor ()It’s an ES6 feature and not a React provided method.React uses the constructor to pass the props to parent Component extended from React library.constructor(props){    super( props ); }Passing of props to parent Component helps us to use this.props in the component.We can initialize the state for the component in constructor. Important point is we should not use setState method in constructor. ... Read More

We have a lifecycle method called shouldComponentUpdate which by default returns true (Boolean) value.The purpose of the shouldComponentUpdate is we can custom implement the default behavior and decide when react should update or re-render the component.Generally we use state or props value to decide the update cycle. React has now provided us a PureComponent which does the comparison of state and props to decide the update cycle. We don’t need to override shouldComponentUpdate if we extend class with PureComponent.React does the shallow comparisons of current state and props with new props and state to decide whether to continue with next ... Read More

We have an app.jsx componentimport React, { Component } from 'react'; import { Link, Route, Switch } from 'react-router-dom'; import Category from './Category'; class App extends Component {    render() {       return (                                                         Main Page                   Users                                           ... Read More

We have an index.js file as −import React from 'react' import ReactDOM from 'react-dom' import './index.css' import { Route, Link, BrowserRouter } from 'react-router-dom' import App from './App' import AboutUs from './ AboutUs’; import ContactUs from './ContactUs'; const routs = (    < BrowserRouter >                                            Home                                        Users                 ... Read More

We have shouldComponentUpdate in class based component as lifecycle method. This method can be used to achieve the performance optimization by comparing props (previous and next) and executing render conditionally .We have React.PureComponent as well which can do shallow comparison of state and props. But in functional component we don’t have such methods.Now, React has provided a memo method which will do the same functionality for the functional components.const functionalComponent = React.memo(function functionalComponent(props) {    /* render using props */ });We have wrapped the component inside the memo method. Memo method will memorize the result till the props are same. ... 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

Unlike other libraries like angular , forms in react need to handle by ourselves. There are two types of forms input in reactControlled inputsUncontrolled inputsControlled components or elements are those which are handled by react functions. Example is updating the field on onChange function call. Most of the components are handled in controlled way.Example for controlled form componentimport React, { Component } from 'react'; class ControlledFormExample extends Component {    constructor () {       this.state = {          email: ''       }    }    changeEmailHandler = event => {       ... Read More

Purpose of formic is to remove the complexity of form handling in react and make form submission simpler.Formic uses yup to validate the form fields which is very simple to useFirst install the formic librarynpm install –save formicExampleimport React, { Component} from 'react'; import { Formik, FormikProps, Form, Field, ErrorMessage } from 'formik'; export class FormExample extends Component {    handleSubmit = (values, {       props = this.props,       setSubmitting    }) => {       setSubmitting(false);       return;    }      render() {       return(         ... Read More

The error boundary mechanism helps to show meaningful error message to user on production instead of showing any programming language error.Create a react class componentimport React, {Component} from 'react'; class ErrorBoundary extends Component{    state={       isErrorOccured:false,       errorMessage:''    }    componentDidCatch=(error, info)=>{       this.setState({isErrorOccured:true, errorMessage:error});    }    render(){       if(this.state.isErrorOccured){          return Something went wrong       }else{          return {this.props.children}       }    } } export default ErrorBoundary;We have a state object having two variables isErrorOccured and errorMessage which ... Read More

Understanding error messagesIf there is an error in code execution react displays a readable error message on screen with line number. We should understand the error message to correct it.We have a below file App.js having one input element. On change of input value we see the console text −import React, {Component} from 'react'; class App extends Component {    onChangeHandler=(event)=>{       console.log(event.target.value);    }    render(){       return (                       this.onChangeHandler(event)}/>                 );    } } export default ... Read More