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

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

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

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

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

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

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

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

React Events An action triggered as a result of the user action or system-generated event is termed as an event. The React event handling system, also known as Synthetic Events is a cross-browser wrapper of the browser’s native event and is much like handling events on DOM elements but have some syntactic differences. The events … Read more

Controlled Vs Uncontrolled   Controlled Component: Unlike the uncontrolled component, the input form element in the controlled component is handled by the component rather than the DOM. It takes its current value through props. The changes are notified through callbacks.   Uncontrolled component: Similar to the traditional HTML form inputs, the uncontrolled component can be … Read more