Restaurant Management: Project Report Submitted in Partial Fulfilment of The Requirements For The Award of The Degree of

Restaurant Management
Project Report
Submitted in partial fulfilment of the requirements for the
award of the degree of
BACHELOR OF TECHNOLOGY
(COMPUTER SCIENCE AND ENGINEERING)
Undertaken at:
Udemy
Submitted by:
Piyush
Roll No.: 12001307
Regd. No.: 7141-2020-707
Department of Computer Science and Engineering

Punjabi University, Patiala
2021
1
CERTIFICATE
DECLARATION
2
I, PIYUSH, hereby affirm that the project report titled “RESTURANT MANAGMENT”,
submitted toPunjabi University, Patiala in partial fulfilment of the requirements for the award
of degree of B.Tech. (Computer Science and Engineering)is an authentic record of my own
work and that to the best of my knowledge and belief, it contains no written material which
has been accepted for the qualification of any other degree or diploma of a university or other
institution of higher learning except where due acknowledge is made.
Signature of student:_____________
Name of student:________________
Roll no: _______________________
Regd. No.: _____________________
ACKNOWLEDGEMENT
3
I take this opportunity to express my gratitude and respect to all those who have helped me
throughout my training period on the project. This project would not have been possible
without the valuable guidance of my Course Instructor “Maximilian Schwarzmüller” who
taught me the basic concepts of REACT and Firebase (Database) and whose guidance
throughout the entire work enabled me to complete this project successfully.
I owe my regards to the entire faculty of the department of Computer Science at PUNJABI
UNIVERSITY, PATIALA from where I have learnt the basics of Computer Science and I
express my sincere thanks to all my fellow course mates who supported me in my project
through various informal discussions which were very valuable to the successful completion
of my project.
Piyush
12001307
ABSTRACT
4
The Online Restaurant Management System provides convenience for the customers. It
overcomes the disadvantages of the traditional queuing system. This system increases the
takeaway of foods than visitors. Therefore, this system enhances the speed and
standardization of taking the order from the customer. It provides a better communication
platform. The user’s details are noted electronically. This System set up menu online and the
customers easily places the order with a simple mouse click. By using the food menu online
anyone can easily track the orders, maintain customer's database and improve food delivery
service. This system allows the user to select the desired food items from the displayed menu.
The user orders the food items. The payment can be made pay-on-delivery system. The user’s
details are maintained confidential.
5
CONTENTS
TECHNOLOGY....................................................................................................................................8
REACT JS.............................................................................................................................................8
WHY REACT?......................................................................................................................................9
FEATURES OF REACT.....................................................................................................................11
COMPONENTS, STATE, AND PROPS............................................................................................14
REACT COMPONENT LIFE-CYCLE...............................................................................................16
1. INITIAL PHASE.......................................................................................................................17
2. MOUNTING PHASE................................................................................................................17
3. UPDATING PHASE..................................................................................................................18
4. UNMOUNTING PHASE..........................................................................................................19
REACT FORMS.................................................................................................................................21
Creating Form..................................................................................................................................21
Uncontrolled component.............................................................................................................21
Controlled Component.................................................................................................................23
REACT EVENTS................................................................................................................................24
REACT FRAGMENTS.......................................................................................................................27
Why we use Fragments?..................................................................................................................28
Fragments Short Syntax...................................................................................................................28
Keyed Fragments.............................................................................................................................29
REACT ROUTER...............................................................................................................................29
Need of React Router......................................................................................................................30
React Router Installation.................................................................................................................30
Components in React Router...........................................................................................................30
What is Route?................................................................................................................................32
Adding Navigation using Link component.......................................................................................34
What is < Link> component?.......................................................................................................34
<Link> vs <NavLink>.................................................................................................................38
React Router Switch........................................................................................................................38
React Router <Redirect>..................................................................................................................40
Nested Routing in React..................................................................................................................41
Benefits Of React Router.................................................................................................................44
REACT HOOKS.................................................................................................................................45
When to use a Hooks.......................................................................................................................45
6
Rules of Hooks.................................................................................................................................45
1. Only call Hooks at the top level...............................................................................................45
2. Only call Hooks from React functions.....................................................................................45
Pre-requisites for React Hooks........................................................................................................45
React Hooks Installation..................................................................................................................46
Hooks State......................................................................................................................................46
Hooks Effect.....................................................................................................................................48
Custom Hooks..................................................................................................................................50
Built-in Hooks..................................................................................................................................51
FIREBASE – INTRODUCTION........................................................................................................52
Brief History of Firebase:.................................................................................................................52
Features of Firebase:.......................................................................................................................53
Grow your app:............................................................................................................................56
Pros and Cons of Using Firebase:.....................................................................................................57
Companies using Firebase...............................................................................................................57
ABOUT THE PROJECT.....................................................................................................................58
WHAT IS ONLINE RESTAURANT MANAGEMENT SYSTEM?..............................................................58
BACKGROUND OF THE PROJECT......................................................................................................58
OBJECTIVE OF THE PROJECT............................................................................................................59
SCOPE OF THE PROJECT...................................................................................................................59
REQUIREMENT ANALYSIS................................................................................................................60
SYSTEM REQUIREMENT...................................................................................................................60
USER REQUIREMENTS......................................................................................................................61
SCREENSHOTS.................................................................................................................................62
CONCLUSION...................................................................................................................................68
REFERENCES....................................................................................................................................69
7
TECHNOLOGY
REACT JS
React is a JavaScript library created for building fast and interactive user interfaces for web
and mobile applications. It is an open-source, component-based, front-end library responsible
only for the application’s view layer. In Model View Controller (MVC) architecture, the view
layer is responsible for how the app looks and feels. React was created by Jordan Walke,
a software engineer at Facebook.
Fig: MVC architecture
WHY REACT?
React’s popularity today has eclipsed that of all other front-end development frameworks.
Here is why:
 Easy creation of dynamic applications: React makes it easier to create dynamic web

applications because it requires less coding and offers more functionality, as opposed to
JavaScript, where coding often gets complex very quickly.
 Improved performance: React uses Virtual DOM, thereby creating web applications

faster. Virtual DOM compares the components’ previous states and updates only the items
8
in the Real DOM that were changed, instead of updating all of the components again, as
conventional web applications do.
 Reusable components: Components are the building blocks of any React application,

