Zidio Web Development

ZIDIO DEVELOPMENT
Welcome to
Web
development
Presenters:
Animesh Singh
Date:
08 April 2024
Agenda
Create React application
Router
UseState & Useeffect
Class & function based components
Frontend and Backend connection (Theory)
Q&A
Refreshments
Create react App . . . .
Install node and for checking open your terminal
and check the version by typing node -v
Check NPM if its installed to check type on the
terminal npm -v
After that open your vs code and in a new file
folder and open its terminal and type
npx create-react-app app-name
npx or npm what ever you have you can do while
running.
After creating navigate to your app by typing
cd app-name
Run the development server by typing npm start
React router What is? How to
use?
React Router is a standard library for routing in React. It enables
the navigation among views of various components in a React
Application, allows changing the browser URL, and keeps the UI
in sync with the URL.
After creating the react App you need to install react router in
your application write the following code in your terminal
npm i react-router- dom
Importing react router dom

import { BrowserRouter, Routes, Route } from "react-router-dom";
React router components
The Main Components of React Router are:
BrowserRouter: BrowserRouter is a router implementation that uses the HTML5

history API(pushState, replaceState, and the popstate event) to keep your UI in sync
with the URL. It is the parent component that is used to store all of the other
components.
Routes: It’s a new component introduced in the v6 and an upgrade of the component.
The main advantages of Routes over Switch are:
Relative s and s
Routes are chosen based on the best match instead of being traversed in order.
Route: Route is the conditionally shown component that renders some UI when its
path matches the current URL.
Link: The link component is used to create links to different routes and implement
navigation around the application. It works like an HTML anchor tag.
useState and its use ?
useState is the hooks used in React, a JavaScript
library for building user interfaces.
useState is a hook that allows you to add state to
a functional component. State is a way of storing
and managing data within a component.Every
time the state variable is updated, React will re-
render the component and update the UI.
With useState, you can declare a state variable
and a function to update that variable.
We declare a state variable count and a function setCount to

update it. Every time the "Increment" button is clicked, the
incrementCount function is called and updates the count state
variable. The component then re-renders and the updated
count value is displayed.
useEffect and its use ?
useEffect is a hook used for side effects in React.
Side effects are actions that happen outside of
the normal flow of the component, such as
fetching data, subscriptions, or manually
manipulating the DOM.
useEffect allows you to perform these side
effects after the component has rendered.
we use useEffect to update the document title based

on the count state variable. The effect runs every time
count changes. So, whenever the count is incremented,
the document title will be updated to reflect the current
count.
What is Functional component ? in React
Functional components are a simple, fast, and easy way to
design and develop a component in React. They are used to
create components that return JSX and don’t have their state.
Functional components take props as input and return a React

element that describes what should be rendered on the screen.
They are simpler to write and understand in comparison with
class components. They are faster than class components as
they do not have state and lifecycle methods. The functional
component is also known as the stateless component as they
do not handle states.
Functional components use React hooks i.e. useState() to

provide state management and useEffect() to access the
component’s various stages in its lifecycle.
Ways to call functional
components . . . .
Call the function by using the name of the
function followed by the Parentheses.
Call the function by using the functional component method.

What is Class based component ? in React
Class components are complex in comparison to functional
components.
Class components also known as stateful components contain

state and lifecycle methods and are written with JavaScript ES6
classes. A state is an object that contains data that can be
updated and displayed in the component. Lifecycle methods
are called at different stages of the component’s life cycle,
such as when it is updated.
React component class extends the React.Component, a

method called render() is created that returns JSX element. This
method, Render in ReactJS is responsible for displaying content
on the screen by converting the app’s state into a DOM node.
React now supports writing class components as functions
using the new “hooks” API.
Q&A
Thank You

Zidio Web Development

Uploaded by

Copyright:

Available Formats

Zidio Web Development

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Zidio Web Development

Uploaded by

Copyright:

Available Formats

ZIDIO DEVELOPMENT

Importing react router dom

BrowserRouter: BrowserRouter is a router implementation that uses the HTML5

We declare a state variable count and a function setCount to

we use useEffect to update the document title based

Functional components take props as input and return a React

Functional components use React hooks i.e. useState() to

Call the function by using the functional component method.

Class components also known as stateful components contain

React component class extends the React.Component, a

You might also like