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
Javascript Library Articles
Page 17 of 18
Pure 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 MoreAccessibility in React.js
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( Test ); }Div can cause semantics issue if working with table, list etc. To avoid this we can use React provided fragment as shown below −import React, { Fragment } from ‘react’; function MessageList({ message }) { return ( ...
Read MoreThinking in React.js
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 fetch data. We can create a mock service to start with and build a component to fetch and display data.Here we can include the processing of json in component and evaluating the expected result.Step 2 − Break the functionality into smaller componentsThe first Thing React suggest is to create the ...
Read MoreComposition vs inheritance in React.js
Composition and inheritance are the approaches to use multiple components together in React.js . This helps in code reuse. React recommend using composition instead of inheritance as much as possible and inheritance should be used in very specific cases only.Example to understand it −Let’s say we have a component to input username.Inheritanceclass UserNameForm extends React.Component { render() { return ( ); } } ReactDOM.render( < UserNameForm />, document.getElementById('root'));This sis simple to just input ...
Read MoreLifting state up in React.js
Often there will be a need to share state between different components. The common approach to share state between two components is to move the state to common parent of the two components. This approach is called as lifting state up in React.jsWith the shared state, changes in state reflect in relevant components simultaneously. This is a single source of truth for shared state components.ExampleWe have a App component containing PlayerContent and PlayerDetails component. PlayerContent shows the player name buttons. PlayerDetails shows the details of the in one line.The app component contains the state for both the component. The selected ...
Read MoreWorking with lists and keys in React.js
Displaying a list on UI in ReactMap is JavaScript function which will return a new array for provided array as shown below −const originalNumbers = [ 2, 4, 6, 8, 10]; const squaredNumbers = originalNumbers.map( (number)=> number * number); console.log(“Squared Numbers==”squaredNumbers);Building a list in React is similar with the use of map function. Instead of just returning a square number , we will return a list element with value of square.const originalNumbers = [ 2, 4, 6, 8, 10]; const squaredNumbersList= originalNumbers.map((number) => {number*number} );Render on the screen with ui tag −ReactDOM.render( { squaredNumbersList }, document.getElementById('root') );When ...
Read More