and a single app usually consists of multiple components. These components have their
logic and controls, and they can be reused throughout the application, which in turn
dramatically reduces the application’s development time.
 Unidirectional data flow: React follows a unidirectional data flow. This means that
when designing a React app, developers often nest child components within parent
components. Since the data flows in a single direction, it becomes easier to debug errors
and know where a problem occurs in an application at the moment in question.
 Small learning curve: React is easy to learn, as it mostly combines basic HTML and
JavaScript concepts with some beneficial additions. Still, as is the case with other tools and
frameworks, you have to spend some time to get a proper understanding of React’s library.
 It can be used for the development of both web and mobile apps: We already know
that React is used for the development of web applications, but that’s not all it can do.
There is a framework called React Native, derived from React itself, that is hugely popular
and is used for creating beautiful mobile applications. So, in reality, React can be used for
making both web and mobile applications.
 Dedicated tools for easy debugging: Facebook has released a Chrome extension that
can be used to debug React applications. This makes the process of debugging React web
applications faster and easier.
The above reasons more than justify the popularity of the React library and why it is being
adopted by a large number of organizations and businesses. Now let’s familiarize ourselves
with React’s features.
9
FEATURES OF REACT
Fig: React Features
JSX - JAVASCRIPT SYNTAX EXTENSION

JSX is a syntax extension to 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. This makes the code easier to understand and debug, as it avoids
the usage of complex JavaScript DOM structures.
const name = 'Simplilearn';
const greet = <h1>Hello, {name}</h1>;
The above code shows how JSX is implemented in React. It is neither a string nor HTML.
Instead, it embeds HTML into JavaScript code.
VIRTUAL DOM
React keeps a lightweight representation of the “real” DOM in the memory, and that is
known as the “virtual” DOM (VDOM). Manipulating real DOM is much slower than
manipulating VDOM because nothing gets drawn on the screen. When the state of an object
changes, VDOM changes only that object in the real DOM instead of updating all of the
objects.
10
It may all seem a bit overwhelming for now, so let’s first understand what DOM is, and then
we’ll go through how VDOM and real DOM interact with each other.
 What is the Document Object Model (DOM)?
Fig: DOM of a Webpage
DOM (Document Object Model) treats an XML or HTML document as a tree structure in
which each node is an object representing a part of the document.
 How do Virtual DOM and React DOM interact with each other?
When the state of an object changes in a React application, VDOM gets updated. It then
compares its previous state and then updates only those objects in the real DOM instead of
updating all of the objects. This makes things move fast, especially when compared to
other front-end technologies that have to update each object even if only a single object
changes in the web application.
PERFORMANCE
React uses VDOM, which makes the web applications run much faster than those developed
with alternate front-end frameworks. React breaks a complex user interface into individual
components, allowing multiple users to work on each component simultaneously, thereby
speeding up the development time.
11
EXTENSIONS
React goes beyond simple UI design and has many extensions that offer complete application
architecture support. It provides server-side rendering, which entails rendering a normally
client-side only web application on the server, and then sends a fully rendered page to the
client. It also employs Flux and Redux extensively in web application development. Finally,
there is React Native, a popular framework derived from React, used to create cross-
compatible mobile applications.
ONE-WAY DATA BINDING

React’s one-way data binding keeps everything modular and fast. A unidirectional data flow
means that when a developer designs a React app, they often nest child components within
parent components. This way, a developer knows where and when an error occurs, giving
them better control of the whole web application.
Fig: One-way data binding
DEBUGGING
React applications are easy to test due to a large developer community. Facebook even
provides a small browser extension that makes React debugging faster and easier.
12
Fig: React Extension
This extension, for example, adds a React tab in the developer tools option within the
Chrome web browser. The tab makes it easy to inspect React components directly.
COMPONENTS, STATE, AND PROPS

COMPONENTS
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.
React splits the UI into independent, reusable parts that can be processed separately.
There are two types of components in React:
Fig: React Components
13
 Functional Components: These components have no state of their own and only
