An Internship Document on

Web Technologies, React JS, DevOps

Submitted in partial fulfilment of the requirement of the Award of the Degree

of

BACHELOR OF TECHNOLOGY

IN

COMPUTER SCIENCE AND ENGINEERING

By

PASAGADA ASWINI DATTA 216M1A0593

DEPARTMENT
OF
COMPUTER SCIENCE & ENGINEERING

B.V.C COLLEGE OF ENGINEERING

RAJAHMUNDRY, ANDHRA PRADESH.(2021-2025)
Accredited by NACC with “A” Grade
 DEPARTMENT OF COMPUTER SCIENCE &ENGINEERING

BVC COLLEGE OF ENGINEERING

RAJAHMUNDRY

CERTIFICATE

This is to certify that the “INTERNSHIP REPORT” submitted by

PASAGADA ASWINI DATTA (Regd.No:216M1A0593) is work done by
him and submitted during 2023 – 2024 academic year, in partial fulfillment
of the requirements for the award of the degree of BACHELOR OF
TECHNOLOGY IN COMPUTER SCIENCE & ENGINEERING, at HQL
Edutech pvt.Ltd, Hyderabad.

EXAMINER Head of the Department

 DECLARATION
First and foremost, we sincerely salute our esteemed. institution
B.V.C COLLEGE OF ENGINEERING for giving this golden opportunity for
fulfilling our warm dreams of becoming engineers.

We would like to express our utmost gratitude to our project

guide SK. LALASHA, Assistant Professor who in spite of being
extraordinarily busy with his duties, took time to give us the valuable
advices and guidance throughout the completion of the project.

We are highly obliged to our Head of the Department,

Mr.R.N.VISHNU MURTHY, M.Tech, MISTE,(Ph.D).Associate Professor for
his constant inspiration, extensive help and valuable support in our every
step.

Last but not the least, we owe a great deal to our Principal Dr.
T.V. JANARDHANA RAO, BE, M.Tech, MBA ,Ph.D, MISTE, FIETE, MIEE. for
his extending a helping hand at every juncture of need.
 ACKNOWLEDGMENT:
First and foremost, we sincerely salute our esteemed institution,
B.V.C COLLEGE OF ENGINEERING, for giving us this golden
opportunity to fulfill our warm dreams of becoming engineers.

We would like to express our utmost gratitude to our Head of the

Department, Mr.R.N.VISHNU MURTHY, M.Tech, MISTE,(Ph.D). for his
constant inspiration, extensive help, and valuable support at every step
of our project.

Last but not least, we owe a great deal to our Principal, Dr.
T.V.JANARDHANA RAO, BE, M.Tech, MBA ,Ph.D, MISTE, FIETE, MIEE,
for extending a helping hand at every juncture of need.

HOD
 ABSTRACT

Web technologies, encompassing HTML, CSS, and JavaScript, serve as the cornerstone of modern
digital innovation, enabling developers to craft structured, engaging, and interactive web
experiences. HTML provides the essential framework for content, CSS enhances design aesthetics
and responsiveness, and JavaScript empowers real-time interactivity and dynamic functionality.
Building on these, React.js leverages a component-based architecture and declarative syntax to
streamline the creation of scalable, high-performance single-page applications. Complementing web
development, DevOps integrates development and operations practices, emphasizing collaboration,
automation, and continuous integration/continuous deployment (CI/CD). By leveraging tools such
as Git, Docker, Kubernetes, and AWS, DevOps ensures efficient software delivery and adaptability
to market demands. Together, these technologies and methodologies form the backbone of the
modern digital ecosystem, driving innovation, efficiency, and seamless user experiences.
 Table of contents
Section Topic Page Numbers
HTML – Overview Basic HTML Document 1-2
HTML Tags 4
HTML Document Structure 5
The Declaration 6
HTML – Basic Tags Heading Tags 7
Paragraph Tag 8
Line Break Tag 9
Centering Content 10
CSS – Overview What is CSS? 12
Advantages of CSS 12
Who Creates and Maintains CSS? 13
CSS Versions? 13
CSS – Syntax The Type Selectors 14
The Universal Selectors 15
The Descendant Selectors 15
The Class Selectors 16
The ID Selectors 17
JavaScript – Overview What is JavaScript? 18
Client-Side Java Script 19
JavaScript – Syntax Comments in JavaScript 20
JavaScript – Placement JavaScript in ... Section 22
JavaScript in ... Section 23
JavaScript in and Sections 24
JavaScript – Variables JavaScript Datatypes 25
JavaScript Variables 27
ReactJS – Overview React versions 28
Features 30
Benefits 31
Applications 34
ReactJS – Installation Toolchain 35
The serve static server 36
Babel compiler 37
Create React App toolchain 38
Use of the React Application 39
 Page
Section Topic
Numbers

Devops Overview 42

Evolution 45

Working 46

Devops Lifecycle 47

Linux Command 48

What is shell 49

What is terminal 50

Some disadvantages 51

Bash scriptng 52

Introduction to Github 53

Introduction to AWS 55

AWS Fundamentals 56

Dockers 57

Key component 58

Docker architecture 59

Docker hub 60
HTML

1
 HTML

HTML

HTML stands for Hypertext Markup Language, and it is the most widely used
language to write Web Pages.
• Hypertext refers to the way in which Web pages (HTML documents)
are linked together. Thus, the link available on a webpage is called
Hypertext.

• As its name suggests, HTML is a Markup Language which means you

use HTML to simply "mark-up" a text document with tags that tell a Web
browser how to structureit to display.
Originally, HTML was developed with the intent of defining the structure of
documents like headings, paragraphs, lists, and so forth to facilitate the
sharing of scientific information between researchers.
Now, HTML is being widely used to format web pages with the help of different
tags availablein HTML language.

Basic HTML Document

In its simplest form, following is an example of an HTML document:

<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here </p>
</body>
</html>

2
Either you can use Try it option available at the top right corner of the code
box to check the result of this HTML code, or let's save it in an HTML file

test.htm using your favorite text editor. Finally open it using a web browser
like Internet Explorer or Google Chrome, or Firefox etc. It must show the
following.

3
 HTML

HTMLTags

As told earlier, HTML is a markup language and makes use of various tags to
format the content. These tags are enclosed within angle braces <Tag
Name>. Except few tags, most of the tags have their corresponding closing
tags. For example, <html> has its closing tag</html> and <body> tag has
its closing tag </body> tag etc.
Above example of HTML document uses the following tags:

Tag Description

<!DOCTYPE.. This tag defines the document type and HTML version.
.>
This tag encloses the complete HTML document and mainly
<html>
comprises of document header which is represented by
<head>...</head> and document body which is
represented by <body>...</body> tags.
This tag represents the document's header which can keep
<head>
other HTMLtags like <title>, <link> etc.

The <title> tag is used inside the <head> tag to mention

<title>
thedocument title.

This tag represents the document's body which keeps other

<body>
HTML tagslike <h1>, <div>, <p> etc.

<h1 This tag represents the heading.

<p> This tag represents a paragraph.

4
 HTML

