Modularizing

Frontend using
ReactJS
ISHAAN SINGH
Content
• The Old Way
• NodeJS and npm
• The JSX Way
• Getting Started with React
• Understanding The execution Flow
• Creating the components
• The Props and the State
• Hooks and Performance
• Industry Usages
The Old Way
• Writing HTML in index.html
The Old Way
• Writing Styles CSS in styles.css

• Writing Behavior in main.js

The Old Way
• Some Older Libraries
The NodeJS and NPM
• NodeJS
• Asynchronous event-driven JavaScript runtime
• Designed to build scalable network applications
• Cross-platform, open-source server environment that can run on Windows, Linux, Unix, macOS, and more
• Runs on the V8 JavaScript Engine
• Executes JavaScript code outside a web browser
The NodeJS and NPM
• NPM
• Node Package Manager
• Global Registry of JavaScript code sharing
• Run the NodeJS packages in Executable environment
• Manage multiple versions of code and code dependencies.
• Comes in bundle with the NodeJS installable (For Windows)
The NodeJS and NPM
• Installing NodeJS and NPM
• Directly from NodeJS Website: https://nodejs.org/en (For Windows)

• Install Using apt-get (for Linux)

The JSX Way
• Written in ES6 Format

• Uses Babel syntax for language writing

• JavaScript behavior logic and Styles are integrated within the component

• Able to write Reusable Components

• Built using Webpack, which works with NodeJS, to bundle JSX and ES6 into Browser
understandable JavaScript format.
The JSX Way
• Webpack Bundling
Getting Started With React
• Installing Create-React-App
Getting Started With React
• Creating the React app using create-react-app
Getting Started With React
• Starting Your React app

• Bundles the code using Webpack

• Hosts the bundle code using Express Server
• Starts the Browser
Getting Started With React
• The default Browser Screen
Getting Started With React
• Cleaning the App.js and App.css and index.css
• App.js

• Index.css
• For Single Page Application, it is important to set the viewpoint of body and root
The Execution Flow
• The index.html in react
• It is in the /public/index.html
The Execution Flow
• The index.js
• From here, React will takeover
Creating the Component
• The Two Ways:
• Functional Component • Class Based Component
Creating the Component
• Using the button.js in App.js
Creating the Component
Header Buttons

Side-Nav Popup
Main Layout
Button

App.js Search Page TabStrip

Window Popup
Help Layout
Button
Team1
Team 2
Team 3
Team 4
Team 5
Creating the Component
• Naming-Rules for Creating a JSX Component
• The name should start with Upper Case Letter

• Benefits of using Functional Components

• Ability to Use Hooks
• Better management of Updates in Props
• Better Performance optimization
• Less memory consumption in the JS-Heap
• Ability to handle closures better
Props and States
• Props
• Props are the attributes passed on to the JSX Component from the parent element
• When the component behavior is controlled using props only, it is known as a Controlled component.
• When the component behavior is not dependent on the props, it is known as Un-Controlled Component.
• Any event which is sent back to the parent from the JSX Component, props are used.

• States
• The internal variables which are used to control the component is known as states
• The values of states are not accessible by the parent component.
• For a functional component, states are declared using the use State Hook which provides a getter, setter
and accepts the initial value of the state
Props and States
• Example:
• A button which shows the number of times it is clicked. • Modifying the CSS
Props and States
• Example:
• A button which shows the number of times it is clicked.

• After Clicking on Buttons:

Hooks
Hooks Without Dependencies:

• State Hooks:
• const [getter, setter] = React.useState(<initialValue>);

• Context Hooks:
• const contextValue = React.useContext(NewContext);

• Ref Hooks:
• const domReference = useRef(null);
Hooks and Performance
Hooks With Dependencies:

• Effect Hooks:

• Memorized Hooks:
Hooks and Performance
Hooks With Dependencies:

• Memorized Callbacks

• More on Hooks:
• There are many more hooks, but these are widely used hook patterns.
• You can create your custom hooks for handling a specific use-case.
Optimizing The Code
• Extracting required items from props
Optimizing The Code
• Creating hooks in Button.js • Creating hooks in App.js
Industry Usages
• Multiple Teams can create their components separately and publish it in the Local NPM and
share it with other teams in the company.

