How to create Single Page Application in React

A Single Page Application (SPA) is a modern web application that loads a single HTML page and dynamically updates the content without refreshing the entire page. SPAs offer a seamless user experience, faster navigation, and better performance.

One of the most popular technologies for building SPAs is React JS, a JavaScript library developed by Meta (Facebook).

In this article, you’ll learn how to create a simple SPA using React, along with routing, component creation, and project structuring. This guide is perfect for beginners who want to understand how SPAs work in a React environment.

🛠️ Prerequisites

Before getting started, make sure you have:

• Basic knowledge of JavaScript and React

• Node.js and npm installed on your system

• A code editor like VS Code

📦 Step 1: Set Up the React Project

Use Create React App to quickly scaffold your SPA.

Command:

bashCopyEditnpx create-react-app my-spa
cd my-spa
npm start

This sets up a basic React project with all the necessary configurations.

🗂️ Step 2: Understand the Project Structure

pgsqlCopyEditmy-spa/
│
├── public/
├── src/
│   ├── App.js
│   ├── index.js
│   └── components/
│       ├── Home.js
│       ├── About.js
│       └── Contact.js

• App.js – Main component that includes routing logic

• components/ – Contains all the reusable components

🚦 Step 3: Install React Router

To enable navigation between different pages without full reloads, install React Router.

Command:

bashCopyEditnpm install react-router-dom

🧭 Step 4: Set Up Routing

Open App.js and configure routes using react-router-dom.

Sample Code (App.js):

javascriptCopyEditimport React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <Link to="/">Home</Link> | 
          <Link to="/about">About</Link> | 
          <Link to="/contact">Contact</Link>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

🧱 Step 5: Create Component Pages

Inside src/components, create individual files:

Home.js

javascriptCopyEditimport React from 'react';
function Home() {
  return <h2>Welcome to the Home Page</h2>;
}
export default Home;

About.js

javascriptCopyEditimport React from 'react';
function About() {
  return <h2>About Us</h2>;
}
export default About;

Contact.js

javascriptCopyEditimport React from 'react';
function Contact() {
  return <h2>Contact Page</h2>;
}
export default Contact;

🎨 Step 6: Add Basic Styling (Optional)

You can style your SPA using CSS or Tailwind CSS. Add styles in App.css or apply inline styles for simplicity.

✅ Step 7: Test Your SPA

Now, run your app using:

bashCopyEditnpm start

You’ll see your SPA with a navigation menu. Click through the links — content updates without a full page reload!

📚 Additional Tips

• Use 404 or fallback routes with * path to handle unknown URLs.

• Integrate state management tools like Redux or Context API for complex apps.

• Consider code splitting for performance optimization in large SPAs.

• Use React Helmet for managing SEO-related metadata dynamically.

Conclusion

Building a Single Page Application with React is a rewarding experience, especially for beginners looking to build modern, fast, and responsive web apps. With react-router-dom, reusable components, and a solid project structure, you can scale your SPA with ease.

Start small, practice routing and component creation, and explore advanced features as you grow!