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