• Smaller Re-Usable Components can be created to be used across multiple locations in a single
application.

• Easy to test, debug and improve performance by using proper hooks.

• HTML, CSS, JavaScript is all combined in JSX, hence making it easier to code in single file rather
than maintaining multiple files.

• Focus is on the Logic and Flow rather than long JavaScript syntax and DOM maintenance.
Thank You
React Installation and execution
 How to create React Application
• React application without installation:
• We can also create a React app without npm(Node Package Manager) by
directly importing Reactjs library in our HTML code.
• This is exactly what we will do here. Here are the steps required to create and
run a React app without npm.
• React Application with installation:
• First, you use npm (Node Package Manager) installed on your machine.
• If you’re using VS Code, you need to make sure you’ve configured your
machine to run React code in VS code using npm.
• You will also need to setup a build environment for React that typically
involved use of npm (node package manager), webpack, and Babel.
 Executing React: Without npm(Node Package Manager)
• React JS Without installation
 React can work with installation as well as without installation
 However, for fresher's or those who are learning for the first
time, React can be made use by without installation
 On the other hand if we are working in a project we need to
install react in the system
 In order to make use of react without any installation we will
use the concept of CDN which stands for Content Delivery
network
 React application without installation
• HTML
• Java Script
• Browser
NPM and NPX
• What is NPM : NPM stands for Node Package Manager. It comes pre-
installed with Node.js. NPM is used to install Node.js packages to use
them in our application. It makes it easier for developers to share and
reuse open source code by enabling them to be installed as modules.
Modules are JavaScript packages that you can install in your system
using NPM. NPM helps to manage packages in your projects as
dependencies.
• NPX is an NPM package executor. Initially, NPX was launched in July
2017. NPX was just an NPM package that could be installed like other
NPM packages. Currently, NPX is bundled with NPM when you install
the NPM version 5.2.0 or higher.
 Difference between NPM and NPX

npm npx
A package can be executable without installing
If you wish to run package through npm then
the package, it is an npm package runner so if
you have to specify that package in
any packages that aren’t already installed it will
your package.json and installed it locally.
installed automatically.

To use create-react-app in npm the commands But in npx you can use that without installing like
are npm install create-react-app then create- npx create-react-app myApp, this command is
react-app myApp(Installation required). required in every app’s life cycle only once.

Npm is a tool that use to install packages. Npx is a tool that use to execute packages.

Packages used by npx are not installed globally

Packages used by npm are installed globally you
so you have to carefree for the pollution for the
have to care about pollution for the long term.
long term.
 Steps to execute React without npm

 We will create an HTML page

 Then we will insert three CDN links
 Then we will write some HTML code
 Then some react code
 And then our example will be complete
 In other words React App
 [React_cdn.html]
React Installation
 React with Installation

• Process
 The first step is to create a folder where you want to install
react project. You can use DOS command or whatever it is
 Execution Pre-requisit
• Download and install Visual Studio Code
• Download and install Node.js
• You can install npm by installing Node.js.
• Tocheck required softwares are installed or not
• Check node installation < node -v>
• Check npm installation <npm –v>
• npx create-react-app <app name> [For creating new React Project]
• cd <app name> [Enter in Project folder]
• create-react-app includes built tools such as webpack, Babel, and ESLint.
• To start new project [npm start]
• New project will open in Visual Studio Code
 React Installation
• Creating a First React App with Node JS
 In order to start we first need node JS and NPM so we install it first in our computer
 Goto google and type install node. Select the link for download Node JS.
 https://nodejs.org/en/download/
 Select windows installer as the case may be
 Run the installer
 Keep on accepting the messages to complete the installation
 Go to command prompt and check whether npx and npm is working or not.
 Windows installer
 Install node.js
 Command to check node.js installation
 Restart your computer to run node.js
 node –v [To check node is installed]
 npm –v [To check npm is installed]
 To check node is working [node java_script.js] runt his file
 Type npx of npm at the command prompt to ensure that it has installed successfully
 Creating first react application

• Creating a First React App with Node JS

 In order to create the app. Go to the director where you want
to create an application.
 Type at the command prompt the following
 Npx create-react-app my-app
 After some times a folder with my-app is created.
 Go to this app by typing cd my-app
 Type npm start at the command prompt to see the first re-act
app.
 npm start [will start this application]
