Introduction to React JS

1
 About this lecture…
• Cloud computing is gaining popularity among small, mid-size and
enterprise businesses, enabling them to be operational ready without
spending on software and hardware resources. One of the key benefits
of adopting cloud computing is that it replaces the up-front capital
investment with low variable cost infrastructure that can scale with
your business.
• Amazon Web Services is a collection of remote computing services
(also called web services) that together make up a cloud computing
platform, offered over the Internet. Amazon Web Services is the
world’s most comprehensive and broadly adopted cloud platform that
provides highly reliable and scalable infrastructure.
• This course throws light on the spectrum of services offered by AWS
with insight into widely adopted services highlighting the reason why
AWS has become the most sought after cloud service provider.

2
• Concepts you need to know before starting this
course
• Familiar with cloud computing platform, various
service and deployment models
• Recommended courses to learn the prerequisite
concepts
• Software requirements
– Latest web browser such as IE, Chrome, Firefox,
Opera, Safari, Torch
• Hardware requirements
– Any standard desktop/laptop

3
Why cloud computing?
• Cloud is the most disruptive driver of the digital
economy. IDC predicted that, by 2018 at
least 50% of enterprise IT spending would be on
cloud
• Amazon Web Services is a collection of remote
computing services (also called web services) that
together make up a cloud computing platform
offered over the Internet
• With help of infrastructure / platform / software
services offered by AWS, IT organizations can
bring down the cost and time to deliver the
product to market
• . 4
5
• Trending-Fashion-Online has decided to proceed with
AWS as their cloud partner, considering the
below observations made by the business team:
• Infrastructure presence in all major countries across the
globe, ensuring high availability of services
• Easier infrastructure management through an user friendly
console and flexible payment methods
• AWS is a true global leader as observed by Gartner
and has 5 times the compute capacity of next 14 CSPs
combined
• Has vast IaaS and PaaS capabilities and features than other
CSPs
• Application development and deployment easier as
compared to other CSPs like Google and Azure
• Long term costs of AWS is lower as compared to other
6
CSPs
• Identifying Suitable AWS Services
• Based on the requirements stated earlier, Trending-
Fashion-Online has decided to utilize Elastic Compute
Cloud(EC2) and Virtual Private Cloud(VPC) service of
AWS to cater their cloud infrastructure requirements.
• EC2 service helps to create a virtual machine on which
web applications can be deployed.
• VPC service provides an option to configure and control a
logically isolated private network within AWS cloud
where you can deploy AWS resources on a chosen VPC.

• How to deploy web applications in servers hosted within a

secure, scalable cloud environment created using AWS
services? We will see next
7
8
• Capabilities of AWS EC2 service and how to deploy a web
application in a virtual machine created using EC2 service
• Configure Server and deploy web application.

9
• What is Amazon EC2 ?
• Amazon Elastic Compute Cloud (Amazon EC2) is a web
service which provides flexible and resizable
compute capacity as a service, which can be provisioned
within minutes based on demand/requirement.
• Amazon EC2:
• Allows you to launch a VM with operating systems like
Windows and Linux
• Allows you to load the VM with a customized operating
environment
• Provide options to manage a VM
• Provide options to create desired number of VMs from
pre defined/custom created templates named Amazon
Machine Image(AMI)
• Next: EC2 instance and its features & Steps in creating
an EC2 instance 10
• Step c Choose an Amazon Machine Image (AMI)
– Select the operating system and software configuration
– In this step you will choose an operating system to be installed in the virtual machine. This is done by
selecting an appropriate Amazon Machine Image.
– Amazon Machine Image or AMI is a copy or image of an existing machine(virtual/physical) that can be
used to create a new VM(EC2 instance). The subsequent VM created will be a exact copy of the original
machine. It can be imagined similar to that of an installation CD/DVD of an operating system like
Windows.

11
•Step.1a: Login to AWS management console with a user id having proper
permissions.
•Navigate to EC2 under 'Compute' category. This will display the
EC2 dashboard from where all EC2 services can be accessed.

12
• Step 1.b: EC2 instance creation.
• EC2 offers a step by step process to create a VM.
• Before proceeding to create a VM, you will choose a region from the EC2
dashboard.
• Regions are completely independent geographical locations across the globe
where AWS has its data centers. Regions are connected to each other through
public internet. A region comprises of atleast two availability zones.
• Availability zones(AZs) are isolated locations within a region where cluster of
data centers are hosted a region comprises of minimum of two AZs which
provide business continuity in case of a disaster.
• From EC2 dashboard, the process starts by clicking on 'Launch Instance'
button.

13
14
• Before discussing creation of components, let’s discuss what is
Virtual DOM and why React uses Virtual DOM.
• Virtual DOM is an abstraction of actual DOM, where
components are the nodes. We can programmatically modify
virtual DOM by updating components. These updates are
internally handled by React and in turn updated in actual DOM.
• As we all know that, DOM manipulation is expensive, because it
requires traversal through entire DOM tree to find the element to
be updated. If these updates are very frequent, this leads to
a poor performance of an application.
• Different frameworks handle above scenario in different ways
like dirty checking, data-binding etc.
• React, rather than updating DOM directly, builds an abstract
version of it called Virtual DOM.
15
Whenever any updates happens in the application, the virtual DOM gets modified.
React computes the difference between the previous virtual tree and the current
virtual tree. Based on these differences React will figure out how to make updates to
the actual DOM efficiently
React does all the computations in its abstracted DOM and updates the DOM tree
accordingly. Virtual DOM enhances performance and efficiency by minimizing
expensive updates in the actual DOM
Hence React is said to be a great performer because it manages a Virtual DOM16
 CREATE COMPONENTS
