Web Computing (WC)

CSC502

Subject Incharge
Ms.Nawal Dandekar
Assistant Professor

email: [email protected]

Web Computing
Department of AI & DS Ms.Nawal Dandekar 1
Module 3:
React Fundamentals

Content:

Installation, Installing libraries, Folder and file structure,

Components, Component lifecycle, State and Props, React
Router and Single page applications, UI design, Forms,
Events, Animations, Best practices.

Web Computing
Department of AI & DS Ms.Nawal Dandekar 2
 Program Outcomes (POs)
• POs are consistent with Graduate Attributes as mentioned in Washington
Accord
• These form a set of individually assessable outcomes that are the
components indicative of the graduate’s potential to acquire competence
to practice at the appropriate level
• GAs are exemplars of the attributes expected of a graduate of an
accredited program.

These Program Outcomes (POs) are -

1. Engineering knowledge: Apply the knowledge of mathematics, science,
engineering fundamentals, and an engineering specialization for the solution of
complex engineering problems.
2. Problem analysis: Identify, formulate, research literature, and analyse complex
engineering problems reaching substantiated conclusions using first principles of
mathematics, natural sciences, and engineering sciences.
3. Design/development of solutions: Design solutions for complex engineering
problems and design system components or processes that meet the specified
needs with appropriate consideration for public health and safety, and cultural,
societal, and environmental considerations.

Web Computing
Department of AI & DS Ms.Nawal Dandekar 3
4. Conduct investigations of complex problems: Use research-based
knowledge and research methods including design of experiments,
analysis and interpretation of data, and synthesis of the information to
provide valid conclusions.
5. Modern tool usage: Create, select, and apply appropriate techniques,
resources, and modern engineering and IT tools, including prediction and
modelling to complex engineering activities, with an understanding of
the limitations.
6. The engineer and society: Apply reasoning informed by the
contextual knowledge to assess societal, health, safety, legal and
cultural issues and the consequent responsibilities relevant to the
professional engineering practice.
7. Environment and sustainability: Understand the impact of the
professional engineering solutions in societal and environmental
contexts, and demonstrate the knowledge of, and need for sustainable
development.
8. Ethics: Apply ethical principles and commit to professional ethics and
responsibilities and norms of the engineering practice.

Web Computing
Department of AI & DS Ms.Nawal Dandekar 4
9. Individual and team work: Function effectively as an individual,

and as a member or leader in diverse teams, and in multi-disciplinary

settings.

10.Communication: Communicate effectively on complex engineering

activities with the engineering community and with t h e society at
large, such as, being able to comprehend and write effective reports
and design documentation, make effective presentations, and give and
receive clear instructions.

11.Project management and finance: Demonstrate knowledge and

understanding of the engineering and management principles and
apply these to one’s own work, as a member and leader in a team, to
manage projects and in multidisciplinary environments.

12.Life- long learning: Recognize the need for, and have the
preparation and ability to engage in independent and life-long learning
in the broadest context of technological change.

Web Computing
Department of AI & DS Ms.Nawal Dandekar 5
Course Outcomes (COs) of CSC502- WC

Select protocols or technologies required for

CSC502.1 Module 1
various web applications
Apply JavaScript to add functionality to web
CSC502.2 pages. Module 2

Design front end application using basic

CSC502.3 React. Module 3

Construct web based Node.js applications

CSC502.4 Module 4
using Express.
Design front end applications using
CSC502.5 functional components of React. Module 5

CSC502.6 Design back-end applications using Node.js Module 6

Web Computing
Department of AI & DS Ms.Nawal Dandekar 6
Books

Web Computing
Department of AI & DS Ms.Nawal Dandekar 7
Module 3:
React Fundamentals

Content:

Installation, Installing libraries, Folder and file structure,

Components, Component lifecycle, State and Props, React
Router and Single page applications, UI design, Forms,
Events, Animations, Best practices.

● https://legacy.reactjs.org/

