Skip to content

React Structure

Jump to bottom
jedpittman edited this page Sep 20, 2020 · 2 revisions

React Structure

The below page is a general page to give some broad context of a series of tickets related to the User Interface development plan.

React is a framework designed to make it easy to develop interactive websites. We're using React as our framework of choice here. React is composed of components that contains the logic related to the display and logic related to each part of the page. Good components are reusable.

This is meant to provide a guide but is not final so contributors should apply their judgment as they implement individual contributions.

Thinking of the application as a series of components, we'll need the following components for a mvp (minimal viable product) v1:

Component Purpose Usage
Typography Display of text; standard material UI Dialogs and Table Cell Contents
Select Display a select dropdown; standard material UI Two Dropdowns
Tab Display tabs to toggle between list and visualization One tab
Table List Table One tab
D3Visualization Visualization, custom component Visualization
Snackbar , Tooltip , Button , Icon Standard Material UI Components Design interactions for help on column header.
PercentageText Custom component for display of percentage text Percentage Text
ClickableText Custom component for links Percentage Text

The top level application (App Component) would consist of something similar to the following: ` Typography-> What occupations do: Select -> {Occupations API} Typography -> Move to ?

Typography ->Optional: Select -> {Region}

Typography ->Display as: Tab -> List or Visualization Table -> data={inputData} (hide depending on tab) D3Visualization -> data={inputData} (hide depending on tab)

General Idea: Create the App component Framework

Build API connection

  1. Build API structure and leverage static data and tests
  2. Connect API to use live data.

Create each subcomponent

  1. Build Component with static data and basic unit test
  2. Integrate component into App just to build up look-and-feel
  3. Connect the component with api and add snapshot-style testing

Final Integration of components

  1. Build interactions between components
  2. Update look and feel to combine together
  3. Prioritization of browser and form-factor types
Clone this wiki locally