Web Application Development

 What Is React & How Does It Actually

Work?
 ReactJS is one of the most popular JavaScript
libraries for mobile and web application
development. Created by Facebook, React
contains a collection of reusable JavaScript code
snippets called components that are used for
user interface (UI) building.
 It’s important to note that ReactJS is not a
JavaScript framework. That’s because it’s only
responsible for rendering the components of an
application’s view layer. React is an alternative
to frameworks like Angular and Vue, which all
allow to create complex functions.
09/11/2024 Web Application Development 2
 React Features
 React has some core features that make it stand
out from other JavaScript libraries
 JSX
 JSX is a JavaScript syntax extension used in
React element creation. Developers employ it to
embed HTML code in JavaScript objects. As JSX
accepts valid JavaScript expressions and
function embedding, it can simplify complex
code structures.

09/11/2024 Web Application Development 3

 Code block that shows how to embed an
expression in JSX
 EXAMPLE - A code block that shows how to
embed an expression in JSX:
 const name = 'John Smith;
 const element = h1>Hello, {name}/h1>;
 ReactDOM.render(
 element,
 document.getElementById('root')
 );
 In the second line, we call the name variable inside a
React element by putting it inside the curly brackets.
 Meanwhile, the ReactDOM.render() function
renders the React element on the Document Object
Model (DOM) tree, describing
09/11/2024
the UI.
Web Application Development 4
 Virtual DOM
 The Document Object Model (DOM) presents a
web page in a data tree structure. ReactJS stores
Virtual DOM trees in the memory. By doing so,
React can apply updates to specific parts of the
data tree, which is faster than re-rendering the
entirety of the DOM tree.
 Whenever there’s a change in data, ReactJS will
generate a new Virtual DOM tree and compare it
with the previous one to find the quickest
possible way to implement changes in the real
DOM. This process is known as diffing.
 By making sure that UI manipulation only affects
specific sections of the real DOM tree, rendering
the updated version
09/11/2024
takes less time and uses 5
Web Application Development
 Components and Props
 ReactJS divides the UI into isolated reusable
pieces of code known as components. React
components work similarly to JavaScript
functions as they accept arbitrary inputs called
properties or props.
 Returned React elements determine how the UI
will look at the client end. Here’s an example of
a function component that returns a React
element:
 Function Component that returns a React
element
function Welcome(props) {
return
09/11/2024
h1>Hello, {props.name}/h1>;
Web Application Development 6

}
 It’s possible to have as many components as
necessary without cluttering your code.
 State Management
 A state is a JavaScript object that represents a
part of a component. It changes whenever a
user interacts with the application, rendering a
new UI to reflect the modifications.
 State management refers to the practice of
managing React application states. It includes
storing data in third-party state management
libraries and triggering the re-rendering process
each time data is changed.
 A state management library facilitates
communication and data sharing between React
09/11/2024 Web Application Development 7
components. Several third-party state
 Redux
 The Redux state management library has a
centralized store, which keeps the state tree of
an application predictable. The library also
reduces data inconsistency by preventing two
components from updating the application’s
state simultaneously.
 Redux’s architecture supports error logging for
easier debugging and has a strict code
organization method, simplifying maintenance.
Additionally, it features a large number of add-
ons and is compatible with all UI layers.
 That said, Redux is rather complex and hence
suboptimal for small applications with a single
data source.
09/11/2024 Web Application Development 8
 Recoil
 Recoil is a JavaScript state management library
released by Facebook. It employs pure functions
called selectors to calculate data from
updateable units of the state known as atoms.
Multiple components can subscribe to the same
atom and thus share a state.
 The use of atoms and selectors prevents
redundant states, simplifies code, and eliminates
excessive re-renders of React and any child
components. Recoil is more suitable for
beginners than Redux because its core concepts
are considerably easier to grasp.

09/11/2024 Web Application Development 9

 Why Use React
 Hundreds of major companies worldwide, such
