#entry.tsx

Normally, the routes/ and App.tsx hook files can meet our needs. When we need to add custom behavior before component rendering or take full control of the Rspack packaging entry, we can create entry.ts file in the src or entry directory. Here are two cases for discussion。

#Add custom behavior before Render

This is implemented in src/entry.ts as follows:

import { createRoot } from '@modern-js/runtime/react';
import { render } from '@modern-js/runtime/browser';

const ModernRoot = createRoot();

async function beforeRender() {
  // todo
}

beforeRender().then(() => {
  render(<ModernRoot />);
});

#Take full control of the Rspack entry

When the project does not install the @modern-js/runtime dependency, src/entry.tsx? is the real Rspack packaging entry file, and you can directly organize the code like using create-react-app and other scaffolds:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(<App />);