Clientside Overview - guardian/support-frontend GitHub Wiki

Contents

• Introduction
• File Structure
  • Pages
  • Components
  • Stylesheets

Introduction

Each page of the support site is a self-contained React application, and on the checkout pages we also use Redux to handle the internal state of the page. To learn more about our usage of Redux, see our Redux documentation. We also make use use of client-side routing with React Router on the contributions and digital subscriptions checkouts.

The site is written in TypeScript and styled using Emotion with base style tokens and core components originating from the Guardian's design system, Source.

File Structure

Our client-side code sits in assets folder and is organised in the following way:

• components - shared React components.
• helpers - shared helper modules.
• pages - the pages.

Pages

Each page is a folder inside the pages/ directory. These folders are typically structured as seen in the following example for regular contributions:

components/                             👈 react components specific to this page
helpers/                                👈 helper modules specific to this page
regularContributions.tsx                👈 the entry point for the page

The .tsx file is the entry point for the page's JavaScript.

Components

Component folders may contain multiple related components, or a single component. More complex components that need to communicate with the Redux store will be split into a presentational component that handles the UI, and a container that handles store communication and logic- for more about this approach see Presentational and Container Components.

errorSummary.tsx                        👈 the presentational component
errorSummaryContainer.tsx               👈 the container component