● https://www.tutorialspoint.com/reactjs/index.htm
Web Computing
Department of AI & DS Ms.Nawal Dandekar 8
❖ React Fundamentals

● In react, we describe UI using components that are reusable,

composable, and stateful.
● React allows us to pass information to a Component using
something called props (stands for properties).

Web Computing
Department of AI & DS Ms.Nawal Dandekar 9
❖ React Fundamentals

Web Computing
Department of AI & DS Ms.Nawal Dandekar 10
❖ React Features

Web Computing
Department of AI & DS Ms.Nawal Dandekar 1
❖ React Benefits

Web Computing
Department of AI & DS Ms.Nawal Dandekar 1
❏ Installation

Web Computing
Department of AI & DS Ms.Nawal Dandekar 13
❏ Installation

● Follow the Links:

● https://www.javatpoint.com/react-installation

● https://www.tutorialspoint.com/reactjs/reactjs_environment
_setup.htm

● https://www.youtube.com/watch?v=8vh5dmBaVQw

Web Computing
Department of AI & DS Ms.Nawal Dandekar 14
❏ Installing Libraries

Web Computing
Department of AI & DS Ms.Nawal Dandekar 15
❏ Installing Libraries

● React Native libraries are typically installed from the npm registry using a Node.
js package manager such as npm CLI or Yarn Classic.
● If you have Node. js installed on your computer then you already have the npm
CLI installed.
● Some developers prefer to use Yarn Classic for slightly faster install times and
additional advanced features like Workspaces.
Installing a Library

● To install a library in your project, navigate to your project directory in your

terminal and run the installation command. Let's try this with react-native-
webview:
npm install react-native-webview

The library that we installed includes native code, and we need to link to our app
before we use it.

https://reactnative.dev/docs/libraries?package-manager=npm#installing-a-library

Web Computing
Department of AI & DS Ms.Nawal Dandekar 16
❏ Installing Libraries

Finding Libraries
● React Native Directory is a searchable database of libraries built specifically
for React Native. This is the first place to look for a library for your React Native
app.
● Many of the libraries you will find on the directory are from React Native
Community or Expo.
● Libraries built by the React Native Community are driven by volunteers and
individuals at companies that depend on React Native. They often support iOS,
tvOS, Android, Windows, but this varies across projects. Many of the libraries in
this organization were once React Native Core Components and APIs.
● Libraries built by Expo are all written in TypeScript and support iOS, Android,
and react-native-web wherever possible.
● After React Native Directory, the npm registry is the next best place if you can't
find a library specifically for React Native on the directory. The npm registry is
the definitive source for JavaScript libraries, but the libraries that it lists may not
all be compatible with React Native.
● React Native is one of many JavaScript programming environments, including
Node.js, web browsers, Electron, and more, and npm includes libraries that work
for all of these environments.
Web Computing
Department of AI & DS Ms.Nawal Dandekar 17
❏ First React Project

Web Computing
Department of AI & DS Ms.Nawal Dandekar 18
❏ First React Application

Web Computing
Department of AI & DS Ms.Nawal Dandekar 19
 ❏ Folder and file structure

Web Computing
Department of AI & DS Ms.Nawal Dandekar 20
 ❏ Folder and file structure

● A well-organized folder and file structure is essential for maintaining a clean, scalable, and
maintainable ReactJS project.

● While there is no strict rule for organizing your project, there are common patterns that
developers follow.

● The react mode will emit React.createElement , does not need to go through a JSX
transformation before use, and the output will have a .js file extension.

Web Computing
Department of AI & DS Ms.Nawal Dandekar 21
❏ Folder and file structure

Web Computing
Department of AI & DS Ms.Nawal Dandekar 22
 ❏ Folder and file structure

