React App.tsx Boilerplate

Provides reference structures for a thin App.tsx and flat component-folder layouts in React.
Published: 7/20/2026

React applications must preserve a thin entry tree. The main App.tsx acts exclusively as a router and provider boundary. Do not nest business logic, scene updates, or option buttons directly inside the root component.

Below is Aircada's Gold-Standard layout demonstrating the split-screen, viewport-locked (100svh) design template. This guarantees correct viewport touch-controls and prevents page scroll shifts on mobile devices.

note
Complexity Rule: App.tsx must not exceed ~80 lines. Delegate all visual configuration selectors to UI components (e.g. /components/UIOverlay).
App.tsx (typescript)
import React from 'react';
import { AirStoreProvider } from '@aircada/air-react';
import { ViewportLayout } from './components/Layout';
import UIOverlay from './components/UIOverlay';

export default function App() {
    return (
        <AirStoreProvider>
            <ViewportLayout>
                {/* Delegate option rendering to UI components */}
                <UIOverlay />
            </ViewportLayout>
        </AirStoreProvider>
    );
}
Canonical Thin React App entry point
UIOverlay.tsx (typescript)
import React from 'react';
import { AircadaViewport, useAirStore, useAirDataset } from '@aircada/react';
import { MediaRegistry, ConfiguratorRow } from './registry/media.generated';
import { AirStoreConfig } from './store/store.config';

export default function UIOverlay() {
    const [storeState, patch] = useAirStore<AirStoreConfig>();
    const step = storeState.app?.currentStep ?? 1;

    const { rows, isLoading } = useAirDataset<ConfiguratorRow>(
        MediaRegistry.DATASETS.MAIN_CONFIGURATOR.id
    );

    const handleSelectOption = (rowId: string) => {
        patch({ configurator: { activeOptionId: rowId } });
    };

    return (
        <div className="aircada-root flex flex-col w-full h-[100svh] overflow-hidden bg-white select-none">
            {/* Desktop Header bar */}
            <div className="hidden md:block border-b border-gray-200">
                <header className="p-4 text-center">Desktop Header</header>
            </div>

            {/* Split Screen Layout */}
            <main className="flex flex-col md:flex-row flex-1 w-full h-full md:h-[calc(100vh-80px)] overflow-hidden">
                {/* Left Section: 3D Viewport */}
                <section className="relative w-full h-[48vh] md:h-full md:w-[55vw] bg-gray-100">
                    <AircadaViewport className="absolute inset-0 z-0 pointer-events-auto" />
                </section>

                {/* Right Section: 2D Option Selector Panels */}
                <section className="relative w-full flex-1 md:h-full md:w-[45vw] bg-white flex flex-col justify-between overflow-hidden">
                    {/* Mobile Header bar */}
                    <div className="block md:hidden border-b border-gray-200">
                        <header className="p-3 text-center">Mobile Header</header>
                    </div>

                    {/* Scrollable controls panel with condensed padding */}
                    <div className="overflow-y-auto p-6 pb-24 flex-1">
                        <div className="mx-auto w-full max-w-xl">
                            {isLoading ? (
                                <span>Loading...</span>
                            ) : (
                                rows.map(row => (
                                    <button 
                                        key={row.id} 
                                        onClick={() => handleSelectOption(row.id)}
                                        className="p-3 border border-gray-200 w-full mb-2 text-left"
                                    >
                                        {row.OptionName}
                                    </button>
                                ))
                            )}
                        </div>
                    </div>

                    {/* Bottom absolute footer */}
                    <div className="w-full absolute bottom-0 right-0 z-10 border-t border-gray-200 bg-white p-4">
                        <div className="flex justify-between">
                            <button className="px-4 py-2 border rounded">Back</button>
                            <button className="px-4 py-2 bg-blue-600 text-white rounded">Next</button>
                        </div>
                    </div>
                </section>
            </main>
        </div>
    );
}
Gold Standard split-screen layout with 100svh height constraint
SEO Title: React App.tsx Boilerplate
SEO Description: Standard React entry layout separating providers, layout, and component structures.
Index Alternates:app entry pointscaffold structureboilerplate layout