Navigation in React JS Routing

Shyam Hande
Updated on 04-Sep-2019 11:20:20

6K+ Views

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

React JS Memo Function in Functional Component

Shyam Hande
Updated on 04-Sep-2019 11:07:57

353 Views

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

Handling Forms in React JS

Shyam Hande
Updated on 04-Sep-2019 09:14:34

568 Views

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

Formik for Form Handling in React JS

Shyam Hande
Updated on 04-Sep-2019 09:06:52

413 Views

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

Error Boundary in React JS

Shyam Hande
Updated on 04-Sep-2019 08:52:07

346 Views

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

Debugging and Error Boundary in ReactJS

Shyam Hande
Updated on 04-Sep-2019 08:48:49

806 Views

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

Creating Functional Components in React JS

Shyam Hande
Updated on 04-Sep-2019 08:43:59

2K+ Views

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

Basics of React JS Routing

Shyam Hande
Updated on 04-Sep-2019 08:38:13

553 Views

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

Adding Bootstrap to React JS Project

Shyam Hande
Updated on 04-Sep-2019 08:20:07

2K+ Views

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

What is Selenium WebDriver

Adiya Dua
Updated on 04-Sep-2019 07:50:47

1K+ Views

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

Advertisements