Full Stack

Web
Development
Nimra Idrees
Introduction to
React.js
Introduction

React is one of the most Facebook and a large

popular front-end JavaScript community of developers
libraries in web development. mainly maintain it.

Many large, established

companies (Netflix, Instagram,
Airbnb, to name a few) use it
to build their user interfaces
and UI components.

12/09/2024 By Nimra Idrees 3

 JSX is an extension of ReactJS, which is not mandatory
but very beneficial if used since it is very easy to use.

Components are similar to pure Javascript functions.

They simplify the code by separating the functionality

Features into reusable, independent code. Components can be

used as functions and classes. They also have states and
props, which simplify lives. The status of each prop is

of preserved within a class.

ReactJS React generates a virtual DOM, an in-memory data-

structure cache. The browser's DOM has only been
updated with the final DOM updates.

For example, Javascript Expressions: Curly brackets can

be used to insert JS expressions into JSX files.

12/09/2024 By Nimra Idrees 4

 ReactJS employs virtual dom, which uses an in-memory data-structure
cache. Only the most recent modifications are updated in the browser's
dom, which speeds up the app.

Using the react component feature, you may design components of

your choice. The components are reusable and useful for code
maintenance.

Advantag Since Reactjs is an open-source JavaScript library, it is simple to learn.

es of ReactJS has quickly gained popularity and is supported by Facebook

ReactJS and Instagram. Many well-known companies, including Apple and

Netflix, use it.

Since Facebook maintains the ReactJS library, it is well-managed and

up-to-date.

ReactJS may be used to create sophisticated user interfaces for both

desktop and mobile apps.

12/09/2024 By Nimra Idrees 5

Disadvant Most of the code is written in JSX, meaning that HTML and CSS are part
of the JavaScript code. This can be perplexing because most other
frameworks like to keep HTML separate from the JavaScript code.
ages of
ReactJS ReactJS has a huge file size.

12/09/2024 By Nimra Idrees 6

 • ReactJS follows a distinct approach to
data flow and manipulation, which can
React make it difficult to understand many
concepts (props, state, etc.).
Props • The term "props" stands for
"properties" and is used to pass data
from one component to another.

12/09/2024 By Nimra Idrees 7

 • React State holds the data for a
component. This component, in turn,
ReactJS returns the data contained within the
state to the output.
State • A component’s “state” can change over
time. Whenever this happens, the
component re-renders.

12/09/2024 By Nimra Idrees 8

 • ReactJS Components are the building
blocks of any application created with
ReactJS.
ReactJS • It splits the user interface into
Componen independent parts, each of which can
be processed separately.
ts • ReactJS Components allow you to
reuse the user interface elements,
which has made ReactJS so popular.

12/09/2024 By Nimra Idrees 9

 • Redux is a predictable state container
React with for JavaScript apps.
• It helps to maintain the data flow and
Redux keep it organized as an application
grows.

12/09/2024 By Nimra Idrees 10

Using ReactJS from Content Delivery
Network (CDN)

• To use a CDN with React Js, include the CDN in your index.html file.

Replace "https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js" with

the CDN's URL.

• Using NPM Packages—NPM packages are libraries of code provided by the

community and can be installed into React projects with a few simple commands.

• Using NPM packages helps developers save time by providing access to premade
code instead of having to create code from scratch.

12/09/2024 By Nimra Idrees 11

JSX (JavaScript Extension)

• JSX (JavaScript Extension) is a React extension that allows you to write HTML-like
JavaScript code.

• In other words, JSX is a React-specific HTML-like syntax that extends ECMAScript to allow
HTML-like syntax to coexist with JavaScript/React code.

12/09/2024 By Nimra Idrees 12

 DEFINE AN ATTRIBUTE AND ITS PASS IT TO CHILD COMPONENT

Using VALUE OR COMPONENTS BY USING

PROPS

Props in
React

RENDER THE PROPS DATA

12/09/2024 By Nimra Idrees 13

 Parent Component & Child Component

class Parent extends Component { const ChildComponent = () => {

render() { return <p>Child 1</p>;
};
return (
class ParentComponent extends Component {
<h1>
render() {
the parent component return (
<Child /> <h1>
</h1> the parent component
<Child />
);
<Child />
}
<Child />
} </h1>);}}
12/09/2024 By Nimra Idrees 14
 • Assign data to react components
1st Step: <Child attr1={value} attr2={value}/>

Defining • Name the attribute as text and assign the string

to it:
Attribute <Child text={“I’m the 1st child”} />

and Data • After adding the data, now pass the data
through props.

12/09/2024 By Nimra Idrees 15

 • Take "Child 1" string and pass it by using props.
2nd Step: • Passing props is simple, and we can add props
like we pass an argument to a function.
Passing const Child = (props) => {
Data using return <p>Child 1</p>;
Props };

12/09/2024 By Nimra Idrees 16

 class Parent extends
Component {

render() {
const Child = (props) => {
return (
return <p>{props.text}</p>;
}; <h1>

• Each child component now

Final Step: renders its prop data instead of
the parent
component.

Rendering just printing the same thing

<Child
every time it's called.
Props Data • This is how we pass props from
text={"Child 1"} />

<Child
one component to another and text={"Child 2"} />
enable the dynamicity of a React
application. <Child
text={"Child 3"} />

</h1>

);}}
12/09/2024 By Nimra Idrees 17
 State Props
State is used to store the Props are used to pass data
Use Case data of the components and event handlers to the
that have to be rendered children components
to the view

Mutability State holds the data and Props are immutable—once

can change over time set, props can't be changed
State vs. Props
State can only be used in Props can be used in both
Component class components functional and class
components

Event handlers generally The parent component sets

Updation update state props for the children
components

12/09/2024 By Nimra Idrees 18

Architecture / Design – what is the
Conclusion
difference
Props stand for properties

Props are passed to components like function arguments

Props can be passed to components only via parent to child

Props data is immutable (read-only)

12/09/2024 By Nimra Idrees 19

 ‫!شکریہ‬
Thankyou