First React Project Output
 Background Activities during React App

• Back ground Activities during the creation of React App

 File structure of React Application

• Understanding the file structure

 React Application File Structure
 Readme MD :
 It is a simple plain text file that contains the basic information of the files and some
guides.
 It is used to write some installation guide or basic documentation inside the project
directory.
 Most popular repository providers like GitHub, gitlab and bitbucket are using
the readme.md file as a file descriptor.
 Package JSON :
 All npm packages contain a file, usually in the project root, called package. json - this
file holds various metadata relevant to the project.
 This file is used to give information to npm that allows it to identify the project as well
as handle the project's dependencies.
 package-lock. Json
 is automatically generated for any operations where npm modifies either the
node_modules tree, or package. json .
 It describes the exact tree that was generated, such that subsequent installs are able to
generate identical trees, regardless of intermediate dependency updates.
 gitignore
 file is a text file that tells Git which files or folders to ignore in a project.
 A local . gitignore file is usually placed in the root directory of a project.
 ... Each new line should list an additional file or folder that you want Git to
ignore
 src Folder:
 The most common src folder looks somewhat like this: Common src
folder structure. Now, let's go over the folders one by one and the and
understand the motivation behind them and the type of files you would store in
them: Assets: This folder contains all the media assets, such as images, videos,
json files
 public folder:
 contains the HTML file so you can tweak it, for example, to set the page title.
 The <script> tag with the compiled code will be added to it automatically during
the build process
 React Application File Structure
• Understanding the file structure
• The following visuals depict the file structure of the react project app.
 React Application file Structure
 Build represents the path to our final production build. This
folder would actually be created after we run the npm build.
 We can see all the "dependencies" and "devDependencies"
required by our React app in node_modules. These are as
specified or seen in our package.json file. If we just write dir at
the command prompt we‘will see almost 800 sub-directories.
This directory gets added to .gitignore so it does not really get
uploaded/published as such.
 Our static files are located in the public directory.
 All of the dynamic components will be located in the src.
 Files inside “src” directories
• We can also see files like App.js which is kind of our main JS
component and the corresponding styles go in App.css.
 In case, we want to add any unit tests, we can use the App.test.js for
that. Also, index.js is the entry point for our App and it triggers the
registerServiceWorker.js.
 As a side-note, we mostly add a 'components' directory here to add
new components and their associated files, as that improves the
organization of our structure.
Package.json: React Application Configuration
• The overall configuration for the React project is outlined in the
package.json. Below is what that looks like:
 Attributes Inside Package.json
 name - Represents the app name which was passed to create-
react-app.
 version - Shows the current version.
 dependencies - List of all the required modules/versions for our
app. By default, npm would install the most recent major
version.
 devDependencies - Lists all the modules/versions for running
the app in a development environment.
 scripts - List of all the aliases that can be used to access react-
scripts commands in an efficient manner. For example, if we run
npm build in the command line, it would run "react-scripts
build" internally.
• We can see the following attributes:
 The dependencies which are shared by our application can go to the
assets directory.
 These can include mixins, images, etc.
 Thus, they would represent a single location for files external to our
main project itself.
 We also need to have a utilities folder.
 This would contain a list of helper functions used globally across the
app.
 We can add common logic to this utilities folder and import that
wherever we want to use it. While the naming can vary slightly, the
standard naming conventions are seen include helpers, utils, utilities,
etc.
 Full Stack Development
• With that, our structure would now looks something like below:
 Mainifest.json : Our Application on Mobile
• manifest.json This file is used to describe our app e.g. On mobile
phones, if a shortcut is added to the home screen. Below is how
that would look like;
 When our web app is added to user's home screen, it is this metadata
which determines the icon, theme colors, names, etc. favicon.ico

 This is the icon image file used by our project. It is also linked inside
index.html and manifest.json.
IDE for React
• Go to google and write download visual studio code
• Choose your operating system
• Download visual studio code
• Install visual studio code
What is React Element?
• React Element:
• It is the basic building block in a react application, it is an object
representation of a virtual DOM node.
• React Element contains both type and property.
• It may contain other Elements in its props.
• React Element does not have any methods, making it light and faster to
render than components.
ReactDOM.render()
• The ReactDOM.render() function takes two arguments,
• HTML code
• an HTML element.
• The purpose of the function is to display the specified HTML code
inside the specified HTML element.
• ReactDOM.render() is rendering code to a folder in the root directory
of your React project, named "public". In this folder, there is an
index.html file.
DOM Rendering
ReactDOM.createRoot()
• createRoot() controls the contents of the container node you pass in.
Any existing DOM elements inside are replaced when render is called.
Later calls use React’s DOM diffing algorithm for efficient updates.

