DAY 1 : React

Fundamentals
Smriti Kumari
Senior Software Engineer
Accolite Digital, Hyderabad
What will you learn ?

● What and Why of React?

● JS essentials
● Real Dom vs Virtual Dom
● JSX
● Components
● State and props
● Parent and Child components
● Stateful and stateless component
What and Why of React ?

● ReactJS is a popular JavaScript library for

building user interfaces

● ReactJS uses a component-based

architecture

● ReactJS is easy to learn

What and Why of React ?

● ReactJS has a large and active community

● ReactJS is fast and efficient

● ReactJS is compatible with other libraries

and frameworks
What and Why of React ?

● ReactJS is scalable

● ReactJS is used by large companies

● ReactJS has a strong focus on user experience

● ReactJS is constantly evolving

JS Essentials

● Variables and Data Types: Understanding how to declare and assign values
to variables, and the different data types available in JavaScript such as
numbers, strings, booleans, null, and undefined.
● Functions: Understanding the basics of functions, including how to declare
them, pass arguments, and return values.
● Arrays: Understanding how to create and manipulate arrays in JavaScript,
including accessing elements, adding and removing elements, and iterating
over them.
● Objects: Understanding how to create and manipulate objects in
JavaScript, including creating object literals, accessing properties, and using
object methods.
● Conditionals: Understanding how to use conditional statements in
JavaScript, including if/else statements, switch statements, and ternary
operators.
JS Essentials

● Loops: Understanding how to use loops in JavaScript, including for loops, while
loops, and do-while loops.
● DOM Manipulation: Understanding how to manipulate the Document Object
Model (DOM) using JavaScript, including selecting elements, changing their
properties, and adding and removing elements.
● Events: Understanding how to handle events in JavaScript, including attaching
event listeners, event delegation, and using event objects.
● Promises: Understanding how to use promises in JavaScript, including creating
and chaining promises, and handling errors with catch.
● Asynchronous Programming: Understanding how to use asynchronous
programming techniques in JavaScript, including using setTimeout, setInterval,
and asynchronous functions like setTimeout.

Once you have a good grasp on these JavaScript essentials, you can begin learning
React, a popular JavaScript library for building user interfaces.
Real DOM vs Virtual DOM

In React, there are two types of Document Object Models (DOM) that are used: the
Real DOM and the Virtual DOM. Here are the key differences between the two:
1. Real DOM: The Real DOM is the actual HTML DOM that exists in the
browser. Whenever a change is made to the Real DOM, the browser needs to
re-render the entire page. This can be time-consuming and can result in slow
performance.
2. Virtual DOM: The Virtual DOM is a lightweight copy of the Real DOM.
Whenever a change is made to the Virtual DOM, React updates it and then
compares it to the previous version of the Virtual DOM. React then updates
only the parts of the Real DOM that have changed, resulting in faster
performance and better user experience.
Here are some of the advantages of using the
Virtual DOM in React
1. Faster performance: Because React only updates the parts of the Real DOM
that have changed, it results in faster performance and better user
experience.
2. Improved efficiency: React can update the Virtual DOM more efficiently than
the Real DOM, making it a more efficient way to handle UI updates.
3. Better debugging: Because the Virtual DOM is a lightweight copy of the Real
DOM, it can be easier to debug and troubleshoot issues.
4. Cross-platform compatibility: The Virtual DOM can be used on any platform,
making it a more versatile option for web developers.
5. Improved developer experience: React’s use of the Virtual DOM can make
the development process faster and more efficient, allowing developers to
focus on building great user interfaces rather than worrying about
performance issues.
 JSX

JSX is a syntax extension for JavaScript that lets you write

HTML-like markup inside a JavaScript file.
 JSX

Can browsers read JSX directly ?

Components
Components let you split the UI into independent, reusable
pieces, and think about each piece in isolation.

Example 1
Components

Example 2
State and Props
Definition State is an object that represents the Props (short for properties) are values
current state of a component that are passed to a component from
its parent component

Mutability State is mutable, meaning it can be Props are immutable, meaning they
changed cannot be changed once they are
passed to a component

Ownership State is owned and managed by the Props are owned and managed by the
component itself parent component

Access State can be accessed and Props can be accessed within a

modified within a component using component using the this.props
the setState() method object

Scope State is local to the component in Props can be passed to child

which it is defined components and accessed by them

Changes Changes to state trigger a re-render Changes to props do not trigger a

of the component and its child re-render of the component
components receiving the props

Initial Values State can be initialized with a Props must be passed to a

default value in the constructor of a component from its parent
component component
Parent and Child Components

● Parent components: Parent components are components that

contain other components within them. They are also known as
container components. Parent components can pass data
down to their child components through props.

● Child components: Child components are components that are

contained within parent components. They are also known as
presentational components. Child components receive data
from their parent components through props and can send
data back up to their parent components through callbacks.
 Stateful and Stateless Components

They are also known as:

– Container vs Presentational components
– Smart vs Dumb components
 Container vs Presentational components

They are also known as:

– Container vs Presentational components
– Smart vs Dumb components
● The literal difference is that one has state, and the other
doesn’t.
● That means the stateful components are keeping track of
changing data, while stateless components print out what is
given to them via props, or they always render the same thing.
 Step by Step Guide for building a React
Application
● Prerequisite
○ Install Node JS (Download latest stable release)

● Create React App CLI

● A Text Editor - vs code (recommended)
Thanks!