03-app-structure/03-app-js.md

App.js

App.js

App.js is the root module that composes the application and mounts it into the DOM.

It should stay focused on root composition and bootstrap logic, not feature-specific implementation details.

Responsibilities

App.js should usually:

• initialize the store once if the app uses store
• read the root state needed for top-level composition
• compose top-level features or sections
• call mount(document.getElementById("app"), App)

Standard pattern

Use the standard root pattern:

import { mount, $state } from "/vroqjs/runtime.js";
import { configureStore } from "./shared/store/configureStore.js";

function App() {
  const store = $state(() => configureStore())();
  const state = store.state();

  return ...;
}

mount(document.getElementById("app"), App);

Rules

• create the store once with $state(() => configureStore())()
• do not recreate long-lived objects on every render
• keep large feature logic out of App.js
• keep App.js as the top-level composition file
• mount using the standard #app root node

What should go here

Good things for App.js:

• root layout
• top-level feature composition
• modal host placement
• route-to-screen composition
• store initialization

What should not go here

Avoid putting these directly in App.js:

• large feature workflows
• detailed reducer logic
• raw API transport code
• deeply nested UI for one feature

Those belong in feature folders or shared files.

Final rule

App.js should explain how the app is assembled, not contain all the app logic itself.