Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Front End Technology Articles
Page 651 of 652
Returning adjacent element in React.js and HOC
Generally the return statement in React’s render method returns a single div element enclosing all the child jsx like below −render(){ return ( Header Test ); }Here we cannot simply return multiple elements, we need to have a parent container similar to div as shown above.If no parent container element, then we can even return an array like below −While returning an array we will require an unique key to be given to each element of an arrayrender(){ return ( ...
Read MoreReact.js routing
Before React Router v4, the routing in react was static but after v4 update its dynamic. In single page applications, we have only one page index.html and different components which gets displayed based on routes.In non spa web applications, server returns a page on request. To start with routing , first install the routing package −npm install –save react-router-domOnce we create the create the project with create-react-app, we will see there is only one html file and that is index.html and a single component named as AppNow, we will create two more components AboutUs.jsx and ContactUs.jsxAboutUs.jsximport React from 'react' class ...
Read MoreReact.js component lifecycle error handling phase
There are two main methods in error handling. These method are used in the error boundary mechanism in React. We wrap the component ( from where there is a possibility of error occurrences ) in a class which handles the below methods.Static method getDerivedStateFromError(error)componentDidCatch(error, info)Static getDerivedStateFromError(error): As name of the method suggest, we can update state object here based on error received from descended component.componentDidCatch(error, info): we can log the errors using api call. This is helpful in displaying useful error message on screen instead of technical errors.A class can be termed as an error boundary if it implements at ...
Read MoreReact.js Component Lifecycle - Updating phase
The update lifecycle can be triggered by two events −Update of props by parent componentChange in local stateUpdate of props by parent componentcomponentWillReceiveProps(nextProps) −This is the first method which gets called on prop change. It contains one argument nextProps means the newly changed props.Here, we can synchronize local state with props if requiredIf state is not needed to synchronize with props then probably no need to implement this method.Causing side effects should be avoided here. Because if side effects used here, it may results into re-render or performance issues.Now, componentWillReceiveProps is deprecated and replaced by static method getDerivedStateFromProps(props, state). As ...
Read MoreReact.js Component Lifecycle - Unmounting
ComponentWillUnmount is the only method that executes in unmount phase.Component enters into this phase when there is no matching in element tree for this component.Just before the component gets removed from actual DOM, this method gets called.Along with removal of this component from DOM tree, all children of this component also gets removed automatically.Once component is removed from the DOM, it gets available for the garbage collection in React.Cleanup activities can be done in this method. E.g. clear localstorage variables used in app, clear session, clean up charts, cleanup timers, cancel pending api requests etc.componentWillUnmount(){ this.resetSession(); //example ...
Read MorePure Component in React.js
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 MoreNested Routing in React.js
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 MoreNavigation in React.js Routing
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 MoreReact.js memo function in functional component
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 MoreAdding bootstrap to React.js project
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