Used to start and mount App, usually not manually called. This API is only required when using Custom Bootstrap.
import ReactDOM from 'react-dom/client';
import { bootstrap } from '@modern-js/runtime';
bootstrap(App, 'root', undefined, ReactDOM);
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>;
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.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);
since @modern-js/runtime/plugins
is a alias, when used in a ts project, its type needs to be declared, Just add the following type declarations to src/modern-app-env.d.ts
:
declare module '@modern-js/runtime/plugins';
bootstrap only supported for use in CSR.