What is SPA? Single Page Application Explained
What is SPA? Single Page Application
How Does SPA Work?
A (SPA) Single Page Application operates by loading single
HTML page into the browser and dynamically updating its content without
requiring SPA page refresh. JavaScript
is use to control data transfer, user interactions, and navigation.
A (SPA) Single Page Application operates by
loading a single HTML page into the browser and dynamically updating its
content without requiring a SPA page refresh. JavaScript is used to control
data transfer, user interactions, and navigation.
SPA Working Process Diagram
SPA Architecture Flowchart
Architecture of SPA
A Single
Page Application (SPA) operates by loading a single HTML page into browser and
dynamically updating its content without requiring refresh page. JavaScript is used to control
data transfer, user interactions, and navigation.
The
browser makes a request to the server when a user first access an SPA website.
The necessary HTML, CSS, and JavaScript files are returned by the server.
JavaScript takes over the programme and shows the necessary content after these
resources have been loaded.
SPA Architecture Diagram
Simple SPA Architecture Flowchart
The
request is processed by the server.
SPA vs MPA
A (SAP)
Single Page Application operates by loading a single HTML page into browser and dynamically updating its content
without page refresh. JavaScript is used to control data transfer, user
interactions, and navigation.
The browser makes a request to the server when a user first access an SPA
website. The necessary HTML, CSS, and JavaScript files are returned by the
server. JavaScript takes over the programme and shows the necessary content
after these resources have been loaded.
The programme modifies the content that is seen when users click on buttons or
links without requesting an entirely new HTML page. The SPA uses technologies
like Fetch API or Axios to send an API call to the server if more information
is required.
The request is processed by the server.
SPA vs MPA Comparison Table
Features |
SPA |
MPA |
|
1) Full
Form |
Single
Page Application |
Multi
Page Application |
|
2) Page
Loading |
Updates
content dynamically |
Loads
separate pages |
|
3) Navigation |
Client-side
routing |
Usually
server-side navigation |
|
User 4) Experience |
Smooth
navigation |
Traditional
navigation |
|
|
|
|
|
5)Development |
JavaScript frameworks commonly used |
Multiple frontend approaches |
|
6) SEO |
Requires careful SEO implementation |
Often
straightforward with server-rendered HTML |
|
&)Examples |
Gmail,
Google Maps |
Traditional
news websites |
React SPA Code Example
A React
Single Page Application (SPA) allows users to navigate between different
sections of a website without reloading the entire webpage. React components
and React Router help developers create this type of interactive application.
In this example, we will create a simple React SPA with three pages: Home, About, and Contact.
1.
Create a React Project
First,
install Node.js and create a React project using Vite.
Open your
terminal and run:
npm create
vite@latest react-spa-demo -- --template react
cd
react-spa-demo
npm
install
3. Create the Project Structure
Organize
your project as follows:
react-spa-demo/
│
├── src/
│ ├──
App.jsx
│ ├──
main.jsx
│ └── index.css
│
├──
package.json
└── index.html
4.
Create Home Component
Create a
Home page component.
File:
Home.jsx
function
Home() {
return (
<div>
<h1>Welcome to Home Page</h1>
<p>This is a React Single Page
Application.</p>
</div>
);
}
export default Home;
5.
Create About Component
File:
About.jsx
function
About() {
return (
<div>
<h1>About Us</h1>
<p>Learn more about our React
website.</p>
</div>
);
}
6. Create Contact Component
File:
Contact.jsx
function
Contact() {
return (
<div>
<h1>Contact Us</h1>
<p>Email:
example@gmail.com</p>
</div>
);
}
7.
Configure React Router
Now open
App.jsx and add the following code:
File:
App.jsx
BrowserRouter,
Routes,
Route,
Link
} from
"react-router-dom";
import
About from "./About";
import
Contact from "./Contact";
return (
<BrowserRouter>
<Link
to="/">Home</Link> |
<Link
to="/about">About</Link> |
<Link
to="/contact">Contact</Link>
</nav>
<Route path="/"
element={<Home />} />
<Route path="/about"
element={<About />} />
<Route path="/contact"
element={<Contact />} />
</Routes>
);
}
8.
Configure Main.jsx
File:
main.jsx
import
React from "react";
import
ReactDOM from "react-dom/client";
import App
from "./App";
import
"./index.css";
document.getElementById("root")
).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
9. Add
CSS Styling
File:
index.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background: #f4f4f4;
}
background: #202b46;
padding: 18px;
}
color: white;
text-decoration: none;
margin: 15px;
font-weight: bold;
}
color: #202b46;
}
font-size: 18px;
}
10. Run
the React Application
Execute
this command in your terminal:
npm run
dev
Open the
local development URL displayed in your terminal, usually
http://localhost:5173/.
11. Expected Output
- BrowserRouter enables
client-side routing.
- Link provides navigation
between pages.
- Routes groups the route
definitions.
- Route connects a URL path to a
component.
- React displays the selected
component when the URL changes.
13. Common Mistakes
- Forgetting to install
react-router-dom.
- Using an incorrect component
import path.
- Forgetting to export page
components.
- Using ordinary anchor links
instead of React Router's Link for internal navigation.
- Forgetting to configure the
hosting server for SPA route fallback when deploying.
Frequently Asked Questions
- What is a Single Page
Application?
- How does SPA work?
- Is React a Single Page
Application?
- What is the difference between
SPA and MPA?
- What are the advantages and
disadvantages of SPA?
Comments
Post a Comment