React Single Page Application

Single page applications, often called SPAs, are becoming increasingly popular among web developers. React is a JavaScript library that allows for the creation of complex and dynamic user interfaces – making it an ideal choice for single page applications. In this article, we’ll explore how to build a React single page application (SPA). We’ll discuss routing, data fetching and API integration to create a full-fledged SPA using React.

React provides developers with the tools they need to develop fast and efficient SPAs quickly. By utilizing the component-based structure of React, developers can easily break down their application into individual pieces that can be worked on independently without affecting other parts of the code base. This ensures that only relevant code is modified when changes or updates are made – reducing development time significantly compared to other frameworks or libraries.

Single page applications (SPAs) have been gaining popularity in recent years, particularly with the rise of web development frameworks such as React and Angular. According to the State of JS survey, which polled over 27,000 developers, 49.5% of respondents reported using React, a popular JavaScript library for building SPAs.

Whether you’re a beginner or an experienced developer, this article will provide you with a comprehensive understanding of single page applications Choosing React for creating your next Single Page Application would prove beneficial in terms of cost savings & maintainability over a long-term period. So let’s dive deep into building a Single Page Application using React!

Single Page Application vs Multi Page Application

What Is a Single Page Application (SPA)?

In contrast to traditional web applications, single-page applications (SPAs) only need to update the currently shown page in order to respond to user, eliminating the need to repeatedly load pages from the server. This approach avoids interrupting the user experience between successive pages, making the application behave more like a desktop application.

All necessary code, such as HTML, JavaScript, and CSS, is retrieved with a single page load in a SPA. The appropriate resources are dynamically loaded and added to the page as necessary while allowing navigation via link clicks or other interactive elements without requiring full reloads of content.

Advantages and Disadvantages

Let’s now look at a few advantages and disadvantages of Single Page Applications to understand better how they could be beneficial for us or not.

What Are Multi Page Applications?

A multi-page application (MPA) is a type of traditional web application that consists of several pages with its own URL and loads independently from the server when accessed. They are good if you make an online store, catalog website or a commercial website with several features over multiple pages.

Users can request an HTML page rendered in their browser by clicking a link or typing a URL into the address bar, which the server processes. Since the server is responsible for creating and delivering the HTML page whenever a new page is loaded, the server must make a new request to the client.

User interactions in typical multi page applications lead to page reloads, which can impede user flow and cause delays. This is because the entire page, including all static assets like images, stylesheets, and scripts, must be reloaded from the server.

MPAs are simple to create and keep up with. They could be slower to load and respond slowly compared to Single-Page Apps (SPAs), which is a downside.

MPAs are reliable when creating complex websites with numerous pages and unique URLs. However, SPAs are better suited for creating interactive, responsive applications that provide a seamless user experience.

Creating a Single Page App in React Using React Router

In this tutorial, you will make a simple React App using React Router.

Getting Ready To Start Building Your SPA Application

To implement the React app successfully, you must have the following on your machine.

Prerequisites

• Node.js: The latest version of Node.js on your machine.
• React Library: The latest version of React on your machine.
• A Code Editor: Any IDE that supports React.

Getting Started

Run the following Create React App create command in your terminal to initialize a React in your directory. create-react-app is a tool that initializes a react app with no build configuration.

npx create-react-app spa_react

You can now see a folder named spa_react in your directory. This is your React project folder. Navigate to this folder using the following command:

cd spa_react

This is how your package.json should look like.

{
  "name": "spa_react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.10.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Before moving on to building our application React router package needs to be installed as well. Run the following command to install react router dom package.

npm install react-router-dom

Building Your First Single Page Application

The way of developing this app is the same as that used for all previous apps. One central parent component will be there. The app’s pages will be modular subsystems working together to form the whole. React Router comes in handy when selecting which components to display and which to hide.

Since the project directory has boilerplate React code right now. Navigate to the src and public folders and remove the contents, respectively.

Now navigate to the public folder and create an index.html file with the following code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>React SPA Application</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Now add the following code to index.js file in the src folder.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

In the above code you have to import React and ReactDOM modules. ReactDOM is the library that provides methods to render these components into the DOM (Document Object Model).

The ReactDOM.createRoot() method is then called. This method creates a new root ReactDOM instance that will be used to render the App component. Then root.render() method is called with the App component as an argument. This method renders the App component into the DOM, replacing any existing content in the root element.

Now create a new file named App.js containing code for the main component.

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
        <div className="App">
          <h1>A Simple SPA made using React</h1>
          <ul className="header">
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
          </ul>
          <div className="pageContent">

          </div>
        </div>
    );
  }
}