as Netflix, Airbnb, and American Express, use
React to build their web applications.
 The reasons why so many developers choose
ReactJS over its competitors.

09/11/2024 Web Application Development 10

 The reasons why so many developers choose
ReactJS over its competitors.
 1. Easy to Use
 Developers with JavaScript knowledge can learn
how to use React in no time as it relies on plain
JavaScript and a component-based approach. It’s
possible to start developing web-based
applications with React after just a couple of
days of studying it.
 Even if you aren’t familiar with JavaScript, tons
of websites provide coding lessons for free. Once
you know the basics of JavaScript, read up on
ReactJS to streamline the front-end development
process.
09/11/2024 Web Application Development 11
 2. Supports Reusable Java Components
 React lets you reuse components that have been
developed into other applications. Since ReactJS
is open source, it’s possible to pre-build
components, cutting down on the development
time of complex web applications.
 React allows nesting components in between
others to create complex functions without
bloating the code. As each component has its
own controls, it’s easy to maintain them.

09/11/2024 Web Application Development 12

 Easier Component Writing
 Because of JSX integration, it’s easier to write
React components – users can create JavaScript
objects combined with HTML typography and
tags. JSX also simplifies multiple-function
rendering, which keeps code lean without
reducing the app’s capabilities.
 Even though JSX is not the most popular syntax
extension, it has proven efficient in special
component and dynamic application
development.

09/11/2024 Web Application Development 13

 High Performance
 Virtual DOM allows ReactJS to update the DOM
tree in the most efficient way possible. By
storing Virtual DOM in the memory, React
eliminates excessive re-rendering that may harm
performance.
 Additionally, React’s one-way data binding
between elements streamlines the debugging
process. Any modifications made to child
components won’t affect the parent structure,
reducing the risk of errors.

09/11/2024 Web Application Development 14

 How Does React Work
 One of the biggest advantages of using React is that
you can infuse HTML code with JavaScript.
 Users can create a representation of a DOM node by
declaring the Element function in React.

09/11/2024 Web Application Development 15

 The code below contains a combination of HTML and
JavaScript
 The code below contains a combination of HTML and JavaScript:
 React.createElement("div", { className: "red" }, "Children Text");
 React.createElement(MyCounter, { count: 3 + 5 });
 You may have noticed that the syntax of the HTML code above is
similar to XML. That said, instead of using the traditional DOM
class, React uses className.
 JSX tags have a name, children, and attributes. Numeric values
and expressions must be written inside curly brackets. The
quotation marks in JSX attributes represent strings, similar to
JavaScript.
 In most cases, React is written using JSX instead of standard
JavaScript to simplify components and keep code clean.

09/11/2024 Web Application Development 16

 React Code written in JSX
 Here is an example of React code written using JSX:
MyCounter count={3 + 5} />;
var GameScores = {player1: 2,player2: 5};
DashboardUnit data-index="2">
h1>Scores/h1>Scoreboard className="results"
scores={{GameScores}} />
/DashboardUnit>;
The following is a breakdown of the HTML tags above:
• MyCounter> represents a variable called count whose value is a
numeric expression.
• GameScores is an object literal that has two prop-value pairs.
• DashboardUnit> is the XML block that is rendered on the page.
• scores={{GameScores}} is the scores attribute. It gets its value
from the GameScores object literal defined earlier.
09/11/2024 Web Application Development 17
 A React app usually has a single root DOM node.
Rendering an element into the DOM will change the
user interface of the page.
 Code To Display Hello World
 For instance, the following code displays “Hello World”
on the page by rendering the element into a DOM node
called root.
 div id="root">/div>
 const element = h1>Hello, world/h1>;
 ReactDOM.render(element,
document.getElementById('root'));
 Whenever a React component returns an element, the
Virtual DOM will update the real DOM to match.
09/11/2024 Web Application Development 18