contain a render method, so they 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 components can hold and manage their state and have a
separate render method for returning 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>;
}
State
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. The change in state can happen as a response to user action or system-generated
events, and these changes determine the behavior of the component and how it will render.
class Greetings extends React.Component {
state = {
name: "World"
};
14
updateName() {
this.setState({ name: "Simplilearn" });
}
render() {
return(
<div>
{this.state.name}
</div>
)
}
Props
Props are short for properties. It is a React built-in object which stores the value of a tag’s
attributes and works similar to the HTML attributes. It provides a way to pass data from one
component to other components in the same way as arguments are passed in a function.
REACT COMPONENT LIFE-CYCLE
In ReactJS, every component creation process involves various lifecycle methods. These
lifecycle methods are termed as component's lifecycle. These lifecycle methods are not very
complicated and called at various points during a component's life. The lifecycle of the
component is divided into four phases. They are:
15
1. Initial Phase
2. Mounting Phase
3. Updating Phase
4. Unmounting Phase
Each phase contains some lifecycle methods that are specific to the particular phase. Let us
discuss each of these phases one by one.
1. INITIAL PHASE
It is the birth phase of the lifecycle of a ReactJS component. Here, the component starts its
journey on a way to the DOM. In this phase, a component contains the default Props and
initial State. These default properties are done in the constructor of a component. The initial
phase only occurs once and consists of the following methods.
o getDefaultProps()
It is used to specify the default value of this.props. It is invoked before the creation of
the component or any props from the parent is passed into it.
o getInitialState()
It is used to specify the default value of this.state. It is invoked before the creation of
the component.
2. MOUNTING PHASE
In this phase, the instance of a component is created and inserted into the DOM. It consists of
the following methods.
o componentWillMount()
This is invoked immediately before a component gets rendered into the DOM. In the
case, when you call setState() inside this method, the component will not re-render.
o componentDidMount()
This is invoked immediately after a component gets rendered and placed on the DOM.
Now, you can do any DOM querying operations.
o render()
This method is defined in each and every component. It is responsible for returning a
16
single root HTML node element. If you don't want to render anything, you can return
a null or false value.
3. UPDATING PHASE
It is the next phase of the lifecycle of a react component. Here, we get new Props and
change State. This phase also allows to handle user interaction and provide communication
with the components hierarchy. The main aim of this phase is to ensure that the component is
displaying the latest version of itself. Unlike the Birth or Death phase, this phase repeats
again and again. This phase consists of the following methods.
o componentWillRecieveProps()
It is invoked when a component receives new props. If you want to update the state in
response to prop changes, you should compare this.props and nextProps to perform
state transition by using this.setState() method.
o shouldComponentUpdate()
It is invoked when a component decides any changes/updation to the DOM. It allows
you to control the component's behavior of updating itself. If this method returns true,
the component will update. Otherwise, the component will skip the updating.
o componentWillUpdate()
It is invoked just before the component updating occurs. Here, you can't change the
component state by invoking this.setState() method. It will not be called,
if shouldComponentUpdate() returns false.
o render()
It is invoked to examine this.props and this.state and return one of the following
types: React elements, Arrays and fragments, Booleans or null, String and Number. If
shouldComponentUpdate() returns false, the code inside render() will be invoked
again to ensure that the component displays itself properly.
o componentDidUpdate()
It is invoked immediately after the component updating occurs. In this method, you
can put any code inside this which you want to execute once the updating occurs. This
method is not invoked for the initial render.
17
4. UNMOUNTING PHASE
It is the final phase of the react component lifecycle. It is called when a component instance
is destroyed and unmounted from the DOM. This phase contains only one method and is
given below.
o componentWillUnmount()
This method is invoked immediately before a component is destroyed and unmounted
permanently. It performs any necessary cleanup related task such as invalidating
timers, event listener, canceling network requests, or cleaning up DOM elements. If a
component instance is unmounted, you cannot mount it again.
EXAMPLE
1. import React, { Component } from 'react';
2.
3. class App extends React.Component {
4. constructor(props) {
5. super(props);
6. this.state = {hello: "JavaTpoint"};
7. this.changeState = this.changeState.bind(this)
8. }
9. render() {
10. return (
11. <div>
12. <h1>ReactJS component's Lifecycle</h1>
13. <h3>Hello {this.state.hello}</h3>
14. <button onClick = {this.changeState}>Click Here!</button>
15. </div>
16. );
17. }
18. componentWillMount() {
18
19. console.log('Component Will MOUNT!')
20. }
21. componentDidMount() {
22. console.log('Component Did MOUNT!')
23. }
24. changeState(){
25. this.setState({hello:"All!!- Its a great reactjs tutorial."});
26. }
27. componentWillReceiveProps(newProps) {
28. console.log('Component Will Recieve Props!')
29. }
30. shouldComponentUpdate(newProps, newState) {
31. return true;
32. }
33. componentWillUpdate(nextProps, nextState) {
34. console.log('Component Will UPDATE!');
35. }
36. componentDidUpdate(prevProps, prevState) {
37. console.log('Component Did UPDATE!')
38. }
39. componentWillUnmount() {
40. console.log('Component Will UNMOUNT!')
41. }
42. }
43. export default App;
19
REACT FORMS
Forms are an integral part of any modern web application. It allows the users to interact with
the application as well as gather information from the users. Forms can perform many tasks
that depend on the nature of your business requirements and logic such as authentication of
the user, adding user, searching, filtering, booking, ordering, etc. A form can contain text
fields, buttons, checkbox, radio button, etc.
Creating Form
React offers a stateful, reactive approach to build a form. The component rather than the
DOM usually handles the React form. In React, the form is usually implemented by using
controlled components.
There are mainly two types of form input in React.
1. Uncontrolled component
2. Controlled component
Uncontrolled component
The uncontrolled input is similar to the traditional HTML form inputs. The DOM itself
handles the form data. Here, the HTML elements maintain their own state that will be
updated when the input value changes. To write an uncontrolled component, you need to use
a ref to get form values from the DOM. In other words, there is no need to write an event
handler for every state update. You can use a ref to access the input field value of the form
from the DOM.
Example
In this example, the code accepts a field username and company name in an uncontrolled

component.
20
4. super(props);
5. this.updateSubmit = this.updateSubmit.bind(this);
6. this.input = React.createRef();
7. }
8. updateSubmit(event) {
9. alert('You have entered the UserName and CompanyName successfully.');
10. event.preventDefault();
11. }
12. render() {
13. return (
14. <form onSubmit={this.updateSubmit}>
15. <h1>Uncontrolled Form Example</h1>
16. <label>Name:
17. <input type="text" ref={this.input} />
18. </label>
19. <label>
20. CompanyName:
21. <input type="text" ref={this.input} />
22. </label>
23. <input type="submit" value="Submit" />
24. </form>
25. );
26. }
27. }
21
Controlled Component
In HTML, form elements typically maintain their own state and update it according to the
user input. In the controlled component, the input form element is handled by the component
rather than the DOM. Here, the mutable state is kept in the state property and will be updated
only with setState() method.
Controlled components have functions that govern the data passing into them on
every onChange event, rather than grabbing the data only once, e.g., when you click
a submit button. This data is then saved to state and updated with setState() method. This
makes component have better control over the form elements and data.
A controlled component takes its current value through props and notifies the changes
through callbacks like an onChange event. A parent component "controls" this changes by
handling the callback and managing its own state and then passing the new values as props to
the controlled component. It is also called as a "dumb component."
Example
4. super(props);
5. this.state = {value: ''};
6. this.handleChange = this.handleChange.bind(this);
7. this.handleSubmit = this.handleSubmit.bind(this);
8. }
9. handleChange(event) {
10. this.setState({value: event.target.value});
11. }
12. handleSubmit(event) {
13. alert('You have submitted the input successfully: ' + this.state.value);
14. event.preventDefault();
15. }
16. render() {
17. return (
22
18. <form onSubmit={this.handleSubmit}>
19. <h1>Controlled Form Example</h1>
20. <label>
21. Name:
22. <input type="text" value={this.state.value} onChange={this.handleChange
} />
23. </label>
24. <input type="submit" value="Submit" />
25. </form>
26. );
27. }
28. }
REACT EVENTS
An event is an action that could be triggered as a result of the user action or system generated
event. For example, a mouse click, loading of a web page, pressing a key, window resizes,
and other interactions are called events.
React has its own event handling system which is very similar to handling events on DOM
elements. The react event handling system is known as Synthetic Events. The synthetic event
is a cross-browser wrapper of the browser's native event.
Handling events with react have some syntactic differences from handling events on DOM.
These are:
23
1. React events are named as camelCase instead of lowercase.
2. With JSX, a function is passed as the event handler instead of a string. For example:
Event declaration in plain HTML:
1. <button onclick="showMessage()">
2. Hello JavaTpoint
3. </button>
Event declaration in React:
1. <button onClick={showMessage}>
2. Hello JavaTpoint
3. </button>
3. In react, we cannot return false to prevent the default behavior. We must