export default App;

In the above code there is a component named App that renders a static single page application layout with a header and an empty content section. The header contains three navigation links to different routes.

Upon running the development server using the command npm start in your terminal, you can see the HTML code you added in the root component in the browser.

Let’s now create separate content pages for the routes defined earlier in the App.js file. Let’s start off with the Home Page Content. Create a new Home.js file in the src folder. Now add the following code:

import React, { Component } from "react";

class Home extends Component {
  render() {
    return (
      <div>
        <h3>SPA App - Home</h3>
        <p>This is a paragraph on the HomePage of the SPA App.</p>
      </div>
    );
  }
}

export default Home;

Moving on, now create a new file called About.js in the src folder and add the code below:

import React, { Component } from "react";

class About extends Component {
  render() {
    return (
      <div>
        <h3>SPA App - About</h3>
        <p>This is a paragraph on the About of the SPA App.</p>
        <p>The Team of SPA App.</p>
        <table>
        <thead>
            <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
            <td>1</td>
            <td>John Doe</td>
            <td>[email protected]</td>
            </tr>
            <tr>
            <td>2</td>
            <td>Jane Doe</td>
            <td>[email protected]</td>
            </tr>
            <tr>
            <td>3</td>
            <td>Bob Smith</td>
            <td>[email protected]</td>
            </tr>
        </tbody>
        </table>
      </div>
    );
  }
}

export default About;

Now create another file in the same directory named Contact.js and add the following code:

import React, { Component } from "react";

class Contact extends Component {
  render() {
    return (
      <div>
        <h3>SPA App - Contact</h3>
        <p>Please feel free to contact us with any questions or inquiries you may have. We are always happy to help!</p>
        <h4>Contact Details:</h4>
        <ul>
        <li><strong>Email:</strong> [email protected]</li>
        <li><strong>Phone:</strong> 1-800-555-1234</li>
        <li><strong>Address:</strong> 123 Main St, Anytown USA</li>
        </ul>
      </div>
    );
  }
}

export default Contact;

The content pages are now ready. Every file has a simple component with some content. The next step would be to use the components. Let’s now look at how to use this.

Working with React Router Dom

You will now have to add the Home, About, and Contact content pages into the parent App Component in order to be able to use it.

Now navigate to the App.js file.

Import Route, NavLink, HashRouter from the React Router Dom module by adding the following in the imports section

import { Route, NavLink, HashRouter } from "react-router-dom";

Next, also import the content pages components created earlier.

import Home from "./Home";

import About from "./About";

import Contact from "./Contact";

Let’s now make changes to the App component and integrate react router dom by appending the following changes in the code

class App extends Component {
  render() {
    return (
      <HashRouter>
        <div className="App">
          <h1>A Simple SPA made using React</h1>
          <ul className="header">
            <li><NavLink to="/">Home</NavLink></li>
            <li><NavLink to="/about">About</NavLink></li>
            <li><NavLink to="/contact">Contact</NavLink></li>
          </ul>
          <div className="content">
            <Route exact path="/" component={Home}/>
            <Route path="/stuff" component={Stuff}/>
            <Route path="/contact" component={Contact}/>
          </div>
        </div>
      </HashRouter>
    );
  }
}
export default App;

The App function now uses the HashRouter component from the react router dom library to manage client-side routing.

The header has the same navigation links but now it uses NavLink component instead of the basic anchor tag.

The content area now displays the content of each route, which is specified using the Route component from react router dom.

The complete App.js file should look like this

import React, { Component } from "react";
import { Route, NavLink, Routes, HashRouter } from "react-router-dom";

import Home from "./Home";
import About from "./About";
import Contact from "./Contact";

class App extends Component {
render() {
  return (
    <HashRouter>
      <div className="App">
        <h1>A Simple SPA made using React</h1>
        <ul className="header">
          <li><NavLink to="/">Home</NavLink></li>
          <li><NavLink to="/about">About</NavLink></li>
          <li><NavLink to="/contact">Contact</NavLink></li>
        </ul>
        <div className="content">
          <Routes>
            <Route exact path="/" element={<Home />}></Route>
            <Route exact path="/about" element={<About />}></Route>
            <Route exact path="/contact" element={<Contact />}></Route>
          </Routes>
        </div>
      </div>
    </HashRouter>
  );
}
}
export default App;