• createRoot() does not modify the container node (only modifies the
children of the container). It may be possible to insert a component
to an existing DOM node without overwriting the existing children.
React Developer Tools:
• React Developer Tools is a Chrome DevTools extension for the open-source
React JavaScript library. It allows you to inspect the React component
hierarchies in the Chrome Developer Tools.
• You will get two new tabs in your Chrome DevTools: "⚛️ Components" and
"⚛️ Profiler".
• The Components tab shows you the root React components that were
rendered on the page, as well as the subcomponents that they ended up
rendering.
• By selecting one of the components in the tree, you can inspect and edit its
current props and state in the panel on the right. In the breadcrumbs you
can inspect the selected component, the component that created it, the
component that created that one, and so on.
Application Clean up Process for Beginners
• Open your folder in Visual Studio Code and Perform a clean up
operation to start a fresh Reach application with understanding.
• Open src folder
• Index Page
 Let's also have a look inside the index.js as well as the index.html
page which gets generated. Below is how our index.js file looks;
• Moving deeper into React
• Having understood the basic functioning of the React by means of
visuals and installation of react app with the help of npx and npm,
let us now dive deep into React.
• We start with the components of React.
 React/ReactJS/React.js
Module: 4: Fundamentals of React.js [Lecture-9Hrs] [Application]
Overview of React.js.; Reactive Programming; React Components; Render
Method; Virtual DOM and Bandwidth Salvation; Two Distinct Ways of
Initializing a React Class; States & Life Cycles; Component Mounting; Node.js &
NPM; JSX Walkthrough; React Testing
Overview of React.js
Industry Trends for React/React.js

• React developers earn more money when compared to other web

development technologies.
• Average salary of React developer across the US is $91,000 per
annum.
• Average salary of React developer across in India is 7,25,000 per
annum.
• React is gaining popularity and being adopted by many countries.
•:
Data by Google Trends for Web development framework
Companies using react:
 React Pre-requisites
 One should be familiar with programing concepts like
function, arrays, Objects and classes.
 HTML
 CSS
 JavaScript
 Understanding of ES6 (ES6 stands for ECMAScript 6.
ECMAScript was created to standardize JavaScript, and ES6 is
the 6th version of ECMAScript )
 React/React.js/ReactJS
- React (also known as React.js or ReactJS) is a free open source java script library for
building fast an interactive front end UI interfaces for web and mobile applications.
- It is used for building user interfaces specifically for single-page applications which
means complete website in single page
- In MVC architecture, react is the view which defines how the app looks and feels
like.
- It’s used for handling the view layer for web and mobile apps. React also allows us
to create reusable UI components.
- React is a User Interface (UI) library
- React can be used to develop both web and mobile interfaces.
- It was developed in facebook now meta in 2011.
- React was developed by “Jordon Walke” an engineer in facebook.
- It is maintained by the community of individual developers.
- React first deployed on Facebook’s newsfeed in 2011 and on Instagram.com in 2012.
• React allows developers to create large web applications that can
change data, without reloading the page.
• The main purpose of React is to be fast, scalable, and simple.
• It works only on user interfaces in the application.
• This corresponds to the view in the MVC template.
• It can be used with a combination of other JavaScript libraries or
frameworks, such as Angular JS in MVC.
 To conclude : we can say…..
 React is a declarative, efficient, and flexible JavaScript library
for building user interfaces. It lets you compose complex UIs
from small and isolated pieces of code called “components”.
React has a few different kinds of components.
 Why React is so popular
• Easy creation of dynamic web site.
• Performance enhancement
• Reusable components
• Unidirectional Data flow
• Small Learning Curve
• Can be used for mobile apps
• Dedicated tools for debugging
 React Compiler: Babel
