Constructor in ReactJS

React Constructor The method used to initialize an object’s state and which is automatically called during the creation of an object in a class is known as a constructor in ReactJS. It is called before the component is mounted in ReactJS, but the constructor is not necessary to be present in every component. However, calling … Read more

Redux in ReactJS

React Redux Redux is an open-source JavaScript library which was first introduced in 2015 by Dan Abramov and Andrew Clark in 2015. Redux was inspired by Flux but it omitted the unnecessary complexity: it does not have Dispatcher concept, has a single Store and the Action objects is received and handled directly by Store in … Read more

Difference between React Flux and MVC

React Flux Vs. MVC   MVC FLUX Introduced in 1976. Introduced just a few years ago. The Bi-directional data Flow model is supported. The Unidirectional data flow model is supported. Data binding is the key in MVC. Events or actions are the keys in React Flux. Synchronous. Asynchronous. Controllers handle all logics. Stores handle all … Read more

Flux in ReactJS

React Flux Concept Flux is an application architecture but is not a library nor a framework. It is used internally in Facebook for building the client-side web application with React. There are three major roles that the Flux applications have while dealing with data: Dispatcher, Stores and Views (React components).   Advantages of Flux: It … Read more

Router in ReactJS

React Router The process of directing a user to different pages based on their action or request is known as routing. In ReactJS the process of routing is used for developing Single Page Web Applications, mainly to define multiple routes in the application. The ReactJS provides a standard library system to create routing in the … Read more

Fragments in ReactJS

React Fragments React Fragments is introduced from the 16.2 and above version, to facilitate the grouping off a list of children without adding extra nodes to the DOM. Syntax: child1 child2 .. ….. …. … Example: class App extends React.Component { render() { return ( Welcome You are in the world of ReactJS. ); } … Read more

Refs in ReactJS

React Refs Refs are the shorthand, similar to the React keys. They are used for references in React, to store a reference to particular DOM nodes or React elements, to access React DOM nodes or React elements, to interact with React DOM nodes or React elements and to change the value of a child component, … Read more

Keys in ReactJS

React Keys A key is a unique identifier which is used to identify which items have changed, updated, or deleted from the Lists and to determine which components in a collection needs to be re-rendered. Using Keys with the component: Example: Incorrect usage of the Key. import React from ‘react’; import ReactDOM from ‘react-dom’; function … Read more

Lists in ReactJS

React Lists To display data in an ordered format, lists are used in React JS, much similar to the lists in JavaScript. In ReactJs, the map() function is used for traversing the lists. Example: import React from ‘react’; import ReactDOM from ‘react-dom’; const cities = [‘Jaipur’, ‘Jodhpur’, ‘Udaipur’, ‘Pune’, ‘Chandigarh’]; const names = cities.map((cities)=>{ return … Read more

Conditional Rendering in ReactJS

React Conditional Rendering In React, we can render multiple components on the basis of certain conditions or on the basis of the state of the application. A component in ReactJS thus decides which elements to return depending on one or more conditions. Conditional rendering in React is the same as the conditions in JavaScript. There … Read more