A well-structured React application separates initialization, routing, state management, and communication with the backend. This makes the frontend easier to maintain as new pages, features, and access requirements are introduced.

Nano’s React UI uses React Router v6 for navigation, MobX for state management, and Axios for HTTP requests. The application is written in TypeScript and uses Vite environment variables to configure the connection to the ASP.NET Core backend.

This guide explains the main entry points and how the router, MobX stores, and API agent work together to manage application state and user interactions.

Root Components

The two main entry points in the React application are index.tsx and App.tsx.

index.tsx

The index.tsx file contains the global imports and initializes the React application by mounting it to the root DOM element defined in index.html.

This is where the application begins executing in the browser.

App.tsx

App.tsx is the root component in the React component tree. It initializes application-level behavior, including theme defaults, sidebar state, and layout preferences.

The component also checks for an authentication token. When a token is available, the application retrieves the user’s details from the API and stores them in accountStore. The router then directs the user to the appropriate page or login screen, depending on the authentication flow.

React Router

Nano uses React Router v6 to manage navigation between pages without requiring full browser page reloads.

Route definitions are maintained in routes.tsx. Authentication and role requirements are defined through route metadata and handled in router/index.js, centralizing the logic used to determine which pages users can access.

The application also includes routes for Template Resources, organized into two groups:

• Base UI: Examples of common Bootstrap components.
• Extended UI: Additional third-party components, icons, and the sample dashboard.

This separation distinguishes the main application functionality from the sample UI resources included in the project.

MobX Stores

MobX provides state management for the React application. Nano organizes stores by feature so that related state and operations remain grouped together.

The main stores include:

• Auth store: Login, forgot-password, reset-password, and logout functionality.
• Users, Tenants, and Products stores: CRUD operations and state for the corresponding application features.
• Account store: The current user’s details, profile management, and password-reset functionality.
• Layout store: Sidebar state, layout colors, and other presentation preferences. It uses localStorage to persist theme settings.

The stores use api/agent.ts to make HTTP requests to the backend. This keeps API communication separate from the state and operations used by individual features.

API and Axios

The api/agent.ts module centralizes HTTP communication with the ASP.NET Core backend using Axios.

The API agent handles the base URL, request headers, response delays during development, and error handling.

API Base URL

The API base URL is configured through .env.development and .env.production. Vite exposes the appropriate environment variables to the frontend, allowing the application to connect to different backend URLs in development and production.

Authentication and Tenant Headers

Axios request interceptors attach the relevant information to outgoing requests:

• Bearer token: When an authentication token is available, the request includes it in the Authorization header.
• Tenant ID: When a bearer token is not available, the request includes a tenantId header for tenant identification.

This supports requests made in authenticated and tenant-aware contexts. The backend remains responsible for enforcing authentication and authorization.

Development Response Delays

In development, the API agent adds an artificial one-second delay to responses. This makes it easier to test loading indicators and other UI feedback that might otherwise be difficult to observe when requests to a local backend complete quickly.

Error Handling

Axios interceptors handle HTTP errors in the 400 and 500 status-code ranges. Centralizing error handling helps keep request-related behavior consistent across the application.

HTTP Methods

The API agent exposes methods for the common HTTP operations:

• GET — Retrieve data.
• POST — Create resources or submit data.
• PUT — Update resources.
• DELETE — Remove resources.

These methods are exposed through the agent object and are typically called from MobX stores.

The API agent also provides alternative POST and PUT methods for sending form data, such as file uploads.

Next Steps

Continue to Pages, Components, Layout & Navigation to learn how Nano organizes its React views and reusable UI components.