● Node_modules
This folder contains React library and all the dependencies packages, which are used in our
application.
● Public -
index.html - This file is the entry point of the application. All react code is rendered inside
the div element id root from the index.js file.
manifest.json - This is a metafile that provides the details about the application like the
name, author, icons, etc. it is used for the progressive web application.
robots.txt - This file is used to prevent search engine crawlers from specific URLs on your
site. It contains the list of allowed and disallowed sites whenever a bot wants to access the
website and plays an important role in SEO.
● src
App.css - This file is used for CSS styling. It is used to apply styling to application
components.
App.js - This is the main component of react application, It is working as a container and
contains all other components.
App.test.js - This file is used for writing the unit test cases of our application.

Web Computing
Department of AI & DS Ms.Nawal Dandekar 23
❏ Folder and file structure

index.css - This file is also used for CSS styling.

index.js - This is the entry file of react. In this file, we import the app component and
rendered that into the root DOM node. it is displayed in the div index.html.
reportWebVitals - This file is used for the application performance report and captures the
user experience of a web page.
setupTests.js - This file using for the setup of test cases.
● gitignore
This file tells to git, Which files and folders to ignore for commit in a project like
node_module, env, and others.
● package-lock.json
This file contains the details history of packages and dependencies on other packages.
● package.json
This is the important file for react application. it contains details of the name of the
application, dependencies, and version of packages which is used in the application. Also,
scripts object commands details to run various commands.
● README.md
This file contains the details about the application run command and many other links for
Web Computing
documentation.
Department of AI & DS Ms.Nawal Dandekar 24
 ❏ Components

Web Computing
Department of AI & DS Ms.Nawal Dandekar 25
 ❏ Components
● In ReactJS, components are the building blocks of your user interface.
● They are reusable, self-contained units that encapsulate the UI and its behavior.
● Components are independent and reusable bits of code. They serve the same purpose as
JavaScript functions, but work in isolation and return HTML.

Web Computing
Department of AI & DS Ms.Nawal Dandekar 26
 ❏ Components
● React apps are made out of components.
● A component is a piece of the UI (user interface) that has its own logic and appearance.
● A component can be as small as a button, or as large as an entire page.

Web Computing
Department of AI & DS Ms.Nawal Dandekar 27
❏ Components

There are two main types of components in React:

Web Computing
Department of AI & DS Ms.Nawal Dandekar 28
❏ Components

Web Computing
Department of AI & DS Ms.Nawal Dandekar 29
 ❏ Functional Components
● React functional components are just normal JavaScript functions; we can create them
using specific function keywords.
● Most developers create functional components using the Arrow function.
● The functional component’s primary purpose is to render the view and the data to the
browser.
● In other words, functional components accept data, or more technically, it takes props as a
function argument and returns the data in valid JSX form.

Web Computing
Department of AI & DS Ms.Nawal Dandekar 30
 ❏ Class Components
● Class components are more complex than functional components. It requires you to
extend from React.
● Component and create a render function which returns a React element.
● You can pass data from one class to other class components.
● You can create a class by defining a class that extends Component and has a render
function.
● The class component is also known as a stateful component because they can hold or
manage local state.

Web Computing
Department of AI & DS Ms.Nawal Dandekar 31
❏ Component Lifecycle

Web Computing
Department of AI & DS Ms.Nawal Dandekar 32
❏ Component Lifecycle

Web Computing
Department of AI & DS Ms.Nawal Dandekar 33
 ❏ Phases of Lifecycle in React Components
● Initialization- In this phase, the developer has to define the props and initial state of the
component this is generally done in the constructor of the component.

● Mounting-The mounting phase is when a new component is created and it is inserted into
the DOM or, in simple words, when the actual life of a React component begins. This
happens once, and is often called “initial render.”
To get through this phase, four lifecycle methods are called: constructor, static
getDerivedStateFromProps, render, and componentDidMount.

● Updating -The updating phase is when the component has any updates or it re-renders.
This phase is triggered when the props or state are updated.

● Unmounting phase- The unmounting phase is the last stage in the lifecycle of a React
component. This phase refers to when a component is removed from the DOM and is no
longer rendered or accessible. During this phase, React performs a series of cleanup
operations to ensure that the component and its associated resources are properly cleared
of the DOM tree.

