How to Build SPAs With TypeScript and React

Single Page Applications (SPAs) have become increasingly popular due to their fluid user experience and dynamic capabilities. Building SPAs with TypeScript and React is a fantastic way to take advantage of both the strong typing system of TypeScript and the powerful UI library that React provides. In this guide, we will outline the steps to create SPAs using TypeScript and React.

Setting Up Your Development Environment

Before diving into code, you need to set up your development environment. Install Node.js which will allow you to run JavaScript on your server and use npm (Node Package Manager) to install packages.

Once Node.js is installed, you can create a new React project with TypeScript using the following command:

npx create-react-app my-spa --template typescript

This command sets up a new React application scaffolded with TypeScript, meaning your files will use .tsx (for React components) and .ts (for non-React TypeScript files).

Understanding the Project Structure

Your new project folder will have the following structure:

src/: Main directory where you'll build your application.
public/: Static assets are stored here, such as the index.html.
package.json: Contains dependencies and scripts to run your app.

Creating Components

React is built around components. Start by creating your first component in the src/ folder. For example, let’s create a simple header component:

import React from 'react';
const Header: React.FC = () => {
    return (
        
            My Single Page Application
        
    );
};
export default Header;

In this code, the Header component is a functional component that returns a header element with a title. By leveraging TypeScript, you can also define props if your component needs them, ensuring type safety as you develop.

Routing with React Router

To make your SPA navigate between different views without refreshing the page, you need to use a routing library. React Router is the most popular choice for this purpose. First, install React Router:

npm install react-router-dom

Next, set up routes in your src/App.tsx file:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Header from './Header';
import Home from './Home';
import About from './About';
const App: React.FC = () => {
    return (
        
            
            
                
                
            
        
    );
};
export default App;

In the above example, Switch is used to render the first matching route. The exact keyword ensures that the home route (i.e., "/") only matches when it is the exact path.

State Management with Context API

For state management in your SPA, you can utilize the Context API provided by React. This allows you to share data across your application without prop drilling. Create a context for managing user authentication:

import React, { createContext, useContext, useState, ReactNode } from 'react';
interface AuthContextType {
    user: string | null;
    login: (username: string) => void;
    logout: () => void;
}
const AuthContext = createContext(undefined);
const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
    const [user, setUser] = useState(null);
    
    const login = (username: string) => setUser(username);
    const logout = () => setUser(null);
return (
        
            {children}
        
    );
};
const useAuth = () => {
    const context = useContext(AuthContext);
    if (!context) {
        throw new Error("useAuth must be used within an AuthProvider");
    }
    return context;
};
export { AuthProvider, useAuth };

How to Build SPAs With TypeScript and React