Noida Institute of Engineering and Technology, Greater Noida

Web Development using MERN

STACK with Devops

Unit: 1

Introduction to React JS
Dr. Mohd Arif
Course Details (Assistant Professor)
(B. Tech. 7th Sem)
CSE (Data Science)

Dr. Mohd Arif WEB DEVELOPMENT USING MEAR STACK with DEVOPS 1
07/10/2024 Unit 1
 Faculty Introduction
Name Dr. Mohd Arif
Qualification Ph.D.

Designation Assistant Professor

Department Computer Science & Engineering (Data Science)

NIET Experience 8 months

Subject Taught C Programming, Software Engineering, Computer Graphics, Core JAVA Programming
Language, C++, HTML & CSS , MEAN Stack.

07/10/2024 Dr. Mohd Arif WEB DEVELOPMENT USING MEAR STACK with DEVOPS 2
Unit 1
 Syllabus

UNIT-I: Introduction to React JS

Overview of frameworks, NPM commands, React App, Project

Directory Structure, React Component Basic, Understanding
JSX, Props and State, Stateless and Stateful Components,
Component life cycle, Hooks, react-router vs react-router-dom.

07/10/2024 Dr. Mohd Arif WEB DEVELOPMENT USING MEAR STACK with DEVOPS 3
Unit 1
 WEB DEVELOPMENT USING MERN STACK WITH DEVOPS

In the field of web development, full-stack development is playing a

vital role. A full-stack development provides a solution for perfect
solutions for front-end, back-end, testing, mobile application etc. In
today’s world, the demand for a full-stack developer is rising
tremendously. A full-stack developer can take care of the entire
design structure of a project. There exist different full-stack
development frameworks like MEAN stack and MERN stack. Now let
us understand the variations in both of them.

07/10/2024 Dr. Mohd Arif WEB DEVELOPMENT USING MEAR STACK with DEVOPS 4
Unit 1
 WEB DEVELOPMENT USING MERN STACK WITH DEVOPS

The MEAN stack consists of four main components: MongoDB,

Express.js, AngularJS, and Node.js.
Here's a brief overview of each component:

MongoDB: A NoSQL database that stores data in JSON-like

documents.
Express.js: A server-side framework for Node.js that simplifies web
application development.
AngularJS: A client-side JavaScript framework for building dynamic
web applications.
Node.js: A server-side JavaScript runtime that allows developers to
build scalable and high-performance applications.
07/10/2024 Dr. Mohd Arif WEB DEVELOPMENT USING MEAR STACK with DEVOPS 5
Unit 1
 WEB DEVELOPMENT USING MERN STACK WITH DEVOPS

The MEAN stack is known for its ease of use, flexibility, and scalability.
It's a great choice for building web applications that require real-time
interactions and high-performance capabilities.

07/10/2024 Dr. Mohd Arif WEB DEVELOPMENT USING MEAR STACK with DEVOPS 6
Unit 1
 WEB DEVELOPMENT USING MERN STACK WITH DEVOPS

The MERN stack is similar to the MEAN stack, but it replaces

AngularJS with React. Here's a brief overview of each component:
MongoDB: Same as the MEAN stack.
Express.js: Same as the MEAN stack.
React: A popular client-side JavaScript framework for building web
applications.
Node.js: Same as the MEAN stack.

07/10/2024 Dr. Mohd Arif WEB DEVELOPMENT USING MEAR STACK with DEVOPS 7
Unit 1
 WEB DEVELOPMENT USING MERN STACK WITH DEVOPS

The MERN stack is known for its speed, efficiency, and flexibility. It's a
great choice for building web applications that require real-time
updates and a modern user interface.

MEAN vs. MERN: A Comparison

Now that we've covered the basics of each stack, let's take a closer
look at how they compare.

07/10/2024 Dr. Mohd Arif WEB DEVELOPMENT USING MEAR STACK with DEVOPS 8
Unit 1
 WEB DEVELOPMENT USING MERN STACK WITH DEVOPS

Client-Side Framework: AngularJS vs. React

The biggest difference between the MEAN stack and the MERN stack
is the client-side framework. MEAN uses AngularJS, while MERN uses
React.
AngularJS is a full-featured client-side framework that provides a lot
of built-in functionality, including two-way data binding and
dependency injection. It's a great choice for building complex web
applications.
React, on the other hand, is a lightweight library that focuses on
building user interfaces. It's fast and efficient, making it a great
choice for building single-page applications.

07/10/2024 Dr. Mohd Arif WEB DEVELOPMENT USING MEAR STACK with DEVOPS 9
Unit 1
 WEB DEVELOPMENT USING MERN STACK WITH DEVOPS

Learning Curve: AngularJS vs. React

AngularJS has a steeper learning curve than React. It has a lot of
built-in features and concepts that can be overwhelming for
beginners. React, on the other hand, has a simpler API and a more
straightforward approach to building user interfaces.

07/10/2024 Dr. Mohd Arif WEB DEVELOPMENT USING MEAR STACK with DEVOPS 10
Unit 1
 WEB DEVELOPMENT USING MERN STACK WITH DEVOPS

Performance: MEAN vs. MERN

Both the MEAN stack and the MERN stack are known for their high
performance. However, React is known to be faster and more
efficient than AngularJS, especially when it comes to rendering large
amounts of data.

07/10/2024 Dr. Mohd Arif WEB DEVELOPMENT USING MEAR STACK with DEVOPS 11
Unit 1
 WEB DEVELOPMENT USING MERN STACK WITH DEVOPS

Community Support
Both the MEAN stack and the MERN stack have strong and active
communities. However, React has a larger and more diverse
community, which means that there are more resources available for
learning and problem-solving.

07/10/2024 Dr. Mohd Arif WEB DEVELOPMENT USING MEAR STACK with DEVOPS 12
Unit 1
 WEB DEVELOPMENT USING MERN STACK WITH DEVOPS

Popularity
In terms of popularity, both stacks are widely used and well-regarded
in the web development community. However, React is currently
more popular than AngularJS, which can be attributed to its ease of
use, performance, and the large community support it has gained
over the years.

07/10/2024 Dr. Mohd Arif WEB DEVELOPMENT USING MEAR STACK with DEVOPS 13
Unit 1
 WEB DEVELOPMENT USING MERN STACK WITH DEVOPS

React JS
React is a JavaScript-based UI development library. Facebook and an
open-source developer community run it. Although React is a library
rather than a language, it is widely used in web development. The
library first appeared in May 2013 and is now one of the most
commonly used frontend libraries for web development.
React is a JavaScript library for building user interfaces.
React is used to build single-page applications.
React allows us to create reusable UI components.

07/10/2024 Dr. Mohd Arif WEB DEVELOPMENT USING MEAR STACK with DEVOPS 14
Unit 1
 WEB DEVELOPMENT USING MERN STACK WITH DEVOPS

Node JS ()
Node allows developers to write JavaScript code that runs directly in
a computer process itself instead of in a browser. Node can,
therefore, be used to write server-side applications with access to the
operating system, file system, and everything else required to build
fully-functional applications.

• Node.js is an open source server environment

• Node.js is free
• Node.js runs on various platforms (Windows, Linux, Unix, Mac OS
X, etc.)
• Node.js uses JavaScript on the server
07/10/2024 Dr. Mohd Arif WEB DEVELOPMENT USING MEAR STACK with DEVOPS 15
Unit 1
 WEB DEVELOPMENT USING MERN STACK WITH DEVOPS

NPM – or "Node Package Manager" – is the default package manager

for JavaScript's runtime Node.js.

07/10/2024 Dr. Mohd Arif WEB DEVELOPMENT USING MEAR STACK with DEVOPS 16
Unit 1
 NPM commands

 NPM stands for Node Package Manager, is one of the most used tools for
any javascript developer. It puts all modules in one place so that node
can find them, and manages dependency conflicts.
 Here's a list of the most common npm commands you should be aware
of.
• install
 This command is used to install the npm package and the other packages