To learn HTML, you will need to study various tags and understand how they
behave, while formatting a textual document. Learning HTML is simple as
users have to learn the usage of different tags in order to format the text or
images to make a beautiful webpage.
World Wide Web Consortium (W3C) recommends to use lowercase tags
starting from HTML 4.

HTML DocumentStructure

A typical HTML document will have the following structure:

Document declaration tag

<html>
<head>
Document header related tags
</head>

<body>
Document body related tags
</body>
</html>

We will study all the header and body tags in subsequent chapters, but for now
let's see whatis document declaration tag.

5
 HTML

The <!DOCTYPE>Declaration

The <!DOCTYPE> declaration tag is used by the web browser to understand

the version of the HTML used in the document. Current version of HTML is 5 and
it makes use of the followingdeclaration:

There are many other declaration types which can be used in HTML
document depending on
what version of HTML is being used. We will see more details on this
while discussing
<!DOCTYPE...> tag along with other HTML tags.

6
 HTML

HTML-BASIC TAGS

Heading Tags

Any document starts with a heading. You can use different sizes for your
headings. HTML alsohas six levels of headings, which use the elements
<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
While displaying any heading, browser adds one line before and one line
after thatheading.

Example

<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

7
This will produce the following result:

Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each
paragraph of text should go in between an opening <p> and a closing </p>
tag as shown below in the example:

Example
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>

This will produce the following result:

8
Here is a first paragraph of text.
Here is a second paragraph of tex.
Here is a third paragraph of text

Line Break Tag

Whenever you use the <br /> element, anything following it

starts from the next line. This tag is an example of an empty
element, where you do not need opening and closing tags, as
there is nothing to go in between them.
The <br /> tag has a space between the characters br and
the forward slash. If you omit thisspace, older browsers will have
trouble rendering the line break, while if you miss the forward
slash character and just use <br> it is not valid in XHTML.

Example
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment on
time.<br />Thanks<br />
Mahnaz</p>
</body>

9
 Hello
You delivered your assignment
on time. Thanks
Mahnaz

Centering Content
You can use <center> tag to put any content in the center of the page or
and table cell.

Example

<!DOCTYPE html>
<html>
<head>

<title>Centring Content Example</title>

</head>
<body>
<p>This text is not in the center. </p>
<center>
<p>This text is in the center. </p>
</center>
</body>
</html>

10
CSS

11
 CSS-OVER VIEW1 .
What is CSS ?
Cascading Style Sheets, fondly referred to as CSS, is a simple design language
intended to simplify the process of making web pages presentable.
CSS handles the look and feel part of a web page. Using CSS, you can control
the color of thetext, the style of fonts, the spacing between paragraphs, how
columns are sized and laid out,what background images or colors are used, as
well as a variety of other effects.

CSS is easy to learn and understand but it provides a powerful control over
the presentationof an HTML document. Most commonly, CSS is combined with
the markup languages HTML or XHTML.

Advantages of CSS
• CSS saves time - You can write CSS once and then reuse the same
sheet in multiple HTML pages. You can define a style for each HTML
element and apply it to as many web pages as you want.
• Pages load faster - If you are using CSS, you do not need to write
HTML tag attributes every time. Just write one CSS rule of a tag and
apply it to all the occurrences of that tag. So, less code means faster
download times.

• Easy maintenance - To make a global change, simply change the style,

and all the elements in all the web pages will be updated automatically.
• Superior styles to HTML - CSS has a much wider array of attributes
than HTML, so you can give a far better look to your HTML page in
comparison to HTML attributes.
• Multiple Device Compatibility - Style sheets allow content to be
optimized for morethan one type of device. By using the same HTML
document, different versions of a website can be presented for handheld
devices such as PDAs and cellphones or for printing.

12
 • Global web standards – Now HTML attributes are being deprecated
and it is being recommended to use CSS. So it’s a good idea to start
using CSS in all the HTML pages to make them compatible with future
browsers

Who Creates and Maintains CSS?

CSS is created and maintained through a group of people within the W3C
called the CSS Working Group. The CSS Working Group creates documents
called specifications. When a specification has been discussed and officially
ratified by the W3C members, it becomes a recommendation.

These ratified specifications are called recommendations because the W3C has
no control over the actual implementation of the language. Independent
companies and organizations createthat software.
NOTE: The World Wide Web Consortium or W3C is a group that makes
recommendations about how the Internet works and how it should evolve.

CSS Versions
Cascading Style Sheets level 1 (CSS1) came out of W3C as a recommendation
in December 1996. This version describes the CSS language as well as a
simple visual formatting model for all the HTML tags.

CSS2 became a W3C recommendation in May 1998 and builds on CSS1. This
version adds support for media-specific style sheets e.g. printers and aural
devices, downloadable fonts, element positioning and tables.

13
 CSS-SYNTAX2 .
A CSS comprises of style rules that are interpreted by the browser and then
applied to the corresponding elements in your document. A style rule is made
of three parts:
• Selector: A selector is an HTML tag at which a style will be applied.
This could be any tag like <h1> or <table> etc.
• Property: A property is a type of attribute of HTML tag. Put simply,
all the HTML attributes are converted into CSS properties. They could
be color, border, etc.
• Value: Values are assigned to properties. For example, color property
can have the value either red or #F1F1F1 etc.
You can put CSS Style Rule Syntax as follows:

selector { property: value }

Example: You can define a table border as follows:

table{ border :1px solid #C00; }

Here table is a selector and border is a property and the given value 1px
solid #C00 is the value of that property.
You can define selectors in various simple ways based on your comfort. Let
me put these selectors one by one.

The Type Selectors

This is the same selector we have seen above. Again, one more example to
give a color to alllevel 1 headings:

14
 h1 {
color: #36CFFF;
}

The Universal Selectors

Rather than selecting elements of a specific type, the universal selector quite
simply matches the name of any element type:

* {
color: #000000;
}

This rule renders the content of every element in our document in black.

The Descendant Selectors

Suppose you want to apply a style rule to a particular element only when it
lies inside a particular element. As given in the following example, the style
rule will apply to <em> element only when it lies inside the <ul> tag.

ul em {
color: #000000;
}

15
The Class Selectors
You can define style rules based on the class attribute of the elements. All the
elements having that class will be formatted according to the defined rule.

.black {
color: #000000;
}

This rule renders the content in black for every element with class attribute set
to black in our document. You can make it a bit more particular. For example:

h1.black {
color: #000000;
}

This rule renders the content in black for only <h1> elements with class attribute
set to black.

You can apply more than one class selectors to a given element. Consider
the following example:

<p class="center bold">

This para will be styled by the classes center and bold.

</p>

16
 Grouping Selectors

You can apply a style to many selectors if you like. Just separate the selectors
with a comma ,as given in the following example:
h1, h2, h3
{ color:
#36C;

font-weight:
normal; letter-
spacing: .4em;
margin-bottom:
1em;

text-transform: lowercase;
}

This define style rule will be applicable to h1, h2 and h3 element as well. The
order of the list is irrelevant. All the elements in the selector will have the
corresponding declarations appliedto them.
You can combine the various class selectors together as shown below:

#content, #footer, #supplement {

position:
absolute; left:
510px; width:
200px;
}

