REACT Module 3

FUNDAMENTALS
WHAT IS REACT JS?
• React is a JavaScript library created by Facebook
• React is a User Interface (UI) library
• It is an open source, component based front end
library which is responsible only for the view layer of
the application.
• It is not a framework.
• It is a very in demand skillset used in companies.
• React’s components are reusable which makes it
easier to develop and maintain your apps.
• Text Editor: VS Code
• Install : Node JS
REACT JS INSTALLATION:

TO CREATE A REACT APP:

1. Using the Create-react-app Command (npx):
• Create a new folder named React
• Open the folder in VS Code
• Open the integrated terminal and type the following
command to create a react-app:
npx create-react-app [project name]
• npx is a npm package runner
• Example project of hello-world:
npx create-react-app hello-world
REACT JS INSTALLATION:

• After running the npx create-react-app hello-

world command a new folder of hello world
project will be created.
• To Run this application, navigate inside the
project folder using the command :
• cd .\hello-world
• Now run the command to run this app :
npm start
REACT JS INSTALLATION:

TO CREATE A REACT APP:

2. Using the Create-react-app Command (npm):
Install React using the npm package manager.
npm install –g create-react-app
Create a new react project using :
create-react-app [project name]
FOLDER AND FILE STRUCTURE:
package.json
The package.json file contains all the required
dependencies for our React JS project. Most importantly,
you can check the current version of the React that you
are using. It has all the scripts to start, build, and eject
our React app.
public folder
The public folder contains index.html. As react is
used to build a single page application, we have this
single HTML file to render all our components. Basically,
it's an HTML template. It has a div element
with id as root and all our components are rendered in
this div with index.html as a single page for the
complete react app.
src folder
FOLDER AND FILE STRUCTURE:

index.js
This is the top renderer of your react app. In
the index.js file, we import React, ReactDOM, and
the CSS file.

node_modules
All the packages installed by NPM will reside inside
the node_modules folder.

App.js
The App.js file contains the definition of
our App component which actually gets rendered in the
browser and this is the root component.
COMPONENTS:
Components are the core building blocks of React
applications.
They are logical group of code that make up the entire
application.
With the help of components, you can make UIs quickly.
Every component works independently, and you can
merge them into a parent component.
Components are like functions that return HTML
elements.
Components are independent and reusable bits of code.
There are two types of Components in ReactJS:
1. Functional Components
2. Class Components
FUNCTIONAL COMPONENTS:
Functional Components are simply JavaScript functions.
We can create a functional component in React by
writing a JavaScript function.
These functions may or may not receive data as
parameters.
In the functional Components, the return value is the
JSX(JSX allows us to write HTML in React) code to render to the
DOM tree.
Function components can be written using much less
code, are easier to understand, and is preferred over
class components.
FUNCTIONALCOMPONENT.JS FILE
APP.JS FILE
OUTPUT:
FUNCTIONALCOMPONENT.JS
FILE
APP.JS FILE
OUTPUT:
CLASS COMPONENTS:
Class components are simple classes (made up of
multiple functions that add functionality to the
application).
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.
CLASSCOMPONENT.JS FILE
APP.JS FILE
OUTPUT:
REACTJS PROPS:
props stands for properties.
Props are arguments passed into React components.

Props are passed to components via HTML attributes.

React Props are like function arguments in JavaScript
and attributes in HTML.
REACTJS STATE:
React components has a built-in state object.
The state object is where you store property values that
belong to the component.
When the state object changes, the component re-
renders.
The state object is initialized in the constructor.

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).
REACTJS-COMPONENT LIFECYCLE:
• Each component in React has a lifecycle which you
can monitor and manipulate during its three main
phases.
• The three phases are:
• Mounting,
• Updating, and
• Unmounting.
REACTJS-COMPONENT LIFECYCLE:
Mounting Phase:
Mounting means putting elements into the DOM.
React has four built-in methods that gets called, in this
order, when mounting a component:

• constructor() = The constructor() method is called