• Babel is a JavaScript compiler that can translate markup or
programming languages into JavaScript.
• With Babel, you can use the newest features of JavaScript (ES6 -
ECMAScript 2015).
• Babel is available for different conversions. React uses Babel to
convert JSX into JavaScript.
• Please note that <script type="text/babel"> is needed for using Babel.
React Features:
• Currently, ReactJS gaining quick
popularity as the best
JavaScript framework among
web developers. It is playing an
essential role in the front-end
ecosystem. The important
features of ReactJS are as
following.
• JSX
• Components
• One-way Data Binding
• Virtual DOM
• Simplicity
• Performance
Features of React : JSX
• JSX stands for JavaScript XML. It is a JavaScript syntax extension. Its an
XML or HTML like syntax used by ReactJS.
• In React, instead of using regular JavaScript for templating, it uses JSX.
• JSX is a simple JavaScript that allows HTML quoting and uses these
HTML tag syntax to render subcomponents.
• HTML syntax is processed into JavaScript calls of React Framework.
• We can also write in pure old JavaScript.
Java script Features: React Native
• React has native libraries that were announced by Facebook in 2015,
which provides the react architecture to native applications like IOS,
Android and UPD.
• React-native is a mobile apps building framework using only
Javascript.
• It uses the same design as React, letting you utilize/include a rich
mobile UI library/ declarative components. It uses the same
fundamental UI building blocks as regular iOS and Android apps. The
best part of using react-native is to allow/adopt components written
in Objective-C, Java, or Swift.
One-way Data Binding/ flow
• ReactJS is designed in such a manner that follows unidirectional data flow or one-way
data binding.
• The benefits of one-way data binding give you better control throughout the application.
• If the data flow is in another direction, then it requires additional features.
• It is because components are supposed to be immutable and the data within them
cannot be changed.
• Flux is a pattern that helps to keep your data unidirectional.
• This makes the application more flexible that leads to increase efficiency.
• In React, a set of immutable values are passed to the components renderer as properties
in its HTML tags. The component cannot directly modify any properties but can pass a
call back function with the help of which we can do modifications. This complete process
is known as “properties flow down; actions flow up”.
Reactive Programming
Reactive Programming
• Reactive programming utilizes asynchronous data streams. Typical events
are asynchronous that we can watch or add extra effects.
• When we create reactive programming, we’re creating data streams from
events that happen as a result of variables, data structures, and just about
anything.
• Example: Google Maps app
• It does this by tracking your location, the acceleration of your device, and
its position relative to North. Then, it combines those values and submits
them to the API every few seconds. The API then returns a response to the
UI Thread which then displays it to you, the user, as a little moving dot on a
map. That’s reactive programming in a nutshell.
To use React, developers typically use a combination of JavaScript, JSX (an extension to JavaScript), and CSS to
define the UI components and their behavior.
Here is an example of a simple React component that renders a button:
import React from 'react';

function Button(props) {
return (
<button onClick={props.onClick}>
{props.label}
</button>
);
}

export default Button;

 React Components
• ReactJS is all about components. ReactJS application is made up of
multiple components, and each component has its own logic and
controls. These components can be reusable which help you to
maintain the code when working on larger scale projects.
 React Components
what are components in react js?
In ReactJS, a component is a reusable and independent piece of code that defines a part of a user
interface. It can be thought of as a building block for constructing a larger application.
There are two main types of components in ReactJS:
• Function Components: These are simple and stateless components that take in props (short for
properties) as input and return a React element (JSX) as output. They are mainly used for
rendering static content.
• Class Components: These are more complex and can have state and lifecycle methods. They
extend the React Component class and have a render() method that returns a React element.
They are used for more complex logic and interaction with the user.
• In addition to these main types of components, React also has a third type of component known
as Higher Order Components (HOCs) which are functions that take in a component as input and
return a new component with additional functionality.
• Overall, components are the building blocks of a ReactJS application and are used to create
reusable UI elements
Example 1
Class Components Function Components

