WEB

TECHNOLOGY
What is React?

■ React is a front-end JavaScript library developed by Facebook in 2011.

■ It follows the component based approach which helps in building
reusable UI components.
■ It is used for developing complex and interactive web and mobile UI.
■ Even though it was open-sourced only in 2015, it has one of the
largest communities supporting it.
What are the limitations of React?

■ Limitations of React are listed below:

1. React is just a library, not a full-blown framework
2. Its library is very large and takes time to understand
3. It can be little difficult for the novice programmers to understand
4. Coding gets complex as it uses inline templating and JSX
Example 1
What is React?
■ React, sometimes referred to as a frontend JavaScript framework, is a
JavaScript library created by Facebook.
■ React is a tool for building UI components.
How does React Work?
■ React creates a VIRTUAL DOM in memory.
■ Instead of manipulating the browser's DOM directly, React creates a
virtual DOM in memory, where it does all the necessary manipulating,
before making the changes in the browser DOM.
■ React only changes what needs to be changed!
A virtual DOM

■ is a lightweight JavaScript object which originally is just a copy of the

real DOM. It is a node tree that lists the elements, their attributes and
content as Objects and their properties. React’s render function
creates a node tree out of the React components. It then updates this
tree in response to the mutations in the data model which is caused
by various actions done by the user or by the system. Check out this
Web developer course online to learn more about react.

■ This Virtual DOM works in three simple steps.

1.Whenever any underlying data changes, the entire UI is re-rendered in
Virtual DOM representation.

2. Then the difference between the previous DOM representation and the new
one is calculated.

3. Once the calculations are done, the real DOM will be updated with
only the things that have actually changed.
Differentiate between Real DOM and Virtual
DOM.

Real DOM vs Virtual DOM

Real DOM Virtual DOM

1. It updates slow. 1. It updates faster.

2. Can directly update 2. Can’t directly update

HTML. HTML.

3. Creates a new DOM if 3. Updates the JSX if

element updates. element updates.

4. DOM manipulation is very 4. DOM manipulation is very

expensive. easy.

5. Too much of memory

5. No memory wastage.
wastage.
React Getting Started

■ To use React in production, you need npm which is included with

Node.js.
■ To get an overview of what React is, you can write React code directly
in HTML.
■ But in order to use React in production, you need npm and Node.js
installed.
Setting up a React Environment

■ If you have npx and Node.js installed, you can create a React application by using create-react-
app.

■ If you've previously installed create-react-app globally, it is recommended that you uninstall

the package to ensure npx always uses the latest version of create-react-app.

■ To uninstall, run this command: npm uninstall -g create-react-app.

■ Run this command to create a React application named my-react-app:

■ npx create-react-app my-react-app

■ The create-react-app will set up everything you need to run a React application.
 Run the React Application

■ Now you are ready to run your first real React application!
■ Run this command to move to the my-react-app directory:
cd my-react-app
■ Run this command to run the React application my-react-app:
npm start
■ A new browser window will pop up with your newly created React App! If
not, open your browser and type localhost:3000 in the address bar.

■ The result:
React ES6

■ What is ES6?
■ ES6 stands for ECMAScript 6.
■ ECMAScript was created to standardize JavaScript, and ES6 is the 6th
version of ECMAScript, it was published in 2015, and is also known as
ECMAScript 2015.
React ES6 Classes
■ ES6 introduced classes.
■ We use the keyword class, and the properties are assigned inside a
constructor() method.
■ Example
■ A simple class constructor:
class Car {
constructor(name) {
this.brand = name;
}
}
■ Create an object called "mycar" based on the Car class:

class Car {
constructor(name) {
this.brand = name;
}
}

const mycar = new Car("Ford");

React ES6 Arrow Functions
■ What is arrow function in React? How is it used?
■ Arrow Functions: Arrow functions allow us to write shorter function syntax:

Before:
hello = function() {
return "Hello World!";
}

With Arrow Function:

hello = () => {
return "Hello World!";
}
It gets shorter! If the function has only one statement, and the statement returns a value, you
can remove the brackets and the return keyword:
Arrow Functions Return Value by Default:
hello = () => "Hello World!";
■ Arrow Function With Parameters:
■ hello = (val) => "Hello " + val;

