React

JS
Abu Baker Siddik
Junior Software Engineer
Namespace IT
What is React JS?
React is a component-based JavaScript library for building user
interfaces. It is used to build single page applications (SPA) and
allows us to create reusable UI components.
What is Single page application (SPA)?
A Single Page Application (SPA) is a type of web application that loads and
renders a single HTML page, and then dynamically updates the content of that
page as the user interacts with it, without needing to reload the entire page.
Why use React?
Simplicity: component- based approach, well- defined lifecycle,
and use of just plain JavaScript
 Easy to learn: basic previous knowledge in programming can
easily
understand React
 Native Approach: Web application
 Data Binding: uses one-way data binding
Virtual DOM
Large ecosystem
Performance
Fundamentals of React
 Component
 Props
 State
 Lifecycle
 Hooks
 JSX
 Virtual DOM
Component
Components are self-contained reusable building blocks of web
application.
Types of components
There are two types of components
1. Class Base Component

2. Functional Component
Props
React allows us to pass information from one component to
another using something called props (stands for
properties). Props are basically kind of global variable or
object.
State
State is a JavaScript object that stores a component's dynamic
data and determines the component's behaviour.
Props vs State
In a React component, props are variables passed to it by its
parent component. State on the other hand is still variables, but
directly initialized and managed by the component. The state can
be initialized by props.
LIFECYCL
E
Hooks
Hooks are a new addition in react 16.8. They let you use
state and other react features without writing a class.

 Basic Hooks  Additional Hooks

 useReducer
 useState  useCallback
 useEffect  useMemo
 useContext  useRef
 useImperativeHandle
 useLayoutEffect
 useDebugValue
JSX
JSX stands for JavaScript XML. JSX allows us to write HTML in
React. JSX makes it easier to write and add HTML in React.
Virtual DOM
DOM stands for 'Document Object Model'. In simple terms, it is a
structured representation of the HTML elements that are present
in a webpage or web-app. It contains a node for each HTML
element present in the web document. Virtual DOM is a node
tree that lists elements and their attributes and content as
objects and properties.
Who uses React?
Any
Question?
Thank
You