which the particular package depends on. It will install in the local
node_modules folder.
 npm install <packagename>
WEB DEVELOPMENT USING MEAR STACK with
07/10/2024 DEVOPS Unit 1 17
 NPM commands
uninstall
 This command does the exact opposite of install. It will uninstall the package completely which is already exist in
the node_modules folder. If the package mention is not present package.json list or node_modules folder, it won't
do anything.

npm uninstall <packagename>

update

 This command updates the current package to the latest version and if no package name has been specified then
it will update all packages. If some package is missing, it will check and update those too.

npm update <packagename> or npm update

list

 This command will print all the packages and their versions that are installed, as well as their dependencies in a
tree structure.
npm list

SWETA PANDEY WEB DEVELOPMENT USING

07/10/2024 MEAR STACK with DEVOPS Unit 1 18
 NPM commands

view

 This command will prints the data about the package.

npm view <packagename> <versions>

 If version is not specified, default version is 'latest'

help

 This command helps with the mentioned topic. It shows the appropriate documentation page.
 If the topic does not exist, or if multiple terms are provided, then npm will run the help-search command to find a
match.
build

 npm build and npm run build are entirely different.

 npm run build - This command runs the build field from the package.json scripts field.

SWETA PANDEY WEB DEVELOPMENT USING

07/10/2024 MEAR STACK with DEVOPS Unit 1 19
 NPM commands

start
This command runs a predefined command specified in the start property available inside scripts in the package.json
file.

npm start

stop

This command runs a predefined command specified in the stop property available inside scripts in the package.json
file. Unlike start, there is no default script that will run if the stop property is not defined

snpm stop <filename>

SWETA PANDEY WEB DEVELOPMENT USING

07/10/2024 MEAR STACK with DEVOPS Unit 1 20
 Syllabus

UNIT-II: Connecting React with mongo

dB

Google Material UI, AppBar, Material UI's Toolbar, NavBar,

Material UI Buttons, SQL and Complex Transactions, Dynamic
Schema, create Index (), get Indexes () & drop Index (), Replication,
Statement-based vs. Binary Replication,
Auto-Sharding and Integrated Caching, Load balancing,
Aggregation, scalability.

07/10/2024 Dr. Mohd Arif WEB DEVELOPMENT USING MEAR STACK with DEVOPS 21
Unit 1
 Syllabus

UNIT-III: Node js & Express Frame work

Introduction, Environment Setup, Node Package Manager, Call-

backs, Events and Event Loop, Streams and Buffers, Connecting
Node.js to Database, Mongoose Module, Creating Rest
APIs ,Express Framework, MVC Pattern, Routing, Cookies and
Sessions, HTTP Interaction, User Authentication.

07/10/2024 Dr. Mohd Arif WEB DEVELOPMENT USING MEAR STACK with DEVOPS 22
Unit 1
 Syllabus

UNIT-IV: Evolution of DevOpsjs

DevOps Principles, DevOps Lifecycle, DevOps Tools, Benefits of

DevOps,
SDLC models, Lean, ITIL and Agile Methodology, Agile vs DevOps,
Process flow of Scrum Methodologies, Project planning, scrum
testing, sprint Planning and Release management, Continuous
Integration and Delivery pipeline.

07/10/2024 Dr. Mohd Arif WEB DEVELOPMENT USING MEAR STACK with DEVOPS 23
Unit 1
 Syllabus

UNIT-V: CI/CD concepts (GitHub, Jenkins,

Sonar)

GitHub, Introduction to Git, Version control, Jenkins

Introduction, Creating Job in Jenkins, Adding plugin in Jenkins,
Creating Job with Maven & Git, Integration of j Unit testing,
Sonar, Dockers, Containers Image How to run, pull and push
containers, Container lifecycle, Introduction to Kubernetes.

SWETA PANDEY WEB DEVELOPMENT USING

07/10/2024 MEAR STACK with DEVOPS Unit 1 24
 Branch Wise Application

1. Real time web analytics

2. Digital Advertising
3. E-Commerce
4. Publishing
5. Massively Multiplayer Online Games
6. Backend Services and Messaging
7. Project Management & Collaboration
8. Real time Monitoring Services
9.Live Charting and Graphing
10. Group and Private Chat

SWETA PANDEY WEB DEVELOPMENT USING

07/10/2024 MEAR STACK with DEVOPS Unit 1 25
 Course Objective

In this semester, the students will

Study how to design and build static as well as dynamic webpages and
interactive web applications

Students examine advanced topics like Reactjs, Devops, Mongodb for web
applications.

Also examine Express framework and Devops for interactive web applications
that use rich user interfaces. .

SWETA PANDEY WEB DEVELOPMENT USING

07/10/2024 MEAR STACK with DEVOPS Unit 1 26
 Course Outcomes (COs)

At the end of course, the student will be able to:

CO1: Apply the knowledge of ES6 that are vital to implement react application over the web.

CO2 : Understand the impact of web designing by database connectivity with Mongodb .

CO3 : Explain, analyze and apply the role of server side scripting language like Nodejs
and Express framework.
CO4 : Identify the benefits of DevOps over other software development processes to
Gain insights into the DevOps environment.

CO5 : Demonstrate popular open-source tools with features and associated terminology
used to perform Continuous Integration and Continuous Delivery.

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 27

T USING MEAR STACK with DEVOPS Unit
 Program Outcomes (POs)

Engineering Graduates will be able to:

PO1 : Engineering Knowledge

PO2 : Problem Analysis

PO3 : Design/Development of solutions

PO4 : Conduct Investigations of complex problems

PO5 : Modern tool usage

PO6 : The engineer and society

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 28
T USING MEAR STACK with DEVOPS Unit
 Program Outcomes (POs)

Engineering Graduates will be able to:

PO7 : Environment and sustainability

PO8 : Ethics

PO9 : Individual and teamwork

PO10 : Communication

PO11 : Project management and finance

PO12 : Life-long learning

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 29
T USING MEAR STACK with DEVOPS Unit
 COs - POs Mapping

CO.K PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12

CO1 2 2 2 3 3 - - - - - - -

CO2 3 2 3 2 3 - - - - - - -

CO3 3 2 3 2 3 - - - - - - -

CO4 3 2 3 2 3 - - - - - - -

CO5 3 2 3 3 3 - - - - - - -

AVG 2.8 2.0 2.8 2.4 3.0 - - - - - - -

SWETA PANDEY WEB DEVELOPMENT USING MEAR

07/10/2024 30
STACK with DEVOPS Unit 1
 Program Specific Outcomes(PSOs)
Program Specific
S. No. PSO Description
Outcomes (PSO)

Understand to shows relationships and interactions

1 PSO1 between classes or objects of a pattern.

Study to speed up the development process by

2 PSO2
providing well-tested, proven development

Select a specific design pattern for the solution of a

3 PSO3 given design problem

Create a catalogue entry for a simple design pattern

07/10/2024
4
SWETA PANDEY
PSO4 whose purpose
STACK with DEVOPS
and
WEB DEVELOPMENT
Unit 1
application
USING MEAR is understood. 31
 COs - PSOs Mapping

CO.K PSO1 PSO2 PSO3 PSO4

CO1 3 - - -

CO2 3 3 - -

CO3 3 3 - -

CO4 3 3 - -

CO5 3 3 - -

SWETA PANDEY WEB DEVELOPMENT USING MEAR

07/10/2024 32
STACK with DEVOPS Unit 1
 Program Educational Objectives (PEOs)

Program Educational
PEOs Description
Objectives (PEOs)
To have an excellent scientific and engineering breadth so as to comprehend,
PEOs analyze, design and provide sustainable solutions for real-life problems using state-
of-the-art technologies.

To have a successful career in industries, to pursue higher studies or to support

PEOs entrepreneurial endeavors and to face the global challenges.

To have an effective communication skills, professional attitude, ethical values and a

PEOs desire to learn specific knowledge in emerging trends, technologies for research,
innovation and product development and contribution to society.

