Introduction to React

Shobha Rani
Associate Professor
Dept. of MCA
 Frontend-Back end Technologies

April-July,2022 Shobha Rani, Dr. AIT 2

 Full stack web Technologies

April-July,2022 Shobha Rani, Dr. AIT 3

 Client Server Technologies

April-July,2022 Shobha Rani, Dr. AIT 4

 Client Server Technologies

April-July,2022 Shobha Rani, Dr. AIT 5

 Characteristics of a good website
Responsive web design is about creating web pages that look good on all
devices!
• A responsive web design will automatically adjust for different screen sizes
and viewports.
Single-page applications offer a much better user experience (UX)
• The users can navigate easily between the different pages of an app without
waiting for the pages to load.
 Performance and Speed
• website can’t be slow when presenting content to its visitors
Secure
• website follows industry standards and guidelines
Examples:
Google Maps, Gmail, Netflix, Airbnb, Paypal, Facebook, YouTube, Twitter, GitHub and Pinterest.

April-July,2022 Shobha Rani, Dr. AIT 6

 Js
• JavaScript is a programming language that lets web developers design
interactive sites
• JavaScript is the only programming language native to web browsers.

April-July,2022 Shobha Rani, Dr. AIT 7

 Introduction
• React is a Java Script library for building fast and interactive user
interface specifically for single-page applications
• React is a NOT a framework and it’s a library.
• It is an open-source, component-based, front-end library responsible
only for the application’s view layer.
• React is created and maintained by Facebook.
• Demand in skillset required by companies.
• Developers adore its declarative, efficient, and open-source JavaScript
library for crafting feature-rich, smooth, and dynamic front-end web
apps.
April-July,2022 Shobha Rani, Dr. AIT 8
 Why React
• React allows developers to create large web applications that can
change data, without reloading the page.
• The core objective of ReactJS is providing the best possible rendering
performance.
• React allows a developer to break down the complex UI into simpler
components.
• Reactjs is an open-source JavaScript library that is used for building
user interfaces specifically for single-page applications
• React allows developers to utilize individual parts of their application
on both client-side and the server-side, which ultimately boosts the
speed of the development process
April-July,2022 Shobha Rani, Dr. AIT 9
 Why React

April-July,2022 Shobha Rani, Dr. AIT 10

 Websites powered by React library

 Facebook, popular social media application

 Instagram, popular photo sharing application
 Netflix, popular media streaming application
 Code Academy, popular online training application
 Reddit, popular content sharing application

April-July,2022 Shobha Rani, Dr. AIT 11

 Who uses React

April-July,2022 Shobha Rani, Dr. AIT 12

 Features of React

April-July,2022 Shobha Rani, Dr. AIT 13

 Features of React-JSX (JavaScript Extension)
• JSX is language extension for writing the UI logic for your React
components.
• JSX allows to include ‘HTML’ in the same file along with ‘JavaScript’
(HTML+JS=JSX).
• Each component in React generates some HTML which is rendered by
the DOM.

April-July,2022 Shobha Rani, Dr. AIT 14

 Features of React- Document Object Model (DOM)
DOM (Document Object Model) treats an XML or HTML document as a tree structure in which each
node is an object representing a part of the document.

April-July,2022 Shobha Rani, Dr. AIT 15

 Features of React- Virtual DOM
• The virtual DOM (VDOM) is a programming concept where an ideal,
or “virtual”, representation of a UI is kept in memory and synced with
the “real” DOM by a library such as ReactDOM.
• Virtual DOM in React makes the user experience better and
developer’s work faster
• This makes updates really quick, allowing for the building of a highly
dynamic UI.

April-July,2022 Shobha Rani, Dr. AIT 16

 Features of React- Virtual DOM
• Every time the state of application changes, React does those changes
in the Virtual DOM first and then sync the real DOM accordingly.
• A Virtual DOM object has the same properties as a real DOM object
but it does not have the powers to directly reflect the changes on the
screen.
• The use of Virtual DOM in React provides developers with superior
development experience.

