Module 02

Fullstack Web Development

Intro to React JS
Outline
● Javascript DOM
● Intro to ReactJs
● Component & props
● Class based component vs functional component
● Routing
What is DOM ?
The Document Object Model (DOM) in Javascript is a way to interact with and manipulate web pages. Think
of a web page as a document, like a book or a magazine. The DOM is like a tool that allows you to change,
read, and update the contents of that document (web page) using Javascript.

Key points:

● Document: The "D" in DOM stands for "Document," which is your web page. It includes everything
you see on a webpage - text, images, links, buttons, forms, and more.
● Object: The "O" in DOM stands for "Object." In programming, objects are like containers for data and
actions. The DOM represents your web page as a structured set of objects that you can manipulate.
● Model: The "M" in DOM stands for "Model." It's a way to represent the structure of your web page in a
logical and organized manner. This model is hierarchical, like a family tree, where elements (like
paragraphs, headings, or images) are related to one another.

Src : https://en.wikipedia.org/wiki/Document_Object_Model
DOM Manipulation with Javascript
DOM manipulation is the process of using Javascript
to interact with and change the content, structure,
and style of a web page represented by the DOM.

It allows you to make dynamic and interactive web

applications by altering what users see and how
they interact with your web page.
HTML + Javascript DOM

In this session you will learn about developing

web application through HTML + Javascript
DOM comparing to ReactJs.

In this example, the string Original Text changed

into Updated Text when the Update Text button
is clicked.
HTML + Javascript DOM

We would like to manipulate the

Original Text in h1 tag, change it into
Update Text.
HTML + Javascript DOM

Inside script tag, you could write any

of javascript syntax under this html
tag.

Since we would like modify h1 html

tag string value from “Original Text”
into “Update Text” we need to use
Javascript DOM to manipulate the
html.
HTML + Javascript DOM

Here are some of the basic methods available in the DOM:

● getElementById(id): Retrieves an element by its unique id attribute.

● getElementsByClassName(className): Retrieves a collection of elements that have a specific class
name.
● getElementsByTagName(tagName): Retrieves a collection of elements that have a specific tag name.
● querySelector(selector): Retrieves the first element that matches a specific CSS selector.
● querySelectorAll(selector): Retrieves a collection of elements that match a specific CSS selector.
● createElement(tagName): Creates a new element with the specified tag name.
● createTextNode(text): Creates a new text node with the given text content.
● appendChild(node): Appends a node as the last child of another node.
HTML + Javascript DOM

To modify the DOM (Document Object Model) in JavaScript, you can use various methods and properties
provided by the DOM API. Here are some common ways to modify the DOM:

Changing Element Content:

● textContent or innerText: To change the text content of an element.

● innerHTML: To change the HTML content of an element.
HTML + Javascript DOM

Creating and Adding Elements:

● createElement: To create a new element.

● appendChild or insertBefore: To add the newly created element to the DOM.
HTML + Javascript DOM

Removing Elements:

● removeChild: To remove a child element from its parent.

HTML + Javascript DOM

Updating Element Attributes and Styles:

● You can use the setAttribute method to set or modify attributes of an element.
● You can directly modify the style property to change the inline styles of an element.
HTML + Javascript DOM
Adding Event Listeners:

● Use addEventListener to attach event handlers to elements.

Introduction to ReactJS

Since you already know how to manipulate your HTML through

DOM manipulation using javascript. Now, let me introduce you
another way to manipulate your HTML through ReactJs.

What is ReactJS?

ReactJS, often referred to simply as React, is an open-source

JavaScript library developed by Facebook. It is primarily used for
building user interfaces (UI) and handling the view layer of web
applications. React allows developers to create reusable UI
components and efficiently manage the state of a web application,
Find out more here:
making it easier to build interactive, dynamic, and scalable front-end
https://react.dev/
applications.
Introduction to ReactJs

Why React?

React's popularity is due to its flexibility, performance, and

developer-friendly approach to building modern web applications. It
is widely used in web development for creating single-page
applications, progressive web apps, and complex user interfaces
across various industries and platforms.

Find out more here:

https://react.dev/
Introduction to ReactJs
● Component-Based Architecture
● Declarative Programming
● Efficient Virtual DOM
● Reusability and Composability
● Rich Ecosystem
● Large and Active Community
● Backed by Facebook
● Platform Agnostic: React can be used for web development as well as
mobile app development (React Native). This allows developers to reuse
a significant portion of their codebase while building applications for
multiple platforms. Find out more here:
● Open-Source and Free https://react.dev/
Single Page Application (SPA)
Single Page Application is a method to update the appearance without having to refresh the entire appearance of
the website, so it only uses an HTML file as a media render.

This method is considered better because of its rendering speed. Because only certain elements/components are
updated without having to reload the entire page by utilizing Virtual DOM. And this system is implemented in
modern javascript environments, especially React JS.
Virtual DOM