To have life-long learning for up-skilling and re-skilling for successful professional
PEOs career as engineer, scientist, entrepreneur and bureaucrat for betterment of society.

SWETA PANDEY WEB DEVELOPMENT USING MEAR

07/10/2024 33
STACK with DEVOPS Unit 1
 Result Analysis(Department Result & Subject Result & Individual result

Name of the faculty Subject code Result % of clear passed

SWETA PANDEY WEB DEVELOPMENT USING MEAR

07/10/2024 34
STACK with DEVOPS Unit 1
 Pattern of Online External Exam Question Paper (100 marks)

SWETA PANDEY WEB DEVELOPMENT USING MEAR

07/10/2024 35
STACK with DEVOPS Unit 1
 Pattern of Online External Exam Question Paper (100 marks)

SWETA PANDEY WEB DEVELOPMENT USING MEAR

07/10/2024 36
STACK with DEVOPS Unit 1
 Pattern of Online External Exam Question Paper (100 marks)

SWETA PANDEY WEB DEVELOPMENT USING MEAR

07/10/2024 37
STACK with DEVOPS Unit 1
 Pattern of Online External Exam Question Paper (100 marks)

SWETA PANDEY WEB DEVELOPMENT USING MEAR

07/10/2024 38
STACK with DEVOPS Unit 1
 Pattern of Online External Exam Question Paper (100 marks)

SWETA PANDEY WEB DEVELOPMENT USING MEAR

07/10/2024 39
STACK with DEVOPS Unit 1
 Prerequisite / Recap

• Student should have knowledge of Web technology and terminology.

• Knowledge of HTML ,CSS and Java Script required .

• knowledge of Programing language such as C/C++/Python etc.

• Knowledge of Nodejs, Mongodb, Java, Javascript

• Good problem solving Skill .

SWETA PANDEY WEB DEVELOPMENT USING MEAR

07/10/2024 40
STACK with DEVOPS Unit 1
 Brief Introduction about the Subject with videos

YouTube /Other Video Links

• https://youtu.be/QFaFIcGhPoM?list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3

• https://youtu.be/pKd0Rpw7O48

• https://youtu.be/TlB_eWDSMt4

• https://youtu.be/QFaFIcGhPoM

• https://youtu.be/EHTWMpD6S0

SWETA PANDEY WEB DEVELOPMENT USING MEAR

07/10/2024 41
STACK with DEVOPS Unit 1
 Unit I Content

• Overview of frameworks, NPM commands, React App, Project

Directory Structure, React Component , Basic Understanding JSX,
Props and State, Stateless and Stateful Components, Component life
cycle, Hooks, react-router vs react-router-dom

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 42

T USING MEAR STACK with DEVOPS Unit
 Unit I Objective

In Unit I, the students will be able to find

• Overview of frameworks and NPM commands.
• The idea of React App, Project Directory Structure, React
Component Basic.
• Understanding JSX, Props and State, Stateless and Stateful
Components
• Component life cycle, Hooks, react-router vs react-router-dom.

SWETA PANDEY WEB DEVELOPMENT USING

07/10/2024 MEAR STACK with DEVOPS Unit 1 43
 Topic Objective

Topic : Overview of frameworks, NPM commands,

In this topic, the students will gain about React App, Project Directory
Structure and React Component.

SWETA PANDEY WEB DEVELOPMENT USING

07/10/2024 MEAR STACK with DEVOPS Unit 1 44
 MERN Stack

 MERN stack comprises the following technologies that allow for faster
application development:

 MongoDB: A cross-platform document-oriented database program

 Express.js: A web application framework for Node.js
 React: JavaScript library for building user interfaces
 Node.js: An open source, cross-platform, JavaScript run-time environment
that executes JavaScript code outside of a browser

SWETA PANDEY WEB DEVELOPMENT USING

07/10/2024 MEAR STACK with DEVOPS Unit 1 45
 MERN Stack

 MongoDB, Express.js, and Node.js help you build the backend of an

application, while React powers the frontend.
 Node.js and React rank as the two most popular web frameworks and
technologies, according to the most recent Stack Overflow developer
survey.
 And MongoDB is also one of the most popular databases for developers.
About 16,535,063 websites use React to power their frontend.

SWETA PANDEY WEB DEVELOPMENT USING

07/10/2024 MEAR STACK with DEVOPS Unit 1 46
 MERN Stack

 Learning the MERN stack will help you become a full-stack developer.
 The demand for MERN stack developers is also high. However, it takes time to be a good MERN stack
developer.
 So, before learning technologies like React or Node.js, it is important to ensure that your fundamentals
are strong.
 A lot of developers fail to be good MERN stack developers because they lack the fundamental
knowledge of JavaScript.

SWETA PANDEY WEB DEVELOPMENT USING

07/10/2024 MEAR STACK with DEVOPS Unit 1 47
 Overview of frameworks

Frameworks are a piece of software that offers a way to create and run web applications. Thus, you don’t need to
code on your own and look for probable miscalculations and faults.
As web standards began to advance, the app logic shifted towards the client- ensuring smarter communication
between the user and the web application. With logic on client-side, they (client) can react swiftly to user input.
This makes web apps more responsive, easily navigate-able on any device. Thus, we have two functions of
frameworks —
a) The one to work on the server side, that helps to set up app logic on the server (backend)
b) To work on the client-side (front end).

SWETA PANDEY WEB DEVELOPMENT USING

07/10/2024 MEAR STACK with DEVOPS Unit 1 48
 Overview of frameworks
Server-side frameworks
 They handle HTTP requests, database control and management, URL mapping, etc.
 These frameworks can improve security and form the output data- simplifying the development process. Some of
the top server-side frameworks are –

