React Typescript Boilerplate
CRA
Bootstrapped byProject Setup
-
Run
yarn install
(yarn is required on your local machine) -
Create a
.env
file in the project’s root and copy the variables from.env-example
-
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 ofimport { 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)