■ In fact, if you have only one parameter, you can skip the parentheses
as well:
■ Arrow Function Without Parentheses:
■ hello = val => "Hello " + val;
What is an arrow function and how is it
used in React?

■ An arrow function is a short way of writing a function to React.

■ It is unnecessary to bind ‘this’ inside the constructor when using an
arrow function. This prevents bugs caused by the use of ‘this’ in React
callbacks.
React ES6 Variables
■ Variables
■ Before ES6 there was only one way of defining your variables: with the var
keyword. If you did not define them, they would be assigned to the global
object. Unless you were in strict mode, then you would get an error if your
variables were undefined.
■ Now, with ES6, there are three ways of defining your variables: var, let, and
const.
1) var
■ var x = 5.6;
■ If you use var outside of a function, it belongs to the global scope.
■ If you use var inside of a function, it belongs to that function.
■ If you use var inside of a block, i.e. a for loop, the variable is still available
outside of that block.
let
2) let x = 5.6;
■ let is the block scoped version of var, and is limited to the block (or
expression) where it is defined.

■ If you use let inside of a block, i.e. a for loop, the variable is only
available inside of that loop.
const

3) const x = 5.6;

■ const is a variable that once it has been created, its value can never change.

■ const has a block scope.

■ The keyword const is a bit misleading.

■ It does not define a constant value. It defines a constant reference to a value.

React ES6 Array Methods

■ Array Methods : There are many JavaScript array methods.

■ One of the most useful in React is the .map() array method.
■ The .map() method allows you to run a function on each item in the
array, returning a new array as the result.
■ In React, map() can be used to generate lists.
Example: Generate a list of items from an array:
What is JSX?
■ JSX is a syntax extension of JavaScript. It is used with React to
describe what the user interface should look like. By using JSX, we can
write HTML structures in the same file that contains JavaScript code.
React Render HTML: render()
■ React's goal is in many ways to render HTML in a web page.
■ React renders HTML to the web page by using a function called
ReactDOM.render().
■ The ReactDOM.render() function takes two arguments, HTML code and
an HTML element.
■ The purpose of the function is to display the specified HTML code
inside the specified HTML element.
■ But render where?
■ There is another folder in the root directory of your React project,
named "public". In this folder, there is an index.html file.
■ You'll notice a single <div> in the body of this file. This is where our
React application will be rendered.
Example :Display a paragraph inside an
element with the id of "root":