• NET (C#)
• Django (Python)
• Ruby on Rails (Ruby)
• Express (JavaScript/Node.JS)
• Symfony (PHP)

SWETA PANDEY WEB DEVELOPMENT USING

07/10/2024 MEAR STACK with DEVOPS Unit 1 49
 Overview of frameworks
Client-side Frameworks
 Client-side frameworks don’t take care of the business logic like the server-side ones.
 They function inside the browser.
 Therefore, you can enhance and implement new user interfaces. A number of animated features can be
created with frontend and single page applications.
 Every client-side framework varies in functionality and use.
 Here are some client-side frameworks for comparison’s sake; all of whom use JavaScript as their
programming language-

• Angular
• Express.JS
• Vue.JS
• React.JS

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 50

T USING MEAR STACK with DEVOPS Unit
 NPM commands

 NPM stands for Node Package Manager, is one of the most used tools
for any javascript developer. It puts all modules in one place so that
node can find them, and manages dependency conflicts.
 Here's a list of the most common npm commands you should be aware
of.
• install
 This command is used to install the npm package and the other
packages which the particular package depends on. It will install in the
local node_modules folder.
 npm install <packagename>
SWETA PANDEY WEB DEVELOPMENT USING
07/10/2024 MEAR STACK with DEVOPS Unit 1 51
 NPM commands
uninstall
 This command does the exact opposite of install. It will uninstall the package completely which is already exist in
the node_modules folder. If the package mention is not present package.json list or node_modules folder, it won't
do anything.

npm uninstall <packagename>

update

 This command updates the current package to the latest version and if no package name has been specified then
it will update all packages. If some package is missing, it will check and update those too.

npm update <packagename> or npm update

list

 This command will print all the packages and their versions that are installed, as well as their dependencies in a
tree structure.
npm list

SWETA PANDEY WEB DEVELOPMENT USING

07/10/2024 MEAR STACK with DEVOPS Unit 1 52
 NPM commands

view

 This command will prints the data about the package.

npm view <packagename> <versions>

 If version is not specified, default version is 'latest'

help

 This command helps with the mentioned topic. It shows the appropriate documentation page.
 If the topic does not exist, or if multiple terms are provided, then npm will run the help-search command to find a
match.
build

 npm build and npm run build are entirely different.

 npm run build - This command runs the build field from the package.json scripts field.

SWETA PANDEY WEB DEVELOPMENT USING

07/10/2024 MEAR STACK with DEVOPS Unit 1 53
 NPM commands

start
This command runs a predefined command specified in the start property available inside scripts in the package.json
file.

npm start

stop

This command runs a predefined command specified in the stop property available inside scripts in the package.json
file. Unlike start, there is no default script that will run if the stop property is not defined

snpm stop <filename>

SWETA PANDEY WEB DEVELOPMENT USING

07/10/2024 MEAR STACK with DEVOPS Unit 1 54
 React App

React app
 Refers to a web application built using the React JavaScript library.
 React is a popular and widely-used open-source library developed by Facebook for
building user interfaces.
 It provides a component-based architecture and utilizes a virtual DOM (Document
Object Model) to efficiently update and render components when the underlying data
changes.
 In a React app, the user interface is divided into reusable components, which are
small, self-contained building blocks.
 Each component encapsulates its own logic, styles, and rendering.
 These components can be combined and nested to create complex user interfaces.
 React follows a declarative approach, where developers describe how the UI should
look based on the current state of the application.
 When the state changes, React automatically re-renders the affected components,
efficiently
07/10/2024
updating only the necessary
SWETA PANDEY
parts .
MEAR STACK with DEVOPS
WEB DEVELOPMENT USING
Unit 1 55
 React App
Key features of a React app include:
 Component-Based Architecture: React apps are built by composing and nesting reusable
components, making the codebase modular and maintainable.

 Virtual DOM: React utilizes a virtual representation of the DOM, which allows it to efficiently update
and render components by minimizing direct manipulations to the actual DOM.

 JSX: JSX is a syntax extension for JavaScript that enables developers to write HTML-like code within
their JavaScript files, making it easier to describe the structure and appearance of the UI.

 State Management: React provides a mechanism to manage and update application state using the
useState hook or more advanced state management libraries like Redux or MobX.

 Lifecycle Methods: React components have lifecycle methods that allow developers to perform
certain actions at specific stages of a component's life, such as when it is mounted, updated, or
unmounted.
SWETA PANDEY WEB DEVELOPMENT USING
07/10/2024 MEAR STACK with DEVOPS Unit 1 56
 React App
Key features of a React app include:

 React Router: React Router is a popular library for handling routing in React apps,
enabling navigation between different views or pages without reloading the entire page.

 Ecosystem and Community: React has a vast ecosystem with a wide range of libraries,
tools, and community support, making it easier to find solutions, extensions, and
resources for building complex applications.

 React can be used to build single-page applications (SPAs) or multi-page applications

(MPAs). It provides a flexible and scalable framework for creating interactive and
dynamic user interfaces.

SWETA PANDEY WEB DEVELOPMENT USING

07/10/2024 MEAR STACK with DEVOPS Unit 1 57
 React App

Create a React app, here are the general steps you can follow:

 Set up the Development Environment: Install Node.js on your computer,

which includes npm (Node Package Manager). npm is used to manage
dependencies and packages for your React app.

 Create a New React App: Open your terminal or command prompt and
navigate to the directory where you want to create your React app. Run
the following command to create a new React app using Create React
App:
npx create-react-app my-app
 Replace "my-app" with the desired name of your app.
SWETA PANDEY WEB DEVELOPMENT USING
07/10/2024 MEAR STACK with DEVOPS Unit 1 58
 React App

 Navigate to the App Directory: Once the app is created, navigate into the app
directory using the following command:
cd my-app
 Again, replace "my-app" with the actual name of your app.
 Start the Development Server: Start the development server to see your React app
in action. Run the following command:
npm start
 This will start the development server and open your React app in your default web
browser.

 Customize Your App: Open the code of your React app in a text editor or an
integrated development environment (IDE) of your choice. The main file you'll be
working with is src/App.js. Modify this file to customize your React app by adding
components, styles, and logic.
SWETA PANDEY WEB DEVELOPMENT USING
07/10/2024 MEAR STACK with DEVOPS Unit 1 59
 React App
 Add Additional Components: Create additional components in separate files within
the src directory to encapsulate different parts of your app's functionality. You can
import and use these components within src/App.js or any other component file.

 Install Dependencies: If you need to use external libraries or packages in your React
app, you can install them using npm. For example, if you want to install a UI library
like Material-UI, you can run the following command:
npm install @mui/material

SWETA PANDEY WEB DEVELOPMENT USING

07/10/2024 MEAR STACK with DEVOPS Unit 1 60
 React App
 Build and Deploy: When you're ready to deploy your React app, you can create a production build
using the following command:
npm run build
 This command will create an optimized and minified version of your app in the build folder. You can
then deploy this build to a web server or hosting platform.

 These steps provide a basic overview of creating a React app. There are many more concepts and
features you can explore while building your React app, such as routing, state management, and
integrating with backend APIs. React documentation and online tutorials can be helpful resources for
diving deeper into these topics.

SWETA PANDEY WEB DEVELOPMENT USING

07/10/2024 MEAR STACK with DEVOPS Unit 1 61
 React Component

React Component:

 In React, a component is a self-contained, reusable piece of code that defines the

structure, behavior, and appearance of a part of the user interface.

 Components are the building blocks of a React application and are responsible for
rendering elements on the screen.

 There are two types of components in React:

• Functional components
• Class components.

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 62

T USING MEAR STACK with DEVOPS Unit
 React Component

Functional Components:
 Functional components are JavaScript functions that return JSX (JavaScript XML) to define the structure and appearance of the
component.
 They are typically used for simpler components that don't require complex state management or lifecycle methods.
 Example of a functional component in React:
import React from 'react';

const MyComponent = () => {

return (
<div>
<h1>Hello, World!</h1>
<p>This is a functional component.</p>
</div>
);
};

export default MyComponent;

SWETA PANDEY WEB DEVELOPMENT USING
07/10/2024 MEAR STACK with DEVOPS Unit 1 63
 React Component
 In the example above, MyComponent is a functional component that returns a JSX
element, which represents the structure and content of the component.
 Functional components are often stateless, meaning they don't manage their own
state or have lifecycle methods.
 They receive data via props and can be easily composed and reused throughout the
application.

Class Components:
 Class components are JavaScript classes that extend the React.Component class. They
provide more features and flexibility compared to functional components.
 Class components have their own state, lifecycle methods, and more advanced
functionality.

SWETA PANDEY WEB DEVELOPMENT USING

07/10/2024 MEAR STACK with DEVOPS Unit 1 64
 React Component
 In the example above, MyComponent is a functional component that returns a JSX
element, which represents the structure and content of the component.
 Functional components are often stateless, meaning they don't manage their own
state or have lifecycle methods.
 They receive data via props and can be easily composed and reused throughout the
application.

Class Components:
 Class components are JavaScript classes that extend the React.Component class. They
provide more features and flexibility compared to functional components.
 Class components have their own state, lifecycle methods, and more advanced
functionality.

SWETA PANDEY WEB DEVELOPMENT USING

07/10/2024 MEAR STACK with DEVOPS Unit 1 65
 React Component
Here's an example of a class component in React:
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
message: 'Hello, World!'
};
}render() {
return (
<div>
<h1>{this.state.message}</h1>
<p>This is a class component.</p>
</div>
);}}
export default MyComponent;

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 66

T USING MEAR STACK with DEVOPS Unit
 React Component
 In this example, MyComponent is a class component that extends React.Component.
 It has a constructor to initialize the component's state, and the render() method returns the JSX
element representing the component's structure.
 Class components can manage state, handle events, and implement lifecycle methods like
componentDidMount, componentDidUpdate, and componentWillUnmount.

 Both functional and class components can be used interchangeably in a React application, but
functional components are preferred for their simplicity and performance advantages. However, class
components are still useful for more complex scenarios that require state management or lifecycle
methods.

 Components can be composed and nested within each other to build a hierarchy of UI elements,
creating a tree-like structure. This allows for reusable, modular, and maintainable code.

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 67