before anything else, when the component is initiated.
• The constructor() method is called with the props, as
arguments, and you should always start by calling the
super(props) before anything else, this will initiate the
parent's constructor method and allows the
component to inherit methods from its parent
(React.Component).
REACTJS-COMPONENT LIFECYCLE:
Mounting Phase:

• getDerivedStateFromProps() =
This method is called right before rendering the
element(s) in the DOM.
It takes state as an argument, and returns an object
with changes to the state.

• Render =
The render() method is required, and is the method that
actually outputs the HTML to the DOM.
REACTJS-COMPONENT LIFECYCLE:
Updating Phase:
The next phase in the lifecycle is when a component is
updated.
A component is updated whenever there is a change in
the component's state or props.
React has five built-in methods that gets called, in this
order, when a component is updated:
getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
REACTJS-COMPONENT LIFECYCLE:
Updating Phase:
getDerivedStateFromProps
This is the first method that is called when a component
gets updated.
This is the natural place to set the state object based on
the initial props.

shouldComponentUpdate
In the shouldComponentUpdate() method you can
return a Boolean value that specifies whether React
should continue with the rendering or not.
The default value is true.
REACTJS-COMPONENT LIFECYCLE:
Updating Phase:
render
The render() method is called when a component gets
updated, it has to re-render the HTML to the DOM, with
the new changes.

getSnapshotBeforeUpdate
In the getSnapshotBeforeUpdate() method you have
access to the props and state before the update,
meaning that even after the update, you can check what
the values were before the update.

componentDidUpdate
The componentDidUpdate method is called after the
component is updated in the DOM.
REACTJS-COMPONENT LIFECYCLE:
Unmouting Phase:
The next phase in the lifecycle is when a component is
removed from the DOM, or unmount.

React has only one built-in method that gets called

when a component is unmounted:
componentWillUnmount()

componentWillUnmount =
The componentWillUnmount method is called when the
component is about to be removed from the DOM.
REACTJS-EVENTS:
Events are actions that are triggered by system
generated events or user actions.
React’s event handling system is known as synthetic
events.

React events are written in camelCase syntax:

onClick

React event handlers are written inside curly braces:

onClick={shoot} instead of onClick="shoot()"
REACTJS-FORMS:
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.
REACTJS-FORMS:
Example:

function MyForm() {
return (
<form>
<label>Enter your name:
<input type="text" />
</label>
</form>
)
}
REACTJS-ROUTER:
When a user is directed to a page based on
their action or request, the process is called
routing.
React Router is a popular library for handling
routing and navigation in React applications.
It allows you to create single-page applications
(SPAs) with multiple views or pages that can
be navigated through without the need to
reload the entire page.
React Router is often used to build dynamic
and interactive user interfaces in React
applications.
REACTJS-ROUTER:

Command to set up routing in an application:

npm install react-router

REACTJS-ROUTER:

Example:
function App() {
return (
<Router>
<div>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
</Router>
);
}
export default App;
REACTJS-ROUTER:
In this example:

<Router> wraps your application and provides the routing

functionality.

<Switch> is used to ensure that only one route is rendered at

a time. It selects the first route that matches the current URL.

<Route> components define the mapping between a URL path

and a React component that should be rendered when the
path matches.
REACTJS-ROUTER:

You can now create links to navigate between these routes. For
example, in your Home component, you can add a link to the About
page:

import React from 'react';

import { Link } from 'react-router-dom';
function Home() {
return (
<div>
<h2>Home</h2>
<p>Welcome to the home page!</p>
<Link to="/about">About</Link>
</div>
);
}
export default Home;
REACTJS-SINGLE PAGE APP:
What Is A Single Page Application?
A Single Page Application (SPA) is a web application
that is designed to be displayed as a single, static
page.
• This approach makes the application more user-
friendly and easier to navigate, as users can see
the entire application at once.
• With a traditional web application, users are
redirected to a new page every time they make a
change to their data, which can be frustrating if
they want to edit information in multiple places.
• In contrast, SPA-based applications are
completely focused on one thing at a time,
allowing users to work through each step in a
consistent manner.
REACTJS-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.
• React Transition Group API provides three main
components. These are:
1.Transition
2.CSSTransition