Single page React app

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

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

Single-page applications (SPAs) have been gaining popularity in recent years, particularly with the emergence of web development frameworks like React and Angular. According to the State of JS Survey that surveyed more than 27,000 developers, 49.5% of respondents reported using React, a popular JavaScript library for building SPAs.

Whether you are a beginner or an experienced developer, this article will provide you with a comprehensive understanding of single-page applications. Choosing React to build your next single-page app would be beneficial in terms of cost savings and maintainability over a long-term period. So let's dive deeper into building a single page app 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 refresh the currently displayed page to respond to the 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 by loading a single page in a SPA. Appropriate resources are dynamically loaded and added to the page as needed, allowing navigation through link clicks or other interactive elements without the need for complete content reloads.

Advantages and disadvantages

Let us now look at some advantages and disadvantages of single page applications to better understand how they can be beneficial for us or not.

What are multipage applications?

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

Users can request an HTML page rendered in their browser by clicking a link or typing a URL in the address bar, which the server renders. 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.

AMPs are simple to create and track. They can be slower to load and respond slowly compared to single page applications (SPAs), which is a disadvantage.

MPAs are trusted in creating complex websites with countless pages and unique URLs. However, SPAs are best suited for creating interactive and responsive applications that provide a seamless user experience.

Creating a single page application in React using React Router

In this tutorial, you will create a simple React application using React Router.

Getting ready to start building your SPA app

To deploy React application 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.

Starting

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 bootstraps a react app without build configuration.

 npx create-react-app spa_react

Now you can see a folder called spa_react in your directory. This is your React project folder. Navigate to this folder using the following command:

 cd spa_react

This is what 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 proceeding with building our application, the React router package also needs to be installed. Run the following command to install the react router dom package.

 npm install react-router-dom

Building your first single page app

The way of developing this application is the same as that used for all previous applications. A central parent component will be there. The application pages will be modular subsystems working together to form the whole. React Router is useful when selecting which components to show and which to hide.

Since the project directory has default React code at the moment. 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></div>
 </body>
 </html>

Now add the following code to the 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 code above you must import the React and ReactDOM modules. ReactDOM is the library that provides methods to render these components in the DOM (Document Object Model).

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

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

 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="
      <li><a href="
      <li><a href="
     </ul>
     <div className="pageContent">

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

 export default App;

In the code above, there is a component called App that renders a static single-page app layout with a header and an empty content section. The header contains three navigation links for different routes.

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

Let's now create separate content pages for the routes previously defined in the App.js file. Let's start with the homepage 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 forward, 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 called 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 defaultContact;

The content pages are now ready. Each file has a simple component with some content. The next step would be to use the components. Let's now see how to use this.

Working with React Router Dom

Now you will have to add the Home, About and Contact content pages to the app's parent component in order to use it.

Now navigate to the App.js file.

Import Route, NavLink, HashRouter from 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 the react router dom by attaching the following code changes

 class App extends Component {
 render {
  return (
   <HashRouter>
    <div className="App">
     <h1>A Simple SPA made using React</h1>
     <ul className="header">
      <li><NavLink to="
      <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 uses the 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 of the 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="
     <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 defaultApp;

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 web pages should look

SPA Life Cycle

From the moment a user initiates a request to the web application until the moment they leave the page, this process is known as the single-page application lifecycle. A SPA goes through the following steps:

• Initialization : When a user launches a web application, the browser loads the application's HTML, CSS, and JavaScript files. The router and application state management are configured by JavaScript code.
• Routing: When the application starts, the router determines the best path to follow depending on the URL. The DOM is modified when the correct view or component is loaded by the router.
• State Management: Application state is a snapshot of your current information and must be managed. A library, like Redux, takes care of the state. The library triggers a re-render of the affected components whenever the state changes.
• Rendering: During rendering, React.js uses a comparison method to figure out how many changes must be made to the DOM to accommodate an updated component. It is then updated with the revised component.
• API calls: These occur when an application responds to user input by requesting information from a remote server. Upon receiving a response from the server, the JavaScript code changes state.
• Error Handling: The application must respond appropriately whenever an error occurs during any of the above steps. The application returns to steady state after displaying the error warning to the user.
• Unloading: When a user closes a web application, the corresponding JavaScript function frees any previously allocated data. This fixes browser speed issues and prevents 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, 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 set and update state within a component, while useContext allows you to share state between components without drilling support.

Security considerations in React SPA

When developing a SPA it is essential to think about security, as it can be exposed to various attacks. Cross-site scripting (XSS) and cross-site request forgery (CSRF) are the most popular. React includes several built-in features to help prevent such attacks. React automatically escapes data provided to components and has built-in CSRF protection for AJAX queries.

Performance optimization in React SPA

Initial application load time in SPAs is crucial as users expect fast and responsive applications. React offers a variety of speed optimization techniques to help shorten the initial load time. The strategies are code splitting, lazy loading, and server-side rendering (SSR). You can separate your app's code into smaller parts using code splitting, which only loads when needed, minimizing initial load time. Lazy loading allows you to delay loading components until they are needed, which further optimizes initial load time. SSR includes the server that renders 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 just two of the many testing tools you can use with React. Features like test coverage reporting and instant testing have made Jest popular among testers. The React Testing Library is a small and powerful package that provides a simple interface for testing React modules.

Deploying 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 just one example of a React tool that simplifies the development and deployment processes. React's production-ready features include code minification and caching techniques, among others.

Conclusion

We have covered most of the useful features of React Router for building a SPA. However, that doesn't mean there aren't more intriguing possibilities to explore. The routing capabilities required for our application were quite modest. If you're creating a more complicated single-page application than the ones in our tutorial, take the time to take a look at the React Router documentation and examples.

In short, React is a robust and widely used JavaScript library for developing simplified and interactive single-page applications (SPAs). Using React's fast virtual DOM and component-based design, developers can easily create sophisticated and responsive web applications. When choosing to adopt React SPAs for your next project, you need to carefully consider the pros and cons, keeping in mind the potential negatives of SPAs, such as longer initial load times and SEO issues.

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

• Top React Interview Questions and Answers You Need to Know
• Unit Testing in React: Detailed Guide
• What projects can your company use React for?
• What you need to know about React before using it in your business
• 6 reasons why React is so popular