Introduction to React JS for beginners | Namespace IT

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 web application or website
that interacts with the user by dynamically rewriting the current
web page with new data from the web server,

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: make IOS, Android and Web applications
Data Binding: uses one-way data binding
Performance
Testability

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.

Hooks
 Basic Hooks
 useState
 useEffect
 useContext
 Additional Hooks
 useReducer
 useCallback
 useMemo
 useRef
 useImperativeHandle
 useLayoutEffect
 useDebugValue
Hooks are a new addition in react 16.8. They let you use state
and other react features without writing a class.

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.

Introduction to React JS for beginners | Namespace IT

More Related Content

What's hot (20)

Similar to Introduction to React JS for beginners | Namespace IT (20)

Recently uploaded (20)

Introduction to React JS for beginners | Namespace IT