bootstrap#

Used to start and mount App, usually not manually called. This API is only required when using Custom Bootstrap.

Usage#

import ReactDOM from 'react-dom/client';
import { bootstrap } from '@modern-js/runtime';

bootstrap(App, 'root', undefined, ReactDOM);

Function Signature#

type BootStrap<T = unknown> = (
  App: React.ComponentType,
  id: string | HTMLElement | RuntimeContext,
  root?: any,
  ReactDOM?: {
    render?: Renderer;
    hydrate?: Renderer;
    createRoot?: typeof createRoot;
    hydrateRoot?: typeof hydrateRoot;
  },
) => Promise<T>;

Input#

• AppComponent: The ReactElement instance created by createApp.
• rootId: DOM root element id to mount, such as "root".
• root: The return value of ReactDOM.createRoot, used for scenarios where the root needs to be destroyed outside of the bootstrap function.
• ReactDOM: The ReactDOM object, used to differentiate between React 18 and React 17 APIs.

Example#

import ReactDOM from 'react-dom/client';
import { createApp, bootstrap } from '@modern-js/runtime';

function App() {
  return <div>Hello Modern.js</div>;
}

const WrappedApp = createApp({
  // customized plugin
  plugins: [customPlugin()],
})(App);

bootstrap(WrappedApp, 'root', undefined, ReactDOM);

declare module '@modern-js/runtime/plugins';