April-July,2022 Shobha Rani, Dr. AIT 17

• Imagine Facebook being split into components
• Each functionality is assigned to a specific component and each
component produces some HTML which is rendered as output by the
DOM.
• Facebook Components
Search Bar
Add Post
Notifications Bar
Feed Updates
Profile Info
Chat Window
April-July,2022 Shobha Rani, Dr. AIT 18
 Facebook components

April-July,2022 Shobha Rani, Dr. AIT 19

 Instagram components

April-July,2022 Shobha Rani, Dr. AIT 20

 React Vs React Native

 React is a java script library for

developing front-end of web
applications.
 React native is used for mobile
based apps.
 React Native is same as React, but it
uses native components instead of
using web components as building
blocks.
 It targets mobile platforms rather
than the browser.

April-July,2022 Shobha Rani, Dr. AIT 21

 NodeJS

Node. js is an open-source and cross-platform runtime environment for

executing JavaScript code outside a browser.
NodeJS is not a framework and it's not a programming language.
Node.js can be used both on the frontend and the backend.
Major browsers worked hard on finding ways to make JavaScript run
quicker and offer better support for it.

April-July,2022 Shobha Rani, Dr. AIT 22

 Reasons to Use Node JS and React JS Together

 High Server Load: Using Node JS with React can help in

handling requests and maintaining server load balance.
 JSON APIs: You can easily build JSON APIs for your application
using Node JS.
 The reusability of the code enables sharing within React JS.

April-July,2022 Shobha Rani, Dr. AIT 23

 npm-Node Package Manager

 npm is the world's largest Software Registry.

 The registry contains over 800,000 code packages.
 Open-source developers use npm to share software.
 npm is a package manager for the JavaScript programming
language maintained by npm, Inc.
 npm is the default package manager for the JavaScript runtime
environment Node.js.

April-July,2022 Shobha Rani, Dr. AIT 24

 Flow of control-npm start

 index.html is served in browser

 It contains the root DOM node <div id=“root”>
 Control moves to index.js
 Here ReactDOM renders App component on to the root DOM node
 The App Component contains html that is displayed on the browser

April-July,2022 Shobha Rani, Dr. AIT 25

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

April-July,2022 Shobha Rani, Dr. AIT 26

 React Components

 Components describe a part of user interface.

 They are reusable and can be nested inside other components
 There are 2 types of components
 Stateless Functional Component
 Stateful Class Component

 Stateful expects a response

and if no answer is received,
the request is resent.
 In stateless, the client sends
a request to a server, which
the server responds to based
on the state of the request.

April-July,2022 Shobha Rani, Dr. AIT 27

 React Components-Class Component

 A class component must include the extends React.Component statement.

 This statement creates an inheritance to React.Component, and gives your
component access to React.Component's functions.
 The component also requires a render() method, this method returns
HTML.

To Create a Class component called dept

class dept extends React.Component {

render()
{ return <h2>Hi, I am from MCA!</h2>; }
}

April-July,2022 Shobha Rani, Dr. AIT 28

 React Components-Function Component

 A Function component also returns HTML, and behaves much the

same way as a Class component
 Function components can be written using much less code, are
easier to understand

To Create a Function component called dept

function dept()
{
return <h2>Hi, I am from MCA!</h2>;
}

April-July,2022 Shobha Rani, Dr. AIT 29

 Rendering a Component

 Now your React application has a component called dept, which returns
an <h2> element.
 To use this component in your application, use similar syntax as normal
HTML: <dept />

import React from 'react’;

import ReactDOM from 'react-dom’;
function dept()
{
return <h2>Hi, I am from dept!</h2>;
}
ReactDOM.render(<dept />, document.getElementById('root'));

April-July,2022 Shobha Rani, Dr. AIT 30