■ ReactDOM.render(<p>Hello</p>, document.getElementById('root’));

■ The result is displayed in the <div id="root"> element:

■ <body>
■ <div id="root"></div>
■ </body>
What is the use of render() in
React?
■ It is required for each component to have a render() function. This
function returns the HTML, which is to be displayed in the component.
■ If you need to render more than one element, all of the elements
must be inside one parent tag like <div>, <form>.
What is JSX?

■ JSX stands for JavaScript XML.

■ JSX allows us to write HTML in React.
■ JSX makes it easier to write and add HTML in React.
 Coding JSX
■ JSX allows us to write HTML elements in JavaScript and place them in the DOM
without any createElement() and/or appendChild() methods.
■ JSX converts HTML tags into react elements.
■ You are not required to use JSX, but JSX makes it easier to write React
applications.
■ Here are two examples. The first uses JSX and the second does not:
import React from 'react';
import React from 'react'; import ReactDOM from 'react-dom/client';
import ReactDOM from 'react-dom/client';
const myElement = React.createElement('h1', {}, 'I do
const myElement = <h1>I Like JSX!</h1>; not use !');

const root const root

=ReactDOM.createRoot(document.getElementByI =ReactDOM.createRoot(document.getElementById('root'
d('root')); ));
root.render(myElement); root.render(myElement);
■ Expressions in JSX : With JSX you can write expressions inside curly
braces { }.
■ The expression can be a React variable, or property, or any other valid
JavaScript expression. JSX will execute the expression and return the
result:

■ Example:
■ Execute the expression 5 + 5:
■ const myElement = <h1>React is {5 + 5} times better with
JSX</h1>;
Can web browsers read JSX directly?
■ Web browsers cannot read JSX directly. This is because they are built
to only read regular JS objects and JSX is not a regular JavaScript object
■ For a web browser to read a JSX file, the file needs to be transformed
into a regular JavaScript object. For this, we use Babel
 Why can’t browsers read
JSX?
■ Browsers can only read JavaScript objects but JSX in not a regular
JavaScript object.
■ Thus to enable a browser to read JSX, first, we need to transform
JSX file into a JavaScript object using JSX transformers like Babel and
then pass it to the browser.

import React from 'react';

import React from 'react';
function App() {
function App() { return React.createElement('h1', null, 'Hello
return <h1>Hello World</h1>; world');
} }
What is the virtual DOM?
■ DOM stands for Document Object Model. The DOM represents an HTML
document with a logical tree structure. Each branch of the tree ends in a
node, and each node contains objects.
■ React keeps a lightweight representation of the real DOM in the memory,
and that is known as the virtual DOM. When the state of an object changes,
the virtual DOM changes only that object in the real DOM, rather than
updating all the objects. The following are some of the most frequently asked
react interview questions.
 How do you create a React app?
■ These are the steps for creating a React app:
• Install NodeJS on the computer because we need npm to install the
React library. Npm is the node package manager that contains many
JavaScript libraries, including React.
•Install the create-react-app package using the command prompt or
terminal.
•Install a text editor of your choice, like VS Code or
Sublime Text.
What is an event in React?
■ An event is an action that a user or system may
trigger, such as pressing a key, a mouse click, etc.
■ React events are named using camelCase, rather
than lowercase in HTML.
■ With JSX, you pass a function as the event
handler, rather than a string in HTML.
■ <Button onPress={lightItUp} />
How do you create an event in
React?
■ A React event can be created by doing the following:
What are synthetic events in React?

• Synthetic events combine the response of different browser's native

events into one API, ensuring that the events are consistent across
different browsers.
• The application is consistent regardless of the browser it is running in.
Here, preventDefault is a synthetic event.
 Explain how lists work in React
■ We create lists in React as we do in regular JavaScript. Lists display
data in an ordered format
■ The traversal of lists is done using the map() function
Why is there a need for using keys in
Lists?

■ Keys are very important in lists for the following reasons:

• A key is a unique identifier and it is used to identify which items
have changed, been updated or deleted from the lists.
• It also helps to determine which components need to be re-
rendered instead of re-rendering all the components every time.
• Therefore, it increases performance, as only the updated
components are re-rendered
What are forms in React?

■ React employs forms to enable users to interact with web

applications.
• Using forms, users can interact with the application and enter the
required information whenever needed.
• Forms are used for many different tasks such as user authentication,
searching, filtering, indexing, etc
• Form contain certain elements, such as text fields, buttons,
checkboxes, radio buttons, etc
How do you create forms in React?

■ We create forms in React by

doing the following:
How do you write comments in
React?
■ There are basically two ways in which we can write comments:

■ Single-line comments •Multi-line comments

What are the components in
React?
■ Components are the building blocks of any React application, and a
single app usually consists of multiple components. A component is
essentially a piece of the user interface.
■ It splits the user interface into independent, reusable parts that
can be processed separately.
■ There are two types of components in React:
Functional Components:
■ These types of components have no state of their own and only
contain render methods, and therefore are also called stateless
components.
■ They may derive data from other components as props (properties).

function Greeting(props) {
return <h1>Welcome to {props.name}</h1>;
}
Class Components:
■ These types of components can hold and manage their own state and
have a separate render method to return JSX on the screen.
■ They are also called Stateful components as they can have a state.

class Greeting extends React.Component {

render() {
return <h1>Welcome to {this.props.name}</h1>;
}
}
What is a state in React?
■ The state is a built-in React object that is used to contain data or
information about the component. The state in a component can
change over time, and whenever it changes, the component re-
renders.
■ The change in state can happen as a response to user action or
system-generated events. It determines the behavior of the
component and how it will render.
How do you implement state in React?
How do you update the state of a
component?

■ We can update the state of a component by using the built-in

‘setState()’ method:
What are props in React?

■ Props are short for Properties. It is a React built-in object that

stores the value of attributes of a tag and works similarly to HTML
attributes.
■ Props provide a way to pass data from one component to
another component. Props are passed to the component in the
same way as arguments are passed in a function.
How do you pass props between
components?
Example: Data passing from one
component to other
■ To pass data from one component to another component. We have
multiple ways of passing data among components. We can pass data
from parent to child, from child to parent, and between siblings. So
now let’s see how can we do so.
Creating React Application:
■ Step 1: Create a React application using the following command.
■ npx create-react-app myapp
■ Step 2: After creating your project folder i.e. myapp, move to it using
the following command.
■ cd myapp
Parent.js
■ import React from 'react'
■ import Child from './Child';
■ const Parent = () => {
■ const data = "Hello Everyone";
■ return(
■ <div>
■ <Child data={data}/>
■ </div>
■ );
■ }
■ export default Parent;
Child.js

■ import React from 'react';

■ const Child = (props) => {
■ return(
■ <h2> {props.data} </h2>
■ );
■ }
■ export default Child;
App.js
■ import React from 'react';
■ import "./index.css";
■ import Parent from './Parent'

■ const App = () => {

■ return (
■ <div className="App">
■ <Parent/>
■ </div>
■ );
■ }
■ export default App;
Example of State

React Class Component State

React Class components have a built-in state object.
You might have noticed that we used state earlier in the component constructor section.
The state object is where you store property values that belongs to the component.
When the state object changes, the component re-renders.
Creating the state Object
■ The state object is initialized in the constructor:
■ Example: Specify the state object in the constructor method:

class Car extends React.Component {

constructor(props) {
super(props);
this.state = {brand: "Ford"};
}
render() {
return (
<div>
<h1>My Car</h1>
</div>
);
}
}
The state object can contain as many
properties as you like:
class Car extends React.Component
{ constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964 };
}
render() {
return (
<div>
<h1>My Car</h1>
</div>
);
}
}
Changing the state Object

■ To change a value in the state object, use the this.setState() method.

■ When a value in the state object changes, the component will re-
render, meaning that the output will change according to the new
value(s).
 Add a button with an onClick
event that will change the color
property:
class Car extends render() {
React.Component return (
<div>
{ constructor(props) { <h1>My {this.state.brand}</h1>
super(props); <p>
this.state = { brand: "Ford", It is a {this.state.color}
model: "Mustang", color: "red", {this.state.model}
from {this.state.year}.
year: 1964 }; </p>
} changeColor = () => <button type="button“
{ this.setState({color: onClick={this.changeColor} >
"blue"}); } Change color</button>
</div>
);
}
}
Lifecycle of Components

■ Each component in React has ■ Mounting

a lifecycle which you can ■ Mounting means putting elements into the
monitor and manipulate DOM.
during its three main phases. ■ React has four built-in methods that gets
called, in this order, when mounting a
■ The three phases component:
are: Mounting, Updating, ■ constructor()
and Unmounting. ■ getDerivedStateFromProps()
■ render()
■ componentDidMount()
■ The render() method is required and will
always be called, the others are optional and
will be called if you define them.
 constructor ■ Example:

■ The constructor method is called, by React, every time you

make a component:
■ The constructor() method is ■ class Header extends React.Component {
called before anything else, when ■ constructor(props) {
the component is initiated,
■ super(props);
and it is the natural place to set
up the initial state and other ■ this.state = { favoritecolor: "red"};

initial values. ■ }

■ render() {
■ The constructor() method is
called with the props, as ■ return (

arguments, and you should ■ <h1>My Favorite Color is {this.state.favoritecolor}</h1>

always start by calling the ■ );
super(props) before anything ■ }
else, this will initiate the parent's
■ }
constructor method and allows
the component to inherit ■ const root =
ReactDOM.createRoot(document.getElementById('root'));
methods from its parent
(React.Component). ■ root.render(<Header />);
What are the differences between state
and props?
State Props

Allows to pass
data from one
Holds information about component to
Use
the components other
components as
an argument

Mutability Is mutable Are immutable

Read-Only Can be changed Are read-only

Child components cannot Child component

Child components
access can access

Stateless components Cannot have state Can have props

Explain the lifecycle methods of
components.

• getInitialState(): This is executed before the creation of the component.

• componentDidMount(): Is executed when the component gets rendered and
placed on the DOM.
• shouldComponentUpdate(): Is invoked when a component determines
changes to the DOM and returns a “true” or “false” value based on certain
conditions.
• componentDidUpdate(): Is invoked immediately after rendering takes place.
• componentWillUnmount(): Is invoked immediately before a component is
destroyed and unmounted permanently.
■ So far, if you have any doubts about the above React interview questions and
answers, please ask your questions in the section below.
 How do you style React components?

■ There are several ways in which we can style React components:

• Inline Styling
CSS Stylesheet
Explain the use of CSS modules in React.

■ The CSS module file is created with the .module.css extension

■ The CSS inside a module file is available only for the component that
imported it, so there are no naming conflicts while styling the
components.
What are the advantages of
React?
■ By now, you should have gotten a good idea of what those are. But to
recap, I would list them here.
• The use of a virtual DOM makes React apps faster.
• With React you can re-use previously composed components.
• There is support for server-side rendering of websites.
• You do not need to worry about framework-specific code as React is a
library.
What are the cons of React?

■ React just like a lot of things has disadvantages. Some of them are:

■ React is continuously and frequently being improved. It might be hard

to follow the pace of development.
■ JSX or Javascript extension, which is used in creating React components,
can be quite hard to learn.
■ Unlike with frameworks that define how your app is to be structured,
you have to structure your app yourself. This is not necessarily a
disadvantage if you know how to.
What is Props?

■ Props is the shorthand for Properties in React. They are read-only

components which must be kept pure i.e. immutable. They are always
passed down from the parent to the child components throughout the
application. A child component can never send a prop back to the
parent component. This help in maintaining the unidirectional data
flow and are generally used to render the dynamically generated
data.
What is a state in React and how is it
used?

■ States are the heart of React components. States are the source of
data and must be kept as simple as possible. Basically, states are the
objects which determine components rendering and behavior. They
are mutable unlike the props and create dynamic and interactive
components. They are accessed via this.state().
Differentiate between states and
props.

Conditions State Props

1. Receive initial value from parent component Yes Yes
2. Parent component can change value No Yes
3. Set default values inside component Yes Yes
4. Changes inside component Yes No
5. Set initial value for child components Yes Yes
6. Changes inside child components No Yes
Differentiate between stateful and
stateless components.

Stateful Component Stateless Component

1. Stores info about component’s state 1. Calculates the internal state of the
change in memory components
2. Do not have the authority to change
2. Have authority to change state
state
3. Contains no knowledge of past,
3. Contains the knowledge of past, current
current and possible future state
and possible future changes in state
changes
4. Stateless components notify them
4. They receive the props from the
about the requirement of the state
Stateful components and treat them as
change, then they send down the props to
callback functions.
them.
What are the different phases of React component’s lifecycle?
■ There are three different phases of React component’s lifecycle:
1. Initial Rendering Phase: This is the phase when the component is
about to start its life journey and make its way to the DOM.
2. Updating Phase: Once the component gets added to the DOM, it can
potentially update and re-render only when a prop or state change
occurs. That happens only in this phase.
3. Unmounting Phase: This is the final phase of a component’s life
cycle in which the component is destroyed and removed from the
DOM.
■ Explain the lifecycle methods of React components in detail.
■ Some of the most important lifecycle methods are:

■ componentWillMount() – Executed just before rendering takes place both on the

client as well as server-side.
■ componentDidMount() – Executed on the client side only after the first render.
■ componentWillReceiveProps() – Invoked as soon as the props are received from
the parent class and before another render is called.
■ shouldComponentUpdate() – Returns true or false value based on certain
conditions. If you want your component to update, return true else return false.
By default, it returns false.
■ componentWillUpdate() – Called just before rendering takes place in the DOM.
■ componentDidUpdate() – Called immediately after rendering takes place.
■ componentWillUnmount() – Called after the component is unmounted from the
DOM. It is used to clear up the memory spaces.
What is an event in React?

■ In React, events are the triggered reactions to specific actions like

mouse hover, mouse click, key press, etc. Handling these events are
similar to handling events in DOM elements. But there are some
syntactical differences like:

■ Events are named using camel case instead of just using the lowercase.
■ Events are passed as functions instead of strings.
■ The event argument contains a set of properties, which are specific to
an event. Each event type contains its own properties and behavior
which can be accessed via its event handler only.
Styling React Using CSS

■ There are many ways to style React with CSS, this tutorial will take a
closer look at three common ways:
• Inline styling
• CSS stylesheets
• CSS Modules
Inline Styling

■ To style an element with the inline style attribute, the value must be a JavaScript object:
■ Example:
■ Insert an object with the styling information:
■ const Header = () => {
■ return (
■ <>
■ <h1 style={{color: "red"}}>Hello Style!</h1>
■ <p>Add a little style!</p>
■ </>
■ );
■ }
Example:

■ Use backgroundColor instead of background-color:

■ const Header = () => {
■ return (
■ <>
■ <h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
■ <p>Add a little style!</p>
■ </>
■ );
■ }
JavaScript Object
■ You can also create an object with styling information, and refer to it in the style attribute:
■ Create a style object named myStyle:

■ const Header = () => {

■ const myStyle = {
■ color: "white",
■ backgroundColor: "DodgerBlue",
■ padding: "10px",
■ fontFamily: "Sans-Serif"
■ };
■ return (
■ <>
■ <h1 style={myStyle}>Hello Style!</h1>
■ <p>Add a little style!</p>
■ </>
■ );
■ }
CSS Stylesheet
■ Import the stylesheet in your application:
■ index.js:
■ You can write your CSS styling in a separate
file, just save the file with the .css file ■ import React from 'react';
extension, and import it in your application. ■ import ReactDOM from 'react-dom/client';
■ App.css: ■ import './App.css';
■ Create a new file called "App.css" and ■ const Header = () => {
insert some CSS code in it:
■ return (
■ body {
■ <>
■ background-color: #282c34;
■ <h1>Hello Style!</h1>
■ color: white;
■ <p>Add a little style!.</p>
■ padding: 40px; ■ </>
■ font-family: Sans-Serif; ■ );
■ text-align: center; ■ }
■ } ■ const root =
ReactDOM.createRoot(document.getElementById('r
oot'));
■ root.render(<Header />);
How to connect MongoDB with
ReactJS ?

■ First of all, we can not connect React JS to MongoDB because things don’t work like this. First, we
create a react app, and then for backend maintenance, we create API in node.js and express.js which is
running at a different port and our react app running at a different port. for connecting React to the
database (MongoDB) we integrate through API. Now see how we create a simple React app that takes
the input name and email from users and saved it to the database.

■ Prerequisite:
■ NodeJS installed in your system (install)
■ MongoDB installed in your system (install)
■ Setum Files and Folders: Setting up the required files and folders for the frontend and backend both
one by one.
■ Create React App: To build a react application follow the below steps:
■ Step 1: Create a react application using the following command
■ npx create-react-app foldername
■ Step 2: Once it is done change your directory to the newly created application using the
following command

■ cd foldername
■ Step to run the application: Enter the following command to run the application.

■ npm start
■ Backend Setup With NodeJS: Setup NodeJs for Backend to integrate with frontend.

■ Step1: Make a folder in the root directory using the following command

■ mkdir backend
■ Step 2: Once it is done change your directory to the newly created folder called backend
using the following command

■ cd backend
■ Step 3: Run the following command to create configure file

■ npm init -y
■ Step 3: Now Install the mongoose MongoDB using the
following command.

■ npm i express mongoose mongodb cors

■ Step 4: Create a file that is index.js

■ touch index.js
■ Project Structure: It will look like the following:Step to run the
application: Enter the following command to run the
application.

■ nodemon index.js