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 ... 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 ... 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)=>{     ... 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 ... Read More

LETS SEE HOW TO CREATE SIMPLE REACT FUNCTIONAL COMPONENTComponents are building blocks of React library. There are two types of components.Stateful componentStateless componentStateful component has a local state object which can be manipulated internally.Stateless component does not have a local state object but we can add some state using React ... Read More

Some basics of react routingReact-router is the main library and react-router-dom and react-router-native are the environment specific libraries. React-router-dom is used in browser based web applications generally. react-router-native is used in mobile based applications which can be developed using react-native.To install it use command npm install –save react-router-domThere are two ... Read More

There are multiple ways to add bootstrap in react project.Using bootstrap CDNInstalling bootstrap dependencyUsing react bootstrap packagesUsing bootstrap CDNThis is the simplest way to add bootstrap. Like other CDN, we can add bootstrap CDN in index.html of the react project.Below is one of the react CDN urlIf we need the ... Read More

We bundle the files in React application using tool such as webpack. Bundling in the end merges the files in the sequence of their imports and creates a single file.The problem with this approach is that the bundle file gets larger with the increase in files. User may not be ... Read More

The aria-* attributes on html elements are also supported in React.js as well. The other attributes are generally written in camel-case but these aria-* are written in hyphen-cased.Sometimes we break the semantics of the html if we use parent div in React.jsExamplerender(){    return(           ... Read More

React community has provided a direction on how to think in React way and build big , fast and scalable applications. React has reached multiple platforms and widely used a popular JavaScript UI interface library.Step 1 − Creating a simple mock serviceIf we need to make a server call and ... Read More