call preventDefault event explicitly to prevent the default behavior. For example:
In plain HTML, to prevent the default link behavior of opening a new page, we can write:
1. <a href="#" onclick="console.log('You had clicked a Link.'); return false">
2. Click_Me
3. </a>
In React, we can write it as:
1. function ActionLink() {
2. function handleClick(e) {
3. e.preventDefault();
4. console.log('You had clicked a Link.');
5. }
6. return (
7. <a href="#" onClick={handleClick}>
8. Click_Me
9. </a>
10. );
11. }
24
In the above example, e is a Synthetic Event which defines according to the W3C spec.
Now let us see how to use Event in React.
Example
In the below example, we have used only one component and adding an onChange event.
This event will trigger the changeText function, which returns the company name.
4. super(props);
5. this.state = {
6. companyName: ''
7. };
8. }
9. changeText(event) {
10. this.setState({
11. companyName: event.target.value
12. });
13. }
14. render() {
15. return (
16. <div>
17. <h2>Simple Event Example</h2>
18. <label htmlFor="name">Enter company name: </label>
19. <input type="text" id="companyName" onChange={this.changeText.bind(t
his)}/>
20. <h4>You entered: { this.state.companyName }</h4>
21. </div>
22. );
23. }
24. }
25
REACT FRAGMENTS
In React, whenever you want to render something on the screen, you need to use a render
method inside the component. This render method can return single elements
or multiple elements. The render method will only render a single root node inside it at a
time. However, if you want to return multiple elements, the render method will require a 'div'
tag and put the entire content or elements inside it. This extra node to the DOM sometimes
results in the wrong formatting of your HTML output and also not loved by the many
developers.
Example
1. // Rendering with div tag
3. render() {
4. return (
5. //Extraneous div element
6. <div>
7. <h2> Hello World! </h2>
8. <p> Welcome to the JavaTpoint. </p>
9. </div>
10. );
11. }
12. }
To solve this problem, React introduced Fragments from the 16.2 and above version.

Fragments allow you to group a list of children without adding extra nodes to the DOM.
Syntax:
1. <React.Fragment>
2. <h2> child1 </h2>
3. <p> child2 </p>
4. .. ..... .... ...
5. </React.Fragment>
26
Example
1. // Rendering with fragments tag
3. render() {
4. return (
5. <React.Fragment>
7. <p> Welcome to the JavaTpoint. </p>
9. );
10. }
11. }
Why we use Fragments?
The main reason to use Fragments tag is:
1. It makes the execution of code faster as compared to the div tag.

2. It takes less memory.
Fragments Short Syntax
There is also another shorthand exists for declaring fragments for the above method. It looks
like empty tag in which we can use of '<>' and '' instead of the 'React.Fragment'.
Example
1. //Rendering with short syntax
2. class Columns extends React.Component {
3. render() {
4. return (
5. <>
7. <p> Welcome to the JavaTpoint </p>
27
8. </>
9. );
10. }
11. }
Keyed Fragments
The shorthand syntax does not accept key attributes. You need a key for mapping a collection
to an array of fragments such as to create a description list. If you need to provide keys, you
have to declare the fragments with the explicit <React.Fragment> syntax.
Example
1. Function = (props) {
2. return (
3. <Fragment>
4. {props.items.data.map(item => (
5. // Without the 'key', React will give a key warning
6. <React.Fragment key={item.id}>
7. <h2>{item.name}</h2>
8. <p>{item.url}</p>
9. <p>{item.description}</p>
11. ))}
12. </Fragment>
13. )
14. }
REACT ROUTER
Routing is a process in which a user is directed to different pages based on their action or
request. ReactJS Router is mainly used for developing Single Page Web Applications. React
Router is used to define multiple routes in the application. When a user types a specific URL
28
into the browser, and if this URL path matches any 'route' inside the router file, the user will
be redirected to that particular route.
React Router is a standard library system built on top of the React and used to create routing
in the React application using React Router Package. It provides the synchronous URL on the
browser with data that will be displayed on the web page. It maintains the standard structure
and behavior of the application and mainly used for developing single page web applications.
Need of React Router
React Router plays an important role to display multiple views in a single page application.
Without React Router, it is not possible to display multiple views in React applications. Most
of the social media websites like Facebook, Instagram uses React Router for rendering
multiple views.
React Router Installation
React contains three different packages for routing. These are:
1. react-router: It provides the core routing components and functions for the React
Router applications.
2. react-router-native: It is used for mobile applications.
3. react-router-dom: It is used for web applications design.
It is not possible to install react-router directly in your application. To use react routing, first,
you need to install react-router-dom modules in your application. The below command is
used to install react router dom.
1. $ npm install react-router-dom --save
Components in React Router
There are two types of router components:
o <BrowserRouter>: It is used for handling the dynamic URL.
o <HashRouter>: It is used for handling the static request.
Example
29
Step-1: In our project, we will create two more components along with App.js, which is
already present.
About.js
1. import React from 'react'
2. class About extends React.Component {
3. render() {
4. return <h1>About</h1>
5. }
6. }
7. export default About
Contact.js
2. class Contact extends React.Component {
3. render() {
4. return <h1>Contact</h1>
5. }
6. }
7. export default Contact
App.js
3. render() {
4. return (
5. <div>
6. <h1>Home</h1>
7. </div>
8. )
9. }
10. }
11. export default App
30
Step-2: For Routing, open the index.js file and import all the three component files in it.
Here, you need to import line: import { Route, Link, BrowserRouter as Router } from
'react-router-dom' which helps us to implement the Routing. Now, our index.js file looks
like below.
What is Route?
It is used to define and render component based on the specified path. It will accept
components and render to define what should be rendered.
Index.js
1. import React from 'react';
2. import ReactDOM from 'react-dom';
3. import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
4. import './index.css';
5. import App from './App';
6. import About from './about'
7. import Contact from './contact'
8.
9. const routing = (
10. <Router>
11. <div>
12. <h1>React Router Example</h1>
13. <Route path="/" component={App} />
14. <Route path="/about" component={About} />
15. <Route path="/contact" component={Contact} />
16. </div>
17. </Router>
18. )
19. ReactDOM.render(routing, document.getElementById('root'));
Step-3: Open command prompt, go to your project location, and then type npm start. You
will get the following screen.
31
Now, if you enter manually in the browser: localhost:3000/about, you will
see About component is rendered on the screen.
Step-4: In the above screen, you can see that Home component is still rendered. It is because
the home path is '/' and about path is '/about', so you can observe that slash is common in
both paths which render both components. To stop this behavior, you need to use
the exact prop. It can be seen in the below example.
Index.js
32
9. <Router>
10. <div>
12. <Route exact path="/" component={App} />
15. </div>
16. </Router>
17. )
Output
Adding Navigation using Link component
Sometimes, we want to need multiple links on a single page. When we click on any of that