17
 Java

JAVASCRIPT

18
 Java
1. JAVASCRIPT OVERVIEW

What is JavaScript?
JavaScript is a dynamic computer programming language. It is
lightweight and most commonly used as a part of web pages, whose
implementations allow client-side script to interact with the user and
make dynamic pages. It is an interpreted programming language
with object-oriented capabilities.

JavaScript was first known as Live Script, but Netscape changed its
name to JavaScript, possibly because of the excitement being
generated by Java. JavaScript made its first appearance in Netscape
2.0 in 1995 with the name LiveScript. The general-purpose core of
the language has been embedded in Netscape, Internet Explorer, and
other web browsers.

The ECMA-262 Specification defined a standard version of the core

JavaScript language.

JavaScript is a lightweight, interpreted programming language.

Designed for creating network-centric applications.

Complementary to and integrated with Java.

Complementary to and integrated with HTML.

Open and cross-platform.

Client-Side JavaScript

Client-side JavaScript is the most common form of the language. The

script should be included in or referenced by an HTML document for
the code to be interpreted by the browser.

It means that a web page need not be a static HTML, but can include
programs that interact with the user, control the browser, and
dynamically create HTML content.

The JavaScript client-side mechanism provides many advantages

over traditional CGI server-side scripts. For example, you might use
JavaScript to check if the user has entered a valid e-mail address in
a form field.

19
 Java
2. JAVASCRIPT SYNTAX

JavaScript can be implemented using JavaScript statements that are

placed within the <script>... </script> HTML tags in a web page.

You can place the <script> tags, containing your JavaScript,

anywhere within you web page, but it is normally recommended that
you should keep it within the <head> tags.

The <script> tag alerts the browser program to start interpreting all
the text between these tags as a script. A simple syntax of your
JavaScript will appear as follows.

<script ...>

JavaScript code

</script>

The script tag takes two important attributes:

Language: This attribute specifies what scripting language you

are using. Typically, its value will be javascript. Although recent
versions of HTML (and XHTML, its successor) have phased out the
use of this attribute.

Type: This attribute is what is now recommended to indicate the

scripting language in use and its value should be set to
"text/javascript".

So your JavaScript syntax will look as follows.

<script language="javascript" type="text/javascript">

JavaScript code

</script>

Comments in JavaScript
JavaScript supports both C-style and C++-style comments. Thus:

Any text between a // and the end of a line is treated as a comment

and is ignored by JavaScript.

Any text between the characters /* and */ is treated as a comment.

This may span multiple lines.

20
 Java
JavaScript also recognizes the HTML comment opening sequence
<!--. JavaScript treats this as a single-line comment, just as it does
the // comment.
The HTML comment closing sequence --> is not recognized by
JavaScript so it should be written as //-->.

Example

The following example shows how to use comments in JavaScript.

<script language="javascript" type="text/javascript">
<!--
// This is a comment. It is similar to comments in C++
/*
* This is a multiline comment in JavaScript
* It is very similar to comments in C Programming
*/
//-->
</script>

21
 Java
3. JAVASCRIPT PLACEMENT

There is a flexibility given to include JavaScript code anywhere in an

HTML document. However, the most preferred ways to include
JavaScript in an HTML file are as follows:

Script in <head>...</head> section.

Script in <body>...</body> section.

Script in <body>...</body> and <head>...</head> sections.

Script in an external file and then include in <head>...</head> section.

In the following section, we will see how we can place JavaScript in

an HTML file in different ways.

JavaScript in <head>...</head> Section

If you want to have a script run on some event, such as when a user
clicks somewhere, then you will place that script in the head as
follows.

<html>

<head>

<script type="text/javascript">

<!--