The class component also requires a render() method, Create a Function component called Car
this method returns HTML. function Car()
{ return <h2>Hi, I am a Car!</h2>;}
class Car extends React.Component
{ render()
{ return <h2>Hi, I am a Car!</h2>; }
}
Example 2
Now your React application has a component called Car, which returns an <h2> element.
To use this component in your application, use similar syntax as normal HTML: <Car />
import React from 'react';
import ReactDOM from 'react-dom/client';
function Car()
{ return <h2>Hi, I am a Car!</h2>;}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car color="red"/>);
output: Hi, I am a Car!
• Multiple Components
Components can be reusable which help you to maintain the code when
working on larger scale projects.
Example 3
import React from 'react';
import ReactDOM from 'react-dom/client';
function Car() { return <h2>I am a Car!</h2>;}
function Garage() { return ( <><h1>Who lives in my Garage?</h1>
<Car /> </> );}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);

output:
Who lives in my Garage?
I am a Car!
Why React is fast ?
Render Method
what is meant by rendering in react js?

• Rendering in ReactJS refers to the process of displaying or updating

the contents of the user interface based on the current state and
props of the components.
• When a React component is rendered, it generates a virtual DOM
(Document Object Model) which is a lightweight representation of
the actual DOM. The virtual DOM is then compared to the previous
version of the virtual DOM, and only the differences are updated in
the actual DOM. This process is called "reconciliation" and is done in
an efficient manner to minimize the number of updates required to
the DOM.
Example 4 The render() method is a required method in a
React component. It is responsible for rendering
the component's UI based on its current state
and props.
Here is an example of a simple React component with a render() In this example, the Greeting component takes
method:
import React from 'react'; in two props, name and day, and renders an
class Greeting extends React.Component { HTML h1 and p element containing the values of
render() {
those props.
The render() method returns a JSX expression
return (
that defines the component's UI. It can contain
<div>
HTML elements, other React components, and
<h1>Hello, {this.props.name}!</h1>
JavaScript expressions.
<p>Today is {this.props.day}.</p>
Note that the render() method should be a pure
</div>
function, meaning it should not modify the
);
component's state or props. It should only
} return a new UI based on the current state and
} props. Any updates to the state or props should
be handled by other methods in the component,
export default Greeting; such as setState() or event handlers.
Virtual DOM
DOM(Document Object Model)
• DOM treats an XML or HTML document as a tree structure in which
each node is an object representing a part of the document
Virtual DOM
• The virtual DOM (VDOM) is a programming concept where an ideal, or
“virtual”, representation of a UI is kept in memory and synced with the
“real” DOM by a library such as ReactDOM. This process is called
reconciliation.
• A virtual DOM object is a representation of the original DOM object. It
works like a one-way data binding. Whenever any modifications happen in
the web application, the entire UI is re-rendered in virtual DOM
representation.
• Then it checks the difference between the previous DOM representation
and new DOM. Once it has done, the real DOM will update only the things
that have actually changed.
• This makes the application faster, and there is no wastage of memory.
• React creates an in-memory data structure cache which computes the
changes made
• and then updates the browser. This allows a special feature that enables
the programmer to code as if the whole page is rendered on each change
whereas react library only renders components that actually change.
Below is a visual description of the rendering
process when an application re-renders.
 Bandwidth Salvation
