SHEKHOBABA.
COM
Part 01
MOST ASKED
REACT JS QUESTIONS
INTERVIEW
Burhan Tahir
@iamshekhobaba
1. WHAT IS REACT.JS ?
React.js is a JavaScript library by
Facebook for building user interfaces,
especially single-page applications. It
enables developers to create large web
apps that efficiently update and render
with data changes, using a component-
based architecture for reusable UI
components.
Burhan Tahir
@iamshekhobaba
2. WHAT ARE THE MAIN
FEATURES OF REACT.JS?
Component-Based Architecture
React allows you to build encapsulated
components that manage their own
state, which can be composed to
create complex UIs.
Virtual DOM
React uses a virtual DOM to optimize
rendering. When the state of an object
changes, React updates only the
specific parts of the DOM instead of
the entire DOM, improving performance.
Burhan Tahir
@iamshekhobaba
2. WHAT ARE THE MAIN
FEATURES OF REACT.JS?
JSX
React uses JSX, a syntax extension
that allows you to write HTML
elements in JavaScript and place them
in the DOM.
Unidirectional Data Flow
React follows a unidirectional data flow
where data is passed from parent to
child components, making it easier to
debug and understand.
Burhan Tahir
@iamshekhobaba
WHAT IS JSX?
JSX stands for JavaScript XML. It is a
syntax extension for JavaScript that
looks similar to HTML. JSX is used in
React to describe the UI structure.
With JSX, you can write HTML-like
code directly within JavaScript, which
is then transformed into React
elements by Babel.
Burhan Tahir
@iamshekhobaba
WHAT IS THE VIRTUAL DOM, AND
HOW DOES IT WORK IN REACT?
The Virtual DOM is a lightweight copy
of the real DOM maintained in memory
by React.
When a component's state changes,
React creates a new Virtual DOM tree,
compares it with the previous one (a
process called reconciliation), and
updates only the parts of the actual
DOM that have changed.
This approach enhances performance
by reducing the number of direct
manipulations to the actual DOM.
Burhan Tahir
@iamshekhobaba
WHAT ARE REACT COMPONENTS?
React components are the building
blocks of a React application. They are
reusable, isolated pieces of code that
define how a part of the UI should
appear. Components can be class-
based (using ES6 classes) or functional
(using functions). They can manage
their own state and lifecycle.
Burhan Tahir
@iamshekhobaba
WHAT IS THE DIFFERENCE BETWEEN
A CLASS COMPONENT AND A
FUNCTIONAL COMPONENT?
Class Components: Class components are
ES6 classes that extend from
React.Component and can hold and
manage their own state. They also have
lifecycle methods like componentDidMount,
componentDidUpdate, etc.
Functional Components: Functional
components are simpler and are just
JavaScript functions that take props as
arguments and return JSX. They were
stateless until React introduced hooks,
which allowed functional components to
manage state and side effects.
Burhan Tahir
@iamshekhobaba
WHAT ARE THE LIFECYCLE
METHODS IN REACT?
Lifecycle methods are special methods in
class components that get called at
different stages of a component's lifecycle,
such as when the component is being
mounted to the DOM, updated, or
unmounted. Key lifecycle methods include:
componentDidMount: Called once,
after the component is mounted.
componentDidUpdate: Called after the
component has been updated.
componentWillUnmount: Called right
before the component is removed
from the DOM.
Burhan Tahir
@iamshekhobaba