Components can be created in 2 different ways:
Using createReactClass() method
By extending React component class
• We can create React component using createReactClass method
which accepts an object as argument.
• Install create-react-class package by running the following command:
npm install create-react-class –save
Create app.js
import React from 'react';
import createReactClass from 'create-react-class';
var AppComp = createReactClass //(create React component using
createReactClass method which accepts an object as argument.) (
{ render: function() {
return React.createElement("h1", {}, "Hello World!!!");
} //(to create an element within the component we can use React.createElement
method.)
});
export default AppComp; // to make AppComp available for other files to use. 17
• Creating component using createReactClass method is as per the earlier
version.
• The latest way of creating component is by extending React.Component class
which is as per the ES6 specification.
App.js:
import React from 'react';

class AppComp extends React.Component {

render() {
return React.createElement("h1", {}, "Hello World!!!");
}
}
export default AppComp;
• AppComp - component name should be in Pascal Casing
• render() method will render the component’s elements
• React.createElement - helps to create an element in plain JavaScript
• export default AppComp - AppComp component has to be exported so that it
could be used in any other files

18
To display elements of a component, component has to be rendered. For rendering a
component, ReactDOM.render method is used as follows:
Syntax:
ReactDOM.render(<parameter 1/>, parameter 2);
ReactDOM.render method will take 2 parameters:
'parameter 1' is the name of the component to be rendered
'parameter 2' is the HTML node reference where the component to be
rendered
In main.js
import React from 'react';
import ReactDOM from 'react-dom';
import AppComp from './App.js';
ReactDOM.render(<AppComp/>, document.getElementById('app'));

Start the app from git bash “npm start” then observe it by accessing from
localhost:7777

19
INTRODUCING JSX IN TO COMPONENT
• USING JSX TO CREATE ELEMENTS IN A COMPONENT
• NESTING JSX ELEMENTS
Creating Login component using jsx.
• JSX has been introduced in React to create elements which is very easy to
read and write, which makes component's code simple and understandable.

Code using JSX:

class AppComp extends React.Component{
render(){
return (<form><h2>Login</h2>
<input type="text" placeholder="Name" /><br/><br/>
<input type="password" placeholder="password" /> <br/><br/>
<input type="submit" nvalue="log" />
</form>);
}
};
export default AppComp;

20
• JSX is a preprocessor step that adds XML syntax to JavaScript. You can
definitely use React without JSX but JSX makes React a lot more elegant. Just
like XML, JSX tags have a tag name, attributes, and children. If an attribute
value is enclosed in quotes, the value is a string.
• JSX stands for JavaScript XML. With React, it's an extension for XML-like
code for elements and components. Per the React docs and as you mentioned:
JSX is a XML-like syntax extension to ECMAScript without any defined
semantics.
• As browser does not understand JSX code, this gets converted to JavaScript
using the plugins of babel.
Conversion of JSX to JavaScript happens as shown below:

• Create App.jsx file. Then “import AppComp from './App.jsx';” in Main.js

21
Create index.html as below.
<!DOCTYPE html>
<html>
<head>
<title>React App</title>
</head>
<body>
<h1 align="center"> React Demo </h1>
<div id = "app"> </div>
<script src = "index.js"></script>
</body>
</html>

22
• How to render multiple elements
• Nesting JSX elements

• Create a component to render an image with its description:

Create App,jsx as below
import React from 'react';
class AppComp extends React.Component {
render(){
return(<div>
<h3>ReactJS:</h3>
<img src="./image/react.PNG" width="120" height="120"/>
<p> React is a JavaScript library for creating User Interfaces,
open sourced to the world by Facebook and Instagram team in 2013.<br/>
React’s main goal is to make development of UI components easy and modular.
It is intended to ease the process of building<br/> large applications using
data that changes over time.</p>

</div>);
}
}
export default AppComp; 23
Include the following in main.js
ReactDOM.render(<AppComp/>, document.getElementById('app')); // 'app' is the
id referring to a node of index.html page.
Create index.html as below
<!DOCTYPE html>
<html>
<head>
<title>React App</title>
</head>
<body>
<h1 align="center"> React Demo </h1>
<div id = "app"> </div>
<script src = "index.js"></script>
</body>
</html>
Copy the image from me to the Demo folder.

Then npm start and once compiled successfully access it using localhost:7777 in
chrome browser
24
• How to use JavaScript expressions in React elements? let's see how to
write JavaScript expressions in JSX.
JavaScript expressions to be evaluated should be wrapped within curly braces as follows:
<h1> { Expression to be evaluated } </h1>