• Virtual DOM and Bandwidth Salvation are related concepts in ReactJS, but they
are not the same thing.
• The Virtual DOM is a concept in ReactJS that refers to a lightweight
representation of the actual DOM (Document Object Model). The Virtual DOM is
a JavaScript object that contains all the elements and attributes of the actual
DOM, but it is faster and more efficient to manipulate than the actual DOM.
When a component in ReactJS is updated, the Virtual DOM is used to compare
the new state of the component with the previous state and determine the
minimum number of changes needed to update the actual DOM.
• Bandwidth Salvation(recovery/rescue), on the other hand, is a term used to
describe the way ReactJS can reduce the amount of data that needs to be
transferred over the network. Because the Virtual DOM is so efficient, ReactJS
can minimize the amount of data that needs to be transferred over the network
by only sending the changes that are needed to update the UI, rather than
sending the entire UI every time there is a change.
Bandwidth Salvation
• So, while the Virtual DOM and Bandwidth Salvation are related
concepts in ReactJS, they are not the same thing. The Virtual DOM is
a technology that enables ReactJS to efficiently update the UI, while
Bandwidth Salvation is a benefit of using ReactJS that reduces the
amount of data that needs to be transferred over the network,
resulting in faster and more efficient web applications.
• Simplicity
• ReactJS uses JSX file which makes the application simple and to code
as well as understand. We know that ReactJS is a component-based
approach which makes the code reusable as your need. This makes it
simple to use and learn.
• Performance
• ReactJS is known to be a great performer. This feature makes it much
better than other frameworks out there today. The reason behind this
is that it manages a virtual DOM. The DOM is a cross-platform and
programming API which deals with HTML, XML or XHTML. The DOM
exists entirely in memory. Due to this, when we create a component,
we did not write directly to the DOM. Instead, we are writing virtual
components that will turn into the DOM leading to smoother and
faster performance.
strategies to reduce the bandwidth usage of
ReactJS applications:
• Code splitting: Code splitting divides the application code into smaller chunks that can be loaded on-
demand. This technique can reduce the initial load time and minimize the amount of data transmitted over
the network.
• Server-side rendering: Server-side rendering (SSR) involves rendering the initial UI on the server and sending
the HTML to the client, rather than sending a large JavaScript bundle that must be parsed and executed on
the client. SSR can reduce the amount of network traffic and improve the time-to-interactive (TTI) of a web
application.
• Optimizing images and media: Large images and media files can increase the amount of data transmitted
over the network. You can optimize images by compressing them and reducing their file size. You can also
use responsive images that adjust their size based on the device's screen size.
• Minimizing HTTP requests: Each HTTP request made by the application adds to the network usage. You can
reduce the number of HTTP requests by consolidating CSS and JavaScript files and using caching to store
frequently accessed data.
• Lazy loading: Lazy loading involves deferring the loading of certain resources until they are needed. This
approach can reduce the amount of data transmitted over the network and improve the initial load time.
• By using these strategies, you can optimize the performance of your ReactJS application and reduce its
bandwidth usage, resulting in a faster and more responsive application.
 Advantages of React
• 1. Easy to Learn and Use :
• ReactJS is much easier to learn and use as it comes with a good supply of
documentation, tutorials, and training resources.
• Any developer who comes from a JavaScript background can easily understand and
start creating web apps using React in a few days.
• It is the V(view part) in the MVC (Model-View-Controller) model, and referred to as
?one of the JavaScript frameworks.? It is not fully featured but has the advantage of
open-source JavaScript User Interface(UI) library, which helps to execute the task in a
better manner.
• Creating Dynamic Web Applications Becomes Easier:
• To create a dynamic web application specifically with HTML strings was tricky
because it requires a complex coding, but React JS solved that issue and makes it
easier.
• It provides less coding and gives more functionality.
• It makes use of the JSX(JavaScript Extension), which is a particular syntax letting
HTML quotes and HTML tag syntax to render particular subcomponents.
• It also supports the building of machine-readable codes.
• 3. Reusable Components :
• A ReactJS web application is made up of multiple components, and each component has its own logic and controls.
• These components are responsible for outputting a small, reusable piece of HTML code which can be reused wherever you need
them.
• The reusable code helps to make your apps easier to develop and maintain.
• These Components can be nested with other components to allow complex applications to be built of simple building blocks.
• ReactJS uses virtual DOM based mechanism to fill data in HTML DOM.
• The virtual DOM works fast as it only changes individual DOM elements instead of reloading complete DOM every time.
• 4. Performance Enhancement :
• ReactJS improves performance due to virtual DOM.
• The DOM is a cross-platform and programming API which deals with HTML, XML or XHTML.
• Most of the developers faced the problem when the DOM was updated, which slowed down the performance of the application.
ReactJS solved this problem by introducing virtual DOM.
• The React Virtual DOM exists entirely in memory and is a representation of the web browser's DOM.
• Due to this, when we write a React component, we did not write directly to the DOM.
• Instead, we are writing virtual components that react will turn into the DOM, leading to smoother and faster performance.
• 5. The Support of Handy Tools :
• React JS has also gained popularity due to the presence of a handy set of tools.
• These tools make the task of the developers understandable and easier.
• The React Developer Tools have been designed as Chrome and Firefox dev extension and allow you to inspect the React component
hierarchies in the virtual DOM.
• It also allows you to select particular components and examine and edit their current props and state.
• 6. Known to be SEO Friendly: raditional JavaScript frameworks have
an issue in dealing with SEO. The search engines generally having
trouble in reading JavaScript-heavy applications. Many web
developers have often complained about this problem. ReactJS
overcomes this problem that helps developers to be easily navigated
on various search engines. It is because React.js applications can run
on the server, and the virtual DOM will be rendering and returning to
the browser as a regular web page.
• 7. The Benefit of Having JavaScript Library : Today, ReactJS is
choosing by most of the web developers. It is because it is offering a
very rich JavaScript library. The JavaScript library provides more
flexibility to the web developers to choose the way they want.
• 8. Scope for Testing the Codes : ReactJS applications are extremely
easy to test. It offers a scope where the developer can test and debug
their codes with the help of native tools.
 Obstacles and Road blocks of react