T USING MEAR STACK with DEVOPS Unit
 Topic Objective

Topic : Basic Understanding JSX, Props and State, Stateless and Stateful
Components, Component life cycle, Hooks, react-router vs react-router-
dom.
In this topic, the students will learn about the JSX, Props and State,
Stateless and Stateful Components. Student will learn regarding
Component life cycle, Hooks, react-router vs react-router-dom.
.

SWETA PANDEY WEB DEVELOPMENT USING

07/10/2024 MEAR STACK with DEVOPS Unit 1 68
 Basic, Understanding JSX
 JSX (JavaScript XML) is an extension of JavaScript syntax used in React for defining the
structure and content of components in a more declarative way. It allows you to write
HTML-like code directly within your JavaScript files.

Here are some key points to understand about JSX:

 HTML-like Syntax: JSX looks similar to HTML markup, allowing you to write tags,
attributes, and nested elements in a familiar way. For example, you can write <div>,
<h1>, <p>, and other HTML elements within your JSX code.

 JavaScript Expressions: JSX allows you to embed JavaScript expressions within curly
braces {}. This enables you to dynamically generate content, compute values, and
access variables or props. For example, you can include variables, perform
calculations, or call functions inside JSX expressions.
WEB DEVELOPMENT USING MEAR STACK with
07/10/2024 DEVOPS Unit 1 69
 Basic, Understanding JSX
 Components as JSX Elements: JSX enables you to use components as JSX elements. When you create a component in
React, you can use it as a custom HTML-like tag in your JSX code. For example, <MyComponent /> represents the
usage of a component named MyComponent.

 Class and Style Names: JSX provides support for adding CSS classes and inline styles to elements. Instead of the class
attribute used in HTML, JSX uses the className attribute to specify CSS classes. Inline styles are written using
JavaScript objects with camel-cased property names.

 Self-Closing Tags: Just like in HTML, JSX supports self-closing tags for elements that don't have any children. For
example, <img src="image.jpg" alt="Image" /> is a self-closing tag.

 Preventing Injection Attacks: JSX automatically escapes content to prevent injection attacks. It ensures that user-
generated content is treated as plain text by default, reducing the risk of Cross-Site Scripting (XSS) vulnerabilities.

 Transpilation: JSX code needs to be transpiled to regular JavaScript using tools like Babel to be understood by the
browser. Transpilation converts JSX syntax into equivalent JavaScript function calls that create and manipulate React
elements.

07/10/2024 70
 Basic, Understanding JSX
Here's an example of JSX usage in a React component:

import React from 'react';

const MyComponent = () => {

const name = 'John';

return (
<div>
<h1>Hello, {name}!</h1>
<p>This is a JSX example.</p>
</div>
);
};
export default MyComponent;

In this example, the component MyComponent returns JSX elements enclosed within the parentheses. JavaScript
expressions like {name} are used to dynamically render the value of the name variable.

07/10/2024 71
 Basic, Understanding JSX

 JSX allows you to write more readable and expressive code, making it easier to build and maintain
React components. It combines the power of JavaScript with the flexibility of HTML-like syntax,
enhancing the development experience in React applications.

Why use JSX?

 It is faster than regular JavaScript because it performs optimization while translating the code to
JavaScript.
 Instead of separating technologies by putting markup and logic in separate files, React uses
components that contain both. We will learn components in a further section.
 It is type-safe, and most of the errors can be found at compilation time.
 It makes easier to create templates.

07/10/2024 72
 Basic, Understanding JSX
Nested Elements in JSX
 To use more than one element, you need to wrap it with one container element. We use div as a
container element which has three nested elements inside it.

JSX Attributes
 JSX use attributes with the HTML elements same as regular HTML.
 JSX uses camelcase naming convention for attributes rather than standard naming convention of
HTML such as a class in HTML becomes className in JSX because the class is the reserved keyword
in JavaScript.
 We can also use our own custom attributes in JSX. For custom attributes, we need to use data- prefix.
 In JSX, we can specify attribute values in two ways:
• As String Literals: We can specify the values of attributes in double quotes.
• As Expressions: We can specify the values of attributes as expressions using curly braces {}.

07/10/2024 73
 Basic, Understanding JSX

JSX Comments
 JSX allows us to use comments that begin with /* and ends with */ and wrapping them in curly braces
{} just like in the case of JSX expressions.

JSX Styling
 React always recommends to use inline styles. To set inline styles, you need to use camelCase syntax.
React automatically allows appending px after the number value on specific elements.

07/10/2024 74
 Props and State

React State
 The state is an updatable structure that is used to contain data or information about the component.
The state in a component can change over time.
 The change in state over time can happen as a response to user action or system event. A component
with the state is known as stateful components.
 It is the heart of the react component which determines the behavior of the component and how it will
render. They are also responsible for making a component dynamic and interactive.
 A state must be kept as simple as possible. It can be set by using the setState() method and calling
setState() method triggers UI updates.
 A state represents the component's local state or information. It can only be accessed or modified
inside the component or by the component directly.
 To set an initial state before any interaction occurs, we need to use the getInitialState() method.

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 75

T USING MEAR STACK with DEVOPS Unit
 Props and State
Defining State
 To define a state, you have to first declare a default set of values for defining the component's initial
state. To do this, add a class constructor which assigns an initial state using this.state. The 'this.state'
property can be rendered inside render() method.
Example
The below sample code shows how we can create a stateful component using ES6 syntax.
 import React, { Component } from 'react';
 class App extends React.Component {
 constructor() {
 super();
 this.state = { displayBio: true };
 }
 render() {
 const bio = this.state.displayBio ? (

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 76

T USING MEAR STACK with DEVOPS Unit
 Props and State
<div>
<p><h3>Javatpoint is one of the best Java training institute in Noida, Delhi, Gurugram, Ghaziabad and
Faridabad. We have a team of experienced Java developers and trainers from multinational companies to
teach our campus students.</h3></p>
 </div>
 ) : null;
 return (
 <div>
 <h1> Welcome to JavaTpoint!! </h1>
 { bio }
 </div>
 );
 } }
 export default App;

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 77

T USING MEAR STACK with DEVOPS Unit
 Props and State
To set the state, it is required to call the super() method in the constructor. It is because this.state is
uninitialized before the super() method has been called.

Output

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 78

T USING MEAR STACK with DEVOPS Unit
 Props and State
Changing the State
We can change the component state by using the setState() method and passing a new state object as the
argument. Now, create a new method toggleDisplayBio() in the above example and bind this keyword to
the toggleDisplayBio() method otherwise we can't access this inside toggleDisplayBio() method.

this.toggleDisplayBio = this.toggleDisplayBio.bind(this);
output:

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 79

T USING MEAR STACK with DEVOPS Unit
 Props and State
React Props
 Props stand for "Properties." They are read-only components. It is an object which stores the value of
attributes of a tag and work similar to the HTML attributes. It gives a way to pass data from one
component to other components. It is similar to function arguments. Props are passed to the
component in the same way as arguments passed in a function.

 Props are immutable so we cannot modify the props from inside the component. Inside the
components, we can add attributes called props. These attributes are available in the component as
this.props and can be used to render dynamic data in our render method.

 When you need immutable data in the component, you have to add props to reactDom.render()
method in the main.js file of your ReactJS project and used it inside the component in which you
need. It can be explained in the below example.

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 80

T USING MEAR STACK with DEVOPS Unit
 Props and State
Example
App.js
import React, { Component } from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1> Welcome to { this.props.name } </h1>
<p> <h4> Javatpoint is one of the best Java training institute in Noida, Delhi, Gurugram,
Ghaziabad and Faridabad. </h4> </p>
</div>
);
} }
export default App;

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 81

T USING MEAR STACK with DEVOPS Unit
 Props and State
Main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App name = "JavaTpoint!!" />, document.getElementById('app'));

Output

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 82

T USING MEAR STACK with DEVOPS Unit
 Props and State
Difference between State and Props

• Props State • State changes can be asynchronous.