Web Computing
Department of AI & DS Ms.Nawal Dandekar 34
 ❏ State and Props

Web Computing
Department of AI & DS Ms.Nawal Dandekar 35
 ❏ State and Props
● The State is a built-in React object that is used to contain data or
information about the component.
● A component's state can change over time; whenever it changes, the
component re-renders.
● Props stand for "Properties." They are read-only components.
● It is an object which stores the value of attributes of a tag and work
similar to the HTML attributes.
● They are used to pass data between React components i.e. It
gives a way to pass data from one component to other components. It is
similar to function arguments. .

Web Computing
Department of AI & DS Ms.Nawal Dandekar 36
❏ State and Props

Web Computing
Department of AI & DS Ms.Nawal Dandekar 37
❏ State and Props

Web Computing
Department of AI & DS Ms.Nawal Dandekar 38
 ❏ React Router

Web Computing
Department of AI & DS Ms.Nawal Dandekar 39
 ❏ React Router
● The Router in React JS is a pure JavaScript package that allows you to use React to create
complicated client-side apps.
● Initially launched in 2013, it has become one of the most prominent routing libraries in
today's online applications.
● React Router makes it simple to manage the URL and state of your application.
● You specify all of the potential URL patterns in your app and which UI component should
be displayed for each one using React Router.
● This Router decreases the amount of code an app requires to maintain its state and makes
adding new features more accessible.

Web Computing
Department of AI & DS Ms.Nawal Dandekar 40
 ❏ Need for React Router
● React Router is a JavaScript framework that lets us handle client and server-side routing in
React applications.
● It enables the creation of single-page web or mobile apps that allow navigating without
refreshing the page.
● It also allows us to use browser history features while preserving the right application
view.
● Use React Router to route to pages based on URL.

Web Computing
Department of AI & DS Ms.Nawal Dandekar 41
❏ Components of React Router

1. BrowserRouter and HashRouter

● BrowserRouter: A <BrowserRouter> stores the current location in the browser's
address bar using clean URLs and navigates using the browser's built-in history stack.
● HashRouter: <HashRouter> is for use in web browsers when the URL should not (or
cannot) be sent to the server for some reason. In these situations, <HashRouter> makes
it possible to store the current location in the hash portion of the current URL, so it is
never sent to the server.

2. Routes and Route

● Routes: A container for all your route definitions.
● Route: Defines a single route with a path and the component to render.

3. Link and NavLink

● Link: Creates navigational links in your application.
● NavLink: Similar to Link but provides additional styling attributes when the link is
active. Web Computing
42
Department of AI & DS Ms.Nawal Dandekar
❏ React Router

Web Computing
Department of AI & DS Ms.Nawal Dandekar 43
❏ React Router

Web Computing
Department of AI & DS Ms.Nawal Dandekar 44
❏ Single Page Applications

Web Computing
Department of AI & DS Ms.Nawal Dandekar 45
❏ Single Page Applications

Single page applications, often called SPAs, are becoming increasingly popular
among web developers.
React is a JavaScript library that allows for the creation of complex and dynamic
user interfaces – making it an ideal choice for single page applications.
React provides developers with the tools they need to develop fast and efficient
SPAs quickly.
By utilizing the component-based structure of React, developers can easily break
down their application into individual pieces that can be worked on independently
without affecting other parts of the code base.
This ensures that only relevant code is modified when changes or updates are made
– reducing development time significantly compared to other frameworks or
libraries.

Web Computing
Department of AI & DS Ms.Nawal Dandekar 46
❏ Single Page Applications

Web Computing
Department of AI & DS Ms.Nawal Dandekar 47
❏ Single Page Applications

In contrast to traditional web applications, single-page applications (SPAs) only need

to update the currently shown page in order to respond to user, eliminating the need
to repeatedly load pages from the server.

