Front-end JS frameworks like React can provide a better UI experience for users than their traditional multi-page counterparts. React is one of the most popular JavaScript frameworks for building dynamic, responsive, and scalable user interfaces. It was created by Facebook, as an alternative to the more cumbersome, yet first-to-market JavaScript framework, Angular from rival Google.

A key advantage of React lies in its versatility. Developers can create SPAs that deliver seamless user experiences by loading content dynamically without requiring full page reloads. The best UI framework for React is subjective, but we’ve chosen Bootstrap React, for its familiarity and minimal lock-in compared to component libraries like MUI.

Designed as a flexible React JS UI framework, this project demonstrates the full potential of React, leveraging the popular libraries like React Router and MobX to create a scalable and maintainable application architecture.

The documentation provides an in-depth look at the React single page application’s structure, from its core components to styling approaches, offering a blueprint for building sophisticated React JS applications.

Overview

The React client is a single page application built using the modern JS framework, React. It is written in TypeScript and runs on Vite build tools.

The Core Application guide covers the most essential React project structure elements: root App.tsx component, Router, API, and Stores. Pages, Layout & Components and Data Tables, Forms & Validation, are explained in more detail in their own guide.

The theme style is a project in itself. Styles are managed in /assets folder as Bootstrap 5 scss. The styling code is mostly the same in each UI version, but its covered from Vue’s perspective in the Vue Theme & Styling guide.

Top Level

A quick overview of the files and folders you see from the top:

• Src – app source code
• Index.html – this is where React will mount the application
• .env.development & .env.production – these are environment variables for the Vite build tool uses, they contain a variable for the API URL
• Vite.config.ts – this is the Vite configuration file.
• Package.json – NPM manifest of all dependencies, contains two scripts, serve & build
• tsconfig.json – TypeScript configuration
• .gitignore – tells git source-control to ignore certain files and folders

Vite is a generic build tool that can be used for many types of projects, not just Vue projects; it requires a configuration file.

Vite is better than the CLIs that ship with React / Vue because it’s faster, more stable, and has some amazing features like being able to use scss styles directly.

Next Steps

Read the Core Application guide to get an understanding of how the app is built starting from the root component.