• Props are read-only. • State is mutable.
• Props are immutable.
• State holds information about the
• Props allow you to pass data from one component to
components.
other components as an argument.
• Props can be accessed by the child component.
• Props are used to communicate between • State holds information about the
components. components.
• Stateless component can have Props. • States can be used for rendering dynamic
• Props make components reusable. changes with the component.
• Props are external and controlled by whatever • Stateless components cannot have State
renders the component.
• State cannot make components reusable.
• The State is internal and controlled by the
React Component itself.
07/10/2024 SWETA PANDEY WEB DEVELOPMEN 83
T USING MEAR STACK with DEVOPS Unit
 Stateless and Stateful Components
In a component, state is data we import — render() {
typically to show the user — that is subject to return (
change. It could change because the database <div>
we’re getting from may be updated, the user <p>Look at all the pigeons spotted today!</p>
modified it — there are so many reasons that data <ul>
changes. {this.state.pigeons.map(pigeonURL => {
import React, {Component} from 'react' return <li><img src={pigeonURL} /></li>
})}
class Pigeons extends Component { </ul>
constructor() { </div>
)
super()
}
this.state = {
}
pigeons: []
Typically we would also have a componentDidMount()
} that would grab our data from a database, but the above
} example should give you a basic idea: we have state,
and we can render things from state.
07/10/2024 SWETA PANDEY WEB DEVELOPMEN 84
T USING MEAR STACK with DEVOPS Unit
 Stateful and Stateless Components
Stateful and Stateless Components
Stateful and stateless components have many different names.

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.

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 85

T USING MEAR STACK with DEVOPS Unit
 Stateful and Stateless Components
Stateful/Container/Smart component:

class Main extends Component {

constructor() {
super()
this.state = {
books: []
}
}
render() {
return <BooksList books={this.state.books} />;
}
}

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 86

T USING MEAR STACK with DEVOPS Unit
 Stateful and Stateless Components
Stateless/Presentational/Dumb component:

const BooksList = ({books}) => {

return (
<ul>
{books.map(book => {
return <li>book</li>
})}
</ul>
)
}
Notice the stateless component is written as a function. As cool as state is, you should always aim to
make your components as simple and stateless as possible, so different components can be reused
like Lego pieces, even if you don’t have immediate plans to reuse a component

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 87

T USING MEAR STACK with DEVOPS Unit
 Stateful and Stateless Components
When should I make a component stateful or stateless?
 You probably won’t know exactly how a component will turn out as soon as you start writing one —
you will figure it out as you go, following some guidelines. Here are some good ones:

 Type out or visualize your website as if it were one component. Busy, right? Break it down from there
into smaller components.
 You’ll need state somewhere when information dynamically changes, like a user’s current favorite
songs or top scores. Aim to have a parent component keep all the information, and pass it down to its
stateless children components.
 So presentational components can vary depending on what information it receives. The difference is
that a stateful component keeps track of the information itself, instead of just taking it via props and
outputting it.

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 88

T USING MEAR STACK with DEVOPS Unit
 Component life cycle
n ReactJS, every component creation process involves various lifecycle methods. These lifecycle methods
are termed as component's lifecycle. These lifecycle methods are not very complicated and called at
various points during a component's life. The lifecycle of the component is divided into four phases. They
are:

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 89

T USING MEAR STACK with DEVOPS Unit
 Component life cycle
 Initial Phase
It is the birth phase of the lifecycle of a ReactJS component. Here, the component starts its journey on a
way to the DOM. In this phase, a component contains the default Props and initial State. These default
properties are done in the constructor of a component. The initial phase only occurs once and consists
of the following methods.

getDefaultProps()
It is used to specify the default value of this.props. It is invoked before the creation of the component or
any props from the parent is passed into it.
getInitialState()
It is used to specify the default value of this.state. It is invoked before the creation of the component.
 Mounting Phase
In this phase, the instance of a component is created and inserted into the DOM. It consists of the
following methods.

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 90

T USING MEAR STACK with DEVOPS Unit
 Component life cycle
 componentWillMount()
 This is invoked immediately before a component gets rendered into the DOM. In the case, when you
call setState() inside this method, the component will not re-render.
 componentDidMount()
 This is invoked immediately after a component gets rendered and placed on the DOM. Now, you can
do any DOM querying operations.
 render()
 This method is defined in each and every component. It is responsible for returning a single root
HTML node element. If you don't want to render anything, you can return a null or false value.

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 91

T USING MEAR STACK with DEVOPS Unit
 Component life cycle
Updating Phase
 It is the next phase of the lifecycle of a react component. Here, we get new Props and change State. This phase
also allows to handle user interaction and provide communication with the components hierarchy. The main aim
of this phase is to ensure that the component is displaying the latest version of itself. Unlike the Birth or Death
phase, this phase repeats again and again. This phase consists of the following methods.
componentWillRecieveProps()
 It is invoked when a component receives new props. If you want to update the state in response to prop changes,
you should compare this.props and nextProps to perform state transition by using
this.setState() method.
shouldComponentUpdate()
 It is invoked when a component decides any changes/updation to the DOM. It allows you to control the
component's behavior of updating itself. If this method returns true, the component will update. Otherwise, the
component will skip the updating.
componentWillUpdate()
 It is invoked just before the component updating occurs. Here, you can't change the component state by invoking
this.setState() method. It will not be called, if shouldComponentUpdate() returns false.

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 92

T USING MEAR STACK with DEVOPS Unit
 Component life cycle
render()
It is invoked to examine this.props and this.state and return one of the following types: React elements,
Arrays and fragments, Booleans or null, String and Number. If shouldComponentUpdate() returns false,
the code inside render() will be invoked again to ensure that the component displays itself properly.
componentDidUpdate()
It is invoked immediately after the component updating occurs. In this method, you can put any code
inside this which you want to execute once the updating occurs. This method is not invoked for the initial
render.

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 93

T USING MEAR STACK with DEVOPS Unit
 Component life cycle
Unmounting Phase
It is the final phase of the react component lifecycle. It is called when a component instance is destroyed
and unmounted from the DOM. This phase contains only one method and is given below.

componentWillUnmount()
This method is invoked immediately before a component is destroyed and unmounted permanently. It
performs any necessary cleanup related task such as invalidating timers, event listener, canceling network
requests, or cleaning up DOM elements. If a component instance is unmounted, you cannot mount it
again.

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 94

T USING MEAR STACK with DEVOPS Unit
 Component life cycle
Unmounting Phase
It is the final phase of the react component lifecycle. It is called when a component instance is destroyed
and unmounted from the DOM. This phase contains only one method and is given below.

componentWillUnmount()
This method is invoked immediately before a component is destroyed and unmounted permanently. It
performs any necessary cleanup related task such as invalidating timers, event listener, canceling network
requests, or cleaning up DOM elements. If a component instance is unmounted, you cannot mount it
again.

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 95

T USING MEAR STACK with DEVOPS Unit
 Component life cycle