particular Link, it should load that page which is associated with that path
without reloading the web page. To do this, we need to import <Link> component in
the index.js file.
What is < Link> component?
This component is used to create links which allow to navigate on different URLs and render
its content without reloading the webpage.
Example
Index.js
33
8.
10. <Router>
11. <div>
13. <ul>
14. <li>
15. <Link to="/">Home</Link>
16. </li>
17. <li>
18. <Link to="/about">About</Link>
19. </li>
20. <li>
21. <Link to="/contact">Contact</Link>
22. </li>
23. </ul>
27. </div>
28. </Router>
29. )
34
Output
After adding Link, you can see that the routes are rendered on the screen. Now, if you click
on the About, you will see URL is changing and About component is rendered.
Now, we need to add some styles to the Link. So that when we click on any particular link, it
can be easily identified which Link is active. To do this react router provides a new
trick NavLink instead of Link. Now, in the index.js file, replace Link from Navlink and add
properties activeStyle. The activeStyle properties mean when we click on the Link, it should
have a specific style so that we can differentiate which one is currently active.
3. import { BrowserRouter as Router, Route, Link, NavLink } from 'react-router-dom'
35
8.
10. <Router>
11. <div>
13. <ul>
14. <li>
15. <NavLink to="/" exact activeStyle={
16. {color:'red'}
17. }>Home</NavLink>
18. </li>
19. <li>
20. <NavLink to="/about" exact activeStyle={
21. {color:'green'}
22. }>About</NavLink>
23. </li>
24. <li>
25. <NavLink to="/contact" exact activeStyle={
26. {color:'magenta'}
27. }>Contact</NavLink>
28. </li>
29. </ul>
33. </div>
34. </Router>
35. )
36
Output
When we execute the above program, we will get the following screen in which we can see
that Home link is of color Red and is the only currently active link.
Now, when we click on About link, its color shown green that is the currently active link.
<Link> vs <NavLink>
The Link component allows navigating the different routes on the websites, whereas NavLink
component is used to add styles to the active routes.
React Router Switch
The <Switch> component is used to render components only when the path will be matched.
Otherwise, it returns to the not found component.
37
To understand this, first, we need to create a notfound component.
notfound.js
2. const Notfound = () => <h1>Not found</h1>
3. export default Notfound
Now, import component in the index.js file. It can be seen in the below code.
Index.js
3. import { BrowserRouter as Router, Route, Link, NavLink, Switch } from 'react-
router-dom'
8. import Notfound from './notfound'
9.
11. <Router>
12. <div>
14. <ul>
15. <li>
17. {color:'red'}
19. </li>
20. <li>
22. {color:'green'}
38
24. </li>
25. <li>
29. </li>
30. </ul>
31. <Switch>
35. <Route component={Notfound} />
36. </Switch>
37. </div>
38. </Router>
39. )
Output
If we manually enter the wrong path, it will give the not found error.
React Router <Redirect>
39
A <Redirect> component is used to redirect to another route in our application to maintain
the old URLs. It can be placed anywhere in the route hierarchy.
Nested Routing in React
Nested routing allows you to render sub-routes in your application. It can be understood in

the below example.
Example
index.js
3. import { BrowserRouter as Router, Route, Link, NavLink, Switch } from 'react-
router-dom'
8. import Notfound from './notfound'
9.
11. <Router>
12. <div>
14. <ul>
15. <li>
17. {color:'red'}
19. </li>
20. <li>
22. {color:'green'}
40
24. </li>
25. <li>
29. </li>
30. </ul>
31. <Switch>
35. <Route component={Notfound} />
36. </Switch>
37. </div>
38. </Router>
39. )
In the contact.js file, we need to import the React Router component to implement

the subroutes.
contact.js
2. import { Route, Link } from 'react-router-dom'
3.
4. const Contacts = ({ match }) => <p>{match.params.id}</p>
5.
6. class Contact extends React.Component {
7. render() {
8. const { url } = this.props.match
9. return (
10. <div>
11. <h1>Welcome to Contact Page</h1>
12. <strong>Select contact Id</strong>
41
13. <ul>
14. <li>
15. <Link to="/contact/1">Contacts 1 </Link>
16. </li>
17. <li>
19. </li>
20. <li>
22. </li>
23. <li>
25. </li>
26. </ul>
27. <Route path="/contact/:id" component={Contacts} />
28. </div>
29. )
30. }
31. }
32. export default Contact
Output
When we execute the above program, we will get the following output.
42
After clicking the Contact link, we will get the contact list. Now, selecting any contact, we
will get the corresponding output. It can be shown in the below example.
Benefits Of React Router
The benefits of React Router is given below:
o In this, it is not necessary to set the browser history manually.
o Link uses to navigate the internal links in the application. It is similar to the anchor
tag.
o It uses Switch feature for rendering.
o The Router needs only a Single Child element.
o In this, every component is specified in .
43
REACT HOOKS
Hooks are the new feature introduced in the React 16.8 version. It allows you to use state and
other React features without writing a class. Hooks are the functions which "hook into" React
state and lifecycle features from function components. It does not work inside classes.
Hooks are backward-compatible, which means it does not contain any breaking changes.
Also, it does not replace your knowledge of React concepts.
When to use a Hooks
If you write a function component, and then you want to add some state to it, previously you
do this by converting it to a class. But, now you can do it by using a Hook inside the existing
function component.
Rules of Hooks
Hooks are similar to JavaScript functions, but you need to follow these two rules when using
them. Hooks rule ensures that all the stateful logic in a component is visible in its source
code. These rules are:
1. Only call Hooks at the top level
Do not call Hooks inside loops, conditions, or nested functions. Hooks should always be used
at the top level of the React functions. This rule ensures that Hooks are called in the same
order each time a components renders.
2. Only call Hooks from React functions
You cannot call Hooks from regular JavaScript functions. Instead, you can call Hooks from
React function components. Hooks can also be called from custom Hooks.
Pre-requisites for React Hooks
1. Node version 6 or above

