Single-SPA with React

with React Overview

with React lets you structure single-spa work so it stays readable, testable, and easy to scale. Instead of ad-hoc code, you follow a clear pattern that other developers can recognise immediately.

The key is to keep with react focused and predictable. Start from the minimal example here, then layer in only the complexity your feature actually needs.

import React from 'react';
import ReactDOMClient from 'react-dom/client';
import singleSpaReact from 'single-spa-react';
import Root from './root.component';

const lifecycles = singleSpaReact({
  React,
  ReactDOMClient,
  rootComponent: Root,
});

export const { bootstrap, mount, unmount } = lifecycles;

single-spa-react adapts a React app into single-spa lifecycle functions.

with React Example

registerApplication({
  name: '@org/app',
  app: () => System.import('@org/app'),
  activeWhen: ['/app'],
});
start();

• Start from a minimal with React example and grow it only as needed.
• Keep configuration explicit so with React behaves the same in every environment.
• Name things clearly so teammates understand your with React at a glance.
• Add tests around with React early to lock in expected behaviour.

Single-SPA Cheatsheet

Core single-spa APIs related to with react.

How with React Works in Single-SPA

with React is part of how single-spa lets multiple applications — even in different frameworks — coexist on one page. A root config registers each app and controls when it is active.

single-spa-react adapts a React app into single-spa lifecycle functions.

• A root config registers apps and calls start().
• Each app exports bootstrap, mount, and unmount lifecycles.
• activeWhen decides which routes each app owns.
• Import maps resolve each app's bundle at runtime.

Practical Guidance for with React

For reliable micro frontends, with react should isolate failures and keep shared state minimal. Let each team own its app end to end while agreeing on a few shared contracts.

Common Mistakes

• Skipping error handling and edge cases when wiring up with react.
• Leaving with react untested, so regressions slip into production.
• Over-engineering with react before you actually need the extra flexibility.
• Ignoring documentation, which makes with react hard for the next developer to change.

Key Takeaways

• with React is a core part of working effectively with single-spa.
• Start small and keep with react focused on a single responsibility.
• Apply consistent patterns so with react scales across your project.
• Test and document with react to keep it maintainable over time.