• 1. The high pace of development
• The high pace of development has an advantage and disadvantage both. In case of disadvantage,
since the environment continually changes so fast, some of the developers not feeling comfortable
to relearn the new ways of doing things regularly. It may be hard for them to adopt all these changes
with all the continuous updates. They need to be always updated with their skills and learn new
ways of doing things.
• 2. Poor Documentation: It is another cons which are common for constantly updating technologies.
React technologies updating and accelerating so fast that there is no time to make proper
documentation. To overcome this, developers write instructions on their own with the evolving of
new releases and tools in their current projects.
• 3. View Part
• ReactJS Covers only the UI Layers of the app and nothing else. So you still need to choose some
other technologies to get a complete tooling set for development in the project.
• 4. JSX as a barrier
• ReactJS uses JSX. It's a syntax extension that allows HTML with JavaScript mixed together. This
approach has its own benefits, but some members of the development community consider JSX as a
barrier, especially for new developers. Developers complain about its complexity in the learning
curve.
 React Library: UI Components
• Lightweight and user friendly : The entire library is built from scratch to be lightweight and
modular. Its footprint can be reduced further by including only specific components and features
that your application requires.
• Modular architecture : All components have been built as modules to enable selective
referencing, so only the components and features you need are included in your application.
• Built for performance : Performance is critical for delivering a good user experience. We ensure
that all our components are designed and built to achieve the best performance possible.
• Responsive and touch friendly : All the components are touch friendly and render adaptively
based on the device, providing optimal user experience on phones, tablets, and desktops.
• Stunning built-in themes : Pixel-perfect, built-in themes are available in Material, Bootstrap,
Tailwind CSS, and Fabric designs. In addition, you can use an accessible high-contrast theme and
an online Theme Studio tool for customizing built-in themes.
• Globalization simplified :Easily build applications to be used by a global audience in various
language and culture settings.
• Code on GitHub : Complete source code, unit test files, and e2e test scripts are available
on GitHub. Such components are subject to the terms and conditions of the Syncfusion EULA.
• Stay current : With our commitment to at least four major updates per year, you receive the most
up-to-date functionality and new components in addition to monthly service packs and bug fixes.
Custom patches are available as needed.
MOST POPULAR COMPONENTS
• GRIDS • DATA • INPUTS • BUTTONS
VISUALIZATION • NAVIGATION • Button
• Data Grid • Charts • Accordion • TextBox • Button
• Pivot Table • Stock Chart • Breadcrumb • Input Mask Group
• Circular Gauge • Dropdown
• Tree Grid • Context • Numeric
• Linear Gauge Menu
• Menu
• Spreadsheet Diagram Textbox • Progress
• HeatMap • Menu Bar Button
• CALENDARS Chart • Radio
• Sidebar • Split Button
• Maps Button • Chips
• Scheduler • Range Selector • Tabs
• Checkbox • FORMS
• Gantt Chart • Smith Chart • Toolbar
• Sparkline • Color Picker • In-place
• Calendar Charts • TreeView Editor
• File Upload
• DatePicker • Barcode • File Manager • Query
Generator • Slider Builder UI
• DateRangePi • TreeMap • NOTIFICATION • Signature P • EDITORS
cker • Bullet Chart S
• Kanban REVIEW • Rich Text
• DateTime • Badge Editor
• VIEWER • Toggle • Word
Picker • Toast
• PDF Viewer Switch Processor
• TimePicker • Progress Bar Button
• DROPDOWNS • LAYOUT
• AutoComplete • Avatar
• ListBox • Card
• ComboBox • Dialog
• Dropdown List • ListView
• MultiSelect Dropdown • Tooltip
• Dropdown Tree • Splitter
• Dashboard Layout