2. NPM version 5.2 or above
44
3. Create-react-app tool for running the React App
React Hooks Installation
To use React Hooks, we need to run the following commands:
1. $ npm install react@16.8.0-alpha.1 --save
2. $ npm install react-dom@16.8.0-alpha.1 --save
The above command will install the latest React and React-DOM alpha versions which
support React Hooks. Make sure the package.json file lists the React and React-DOM
dependencies as given below.
1. "react": "^16.8.0-alpha.1",
2. "react-dom": "^16.8.0-alpha.1",
Hooks State
Hook state is the new way of declaring a state in React app. Hook uses useState() functional
component for setting and retrieving state. Let us understand Hook state with the following
example.
App.js
1. import React, { useState } from 'react';
2. function CountApp() {
3. // Declare a new state variable, which we'll call "count"
4. const [count, setCount] = useState(0);
5.
6. return (
7. <div>
8. <p>You clicked {count} times</p>
9. <button onClick={() => setCount(count + 1)}>
10. Click me
11. </button>
12. </div>
13. );
45
14. }
15. export default CountApp;
output:
In the above example, useState is the Hook which needs to call inside a function component
to add some local state to it. The useState returns a pair where the first element is the current
state value/initial value, and the second one is a function which allows us to update it. After
that, we will call this function from an event handler or somewhere else. The useState is
similar to this.setState in class. The equivalent code without Hooks looks like as below.
App.js
1. import React, { useState } from 'react';
2.
3. class CountApp extends React.Component {
5. super(props);
6. this.state = {
7. count: 0
8. };
9. }
10. render() {
11. return (
12. <div>
13. <p><b>You clicked {this.state.count} times</b></p>
14. <button onClick={() => this.setState({ count: this.state.count + 1 })}>
46
15. Click me
16. </button>
17. </div>
18. );
19. }
20. }
21. export default CountApp;
Hooks Effect
The Effect Hook allows us to perform side effects (an action) in the function components. It
does not use components lifecycle methods which are available in class components. In other
words, Effects Hooks are equivalent to componentDidMount(), componentDidUpdate(), and
componentWillUnmount() lifecycle methods.
Side effects have common features which the most web applications need to perform, such
as:
o Updating the DOM,
o Fetching and consuming data from a server API,
o Setting up a subscription, etc.
Let us understand Hook Effect with the following example.
1. import React, { useState, useEffect } from 'react';
2.
3. function CounterExample() {
5.
6. // Similar to componentDidMount and componentDidUpdate:
7. useEffect(() => {
8. // Update the document title using the browser API
9. document.title = `You clicked ${count} times`;
10. });
11.
12. return (
47
13. <div>
15. <button onClick={() => setCount(count + 1)}>
16. Click me
17. </button>
18. </div>
19. );
20. }
21. export default CounterExample;
The above code is based on the previous example with a new feature which we set the
document title to a custom message, including the number of clicks.
Output:
In React component, there are two types of side effects:
1. Effects Without Cleanup

2. Effects With Cleanup
Effects without Cleanup
It is used in useEffect which does not block the browser from updating the screen. It makes
the app more responsive. The most common example of effects which don't require a cleanup
are manual DOM mutations, Network requests, Logging, etc.
Effects with Cleanup
48
Some effects require cleanup after DOM updation. For example, if we want to set up a
subscription to some external data source, it is important to clean up memory so that we don't
introduce a memory leak. React performs the cleanup of memory when the component
unmounts. However, as we know that, effects run for every render method and not just once.
Therefore, React also cleans up effects from the previous render before running the effects
next time.
Custom Hooks
A custom Hook is a JavaScript function. The name of custom Hook starts with "use" which
can call other Hooks. A custom Hook is just like a regular function, and the word "use" in the
beginning tells that this function follows the rules of Hooks. Building custom Hooks allows
you to extract component logic into reusable functions.
Let us understand how custom Hooks works in the following example.
1. import React, { useState, useEffect } from 'react';
2.
3. const useDocumentTitle = title => {
4. useEffect(() => {
5. document.title = title;
6. }, [title])
7. }
8.
9. function CustomCounter() {
11. const incrementCount = () => setCount(count + 1);
12. useDocumentTitle(`You clicked ${count} times`);
13. // useEffect(() => {
14. // document.title = `You clicked ${count} times`
15. // });
16.
17. return (
18. <div>
49
20. <button onClick={incrementCount}>Click me</button>
21. </div>
22. )
23. }
24. export default CustomCounter;
In the above snippet, useDocumentTitle is a custom Hook which takes an argument as a

string of text which is a title. Inside this Hook, we call useEffect Hook and set the title as
long as the title has changed. The second argument will perform that check and update the
title only when its local state is different than what we are passing in.
Built-in Hooks
Here, we describe the APIs for the built-in Hooks in React. The built-in Hooks can be divided
into two parts, which are given below.
Basic Hooks
o useState
o useEffect
o useContext
Additional Hooks
o useReducer
o useCallback
o useMemo
o useRef
o useImperativeHandle
o useLayoutEffect
o useDebugValue
50
FIREBASE – INTRODUCTION
Firebase is a product of Google which helps developers to build, manage, and grow their apps
easily. It helps developers to build their apps faster and in a more secure way. No
programming is required on the firebase side which makes it easy to use its features more
efficiently. It provides services to android, ios, web, and unity. It provides cloud storage. It
uses NoSQL for the database for the storage of data.
Brief History of Firebase:

Firebase initially was an online chat service provider to various websites through API and ran
with the name Envolve. It got popular as developers used it to exchange application data like
51
a game state in real time across their users more than the chats. This resulted in the separation
of the Envolve architecture and it’s chat system. The Envolve architecture was further
evolved by it’s founders James Tamplin and Andrew Lee,to what modern day Firebase is in
the year 2012.
Features of Firebase:
Mainly there are 3 categories in which firebase provides its services.
Build better applications

This feature mainly includes backend services that help developers to build and manage their
applications in a better way. Services included under this feature are :
 Realtime Database: The Firebase Realtime Database is a cloud-based NoSQL

