main.js

The main.js is the entry point of your application, so it's required and has to be present inside the src/ folder.

Example

Simple case

src/main.tsx

import { type AppProps } from "rasengan";
import AppRouter from "@/app/app.router";
 
export default function App({ Component, children }: AppProps) {
  return <Component router={AppRouter}>{children}</Component>;
}

The App component is a special component that is used to render the application. Make sure to import the AppProps type from rasengan and use it as the type of the App component props.

Other case

In some case, you will want to wrap your application entirely with a component in order to share the same context or data to all your pages. To do that, just wrap the Component component with the one you want to use.

Let's take an example of GX State Management (opens in a new tab). Assuming, you want to handle global state by using GX, you will just have to wrap the Component component with GXProvider component coming from @dilane3/gx.

src/main.tsx

import { type AppProps } from "rasengan";
import AppRouter from "@/app/app.router";
import store from "@/gx/store";
import GXProvider from "@dilane3/gx";
 
export default function App({ Component, children }: AppProps) {
  return (
    <GXProvider store={store}>
      <Component router={AppRouter}>{children}</Component>
    </GXProvider>
  );
}

We assume that, we have created a store inside the src/gx/store folder.

Now, all pages will have access to the store via useSignal, useActions, userAsyncActions and useOperations hooks. Learn more about these hooks (opens in a new tab)

[name].router.js React Strict Mode