This approach avoids interrupting the user experience between successive pages,
making the application behave more like a desktop application.

All necessary code, such as HTML, JavaScript, and CSS, is retrieved with a single
page load in a SPA.

The appropriate resources are dynamically loaded and added to the page as
necessary while allowing navigation via link clicks or other interactive elements
without requiring full reloads of content.

Web Computing
Department of AI & DS Ms.Nawal Dandekar 48
 ❏ Single Page Applications
Advantages
● Fast and responsive user experience.
● Reduced server load and bandwidth usage.
● Better offline functionality and caching
● Easier and quicker development.
● Enhanced user engagement and interaction.
● Simplified code maintenance and updates.

Disadvantages
● Initial load time can be slower
● May not work well for content-heavy applications.
● Can require more complex client-side scripting.
● May not be compatible with all browsers and devices.
● May not be suitable for all types of applications.

Web Computing
Department of AI & DS Ms.Nawal Dandekar 49
❏ UI Design

Web Computing
Department of AI & DS Ms.Nawal Dandekar 50
 ❏ UI Design

● React is a JavaScript library for rendering user interfaces (UI).

● UI is built from small units like buttons, text, and images. React lets you combine them
into reusable, nestable components.
● From web sites to phone apps, everything on the screen can be broken down into
components.

Web Computing
Department of AI & DS Ms.Nawal Dandekar 51
 ❏ UI Design

● User interfaces are the points of interaction between the user and
developer.
● They come in three different types of formats:
1. Graphical User Interfaces (GUIs)
Users can interact with visual representations on the digital control panels.
Example of GUI, a computer's desktop.

2. Gesture-based Interfaces
Users can interact with 3D design spaces by moving their bodies. Example of
Gesture-Based Interfaces, Virtual Reality (VR) games.

3. Voice-controlled Interfaces (VUIs)

Users can interact with the help of the voice.
Example of Voice-Controlled Interfaces (VUIs), Alexa on Amazon devices,
and Siri on iPhone.

Web Computing
Department of AI & DS Ms.Nawal Dandekar 52
❏ UI Design

React applications are built from isolated pieces of UI called components. A React
component is a JavaScript function that you can sprinkle with markup. Components can
be as small as a button, or as large as an entire page. Here is a Gallery component
rendering three Profile components:

Web Computing
Department of AI & DS Ms.Nawal Dandekar 53
❏ UI Design

Importing and exporting components

You can declare many components in one file, but large files can get difficult to navigate.
To solve this, you can export a component into its own file, and then import that
component from another file:

Web Computing
Department of AI & DS Ms.Nawal Dandekar 54
❏ UI Design

Web Computing
Department of AI & DS Ms.Nawal Dandekar 55
❏ UI Design Framework and Component Libraries

Web Computing
Department of AI & DS Ms.Nawal Dandekar 56
❏ Forms

Web Computing
Department of AI & DS Ms.Nawal Dandekar 57
 ❏ Forms

● React uses forms to allow users to interact with the web page.
● In React, form data is usually handled by the components.
● When the data is handled by the components, all the data is
stored in the component state.

Web Computing
Department of AI & DS Ms.Nawal Dandekar 58
 ❏ Forms

Adding Forms in React

You add a form with React like any other element:

This will work as normal, the form will submit and the page will refresh.
But this is generally not what we want to happen in React.
We want to prevent this default behavior and let React control the form.

Web Computing
Department of AI & DS Ms.Nawal Dandekar 59
 ❏ Forms

Handling Forms

Handling forms is about how you handle the data when it changes value or gets submitted.

In HTML, form data is usually handled by the DOM.

In React, form data is usually handled by the components.

When the data is handled by the components, all the data is stored in the component state.

You can control changes by adding event handlers in the onChange attribute.

Submitting Forms

You can control the submit action by adding an event handler in the onSubmit attribute for the
<form>

Multiple Input Fields

You can control the values of more than one input field by adding a name attribute to each
element.
Web Computing
Department of AI & DS Ms.Nawal Dandekar 60
 ❏ Forms