database that manages your data at the blazing speed of milliseconds. In simplest term, it
can be considered as a big JSON file.
52
 Cloud Firestore: The cloud Firestore is a NoSQL document database that provides
services like store, sync, and query through the application on a global scale. It stores data
in the form of objects also known as Documents. It has a key-value pair and can store all
kinds of data like, strings, binary data, and even JSON trees.
53
 Authentication: Firebase Authentication service provides easy to use UI libraries and
SDKs to authenticate users to your app. It reduces the manpower and effort required to
develop and maintain the user authentication service. It even handles tasks like merging
accounts, which if done manually can be hectic.
 Remote Config: The remote configuration service helps in publishing updates to the

user immediately. The changes can range from changing components of the UI to
changing the behavior of the applications. These are often used while publishing seasonal
offers and contents to the application that has a limited life.
 Hosting: Firebase provides hosting of applications with speed and security. It can be
used to host Stati or Dynamic websites and microservices. It has the capability of hosting
an application with a single command.
 Firebase Cloud Messaging(FCM): The FCM service provides a connection between
the server and the application end users, which can be used to receive and send messages
and notifications. These connections are reliable and battery-efficient.
54
Improve app quality:
Here majorly all the application performance and testing features are provided. All the
features required to check and manage before launching your application officially are
provided in this section. Services included are:
 Crashlytics: It is used to get real-time crash reports. These reports can further be used
to improve the quality of the application. The most interesting part of this service is that it
gives a detailed description of the crash which is easier to analyze for the developers.
 Performance monitoring: This service gives an insight to the performance
characteristics of the applications. The performance monitoring SDK can be used to
receive performance data from the application, review them, and make changes to the
application accordingly through the Firebase console.
 Test lab: This service helps to test your applications on real and virtual devices
provided by Google which are hosted on the Google Datacenters. It is a cloud-based app-
testing infrastructure which supports testing the application on a wide variety of devices
and device configurations
 App Distribution: This service is used to pre-release applications that can be tested
by trusted testers. It comes in handy as decreases the time required to receive feedback
from the testers.
Grow your app:
This feature provides your application analytics and features that can help you to interact with
your user and make predictions that help you to grow your app. Services provided are:
 Google analytics: It is a Free app measurement service provided by Google that

provides insight on app usage and user engagement. It serves unlimited reporting for up to
500 distinct automatic or user-defined events using the Firebase SDK.
 Predictions: Firebase Predictions uses machine learning to the application’s analytics
data, further creating dynamic user segments that are based on your user’s behavior. These
are automatically available to use for the application through Firebase Remote Config, the
Notifications composer, Firebase In-App Messaging, and A/B Testing.
 Dynamic Links: Deeps Links are links that directly redirects user to specific content.
Firebase provides a Dynamic linking service that converts deep links into dynamic links
which can directly take the user to a specified content inside the application. Dynamic
links are used for converting web users to Native app users. It also increases the
55
conversion of user-to-user sharing. In addition, it can also be used to integrate social
media networks, emails, and SMS to increase user engagement inside the application.
 A/B Testing: It is used to optimize the application’s experience by making it run
smoothly, scaling the product, and performing marketing experiments.
Pros and Cons of Using Firebase:
Below listed are the advantages and disadvantages of using a Firebase backend:
Pros:
 Free plans for beginners.
 Real-time database is available.
 Growing Community.
 Numerous services are available.
Cons:
 It uses NoSQL so, people migrating from SQL might feel difficulty.
 It is still growing so, it is not tested to an extent.
Companies using Firebase
Below are some reputable organizations that rely on a firebase backend for its functioning:
 The New York Times

 Alibaba.com
 Gameloft
 Duolingo
 Trivago
 Venmo
 Lyft
56
ABOUT THE PROJECT
WHAT IS ONLINE RESTAURANT MANAGEMENT SYSTEM?
Online restaurant is a process of ordering food from a local restaurant or food cooperative
through a web page. Much like ordering consumer goods online, many of these allow
customers to keep accounts with them in order to make frequent ordering convenient. A
customer will search for a favourite restaurant, usually filtered via type of cuisine and choose
from available items, and choose delivery or pick-up. Payment can be amongst others either
by credit card or cash at restaurant, with the restaurant returning a percentage to the online
food company.
BACKGROUND OF THE PROJECT
The online restaurant management system is one of the latest servicers most fast food
restaurants in the western world are adopting. With this method, food is ordered online and
delivered to the customer. This is made possible through the use of electronic payment
system. Customers pay with their credit cards, although credit card customers can be served
even before they make payment either through cash or cheque. So, the system designed in
this project will enable customers go online and place order for their food. Due to the great
increase in the awareness of internet and the technologies associated with it, several
opportunities are coming up on the web. So many businesses and companies now venture
into their business with ease because of the internet. One of such business that the internet
introduced is an online food ordering system. In today’s age of fast food and take out, many
restaurants have chosen to focus on quick preparation and speedy delivery of orders rather
than offering a rich dining experience. Until recently, most of this delivery orders were
placed over the phone, but there are many disadvantages to this system. It is possible for
anybody to order any goods via the internet and have the goods delivered at his/her doorsteps.
But while trying to discuss the transfer method of the goods and services, attention is focused
on the payment mode. In other words, how possible is it to pay for goods and services via the
internet? This then leads to the discussion of the economic consequences of digital cash.
What I propose is an online ordering system originally designed for use in college cafeterias,
but just as applicable in any food delivery industry. The main advantage of this system is that
57
it greatly simplifies the ordering process for both the customer and the restaurant. The system
also greatly lightens the load on the restaurants end, as the entire process of taking orders is
automated. Once an order is placed on the webpage that will be designed, it is placed into the
database and then retrieved, in pretty much real-time, by a web application on the restaurants
end. The greatest advantage of this system is its FLEXIBILITY.
OBJECTIVE OF THE PROJECT
This project Online restaurant aim to be developed and brought to the market for maximum
use and to create an avenue through the web where users can log on to our server and make a
selection of whatever goods or food they like and subsequently pay via the internet. The
following are the objectives this would bring:
1. The home page of this web interfile provides an avenue where customers will be able to
gather more and reliable information about what the fast food industry really does.
2. The products and services offered would provide the customers with all the different
categories of available products that they can choose and select from.
3. This will provide a user friendly environment between the customer and employee thus
increasing the efficiency of the food ordering system.
4. There will also be an online purchase form with which valued customers will be using to
get in touch with any of their request whenever the need arises.
5. It will also help for easy retrieval of orders made by the customers.
SCOPE OF THE PROJECT
In this project, a fast food company is designed to enable customers order for food and get it
delivered accordingly and also to reduce the long queues of customers at the counter ordering
for food and to reduce the work lord on the employees. The following things are among other
things that are discussed and what the website would handle:
1. About the fast food company
2. The fast food and the services offered there
3. Online purchase
58
4. Type of food provided.
REQUIREMENT ANALYSIS
Requirements analysis in systems engineering and software engineering, encompasses those

