WELCOME TO
REACT JS
CONTENT
01 What is react js ?
02 Why we use react js
03 Advantages and Disadvantages
04 REDUX
05 Hoc(Higher-Order Components)
06 DEMO ON PROJECT
What is React js?
React is a JavaScript library for building user interfaces.
It is an open-source, component-based front end library responsible only for the view
layer of the application. It was created by Jordan Walke, who was a software
engineer at Facebook.
React is used to build single-page applications.
React allows us to create reusable UI components.
Why we use React js?
The main objective of ReactJS is to develop User Interfaces that improves the speed of the apps.
It uses virtual DOM, which improves the performance of the app. The JavaScript virtual DOM is faster
than the regular DOM. We can use ReactJS on the client and server-side as well as with other
frameworks. It uses component and data patterns that improve readability and helps to maintain
larger apps.
Advantages and Disadvantages
1.Easy to Learn and Use 1.The High pace of development
2.Creating Dynamic web application becomes easier 2.Poor Documentation
3.Reusable Components 3.View Part
4.Performance Enhancement 4.Jsx as a Barrier
React Redux
Redux is an open-source JavaScript library used to manage application state. React Redux uses
for building the user interface. It was first introduced by Dan Abramov and Andrew Clark in 2015.
Why we will use Redux?
React Redux is the official UI bindings for react Application. It is kept up-to-date with any API
changes to ensure that your React components behave as expected.
It encourages good 'React' architecture.
It implements many performance optimizations internally, which allows to components re-render
only when it actually needs.
Redux Architecture
HOC(Higher-Order Components)
It is also known as HOC. HOC is an advanced technique for reusing component logic. It is a
function that takes a component and returns a new component.
Syntax:-
const NewComponent = higherOrderComponent(WrappedComponent);
Example
//Function Creation
function add (a, b) {
return a + b
}
function higherOrder(a, addReference) {
return addReference(a, 20)
}
//Function call
higherOrder(30, add) // 50
THANK YOU