Select

A drop down list, or a select box, in React is also a bit different from HTML.

In HTML, the selected value in the drop down list was defined with the selected attribute:

In React, the selected value is defined with a value attribute on the select tag

Textarea

The textarea element in React is slightly different from ordinary HTML.

In HTML the value of a textarea was the text between the start tag <textarea> and the end tag
</textarea>.

In React the value of a textarea is placed in a value attribute.

Web Computing
Department of AI & DS Ms.Nawal Dandekar 61
❏ Events

Web Computing
Department of AI & DS Ms.Nawal Dandekar 63
 ❏ Events

● An event is an action that could be triggered as a result of the user action or system
generated event.
● Event handlers are your own functions that will be triggered in response to interactions.
● For example, a mouse click, loading of a web page, pressing a key, window resizes, and
other interactions are called events.

Web Computing
Department of AI & DS Ms.Nawal Dandekar 64
 ❏ Animations

Web Computing
Department of AI & DS Ms.Nawal Dandekar 6
 ❏ Animations
● The animation is a technique in which images are manipulated to appear as moving images.
● It is one of the most used technique to make an interactive web application.
● In React, we can add animation using an explicit group of components known as the React
Transition Group.
● React Transition Group is an add-on component for managing component states and useful
for defining entering and exiting transitions. It is not able to animate styles by itself. Instead,
it exposes transition states, manages classes and group elements, and manipulates the DOM
in useful ways. It makes the implementation of visual transitions much easier.

Web Computing
Department of AI & DS Ms.Nawal Dandekar 6
 ❏ Animations
React Transition group has mainly two APIs to create transitions. These are:
1. ReactTransitionGroup: It uses as a low-level API for animation.
2. ReactCSSTransitionGroup: It uses as a high-level API for implementing basic CSS
transitions and animations.

React Transition Group Components

React Transition Group API provides three main components. These are:

3. Transition
4. CSSTransition
5. Transition Group

Web Computing
Ms.Nawal Dandekar 67
Department of AI & DS
 ❏ Animations
Transition
It has a simple component API to describe a transition from one component state to another over
time. It is mainly used to animate the mounting and unmounting of a component. It can also be
used for in-place transition states as well.
We can access the Transition component into four states:
○ entering
○ entered
○ exiting
○ exited

CSSTransition
The CSSTransition component uses CSS stylesheet classes to write the transition and create
animations. It is inspired by the ng-animate library. It can also inherit all the props of the
transition component. We can divide the "CSSTransition" into three states. These are:
○ Appear
○ Enter
○ Exit
Web Computing
Ms.Nawal Dandekar 68
Department of AI & DS
 ❏ Animations
TransitionGroup
○ This component is used to manage a set of transition components (Transition and
CSSTransition) in a list. It is a state machine that controls the mounting and unmounting
of components over time. The Transition component does not define any animation directly.
Here, how 'list' item animates is based on the individual transition component. It means, the
"TransitionGroup" component can have different animation within a component.

Web Computing
Ms.Nawal Dandekar 69
Department of AI & DS
 ❏ Best Practices

Web Computing
Department of AI & DS Ms.Nawal Dandekar 70
❏ Best Practices

● React is a powerful library for building user interfaces, but it can also be complex to
work with as applications grow.

● Here are some best practices to follow when developing with React to ensure code
quality, maintainability, and performance.

Web Computing
Department of AI & DS Ms.Nawal Dandekar 71
❏ Best Practices

● Keep Components Small and Focused.

● Put CSS in Javascript.

● Comment only where necessary.

● Use capitals for component names.

● The code should be testable.

● All files related to any component should be in a single folder.

● Use defaultProps and propTypes.

● Keeping code clean.

● Stay updated.

Web Computing
Department of AI & DS Ms.Nawal Dandekar 72
 Thank you …

Web Computing
Department of AI & DS Ms.Nawal Dandekar 73