React Typescript Boilerplate

Bootstrapped by CRA

Project Setup

1. Run yarn install (yarn is required on your local machine)

2. Create a .env file in the project’s root and copy the variables from .env-example

3. Run yarn start (This will start your project in dev environment)

---

Folder Structure

The project contains the following tree structure:

• app

  Contains the core Providers and Routes that are used in the top level App.tsx

• assets

  Contains the project’s assets that are used throughout the application

• components

  Contains all reusable components

• global

  Contains all global variables that are used throughout the application

• pages

  Contains all components that represent a React Route

• services

  Contains the state for global backend-side data management

• store

  Contains the state for global client-side data management

• theming

  Contains the global themes and design system

• utils

  Contains utility functions that are used throughout the application

---

Conventions

• This project follows a functional paradigm and is built only with functional components using React hooks

• Each component is put into a folder named the same as we would like to call the component (ex: Button)

• If there are additional files that are needed for the component (e.g. test, animations etc.) they are put inside the component’s folder.

  Example:

  /Button
      /tests
          Button.test.tsx
          test-data.ts
          __snapshots__
      Button.tsx
  

• If a particular component is only used and only makes sense inside another component (For example we want to divide a component into multiple subcomponents for readability) then we create a components folder inside the parent component and create the subcomponent there.

  Example:

  /Header
      /components
          /HeaderPromo
              HeaderPromo.tsx
      Header.tsx
  

• The maximum number of subcomponent nesting should be 2 levels. After 2 levels, put the subcomponents as siblings to the component where they are used.

• Multiple components that have something in common can be grouped into a folder that is named after the thing that they have in common and is written in lowercase.

  Example:

  /src
      /components
          /Header
          /form-elements
              /Input
              /Select
              /Checkbox
          /MultiStep
  

• When grouping create an index.ts to export all components from inside the folder

  Example:

  /src
      /components
          /form-elements
              /Input
              /Select
              /Checkbox
              index.ts
  

• Use named exports instead of default exports

• Absolute paths are used when importing something that is outside the folder in which we are using the import

• Relative paths are used when importing something that is within the same folder

• When importing external libraries or internal icons use named imports (e.g. import * as _ from 'lodash-es' instead of import { map } from 'lodash-es')

---

Linting

Eslint

This project uses Airbnb's eslint config and typescript-eslint.

Install and configure an ESLint plugin for your IDE to be able to see all eslint errors.

All customized rules are inside .eslintrc.

All files that should be ignored by eslint are specified inside .eslintignore.

---

Code with linting errors should not be pushed to repositories. For that reason a pre-hook is attached that checks for any linting errors when committing.

If you find a certain rule to be invaluable, talk with the team to potentially get it removed.

---

Testing

For unit tests we use @testing-library/react.

Import utils/testing into your unit tests in order to utilize the testing API

To run the unit tests, run yarn test

---

Dependencies

• react-router-dom (page routing)

• react-query (managing server side data)

• axios (http requests)

• theme-ui (styling and theming)

• lodash-es (utility functions)