How to Build SPAs With React Context API

Building Single Page Applications (SPAs) with React can significantly enhance the user experience by providing fast and fluid interactions. One critical aspect of managing state in React applications is the React Context API, which allows developers to share data across components without having to pass props manually at every level. In this article, we will explore how to effectively use the React Context API to build SPAs.

Understanding the React Context API

The React Context API is designed to make it easier to pass data through the component tree without having to pass props down manually at every level. This is particularly useful in larger applications where prop drilling can become cumbersome and lead to a less maintainable codebase.

Setting Up Your React Application

Begin by creating a new React application using Create React App:

npx create-react-app my-spa

Once your application is set up, navigate to your project directory:

cd my-spa

Creating a Context

Next, you need to create a context. Inside your `src` folder, create a new file called `AppContext.js`:


import React, { createContext, useState } from 'react';
export const AppContext = createContext();
export const AppProvider = ({ children }) => {
    const [state, setState] = useState({ user: null, theme: 'light' });
return (
        
            {children}
        
    );
};

In this code, we created a context and a provider for the context. The `state` variable holds application-wide data that can be accessed throughout the component tree.

Wrapping Your Application with the Provider

Next, you will need to wrap your application with the `AppProvider` in `index.js`:


import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { AppProvider } from './AppContext';
ReactDOM.render(
    
        
    ,
    document.getElementById('root')
);

Consuming Context in Your Components

Now that your context is set up, you can consume it in any component. For example, create a `UserProfile.js` component that uses context:


import React, { useContext } from 'react';
import { AppContext } from './AppContext';
const UserProfile = () => {
    const { state, setState } = useContext(AppContext);
const toggleTheme = () => {
        setState((prev) => ({
            ...prev,
            theme: prev.theme === 'light' ? 'dark' : 'light',
        }));
    };
return (
        
            User Profile
            Current User: {state.user ? state.user.name : 'Guest'}
            
        
    );
};
export default UserProfile;

This component will display the current user and a button to toggle between light and dark themes. It uses the `useContext` hook to access the state and the updater function.

Routing in SPAs with React Router

To build an SPA, you will likely need routing. Install React Router:

npm install react-router-dom

Set up basic routing in your `App.js`:


import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import UserProfile from './UserProfile';
const App = () => {
    return (
        
            
                
                    Welcome to My SPA
                
                
            
        
    );
};
export default App;

Now, when you navigate to `/profile`, the `UserProfile` component will be displayed, allowing you to see and toggle the current user's profile information and theme.

Conclusion

Using the React Context

How to Build SPAs With React Context API