React Code Style and Architecture

The following are items that we would like to have documented in the future. Most have not been d...

https://beta.reactjs.org/learn beta.reactjs.org has much more modern docs. Most all of the exa...

File and Folder Structure should match the UI as closely as possible. There are cases where hook...

Import Ordering: React Packages EFC packages Internal references CSS Expanding of...

When writing custom hooks follow guidelines as described in Code Ordering Style.  On top of code...

React has a tutorial on different ways to conditionally render JSX and can be found here. Condit...

We implement app wide state by using ​Context. Context reactjs.org has a tutorial for Context a...

Events are typically handled using React's useEffect hook. useEffect React has a tutorial as we...

We found a cool react component from react-loading-skeleton called Skeleton. In its props, it le...

useSafeTranslation hook​ Pass in the "filename / namespace" as the parameter   ...

There is a specific url route for every page and tab within a page in Atlantis. Each has a specif...

useRouteValidator Hook Any logic related to validating if a user can view a specific route (for ...

Virtuoso Library We use a library called Virtuoso to do both virtualization and infinite scrolli...

There is currently a hook called useModal that we use to open modals in many places. This hook ha...