Frontend Architecture

In this page we'll take a dive into the Frontend architecture and component organization.

The React app is built of multiple components. An overarching App.jsx component encapsulates all subcomponents. There are two types of subcomponents:

Singular subcomponents, that only exist once: SpeciesMenu.jsx, GlobalConfig.jsx, ImportCSV.jsx, Export.jsx Plural subcomponents, that can have multiple instances: Track.jsx and it's subcomponents. The user can freely create or remove these components from the Virtual DOM. Or visually conceptualized:

Diagram of the App architecture