The Virtual DOM in React is a lightweight, in-memory representation of the

actual DOM (Document Object Model) of a web page. It acts as an
intermediary layer between your React components and the Real DOM.
React uses the Virtual DOM to optimize updates and improve performance
by reducing direct manipulation of the Real DOM.

The Virtual DOM allows React to efficiently track and update only the
elements that have changed, minimizing the work required to keep the web
page up to date. This results in faster rendering and a smoother user
experience. Find out more here:
https://react.dev/
Virtual DOM vs Real DOM
Virtual DOM:

● A virtual representation of the DOM.

● React updates and compares this virtual version, not
the actual DOM.
● Efficiently identifies changes and updates the Real
DOM.

Real DOM:

● The actual web page structure.

● Directly updating it is less efficient and can be slow.
● React minimizes direct manipulation to enhance
performance.
Create a New React Project
React is considered a library, not a framework, as Create a new Vite project :
it primarily focuses on building user interfaces
and leaves other architectural decisions, such as ● npm create vite@latest
state management and routing, to be addressed
by developers using additional libraries or
solutions.
To create a project using React, you can use ● cd vite-project
frameworks like NextJS, GatsbyJS, Vite etc. In ● npm install
this session, we will user Vite to create our first
● npm run dev
project.

References :
● https://react.dev/learn/start-a-new-react-pr
oject
● https://vitejs.dev/guide/
Code Structure

In general, this is the code structure of the React

JS project.
About JSX

JSX stands for JavaScript XML. It is simply a syntax

extension of JavaScript. It allows us to directly write
HTML in React (within JavaScript code).

Src : https://react.dev/learn/writing-markup-with-jsx
Characteristics of JSX

● JSX is not mandatory to use there are other ways to achieve the same thing
but using JSX makes it easier to develop react application.
● JSX allows writing expression in { }. The expression can be any JS
expression or React variable.
● To insert a large block of HTML we have to write it in a parenthesis i.e, ().
● JSX produces react elements.
● JSX follows XML rule.
● After compilation, JSX expressions become regular JavaScript function
calls.
● JSX uses camelcase notation for naming HTML attributes. For example,
tabindex in HTML is used as tabIndex in JSX.
Components

Components let you split the UI into independent,

reusable pieces, and think about each piece in
isolation.

Components are like JavaScript functions. They

accept arbitrary inputs (called “props”) and return
React elements describing what should appear on
the screen.

Components come in two types, Class components

and Functional components.
Class Based Component VS Function Component

Class Component Functional Component

● Class components make use of ES6 class and ● Sometimes referred to as “dumb” or
“stateless” components as they simply accept
extend the Component class in React.
data and display them in some form; that is
● Sometimes called “smart” or “stateful” they are mainly responsible for rendering UI.
components as they tend to implement logic ● React lifecycle methods (for example,
and state. componentDidMount) cannot be used in
● React lifecycle methods can be used inside functional components.
● There is no render method used in functional
class components (for example,
components.
componentDidMount). ● These are mainly responsible for UI and are
● You pass props down to class components typically presentational only (For example, a
and access them with this.props Button component).
● Functional components can accept and use
props.
Class Based Component VS Function Component
Props

React allows us to pass information to a Component using

something called props (stands for properties).

Props are objects which can be used inside a component.

Src : https://react.dev/learn/passing-props-to-a-component
Props
Add Styling

There is several ways to styling component in React

JS:

1. CSS Classes (Using CSS stylesheet outside

component)
2. Inline Styles (Direct styling in an element)
3. Styled components
CSS Classes
Create a css stylesheet as usual, import that CSS file to the component we will use, and then give the class
name to the element to be styled into the "className" props. Take a look at the following example.
Inline Styles
Styling directly inside the element with props “style={}” and then put object in which there is css command.
Take a look at the following example.
Styled Components

Install:

npm i styled-components

Src : https://styled-components.com/docs
Routing

Routing is a process in which a user is directed to

different pages based on their action or request. React
Router is used to define multiple routes in the application.

First install React Router dependencies on your React JS

project: npm install react-router-dom@6

Src : https://reactrouter.com/en/main/start/tutorial
React Router

Once your project is set up and React Router is

installed as a dependency, open the src/index.js
in your text editor. Import BrowserRouter from
react-router-dom near the top of your file and
wrap your app in a <BrowserRouter>:
React Router

Now you can use React Router anywhere in your

app! For a simple example, open src/App.js and
replace the default markup with some routes:
React Router

Now, still in src/App.js, create your route components:

Exercise
Create your Portfolio Website using ReactJS. You can find out layout
reference from:

● https://nicepage.com
● https://www.behance.net
● https://www.figma.com
Thank You!
Thank You!