Single Page Application concept in React - Mini Project: Build & Apply

Build a Simple Single Page Application (SPA) with React

📖 Scenario: You want to create a small website that shows different content without reloading the page. This is called a Single Page Application (SPA). You will use React to build it.

🎯 Goal: Build a React SPA with two buttons to switch between two views: Home and About. Clicking a button changes the displayed content without reloading the page.

📋 What You'll Learn

Create a React functional component called App.

Use useState to track the current page.

Add two buttons labeled Home and About.

Show different text depending on the selected page.

Switch content instantly when clicking buttons without page reload.

💡 Why This Matters

🌍 Real World

Single Page Applications are common for websites that want fast, smooth user experiences without full page reloads. React is a popular tool to build SPAs.

💼 Career

Understanding SPA basics with React is essential for frontend developer roles, enabling you to build modern interactive web apps.

1

Set up the React component and initial state

Create a React functional component called App. Inside it, use useState to create a state variable named page with the initial value 'home'.

React

import React, { useState } from 'react';

function App() {
  // Your code here
}

Need a hint?

Remember to import useState from React and call it inside your App function.

2

Add buttons to switch pages

Inside the App component, add two <button> elements labeled Home and About. Add onClick handlers to these buttons that call setPage with 'home' and 'about' respectively.

React

import React, { useState } from 'react';

function App() {
  const [page, setPage] = useState('home');

  // Add two buttons with onClick handlers here
}

Need a hint?

Use arrow functions inside onClick to call setPage with the correct page name.

3

Display content based on the current page

Below the buttons, add a conditional rendering that shows <p>Welcome to the Home page</p> when page is 'home', and <p>This is the About page</p> when page is 'about'. Use a JavaScript if or ternary expression inside the JSX.

React

import React, { useState } from 'react';

function App() {
  const [page, setPage] = useState('home');

  return (
    
       setPage('home')}>Home
       setPage('about')}>About
      {/* Add conditional content here */}
    
  );
}

Need a hint?

Use a ternary operator inside curly braces to show different paragraphs based on page.

4

Add basic accessibility and semantic HTML

Wrap the buttons inside a <nav> element with an aria-label of 'Main navigation'. Wrap the content paragraph inside a <main> element.

React

import React, { useState } from 'react';

function App() {
  const [page, setPage] = useState('home');

  return (
    
      {/* Wrap buttons in nav with aria-label */}
      {/* Wrap content in main */}
    
  );
}

Need a hint?

Use semantic HTML tags to improve accessibility and structure.