Content which has to be displayed as is will be written in double quotes, wrapped within curly braces as follows:
<h1> {" Content to be displayed "} </h1>
Create app,jsx as below. main.js and index.html can remain the same
import React from 'react';
class AppComp extends React.Component {
render() {
return (<div>
<h3> Expression </h3><br/>
<p> Rational expressions are constructed using variables
and constants by using arithmetic
operators. Thus,
{"(3x"}² {"-2xy+c) / (y"}
³{"-1)"} is a rational
expression.
</p>
</div>)
}
} 25
export default AppComp;
Passing values to expression & Evaluating the expression
• Create App.jsx as shown below: main.js and index.html can remain
the same
import React from 'react';
class AppComp extends React.Component {
render() {
var x=25, y=30
return (<div>
<h3> Evaluating expression </h3><br/>
<h4> {x} {">"}{y} {":"} {x>y ? 'True' : 'False'} </h4>
</div>)
}
}
export default AppComp;

26
• Creating components required for the application
• Implementing star rating functionality
• Below is the list of components to be created to build this application:
• Login: Form elements for login functionality
• LoginForm: Contains the Login component and associated styles
• Navigation: All the top navigation bar functionalities are listed in this
• Footer: Footer content of the application
• Rater: 5 Star rating functionality
• Product: Includes product details and 5 star rating component of a single
product
• FeedbackComp: Implements Feedback submission form, list of all feedbacks
and 5 star rating functionalities
• PurchasedItems: Contains Product(s)
• ProductDetails: Contains FeedbackComp and selected Product component
Out of the listed components let us create 2 components Product and Rater
component.
Screenshot and the code is as follows:
27
28
• First let us create Rater.jsx as below
import React from 'react';
class Rater extends React.Component{
render(){
return(
<ul className="rating">
<li class="filled">{'\u2605'}</li>
<li class="filled">{'\u2605'}</li>
<li class="filled">{'\u2605'}</li>
<li>{'\u2605'}</li>
<li>{'\u2605'}</li>
</ul>
)
}
}
export default Rater;
29
• Then let us create Product component in App.jsx as below
import React from 'react';
import Rater from './Rater.jsx';
class Product extends React.Component{
constructor(){
super();
}
render(){
return(
<div>
<div className={"thumbnail"}>
<img src=”Images/Laptop.jpg” class="img img-rounded img-responsive"/>
<div class="caption" style="text-align:center">
<a href=”/productDetails”}><h3>HP Laptop</h3></a>
<h4><span style="color:blue>Rs. 33000</span></h4>
<p>An excellent choice for an awesome gaming experience.</p>}
<Rater />
<span style="fontSize:9px">3/5</span>
</div>
</div>
</div>
)
}
30
}
export default Product;
• Include the following in index,html
<body>
<h1 align="center"> React Demo </h1>
<div id = "product"></div>
<script src = "index.js"> </script>
</body>
• Include the following in main.js
import Product from './Product.jsx';
ReactDOM.render(<Product/>, document.getElementById('product')); //'product' is the id referring to a node of
index.html page.

31
PROPS AND STATE
• in real scenario we will be retrieving data from the server and will be passed
as an array to components.
• In order to bind the retrieved data to the component, we need two JS objects
i.e. props and state.
• In this module, lets understand the concept of props and state to handle the
data in our application
What is State?
• State is an initial value set for a component, which is used for interactivity.
• Let's see how to set state of a component.
• We use constructor of the component for initializing state of a component,
where parent component's constructor needs to be invoked using super(props),
to pass properties. State of the component is set using this.state as shown
below.
constructor(props) {
super(props);
this.state = { counter: 1 }; } // state 'counter' would be accessed
32
as this.state.counter
• Now let's create a Timer component where on clicking a button, timer starts.
Below is the implementation to start the timer:
When a button is clicked, by invoking handleClick() method - set the interval and
pass it to start() method:

handleClick(e) {
this.interval = setInterval(this.start, 1000);
}
• In start() method, for every second, state will be updated using setState()
method.
start() {
this.setState({ secondsElapsed: this.state.secondsElapsed + 1 });
}

33
1. Create App.jsx as shown below
import React from 'react';
class Timer extends React.Component{
constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this);
this.start = this.start.bind(this);
this.state = { secondsElapsed: 0 };
}
start(){
this.setState({ secondsElapsed: this.state.secondsElapsed + 1 });
}
handleClick(e){
this.interval = setInterval(this.start, 1000);
}
render(){
return (<div>
<button onClick = {this.handleClick}> Start timer </button>
<h2> Seconds Elapsed: {this.state.secondsElapsed} </h2>
</div>);
}
}
export default Timer;
34
2.Create main.js as shown below:
import React from 'react';
import ReactDOM from 'react-dom';
import Timer from './App.jsx';
ReactDOM.render(<Timer />, document.getElementById('app'));

3.Create index.html as shown below:

<!DOCTYPE html>
<html>
<head>
<title>React App</title>
</head>
<body>
<h1 align="center"> React Demo </h1>
<div id = "app"> </div>
<script src = "index.js"></script>
</body>
</html>
35
THANKS FOR LISTENING TO ME

36