Now navigate to the terminal window and run the npm start command to run the development server to test the above code.

This is how the web pages should look like

Life Cycle of SPA

From the moment a user initiates a request for the web application until the moment they exit the page, this process is known as the single-page application’s lifecycle. A SPA goes through the following stages:

• Initialization: When a user launches a web app, the browser loads the application’s HTML, CSS, and JavaScript files. The application’s router and state management are both set up by the JavaScript code.
• Routing: When the application has been initialized, the router determines the best path to follow depending on the URL. The DOM is modified when the correct view or component has been loaded by the router.
• State Management: The state of the application is a snapshot of its current information and must be managed. A library, like Redux handles the state. The library triggers a re-rendering of the impacted components whenever the state changes.
• Rendering: While rendering, React.js uses a diffing method to figure out how few changes must be made to the DOM in order to accommodate an updated component. Then it is refreshed with the revised component.
• API Calls: They occur when an app responds to user input by requesting information from a remote server. Upon receiving a response from the server, the JavaScript code then changes the state.
• Error Handling: The application must respond appropriately whenever an error occurs during any of the above steps. The application returns to a steady state after displaying the error notice to the user.
• Unloading: When a user closes a web app, the corresponding JavaScript function frees up any previously allocated data. This fixes browser speed issues and stops memory leaks.

State Management in React SPA

One of the most important aspects of building a single-page application (SPA) is managing its state. In a traditional multi-page application, each page has its own state, which is reset whenever the user navigates to a new page. However, in a SPA, the state must persist across multiple views and user interactions.

React provides several built-in features for managing state, including the useState and useContext hooks and the Redux library. The useState hook allows you to define and update the state within a component, while useContext allows you to share the state between components without prop drilling.

Security Considerations in React SPA

While developing a SPA, it is essential to think about security because it might be exposed to several attacks. Cross-site scripting (XSS) and cross-site request forgery (CSRF) are the most popular. React includes various built-in features to assist avoid such attacks. React automatically escapes data supplied into components and has CSRF protection built in for AJAX queries.

Performance Optimization in React SPA

The initial load time of the application in SPAs is crucial since users expect quick and responsive apps. React offers a variety of speed optimization techniques to help decrease the duration of initial load time. The strategies are code splitting, lazy loading, and server-side rendering (SSR). You may separate your application code into smaller chunks using code splitting, which only loads when needed, minimizing the initial load time. Lazy loading allows you to postpone the loading of components until they are required, which optimizes the initial load time even further. SSR includes the server rendering the first HTML, allowing users to see information faster and improving search engine optimization (SEO).

Testing Single Page Applications With React

To create a reliable SPA, testing is necessary. The Jest testing framework and the React Testing Library are only two of the many testing tools you can use with React. Features like test coverage reporting and snapshot testing have made Jest popular among testers. The React Testing Library is a small and efficient package that provides a straightforward interface for testing React modules.

Deployment of Single Page Applications With React

Deployment includes server configuration and production application optimization, which must be carefully considered when deploying a SPA. The create-react-app utility is only one example of a React tool streamlining development and deployment processes. The production-ready features of React include code minification and caching techniques, among others.

Conclusion

We’ve covered the majority of React Router’s useful features for building a SPA. However, this doesn’t mean that there aren’t more intriguing possibilities to explore. The routing capabilities needed for our application were pretty modest. If you are creating a more complicated single-page app than the ones in our tutorial, you should take your time to look at the React Router documentation and examples.

To sum up, React is a robust and widely-used JavaScript library for developing streamlined, interactive Single Page Applications (SPAs). Using React’s fast virtual DOM and component-based design, developers can easily build sophisticated and responsive web apps. When selecting to adopt React SPAs for your next project, it’s necessary to thoroughly consider the pros and cons, keeping in mind the possible negatives of SPAs, such as longer initial loading times and SEO issues.

If you enjoyed this, be sure to check out our other React articles.

• Top React Interview Questions & Answers You Need to Know
• Unit Testing in React: In-Depth Guide
• In Which Projects Can Your Company Use React?
• What You Need to Know About React Before Using It for Your Business
• 6 Reasons Why React Is So Popular