> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# entry.tsx

Normally, the [`routes/`](/apis/app/hooks/src/routes.md) and [`App.tsx`](/apis/app/hooks/src/app.md) 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:

```js title=src/entry.tsx
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:

```js title=src/entry.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

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