Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
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
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
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 hooks in it.CREATE A SIMPLE ES6 FUNCTIONconst player = () => { }Here we used a const keyword to function name so that it does not get modified accidentally. Let's add a return statement with some jsx code.const player = () => { return ( I'm ... 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 types of router in case of web applications.BrowserRouterHashRouterThe difference between the two router types are visible in the way they formulate the URLs.e.g. https://hello.com/about => BrowserRoutere.g. http://hello.com/#/about => HashRouter (uses hash in it)BrowserRouter is more popular and it uses html5 history API to keep track of locations.HashRouter supports the legacy ... 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 JavaScript components of bootstrap then we should add the jquery, popper.js in the index.htmlWith this the complete index.html will look like − React App hello Adding bootstrap dependencynpm install bootstrap ... Read More
Selenium Webdriver is a framework that allows automation testing. It allows testing across various browsers. It can execute multiple tests over multiple browsers on multiple OS. Web Driver makes it possible to write a test script in Linux and run it in Windows. There are multiple programming languages that are supported by Web Driver such as Java, Python, Ruby, .Net, PHP to create test scripts.Selenium Web driver is derived from −In Selenium2, integration of Web Driver was considered which was designed to address a few limitations of Selenium RC.Selenium was introduced with the following new features −It can test dynamic ... Read More