# main.jsx ```jsx import { createRoot } from 'react-dom/client' import App from './App.jsx' import './index.css' import './App.css' import '@react95/core/GlobalStyle'; import './styles/moddedtheme.css'; import "react-resizable/css/styles.css"; createRoot(document.getElementById('root')).render( <> <App /> </>, ) ``` >pattern: >**HTML** → **Entry JS (main/index)** → **Root component (App)** The convention makes onboarding, testing, SSR/hydration, and bundler optimizations (like code‑splitting) predictable. Today, `main.jsx` only renders `<App/>`. Tomorrow, you might need to: - Wrap your app in providers (Redux, React Query, React‑Router, ThemeProvider…) - Register a service worker or error boundary - Configure client‑side analytics or feature flags - Initialize hot module replacement (HMR) hooks All of that belongs in **main.jsx**, not buried inside **App.jsx**.