import React, { Component } from 'react'; • componentWillMount() {
• console.log('Component Will MOUNT!')
class App extends React.Component { • }
constructor(props) { • componentDidMount() {
super(props); • console.log('Component Did MOUNT!')
this.state = {hello: "JavaTpoint"}; • }
this.changeState = this.changeState.bind(this) • changeState(){
} • this.setState({hello:"All!!- Its a great reactjs
render() { tutorial."});
return ( • }
<div> • componentWillReceiveProps(newProps) {
<h1>ReactJS component's Lifecycle</h1> • console.log('Component Will Recieve Props!')
<h3>Hello {this.state.hello}</h3> • }
<button onClick = {this.changeState}>Click • shouldComponentUpdate(newProps, newState) {
Here!</button> • return true;
</div> • }
); • componentWillUpdate(nextProps, nextState) {
} • console.log('Component Will UPDATE!');
• }
07/10/2024 SWETA PANDEY WEB DEVELOPMEN 96
T USING MEAR STACK with DEVOPS Unit
 Component life cycle
componentDidUpdate(prevProps, prevState) {
console.log('Component Did UPDATE!')
}
componentWillUnmount() {
console.log('Component Will UNMOUNT!')
} }
export default App;
OUTPUT:
Image 2 When you click on the Click Here Button, you get the updated result which is shown in the below screen.

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 97

T USING MEAR STACK with DEVOPS Unit
 Hooks
React Hooks
Hooks are the new feature introduced in the React 16.8 version. It allows you to use state and other React features
without writing a class. Hooks are the functions which "hook into" React state and lifecycle features from function
components. It does not work inside classes.

Hooks are backward-compatible, which means it does not contain any breaking changes. Also, it does not replace
your knowledge of React concepts.

When to use a Hooks

If you write a function component, and then you want to add some state to it, previously you do this by converting it
to a class. But, now you can do it by using a Hook inside the existing function component.

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 98

T USING MEAR STACK with DEVOPS Unit
 Hooks
Rules of Hooks
Hooks are similar to JavaScript functions, but you need to follow these two rules when using them. Hooks rule
ensures that all the stateful logic in a component is visible in its source code. These rules are:
1.Only call Hooks at the top level
Do not call Hooks inside loops, conditions, or nested functions. Hooks should always be used at the top level of the
React functions. This rule ensures that Hooks are called in the same order each time a components renders.

2. Only call Hooks from React functions

You cannot call Hooks from regular JavaScript functions. Instead, you can call Hooks from React function
components. Hooks can also be called from custom Hooks.

Pre-requisites for React Hooks

Node version 6 or above
NPM version 5.2 or above
Create-react-app tool for running the React App

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 99

T USING MEAR STACK with DEVOPS Unit
 Hooks
React Hooks Installation
To use React Hooks, we need to run the following commands:

$ npm install [email protected] --save

$ npm install [email protected] --save

The above command will install the latest React and React-DOM alpha versions which support React Hooks. Make
sure the package.json file lists the React and React-DOM dependencies as given below.

"react": "^16.8.0-alpha.1",
"react-dom": "^16.8.0-alpha.1",

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 100

T USING MEAR STACK with DEVOPS Unit
 Hooks
Hooks Effect
The Effect Hook allows us to perform side effects (an action) in the function components. It does not use components
lifecycle methods which are available in class components. In other words, Effects Hooks are equivalent to
componentDidMount(), componentDidUpdate(), and componentWillUnmount() lifecycle methods.

Side effects have common features which the most web applications need to perform, such as:

Updating the DOM,

Fetching and consuming data from a server API,
Setting up a subscription, etc.
Custom Hooks
A custom Hook is a JavaScript function. The name of custom Hook starts with "use" which can call other Hooks. A
custom Hook is just like a regular function, and the word "use" in the beginning tells that this function follows the
rules of Hooks. Building custom Hooks allows you to extract component logic into reusable functions.

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 101

T USING MEAR STACK with DEVOPS Unit
 Hooks
Built-in Hooks
Here, we describe the APIs for the built-in Hooks in React. The built-in Hooks can be divided into two parts, which
are given below.
Basic Hooks
• useState
• useEffect
• useContext
Additional Hooks
• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 102

T USING MEAR STACK with DEVOPS Unit
 React-router vs react-router-dom
 react-router and react-router-dom are both packages that provide routing capabilities for React applications,
but they serve slightly different purposes.
 react-router: This package provides the core functionality of React Router, including components like Route,
Switch, Redirect, etc. It is platform-agnostic and can be used with React applications targeting different
platforms, such as web, mobile (React Native), etc. However, it doesn't include any dependencies specific to the
web platform.
 react-router-dom: This package builds on top of react-router and is specifically designed for web applications
using React. It includes additional components and utilities that are optimized for web routing, such as
BrowserRouter, HashRouter, Link, NavLink, etc. react-router-dom depends on react-router and provides an easy-
to-use interface for implementing routing in React web applications.
 In practice, when building a React application for the web, you will typically use react-router-dom rather than
react-router. The react-router-dom package includes all the necessary components and utilities for web routing
and simplifies the setup and configuration process specific to web applications.

 react-router is the core package that provides routing capabilities for React applications across different platforms,
while react-router-dom is a package specifically tailored for web applications and extends react-router with
additional components and utilities optimized for web routing.

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 103

T USING MEAR STACK with DEVOPS Unit
 React-router vs react-router-dom
To install React Router or React Router DOM using npm, you can follow these steps:
• Open your command-line interface (CLI) or terminal.
• Navigate to your project's root directory.
• Run the following command to install React Router:
npm install react-router
This command will install the react-router package, which provides the core functionality of React Router for routing
in React applications.
 If you are building a web application using React, you'll also need to install react-router-dom. Run the following
command to install it:
npm install react-router-dom
This command will install the react-router-dom package, which extends react-router with additional components and
utilities optimized for web routing.
 After the installation process completes, you can start using React Router or React Router DOM in your project
by importing the required components and using them in your code.

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 104

T USING MEAR STACK with DEVOPS Unit
 React-router vs react-router-dom
Here's an example of how you can import and use React Router or React Router DOM components in your React
application:
import { BrowserRouter, Route, Switch } from 'react-router-dom';

// Example usage
const App = () => {
return (
<BrowserRouter>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</BrowserRouter>
);
}

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 105

T USING MEAR STACK with DEVOPS Unit
 React-router vs react-router-dom
 Make sure to adjust the import statements and component usage according to your specific requirements.

 You have now installed React Router or React Router DOM using npm and can start using them in your React
application for routing purposes.

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 106

T USING MEAR STACK with DEVOPS Unit
 Daily Quiz

1) Which of the following is NOT a JavaScript framework?

a) React
b) Angular
c) Vue
d) Django

2) Which command is used to install dependencies listed in a project's package.json file?

a) npm install
b) npm update
c) npm init
d) npm start

SWETA PANDEY WEB DEVELOPMENT USING MEAR STACK with

07/10/2024 107
DEVOPS Unit 1
 Daily Quiz

3) What is the command to create a new React application using Create React App?
a) create-react-app my-app
b) npm init react-app my-app
c) react-create-app my-app
d) new-react-app my-app

Which directory contains the main entry point of a React application?

a) src
b) public
c) build
d) node_modules

SWETA PANDEY WEB DEVELOPMENT USING MEAR STACK with

07/10/2024 108
DEVOPS Unit 1
 Daily Quiz

5) What are props in React?

a) Internal data storage within a component
b) A way to pass data from parent to child components
c) Event handlers for user interactions
d) Styling and layout instructions

Stateful components in React:

a) Manage and maintain their own internal state
b) Don't have any state
c) Are more efficient than stateless components
d) Cannot be reused in multiple parts of an application

SWETA PANDEY WEB DEVELOPMENT USING MEAR STACK with

07/10/2024 109
DEVOPS Unit 1
 Daily Quiz

7) Which method is called immediately after a component is rendered for the first time?
a) componentDidMount
b) componentDidUpdate
c) componentWillMount
d) componentWillRender

Which package is specifically designed for web applications and extends react-router with web-specific
components and utilities?
a) react-router
b) react-router-dom
c) react-router-native
d) react-router-web

SWETA PANDEY WEB DEVELOPMENT USING MEAR STACK with

07/10/2024 110
DEVOPS Unit 1
 Daily Quiz

9. In React, components are reusable and independent units of:

a) HTML
b) CSS
c) JavaScript
d) JSX

Which of the following is the correct syntax to render a component in JSX?

a) <ComponentName />
b) <ComponentName></ComponentName>
c) {ComponentName}
d) (ComponentName)

SWETA PANDEY WEB DEVELOPMENT USING MEAR STACK with

07/10/2024 111
DEVOPS Unit 1
 Weekly Assignment

1. Explain the concept of component life cycle in React. Provide an overview of the different phases and methods
involved in the life cycle of a React component.

2. Describe the role of props and state in React. Differentiate between the two and explain when it is appropriate to
use props versus state in a component.