tasks that go into determining the needs or conditions to meet for a new or altered product or
project, taking account of the possibly conflicting requirements of the various stakeholders,
analysing, documenting, validating and managing software or system requirements.
Requirements analysis is critical to the success or failure of a systems or software project.

The requirements should be documented, actionable, measurable, testable, traceable, related
to identified business needs or opportunities, and defined to a level of detail sufficient for
system design.
SYSTEM REQUIREMENT
Our system can be used in windows XP, windows 7, windows 8 and windows 10 with 32 bit,
and 64 bit operating system and also supported for other platform such as Mac.
 For Windows XP based computers, a 486 / 66 MHz or higher processor with 8 MB.
 For Windows 7, Windows 8 and Windows 10 based computers, higher processor with
2 GB ram.
SOFTWARE AND HARDWARE REQUIREMENTS
Software Requirements:
 Web server software: Node js.

 Server side scripting tool: NPM.
 Database tools: Firebase.
 Compatible operating system: Windows, Mac.
 Front end design tool: REACT , Html5, CSS3, Java script.
 Software tools: Visual Studio.
Hardware Requirements:
 Hardware recommend by all the software needed.

 RAM: 256MB or more
59
 Hard Drive: 10 GB or more
USER REQUIREMENTS
To deliver the best service to the users we tried to find out the users necessities which are
below:
Administrator Aspect:
 Monitoring the whole system from admin panel.

 Taking back up of the database.
 Modifying the records status.
 Signing in and signing up to the system.
 Changing their password.
Customer Aspect:
 Select food from list.

 Add items into the cart.
 Enter personal details.
 Place order.
60
SCREENSHOTS
Home Page
61
Menu Page
Cart Page
Personal Detail Page
62
Successfully Ordered Page
Admin Login Page
63
Admin Signup Page
Pending Orders Page
64
Complete Orders Page
Profile Page
65
Database Meal Page
Database Orders Page
66
CONCLUSION
The Online Restaurant Management System (ORMS) is for computerizing the working in a
restaurant. It is a great improvement over the manual system. The computerization of the
system has speed up the process. In the current system, the front office managing is very
slow. The restaurant managing system was thoroughly checked and tested with dummy data
and thus is found to be very reliable. The software takes care of all the requirements of an
average restaurant and is capable to provide easy and effective storage of information related
to customers that come up to the restaurant. It provides the home delivery facilities to the
customer. It also billing facility such as cash on or pay with online platforms.
LIMITATIONS
For upcoming improvement, there are some proposals to advance our project abilities.
 There is no email verification system.

 There is no online bill payment system.
 There is no security protection such as SSL, Sitelock.
 SMS alert system is not available right now.
 There is no online secured payment getting system.
FUTURE PLANS
We will add more features to improve our project.
 There will be email verification system.

 We will add SSL security system.
 New product update newsletter will be added.
 SMS alert system is easier for the customer.
 We also work on online payment gateway integration.
67
 Additionally, it is just a beginning. Supplementary the system may be used in various
other types of reviewing process.
REFERENCES
68

Restaurant Management: Project Report Submitted in Partial Fulfilment of The Requirements For The Award of The Degree of

Uploaded by

Document Information

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

Restaurant Management: Project Report Submitted in Partial Fulfilment of The Requirements For The Award of The Degree of

Uploaded by

Copyright:

Available Formats

Restaurant Management

Department of Computer Science and Engineering

 Easy creation of dynamic applications: React makes it easier to create dynamic web

 Improved performance: React uses Virtual DOM, thereby creating web applications

 Reusable components: Components are the building blocks of any React application,

JSX - JAVASCRIPT SYNTAX EXTENSION

const name = 'Simplilearn';

const greet = <h1>Hello, {name}</h1>;

 What is the Document Object Model (DOM)?

ONE-WAY DATA BINDING

Fig: One-way data binding

COMPONENTS, STATE, AND PROPS

There are two types of components in React:

return <h1>Welcome to {props.name}</h1>;

class Greeting extends React.Component {

return <h1>Welcome to {this.props.name}</h1>;

class Greetings extends React.Component {

this.setState({ name: "Simplilearn" });

REACT COMPONENT LIFE-CYCLE

There are mainly two types of form input in React.

In this example, the code accepts a field username and company name in an uncontrolled

Event declaration in plain HTML:

Event declaration in React:

3. In react, we cannot return false to prevent the default behavior. We must

In React, we can write it as:

Now let us see how to use Event in React.

To solve this problem, React introduced Fragments from the 16.2 and above version.

Why we use Fragments?

The main reason to use Fragments tag is:

1. It makes the execution of code faster as compared to the div tag.

Fragments Short Syntax

Need of React Router

React Router Installation

React contains three different packages for routing. These are:

Components in React Router

There are two types of router components:

o <BrowserRouter>: It is used for handling the dynamic URL.

o <HashRouter>: It is used for handling the static request.

Adding Navigation using Link component

Sometimes, we want to need multiple links on a single page. When we click on any of that

What is < Link> component?

Now, when we click on About link, its color shown green that is the currently active link.

React Router Switch

If we manually enter the wrong path, it will give the not found error.

React Router <Redirect>

Nested Routing in React

Nested routing allows you to render sub-routes in your application. It can be understood in

In the contact.js file, we need to import the React Router component to implement

Benefits Of React Router

The benefits of React Router is given below:

o In this, it is not necessary to set the browser history manually.

o The Router needs only a Single Child element.

o In this, every component is specified in .

When to use a Hooks

1. Only call Hooks at the top level

2. Only call Hooks from React functions

Pre-requisites for React Hooks

1. Node version 6 or above

React Hooks Installation

To use React Hooks, we need to run the following commands:

o Updating the DOM,

o Fetching and consuming data from a server API,

o Setting up a subscription, etc.