React JS — Quick Start

1. Requirements

The React JS version uses Vite as the build tool. Make sure you have:

• Node.js 20+
• npm 10+ or pnpm
• Vite 8+

2. Installation

Navigate to ReactJS/main and install dependencies.

cd ReactJS/main
npm install

3. Start Development Server

Unlike Next.js which uses next dev, React JS uses the Vite dev server.

npm run dev

Opens at http://localhost:5173 by default.

4. Build for Production

npm run build

Output goes to dist/. Preview with:

npm run preview

5. Entry Point — src/main.tsx

MSW mock workers start before React renders. Root component is App.tsx, not app/layout.tsx.

// src/main.tsx
async function deferRender() {
  const { worker } = await import('./api/mocks/browser.ts');
  return worker.start({ onUnhandledRequest: 'bypass' });
}
deferRender().then(() => {
  createRoot(document.getElementById('root')!).render(
    <ThemeProvider defaultTheme="system" storageKey="activeMode">
      <CustomizerContextProvider>
        <Suspense fallback={<Spinner />}>
          <App />
        </Suspense>
      </CustomizerContextProvider>
    </ThemeProvider>
  );
});

6. Available Scripts