3. Discuss the differences between stateful and stateless components in React. When would you choose to use a
stateful component over a stateless component, and vice versa?

4. What is JSX in React? Explain its purpose and advantages in building React applications. Provide an example to
demonstrate the usage of JSX.

5. Compare and contrast the usage of react-router and react-router-dom in a React application. Explain when you
would use one over the other, and provide an example of how you would set up routing using either of the libraries..

SWETA PANDEY WEB DEVELOPMENT USING MEAR STACK with

07/10/2024 112
DEVOPS Unit 1
 Topic Link ( YouTube & NPTEL Video Links)

YouTube /other Video Links

• https://youtu.be/QFaFIcGhPoM?list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3

• https://youtu.be/pKd0Rpw7O48

• https://youtu.be/TlB_eWDSMt4

• https://youtu.be/QFaFIcGhPoM

• https://youtu.be/EHTWMpD6S0

SWETA PANDEY WEB DEVELOPMENT USING MEAR

07/10/2024 113
STACK with DEVOPS Unit 1
 MCQ (End of Unit)
1)What is the command to start a React development server and run the application locally?
a) npm run build
b) npm start
c) npm test
d) npm run serve

In a typical React project directory structure, where is the main component usually located?
a) src/
b) public/
c) node_modules/
d) build/

SWETA PANDEY WEB DEVELOPMENT USING MEAR STACK with

07/10/2024 114
DEVOPS Unit 1
 MCQ (End of Unit)

4) Which of the following best describes JSX in React?

a) A templating language for server-side rendering in React.
b) A syntax extension for writing HTML-like code in JavaScript.
c) An alternative to CSS for styling React components.
d) A package manager used for installing React dependencies.

In React, what are props used for?

a) Managing and updating the internal state of a component.
b) Handling user interactions and events.
c) Passing data from a parent component to its child components.
d) Dynamically updating the CSS styles of a component.

Which of the following is a method that is part of the React component life cycle?
a) renderProps()
b) updateState()
c) componentDidMount()
d) setStateChange()

SWETA PANDEY WEB DEVELOPMENT USING MEAR STACK with

07/10/2024 115
DEVOPS Unit 1
 Glossary Questions
Top 10 interview questions

1. Explain purpose of using a framework in web development? Provide an overview of the benefits and advantages of using frameworks.
2. Explain the difference between local and global NPM packages. How can you install a package globally using NPM?
3. Describe the steps involved in creating a new React application using Create React App.Discuss the typical directory structure of a React
project and explain the purpose of each directory.
4. Discuss about React components? Explain the difference between functional components and class components.
5. Define SX in React? How does JSX differ from regular HTML?
6. Explain the concepts of props and state in React. Provide examples of when you would use each of them.
7. What is the difference between a stateful component and a stateless component in React? In which situations would you prefer to use
one over the other?
8. Describe the lifecycle of a React component and the different phases involved. Provide examples of lifecycle methods and their
purposes.
9. Define React Hooks? Explain the benefits of using Hooks in React development and provide examples of commonly used Hooks.

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 116

T USING MEAR STACK with DEVOPS Unit
 Expected Questions for University Exam
1. Explain the typical directory structure of a React project and provide a brief description of each directory.
2. What are React components? Differentiate between functional components and class components in React.
3. What is JSX in React? How does JSX differ from regular HTML?
4. Discuss the concept of props and state in React. When would you use props, and when would you use state in your
components?
5. Explain the difference between stateful and stateless components in React. Provide examples of scenarios where you
would choose one over the other.
6. Discuss the difference between state and props in React. When would you use state, and when would you use props?
7. What are the key characteristics of a functional component in React? How does it differ from a class component?
8. Explain the basic life cycle of a React component. Mention key methods and their purposes in each life cycle phase.
9. What are the main files and directories created when setting up a new React application using Create React App?
Briefly describe the purpose of each.
10. Describe the typical directory structure of a React project and explain the role of each directory.

SWETA PANDEY WEB DEVELOPMENT USING MEAR STACK with

07/10/2024 117
DEVOPS Unit 1
 Summary
Till Now we understand, the commonds of NPM on Windows. How to design
and build static as well as dynamic webpages and interactive web applications.
Students understood advanced topics like React js, nodejs

SWETA PANDEY WEB DEVELOPMENT USING MEAR STACK with

07/10/2024 118
DEVOPS Unit 1
 References
(1) Anthony Accomazzo, Ari Lerner, and Nate Murray, “Fullstack React: The Complete Guide to
ReactJS and Friends”, 4th edition, 2020 International Publishing.

(2) David Cho, “Full-Stack React, Type Script, and Node: Build cloud-ready web applications
using React 17 with Hooks and GraphQL”, 2nd edition, 2017 Packt Publishing Limited.

(3) Richard Haltman & Shubham Vernekar, “Complete node.js: The fast guide: Learn complete
backend development with node.js”5th edition, 2017 SMV publication.

(4) Glenn Geenen, Sandro Pasquali , Kevin Faaborg, “Mastering Node.js: Build robust and
scalable real-time server-side web applications efficiently” 2nd edition Packt,2017 Publishing
Limited.

07/10/2024 SWETA PANDEY WEB DEVELOPMEN 119

T USING MEAR STACK with DEVOPS Unit
 THANK YOU

SWETA PANDEY WEB DEVELOPMENT USING MEAR STACK with

07/10/2024 120
DEVOPS Unit 1
 React Components

Components
Components are independent and reusable block of code. They serve
the same purpose as JavaScript functions, but work in isolation and
return HTML.

Components come in two types,

• Class components
• Function components

Dr. Mohd Arif WEB DEVELOPMENT

USING MEAR STACK with DEVOPS Unit
07/10/2024 1 121
 React Components

Class components:
Class components start with class keyword that
extends the Component constructor from React and has
a render method which returns a JSX.

Dr. Mohd Arif WEB DEVELOPMENT

USING MEAR STACK with DEVOPS Unit
07/10/2024 1 122
 React Components
What are the uses of class components?
Apart from returning the JSX, sometimes we have a situation where we need to manage
some data inside the components; which makes the components more dynamic and
makes our application faster and more user friendly. This data is called state.

We used to use class components in order to manage the state. In the older versions of
React (before version 16.8), it was not possible to use state inside functional
components.

Apart from managing the state we use class components to perform some additional
operations, like life-cycle methods.

Dr. Mohd Arif WEB DEVELOPMENT

USING MEAR STACK with DEVOPS Unit
07/10/2024 1 123
 React Components

To summaries, a class component is an ES6 class which extends

a React.Component. It uses render method to return a JSX. It
accepts props (inside constructor) if necessary.

This has changed with the introduction of React Hooks, and now
we can also manage state and perform life cycle methods inside
functional components with hooks.

Dr. Mohd Arif WEB DEVELOPMENT

USING MEAR STACK with DEVOPS Unit
07/10/2024 1 124
 React Components

What are Functional Components?

The first, most important and recommended component type in React

is a functional component. A functional component is basically a JavaScript
function that returns a React element (JSX).
Functional components start with function keyword.

Dr. Mohd Arif WEB DEVELOPMENT

USING MEAR STACK with DEVOPS Unit
07/10/2024 1 125
 React Components

Props and state

Props (short for “properties”) and state are both plain
JavaScript objects. While both hold information that
influences the output of render, they are different in one
important way: props get passed to the component (similar
to function parameters) whereas state is managed within the
component (similar to variables declared within a function).

Dr. Mohd Arif WEB DEVELOPMENT

USING MEAR STACK with DEVOPS Unit
07/10/2024 1 126
 React Components

Props
Components can be passed as props, which stands for properties.
Props are like function arguments, and you send them into the component
as attributes.

Dr. Mohd Arif WEB DEVELOPMENT

USING MEAR STACK with DEVOPS Unit
07/10/2024 1 127
 React Components

Dr. Mohd Arif WEB DEVELOPMENT

USING MEAR STACK with DEVOPS Unit
07/10/2024 1 128