function sayHello () {

alert ("Hello World")

//-->

</script>

</head>

<body>

<input type="button" onclick="sayHello()" value="Say Hello" />

</body>

22
 Java
</html>

This code will produce the following results:

Click here for the result

Say Hello

JavaScript in <body>...</body> Section

If you need a script to run as the page loads so that the script
generates content in the page, then the script goes in the <body>
portion of the document. In this case, you would not have any
function defined using JavaScript. Take a look at the following code.

<html>

<head>

</head>

<body>

<script type="text/javascript">

<!--

document.write("Hello World")

//-->

</script>

<p>This is web page body </p>

</body>

</html>

This code will produce the following results:

Hello World

23
 Java

JavaScript in <body> and <head> Sections

You can put your JavaScript code in <head> and <body> section
altogether as follows.

<html>

<head>

<script type="text/javascript">

<!--

function sayHello() {

alert("Hello World")

//-->

</script>

</head>

<body>

<script type="text/javascript">

<!--

document.write("Hello World")

//-->

</script>

<input type="button" onclick="sayHello()" value="Say Hello" />

</body>

</html>

This code will produce the following result.

HelloWorld

Say Hello

24
 Java

4. JAVASCRIPT- VARIABLES

JavaScript Datatypes
One of the most fundamental characteristics of a programming
language is the set of data types it supports. These are the type of
values that can be represented and manipulated in a programming
language.

JavaScript allows you to work with three primitive data types:

Numbers, e.g., 123, 120.50 etc.

Strings of text, e.g. "This text string" etc.

Boolean, e.g. true or false.

JavaScript also defines two trivial data types, null and undefined,
each of which defines only a single value. In addition to these
primitive data types, JavaScript supports a composite data type
known as object. We will cover objects in detail in a separate
chapter.

Note: Java does not make a distinction between integer values and
floating-point values. All numbers in JavaScript are represented as
floating-point values. JavaScript represents numbers using the 64-
bit floating-point format defined by the IEEE 754 standard.

JavaScript Variables
Like many other programming languages, JavaScript has variables.
Variables can be thought of as named containers. You can place data
into these containers and then refer to the data simply by naming
the container.

Before you use a variable in a JavaScript program, you must declare

it. Variables are declared with the var keyword as follows.

<script type="text/javascript">

<!--

var money;

var name;

25
 Java
//-->

</script>

You can also declare multiple variables with the same var keyword
as follows:

<script type="text/javascript">

<!--

var money, name;

//-->

</script>

Storing a value in a variable is called variable initialization. You

can do variable initialization at the time of variable creation or at a
later point in time when you need that variable.

For instance, you might create a variable named money and assign
the value 2000.50 to it later. For another variable, you can assign a
value at the time of initialization as follows.

<script type="text/javascript">

<!--

var name = "Ali";

var money;

money = 2000.50;

//-->

</script>

Note: Use the var keyword only for declaration or initialization, once
for the life of any variable name in a document. You should not re-
declare same variable twice.

JavaScript is untyped language. This means that a JavaScript

variable can hold a value of any data type. Unlike many other
languages, you don't have to tell JavaScript during variable
declaration what type of value the variable will hold. The value type
of a variable can change during the execution of a program and
JavaScript takes care of it automatically.

26
 Java

REACT JS

27
 ReactJ
S
REACT JS-OVER VIEW

React library is built on a solid foundation. It is simple, flexible and

extensible. As we learned earlier, React is a library to create user interface
in a web application. React’s primary purpose is to enable the developer to
create user interface using pure JavaScript. Normally, every user interface
library introduces a new template language (which we need to learn) to
design the user interface and provides an option to write logic, either inside
the template or separately.
Instead of introducing new template language, React introduces three
simple concepts as given below:

React elements
JavaScript representation of HTML DOM. React provides an API,
React.createElement to create React Element.

JSX
A JavaScript extension to design user interface. JSX is an XML based,
extensible language supporting HTML syntax with little modification. JSX
can be compiled to React Elements and used to create user interface.

React component
React component is the primary building block of the React application. It
uses React elements and JSX to design its user interface. React component
is basically a JavaScript class (extends the React.component class) or pure
JavaScript function. React component has properties, state management, life
cycle and event handler. React component can be able to do simple as well
as advanced logic.
Let us learn more about components in the React Component chapter.

Workflow of a React application

Let us understand the workflow of a React application in this chapter by

creating and analyzing a simple React application.
Open a command prompt and go to your workspace.

cd /go/to/your/workspace

28
 ReactJ
S
Next, create a folder, static_site and change directory to newly created
folder.

mkdir
static_sitecd
static_site
Next, create a file, hello.html and write a simple React application.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React Application</title>
</head>
<body>
<div id="react-app"></div>

<script
src="https://unpkg.com/react@17/umd/react.development.js"
crossorigin></script>
<script src="https://unpkg.com/react-
dom@17/umd/react-dom.development.js"
crossorigin></script>
<script language="JavaScript">

Next, serve the application using serve web server.

serve ./hello.html

Next, open your favorite browser. Enter http://localhost:5000 in the

address bar and then press enter.

Let us analyse the code and do little modification to better

understand the React application.

29
 ReactJ
Here, we are using two API provided by the React library. S

React.createElement
Used to create React elements. It expects three parameters:
• Element tag
• Element attributes as object
• Element content - It can contain nested React element as well

ReactDOM.render
Used to render the element into the container. It expects two parameters:
• React Element OR JSX
• Root element of the webpage

Nested React element

As React.createElement allows nested React element, let us add
nested element as shown below:

<script language="JavaScript">
element = React.createElement('div', {},
React.createElement('h1', {}, 'Hello React!'));
ReactDOM.render(element, document.getElementById('react-app'));
</script>

It will generate the below content:

<div><h1>Hello React!</h1></div>

Use JSX
Next, let us remove the React element entirely and introduce JSX syntax as
shown below:

30
 ReactJ
S
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React Application</title>
</head>
<body>
<div id="react-app"></div>

<script
src="https://unpkg.com/react@17/umd/react.development.js"
crossorigin></script>
<script src="https://unpkg.com/react-
dom@17/umd/react-dom.development.js"
crossorigin></script>
<script
src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script
type="text/babel">
ReactDOM.render(
Here, we have included babel to convert JSX into JavaScript and added
<div><h1>Hello
type=“text/babel”
React!</h1></div>,
in the script tag.document.getElementById('react-
app') );
</script>
</body>
</html>

31
 ReactJ
S
<script
src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
...
...
</script>
Next, run the application and open the browser. The output of the
application is as follows:

Next, let us create a new React component, Greeting and then try to use it in
the webpage.

<script
type="text/babel">
function Greeting()
{
return <div><h1>Hello JSX!</h1></div>
}
ReactDOM.render(
<Greeting />,
document.getElementById('react-
app') );
</script>
The result is same and as shown below:

By analyzing the application, we can visualize the workflow of the React

32
 ReactJ
S
application as shown in the below diagram.

React app calls ReactDOM.render method by passing the user interface

created using React component (coded in either JSX or React element
format) and the container to render the user interface.
ReactDOM.render processes the JSX or React element and emits

Virtual DOM. Virtual DOM will be merged and rendered into the

container.

Architecture of the React Application

React library is just UI library and it does not enforce any particular pattern
to write a complex application. Developers are free to choose the design
pattern of their choice. React community advocates certain design pattern.
One of the patterns is Flux pattern. React library also provides lot of
concepts like Higher Order component, Context, Render props, Refs etc., to
write better code. React Hooks is evolving concept to do state management
in big projects. Let us try to understand the high level architecture of a React

• React app starts with a single root component.

33
 ReactJ
• Root component is build using one or more component. S
• Each component can be nested with other component to any level.
• Composition is one of the core concepts of React library. So, each

• component is build by composing smaller components instead of

inheriting one component from another component.
• Most of the components are user interface components.
React app can include third party component for specific purpose such as
routing, animation, state management, etc.

34
 ReactJ
S
REACT JS LIBRARIES
Application

As we learned earlier, React library can be used in both simple and complex
application. Simple application normally includes the React library in its
script section. In complex application, developers have to split the code into
multiple files and organize the code into a standard structure. Here, React
toolchain provides pre-defined structure to bootstrap the application. Also,
developers are free to use their own project structure to organize the code.
Let us see how to create simple as well as complex React application:
Simple application using CDN
Complex application using React Create App cli
Complex application using customized method

Using CDN

Let us learn how to use content delivery network to include React in a

simple web page. Open a terminal and go to your workspace.

cd /go/to/your/workspace
Next, create a folder, static_site and change directory to newly created
folder.

mkdir
static_sitecd
static_site
Next, create a new HTML file, hello.html.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Simple React app</title>
</head>
<body>
</body>
</html>

Next, include React library.

35
 ReactJ
S
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Simple React app</title>
</head>
<body>

Here,
• We are using unpkg CDN. unpkg is an open source, global
content delivery network supporting npm packages.
• @17 represent the version of the React library
• This is the development version of the React library with
debugging option. To deploy the application in the production
environment, use below scripts.

<script src="https://unpkg.com/react@17/umd/react.production.min.js"
crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-
dom.production.min.js"crossorigin></script>

Now, we are ready to use React library in our

webpage. Next, introduce a div tag with id

react-app.

36
 ReactJ
S

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React based application</title>
</head>
<body>
<div id="react-app"></div>

<script
src="https://unpkg.com/react@17/umd/react.development.js"
crossorigin></script>
<script src="https://unpkg.com/react-
dom@17/umd/react-dom.development.js"
crossorigin></script>
</body>
</html>

The react-app is a placeholder container and React will work inside the
container. We can use any name for the placeholder container relevant to
our application.
ReactJ
<!DOCTYPE html> S
<html>
<head>
<meta charset="UTF-8" />
<title>React based application</title>
</head>

Next, create a script section at the end of the document and use React
feature to create an element.

37
 ReactJ
S
<script
src="https://unpkg.com/react@17/umd/react.development.js"
crossorigin></script>
<script src="https://unpkg.com/react-
dom@17/umd/react-dom.development.js"
crossorigin></script>
Here,
• We are using unpkg CDN. unpkg is an open source, global
content delivery network supporting npm packages.
• @17 represent the version of the React library
• This is the development version of the React library with
debugging option. To deploy the application in the production
environment, use below scripts.

<script src="https://unpkg.com/react@17/umd/react.production.min.js"
crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-
dom.production.min.js"crossorigin></script>

Now, we are ready to use React library in our

webpage. Next, introduce a div tag with id

react-app.

38
 ReactJ
<!DOCTYPE html> S
<html>
<head>
<meta charset="UTF-8" />
<title>React based application</title>
</head>
<body>
<div id="react-app"></div>

<script
src="https://unpkg.com/react@17/umd/react.development.js"
crossorigin></script>
<script src="https://unpkg.com/react-
dom@17/umd/react-dom.development.js"
crossorigin></script>
</body>
</html>

The react-app is a placeholder container and React will work inside the
container. We can use any name for the placeholder container relevant to
our application.
Next, create a script section at the end of the document and use React
feature to create an element.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React based application</title>
</head>

39
 ReactJ
S
<body>
<div id="react-app"></div>

<script
src="https://unpkg.com/react@17/umd/react.development.js"
crossorigin></script>
<script src="https://unpkg.com/react-
dom@17/umd/react-dom.development.js"
crossorigin></script>
<script language="JavaScript">
element = React.createElement('h1', {}, 'Hello React!')
ReactDOM.render(element, document.getElementById('react-

Here, the application uses React.createElement and ReactDOM.render

methods provided by React Library to dynamically create a HTML element
and place it inside the react-app section.
Next, serve the application using serve web server.

serve ./hello.html

Next, open the browser and enter http://localhost:5000 in the address bar
and press enter. serve application will serve our webpage as shown below.

We can use the same steps to use React in the existing website as well.
This method is very easy to use and consume React library. It can be used
to do simple to moderate feature in a website. It can be used in new as well
as existing application along with other libraries. This method is suitable for
static website with few dynamic section like contact form, simple payment
option, etc., To create advanced single page application (SPA), we need to
use React tools. Let us learn how to create a SPA using React tools in
upcoming chapter.

40
 ReactJS

Next, go to expense-manager folder and install the necessary library.

cd expense-
managernpm
install
The npm install will install the necessary library under

node_modules folder. Next, start the application.

npm start
Compiled successfully!

You can now view react-cra-web-app in the browser.

Local: http://localhost:3000
On Your Network: http://192.168.56.1:3000

Note that the development build is not optimized.

To create a production build, use npm run build.

Next, open the browser and enter http://localhost:3000 in the address

bar and press enter. The development web server will serve our webpage as
shown below.

Let us analyse the structure of our React application.

|-- App.css
|-- App.js
|-- App.test.js
|-- index.css
|-- index.js
|-- logo.svg
|-- reportWebVitals.js
`-- setupTests.js

41
 ReactJS

Devops

42
 ReactJS

DEVOPS-OVER VIEW

What is DevOps?

DevOps is a software development approach emphasizing collaboration,

automation, and continuous delivery to provide high-quality products to
customers quickly and efficiently.

DevOps breaks down silos between development and operations teams to

enable seamless communication, faster time-to-market, and improved
customer satisfaction.
It allows a team to handle the complete application lifecycle, from development
to testing, operations, and deployment. It shows cooperation between
Development and Operations groups to deploy code to production quickly in an
automated and repeatable manner.

Every phase of the software development lifecycle, including planning, coding,

testing, deployment, and monitoring, is heavily automated in DevOps. This
improves productivity, ensures consistency, and lowers error rates in the
development process. A culture of continuous improvement is also promoted by
DevOps, where feedback loops are incorporated into the procedure to facilitate
quicker iteration and better decision-making. Organizations can increase their
agility, lower costs, and speed up innovation by adopting DevOps.

1. DevOps Fundamentals:

we are going to discussed the proper curriculum that you need to cover
to become a DevOps Engineer. While getting started with DevOps, you first
need to understand the fundamentals of DevOps like what is DevOps, how it
works, etc.

2. Linux:

Linux is one of the most popular operating systems for servers and cloud-based
infrastructures. It gives access to a robust CLI, a scripting environment,
essential tools and utilities, strong security features, and powerful diagnostic
tools for troubleshooting. In order to master the art of delivering high-quality
software and infrastructure, it is required for a DevOps Engineer to master
Linux.

43
 ReactJS

3.Source Code Management:

Source Code Management is one of the key aspects of DevOps. It is the practice
of tracking and managing the versions of your source code. Git is considered to
be one of the best tools for version control of source codes. It allows DevOps
Engineers to collaborate, manage code, and implement CI/CD pipelines, code
quality, and Infrastructure as a Code.

4. YAML:

Yet Another Markup Language or YAML Ain’t Markup Language is a popular data
serialization language that is used extensively in DevOps for defining and
managing Infrastructure as a Code, managing configuration for various tools,
defining CI/CD Pipelines and integrating with other technologies like JSON, XML,
and Python, which makes it easy to learn and use in different DevOps scenarios.

5. Cloud:

Cloud Computing is an essential tool to learn to become a DevOps Engineer.

Many modern days software applications are deployed on Cloud Pla as it
provides scalability of the resources, elasticity, automation, tools integrations,
and cost-optimizations which helps to manage software applications in the
cloud.

6. Docker:

Docker is a popular containerization tool that is used to deliver software quickly

by using the concept of containerized code which helps for easy management
and maintenance of applications.

7. Kubernetes:

Kubernetes is a popular container orchestration tool that provides application

scalability, resilience, flexibility, portability, automation, monitoring, and access
to a rich ecosystem of tools and plugins which can be applied to various aspects
of the DevOps lifecycle, such as deployment, scaling, monitoring, and
troubleshooting of applications.

44
 ReactJS

The Evolution of DevOps

DevOps is a software engineering culture and practice that aims to unify

software development and operations. It is an approach to software
development that emphasizes collaboration, communication, and integration
between software developers and IT operations. DevOps has come a long way
since its inception, and its evolution has had a significant impact on the way
organizations develop and deliver software.

DevOps originated in the mid-2000s when organizations started to recognize

the need for a more efficient and effective way of delivering software. The
traditional approach to software development, where development and
operations were separate departments, was proving to be too slow and
cumbersome. The siloed nature of this approach led to poor communication and
collaboration, resulting in long lead times, slow feedback cycles, and low-quality
software.
In response to these challenges, a new approach was needed, and DevOps was
born. The goal of DevOps was to bring together software development and
operations to work collaboratively, improving communication, collaboration,
and integration. The focus was on automating manual processes, reducing lead
times, and increasing the speed of delivery.

The early adopters of DevOps were organizations in the tech industry,

particularly web-based companies. These organizations faced unique challenges
in delivering software, such as frequent releases, short development cycles, and
a large number of users.

They saw the benefits of DevOps and were quick to adopt it to improve their
software delivery process.
One of the first organizations to embrace DevOps was Amazon, which
implemented the approach in the early 2000s. Amazon’s DevOps team was
responsible for automating manual processes and reducing the lead time for
software delivery. This resulted in faster feedback cycles and improved software
quality, which helped Amazon stay ahead of the competition.

As the benefits of DevOps became more apparent, more and more organizations
started to adopt it. DevOps became a key differentiator for organizations, and
those that embraced it were able to deliver software faster, with higher quality,
and at a lower cost. The adoption of DevOps was also driven by the rise of cloud
computing, which provided the infrastructure and tools needed to support
DevOps practices.

45
 ReactJS

DevOps Working

DevOps is a software development methodology that improves the collaboration

between developers and operations teams using various automation tools.
These automation tools are implemented using various stages which are a part
of the DevOps Lifecycle.

Goal: The goal of DevOps is to increase an organization speed when it comes

to delivering applications and services. Many companies have successfully
implemented devOps to enhance their user experience like amazon, netflix etc.

1. Continuous Development:
This stage involves committing code to version control tools such as Git or
SVN for maintaining the different versions of the code, and tools like Ant,
Maven, Gradle for building/packaging the code into an executable file that can
be forwarded to the QAs for testing.

2. Continuous Integration:
The stage is a critical point in the whole DevOps Lifecycle. It deals with
integrating the different stages of the DevOps lifecycle and is, therefore, the
key in automating the whole DevOps Process.

3. Continuous Deployment:
In this stage the code is built, the environment or the application is
containerized and is pushed onto the desired server. The key processes in this
stage are Configuration Management, Virtualization, and Containerization.

4. Continuous Testing:
The stage deals with automated testing of the application pushed by the
developer. If there is an error, the message is sent back to the integration

46
 ReactJS

Devops Lifecycle

DevOps is a practice that enables a single team to handle the whole

application lifecycle, including development, testing, release, deployment,
operation, display, and planning. It is a mix of the terms “Dev” (for
development) and “Ops” (for operations). We can speed up the delivery of
applications and services by a business with the aid of DevOps. Amazon,
Netflix, and other businesses have all effectively embraced DevOps to improve
their customer experience.

DevOps Lifecycle is the set of phases that includes DevOps for taking part
in Development and Operation group duties for quicker software program
delivery. DevOps follows positive techniques that consist of code, building,
testing, releasing, deploying, operating, displaying, and planning.

DevOps lifecycle follows a range of phases such as non-stop development,

non-stop integration, non-stop testing, non-stop monitoring, and non-stop
feedback. Each segment of the DevOps lifecycle is related to some equipment
and applied sciences to obtain the process. Some of the frequently used tools
are open source and are carried out primarily based on commercial enterprise
requirements. DevOps lifecycle is effortless to manipulate and it helps
satisfactory delivery.

7 Cs of DevOps
1. Continuous Development
2. Continuous Integration
3. Continuous Testing
4. Continuous Deployment/Continuous Delivery
5. Continuous Monitoring
6. Continuous Feedback
7. Continuous Operations

47
 ReactJS

Linux Commands
Linux is an operating system that is similar to Unix. In Linux, all commands are
executed in a terminal that is provided by the system. This terminal is similar
to the command prompt in Windows. It’s important to note that Linux/Unix
commands are case-sensitive.

A Linux command can be a program or a set of instructions that are entered

by the user in the terminal interface to execute various operations on the Linux
Operating System. These commands are an effective way to interact with the
Linux Operating System and provide a wide range of features, such as managing
files and directories, networking, process management, and user
administration.
Today, the Linux kernel and other operating systems that are similar to Unix
share well over 100 Unix commands. For experienced users, Linux Commands
will be highly Customized and offer advanced functionality. All the Linux/Unix
commands are run in the terminal provided by the Linux system.

If we are using any major operating system, we are indirectly interacting with
the shell. While running Ubuntu, Linux Mint, or any other Linux distribution,
we are interacting with the shell by using the terminal. In this article we will
discuss Linux shells and shell scripting so before understanding shell scripting
we have to get familiar with the following terminologies:
• Kernel
• Shell
• Terminal

What is Kernel?

The kernel is a computer program that is the core of a computer’s operating

system, with complete control over everything in the system. It manages the
following resources of the Linux system –
• File management
• Process management
• I/O management
• Memory management
• Device management etc.

It is often mistaken that Linus Torvalds has developed Linux OS, but actually,
he is only responsible for the development of the Linux kernel.
Complete Linux system = Kernel + GNU system utilities and libraries + other
management scripts + installation scripts.

48
 ReactJS

What is Shell?

A shell is a special user program that provides an interface for the user to use
operating system services. Shell accepts human-readable commands from
users and converts them into something which the kernel can understand. It is
a command language interpreter that executes commands read from input
devices such as keyboards or from files. The shell gets started when the user
logs in or starts the terminal.

Shell is broadly classified into two categories –

• Command Line Shell
• Graphical shell

Command Line Shell:

Shell can be accessed by users using a command line interface. A special

program called Terminal in Linux/macOS, or Command Prompt in Windows OS
is provided to type in the human-readable commands such as “cat”, “ls” etc.
and then it is being executed. The result is then displayed on the terminal to
the user. A terminal in Ubuntu 16.4 system looks like this In the above screenshot
“ls” command with “-l” option is executed. It will list all the files in the current working
directory in a long listing format.
Working with a command line shell is a bit difficult for beginners because it’s hard to
memorize so many commands. It is very powerful; it allows users to store commands
in a file and execute them together. This way any repetitive task can be easily
automated. These files are usually called batch files in Windows and Shell Scripts in
Linux/macOS systems.

Graphical Shells:

Graphical shells provide means for manipulating programs based on the

graphical user interface (GUI), by allowing for operations such as opening,
closing, moving, and resizing windows, as well as switching focus between
windows. Window OS or Ubuntu OS can be considered as a good example which
provides GUI to the user for interacting with the program. Users do not need to
type in commands for every action. A typical GUI in the Ubuntu system
There are several shells are available for Linux systems like –

• BASH (Bourne Again SHell) – It is the most widely used shell in Linux
systems. It is used as default login shell in Linux systems and in macOS.
It can also be installed on Windows OS.
• CSH (C SHell) – The C shell’s syntax and its usage are very similar to the
C programming language.
• KSH (Korn SHell) – The Korn Shell was also the base for the POSIX Shell
standard specifications etc

49
 ReactJS

What is a terminal?

A program which is responsible for providing an interface to a user so that

he/she can access the shell. It basically allows users to enter commands and
see the output of those commands in a text-based interface. Large scripts that
are written to automate and perform complex tasks are executed in the
terminal.

Shell Scripting
Usually, shells are interactive, which means they accept commands as input
from users and execute them. However, sometimes we want to execute a bunch
of commands routinely, so we have to type in all commands each time in the
terminal.
As a shell can also take commands as input from file, we can write these
commands in a file and can execute them in shell to avoid this repetitive work.
These files are called Shell Scripts or Shell Programs. Shell scripts are similar to
the batch file in MS-DOS. Each shell script is saved with `.sh` file extension
e.g., myscript.sh.
A shell script has syntax just like any other programming language. If you have
any prior experience with any programming language like Python, C/C++ etc.
It would be very easy to get started with it.

A shell script comprises the following elements –

• Shell Keywords – if, else, break etc.
• Shell commands – cd, ls, echo, pwd, touch etc.
• Functions
• Control flow – if..then..else, case and shell loops etc.

Why do we need shell scripts?

There are many reasons to write shell scripts:
• To avoid repetitive work and automation
• System admins use shell scripting for routine backups.
• System monitoring
• Adding new functionality to the shell etc.

Some Advantages of shell scripts

• The command and syntax are exactly the same as those directly entered
in the command line, so programmers do not need to switch to entirely
different syntax
• Writing shell scripts are much quicker
• Quick start
• Interactive debugging etc.

50
 ReactJS
Some Disadvantages of shell scripts
• Prone to costly errors, a single mistake can change the command which
might be harmful.
• Slow execution speed
• Design flaws within the language syntax or implementation
• Not well suited for large and complex task
• Provide minimal data structure unlike other scripting languages. etc.

Simple demo of shell scripting using Bash Shell:

If you work on a terminal, something you traverse deep down in directories.

Then for coming few directories up in path we have to execute a command like
this as shown below to get to the “python” directory:

It is quite frustrating, so why not we can have a utility where we just have to
type the name of directory and we can directly jump to that without executing
the “cd ../” command again and again. Save the script as “jump.sh”

We explored command line and graphical shells, like BASH, and understood that
the terminal is where we type in our commands. The article introduced shell
scripting, a way to automate tasks using simple scripts, and discussed the
advantages and disadvantages of using them.

A practical example demonstrated creating a script for quick directory

navigation. Finally, we saw how to make the script work and become accessible
in every terminal session. This article is a beginner-friendly guide to
understanding and using Linux shells and shell scripting.linux is good language
it is written in linux language

51
 ReactJS

Bash Scripting

Bash is a command-line interpreter or Unix Shell and it is widely used in

GNU/Linux Operating System. It is written by Brian Jhan Fox. It is used as a
default login shell for most Linux distributions. Scripting is used to automate
the execution of the tasks so that humans do not need to perform them
individually.

Bash scripting is a great way to automate different types of tasks in a system.

Developers can avoid doing repetitive tasks using bash scripting.
Bash scripting supports variables, conditional statements, and loops just like
programming languages.

Applications of Bash Scripts:

• Manipulating files
• Executing routine tasks like Backup operation
• Automation
The advantages of using Bash Scripts are given below

Advantages of Bash Scripts:

• It is simple.
• It helps to avoid doing repetitive tasks
• Easy to use
• Frequently performed tasks can be automated
• A sequence of commands can be run as a single command.
The disadvantages of the Bash Scripts are given below

Disadvantages of Bash Scripts:

• Any mistake while writing can be costly.
• A new process launched for almost every shell command executed
• Slow execution speed
• Compatibility problems between different platforms

How to Write Bash Scripts?

To write a Bash Script we will follow the steps –

• First, we will create a file with the .sh extension.
• Next, we will write down the bash scripts within it
• After that, we will provide execution permission to it.

52
 ReactJS

Introduction to Github

Collaboration and version control are important for software

development. GitHub has become an important platform for developers,
enabling seamless teamwork and efficient project management. In this article,
we’ll introduce you to GitHub, explaining what it is, how it works, and why it’s
a must-have tool for developers.

What Is Version Control?

A system called version control, sometimes referred to as source control or

revision control, keeps track of changes made to a file or group of files over
time so that you may retrieve particular versions at a later time. Although it can
be applied to any circumstance where several versions of something are made
and may need to be monitored and recalled, it is most frequently employed in
software development.

What is GitHub?

GitHub is a web-based platform that uses Git, a version control system, to help
developers manage and track changes in their code. It allows multiple people
to collaborate on a project, track revisions, and contribute to code from
anywhere in the world. GitHub offers both free and paid plans, catering to
individuals and large organizations alike.

Key Features of GitHub:

1. Version Control
GitHub’s core functionality is based on Git, which allows you to keep track of
changes in your code over time. This means you can always revert to a previous
version if something goes wrong, compare different versions, and understand
the history of your project.

2. Repositories
A repository (or repo) is a central place where all the files for a project are
stored. Each repository can hold multiple files and folders, and it tracks the
history of every change made. Repositories can be public (accessible to
everyone) or private (restricted access).

3. Branches
Branches are a crucial feature in GitHub that enable parallel development. You
can create a branch to work on a new feature or fix a bug without affecting the
main codebase. Once your changes are ready, you can merge the branch back
into the main branch.

53
 ReactJS

4. Pull Requests
Pull requests are a way to propose changes to a repository. When you submit a
pull request, you’re asking the project maintainers to review and merge your
changes into the main codebase. This feature promotes collaboration and
ensures code quality through peer review.

5. Issues and Project Management

GitHub provides tools to track bugs, enhancements, and other tasks through
the Issues feature. You can create issues, assign them to team members, and
track their progress. GitHub also offers project boards for more advanced
project management.

6. Actions and Automation

GitHub Actions allow you to automate workflows, such as running tests or
deploying code, directly from your repository. This feature enhances
productivity and ensures consistency across development processes.

GitHub is a platform for hosting code that allows for version control and
collaboration. It allows you and others to collaborate on projects from
anywhere. This lesson will teach you the fundamentals of GitHub, such as
repositories, branches, commits, and pull requests.

GitHub, open-source software development reference platform that allows users

to share, edit, and store their programming code online or make it accessible
to multiple users via cloud computing. The website and GitHub app have
features such as version control, source code management, and revision
control.

Git branches are effectively a pointer to a snapshot of your changes. When you
want to add a new feature or fix a bug—no matter how big or how small—you
spawn a new branch to encapsulate your changes.

A branch in Git is simply a lightweight movable pointer to one of these commits.

The default branch name in Git is master . As you start making commits, you're
given a master branch that points to the last commit you made. Every time you
commit, the master branch pointer moves forward automatically.

54
 ReactJS

Introduction to Amazon Web Services

Amazon Web Services (AWS) is a leading top platform in providing the web
services of various domains. AWS follows the trends of digital IT and comes up
needy services with optimized performances covering a wide range of services
from Compute to Storage. It covers a wider range of customers of different
domains to expand their business operations. This Article covers the
fundamentals of AWS and its scope of IT business.

AWS stands , It is an expanded cloud computing platform provided

by Company. AWS provides a wide range of services with a pay-as-per-use
pricing model over the Internet such as Storage, Computing power, services,
and much more. AWS facilitates for both businesses and individual users with
effectively hosting the applications, storing the data securely, and making use
of a wide variety of tools and services improving management flexibility for IT
resources.

History Of AWS:

Then providing revolutionized with scalable management of Storage. Coming

up with effective compute and storage services and providing them rental basis
helped many startup companies and users with the cost of manual Hardware
Infrasture setup. Introducing the concept of serverless computing with AWS
lambda services enhanced its business globally. It came up with services
like Elastic Beanstalk made the deployment of applications much easier bringing
large audiences. AWS always came with diverse array of services offering with
technical innovations, updated services with current trends. AWS has emerged
as a powerhouse in the world of Cloud Computing.

How AWS Works?

AWS comes up with its own network infrastructure on establishing the

datacenters in different regions mostly all over the world. Its global
Infrastructure acts as a backbone for operations and services provided by AWS.
It facilitates the users on creating secure environments using Amazon VPCs (
Virtual Private Clouds ). Essential services like Amazon EC2 and Amazon S3 for
utilizing the compute and storage service with elastic scaling. It supports the
dynamic scaling of the applications with the services such as Auto
Scaling and Elastic Load Balancing ( AWS ELB ). It provides a good user-friendly
AWS Management Console facilitating seamless configuration and management
of AWS services to the Users. Its Architecture ensures high availability , fault
tolerance making AWS as a versatile powerful Cloud Computing Platform.

55
 ReactJS
AWS Fundamentals:

In the Journey of AWS, understanding the key concepts such as Regions,

Availability Zones, Global Network Infrastructure, etc is crucial. The
fundamentals of AWS keep on maintaining the applications reliable and scalable
with services globally with coming to a strategic deployment of resources for
optimal performance and resilience. The following are the some of the main
fundamentals of AWS:

• Regions: AWS provide the services with respective division of regions.

The regions are divided based on geographical areas/locations and will
establish data centers. Based on need and traffic of users, the scale of
data centers is depended to facilitate users with low-latencies of servcies.
• Availability Zones (AZ): To prevent the Data centers for the Natural
Calamities or any other disasters. The Datacenters are established as sub
sections with isolated locations to enhance fault tolerance and disaster
recovery management.
• Global Network Infrastructure: AWS ensures the reliability and
scalability of services through setting up its own AWS Network
Infrastructure globally. It helps in better management of data
transmissions for optimized performance and security reliance.

Top AWS Services

In the rapid revolution of Cloud Computing, AWS facilitates with wide variety of
services respect to the fields and needs. The following are the top AWS services
that are in wide usage:
• Amazon EC2(Elastic Compute Cloud) : It provides the Scalable
computing power via cloud allowing the users to run applications and
manage the workloads over their remotely.
• Amazon S3 (Simple Storage Service ): It offers scalable object
Storage as a Service with high durability for storing and retrieving any
amount of data.
• AWS Lambda: It is a service in Serverless Architecture with Function as
a Service facilitating serverless computing i.e., running the code on
response to the events, the background environment management of
servers is handled by aws automatically. It helps the developers to
completely focus on the logic of code build.
• Amazon RDS (Relational Database Service): This is an aws service
that simplifies the management of database providing high available
relational databases in the cloud.
• Amazon VPC (Virtual Private Cloud): It enables the users to create
isolated networks with option of public and private expose within the AWS
cloud, providing safe and adaptable configurations of their resources.

What is Docker
56
 ReactJS

Docker is a set of Platforms as a service (PaaS) products that use Operating

system-level virtualization to deliver software in packages called containers.
Containers are isolated from one another and bundle their own software,
libraries, and configuration files.

they can communicate with each other through well-defined channels. All
containers are run by a single operating system kernel and therefore use fewer
resources than a virtual machine.

What is Docker?

Docker is an open-source containerization platform by which you can pack your

application and all its dependencies into a standardized unit called a container.
Containers are light in weight which makes them portable and they are isolated
from the underlying infrastructure and from each other container. You can run
the docker image as a docker container in any machine where docker is
installed without depending on the operating system.
Why Docker is popular?
Docker gained its popularity due to its impact on the software development and
deployment. The following are the some of the main reasons for docker
becoming popular:
1. Portability: Docker facilitates the developers in packaging their
applications with all dependencies into a single lightweight containers. It
facilities in ensuring the consistent performance across the different
computing environments.
2. Reproducibility: Through encapsulating the applications with their
dependencies within a container it ensures in software setups remaining
consistent across the development, testing and production environments.
3. Efficiency: Docker through its container based architecture it optimizes
the resource utilization. It allows the developers to run the multiple
isolated applications on a single host system.
4. Scalability: Docker’s scalability features facilitated the developers in
making easier of their applications handling at time of workloads
increment.

57
 ReactJS

Key Components of Docker

The following are the some of the key components of Docker:

• Docker Engine: It is a core part of docker, that handles the creation and
management of containers.
• Docker Image: It is a read-only template that is used for creating
containers, containing the application code and dependencies.
• Docker Hub: It is a cloud based repository that is used for finding and
sharing the container images.
• Dockerfile: It is a script that containing instructions to build a docker
image.
• Docker Registry : It is a storage distribution system for docker images,
where you can store the images in both public and private modes.
What is a Dockerfile ?

The uses DSL (Domain Specific Language) and contains instructions for
generating a Docker image. Dockerfile will define the processes to quickly
produce an image. While creating your application, you should create a
Dockerfile in order since the Docker daemon runs all of the instructions from
top to bottom.
(The Docker daemon, often referred to simply as “Docker,” is a background
service that manages Docker containers on a system.)
• It is a text document that contains necessary commands which on
execution help assemble a Docker Image.
• Docker image is created using a Dockerfile.

58
 ReactJS

What is Docker Architecture and How Docker Works?

Docker makes use of a client-server architecture. The Docker client talks with
the docker daemon which helps in building, running, and distributing the docker
containers. The Docker client runs with the daemon on the same system or we
can connect the Docker client with the Docker daemon remotely. With the help
of REST API over a UNIX socket or a network, the docker client and daemon
interact with each other.

What is Docker Image?

It is a file, comprised of multiple layers, used to execute code in a Docker

container. They are a set of instructions used to create docker containers.
Docker Image is an executable package of software that includes everything
needed to run an application. This image informs how a container should
instantiate, determining which software components will run and how. Docker
Container is a virtual environment that bundles application code with all the
dependencies required to run the application. The application runs quickly and
reliably from one computing environment to another.

What is Docker Container?

Docker container is a runtime instance of an image. Allows developers to

package applications with all parts needed such as libraries and other
dependencies. Docker Containers are runtime instances of Docker images.
Containers contain the whole kit required for an application, so the application
can be run in an isolated way. For eg.- Suppose there is an image of Ubuntu OS
with NGINX SERVER when this image is run with the docker run command, then
a container will be created and NGINX SERVER will be running on Ubuntu OS.

59
 ReactJS

What is Docker Hub?

Docker Hub is a repository service and it is a cloud-based service where people

push their Docker Container Images and also pull the Docker Container Images
from the Docker Hub anytime or anywhere via the internet. Generally it makes
it easy to find and reuse images. It provides features such as you can push your
images as private or public registry where you can store and share Docker
images.

Mainly DevOps team uses the Docker Hub. It is an open-source tool and freely
available for all operating systems. It is like storage where we store the images
and pull the images when it is required. When a person wants to push/pull
images from the Docker Hub they must have a basic knowledge of Docker. Let
us discuss the requirements of the Docker tool.

Docker Compose will execute a YAML-based multi-container application. The

YAML file consists of all configurations needed to deploy containers Docker
Compose , which is integrated with Docker Swarm , and provides directions for
building and deploying containers. With Docker Compose, each container is
constructed to run on a single host.

60