#entry.[tj]sx

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

#Add custom behavior before Render

This is implemented in src/entry.[tj]s 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 webpack entry

When the project does not install the @modern-js/runtime dependency, src/entry.[tj]sx? is the real webpack 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 />);