Used to start and mount App, usually without manual calls. This API is only required when using Custom App.
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
: reactElement instance created by createApp
.rootId
: DOM root element id to mount,like "root"
.root
: ReactDOM.create the return value, which is used in the scenario where the root needs to destroy the component outside the bootstrap function.ReactDOM
: ReactDOM object for distinguishing 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);
INFO
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';
WARNING
bootstrap only supported for use in CSR.