gillesdebunne / react-scaffolding

A bare react project with my dream setup

passenger-ui

Initial setup

Clone this repository. Run yarn to install all dependencies, then

yarn start

This project was bootstrapped with Create React App. See its README for details here.

Environment setup

prettier

Prettier is an opinionated code formatter.

It is configured as a pre-commit hook, and the entire JS code is formatted by prettier on commit.

Install a prettier extension in your IDE and use the same configuration (see package.json) to format from your IDE.

flow

flow is a JS type checker. Add:

// @flow

at the beginning of all JS files to enable type checking.

Install a flow extension in your IDE and make sure to add types when requested.

Refrain from using any, do not commit code with flow errors.

You can globally install flow-coverage-report to create a flow coverage report of the entire project. Your IDE should also be able to display the flow coverage of the currently opened file.

Storybook

Storybook is used to develop and test components in isolation. Start it using:

yarn storybook

Create stories for all dumb components, with nominal and limit cases. For MyComponent.js, create an associated MyComponent.spec.js file, located next to it.

Use snapshotStoriesOf from './utils/snapshotStories' to declare your stories, and end them with a call to compareWithSnapshot() to automatically snapshot test all stories.

ESLint

The configuration is pretty restricitive at the moment, and will be relaxed if needed. It is based on the airbnb plugin, with react and flowtype added.

A config for prettier is added to disable all prettier-handled formatting in the above rules.

Make sure your IDE enforces this configuration.

Jest

Test files have a .test.js extension. They should be located next to the main file they exercise.

Run all tests (by default only those affected by your ongoing changes since the last commit) using:

yarn test

Rely on snapshot testing (expect(myString).toMatchSnapshot()) to easily detect regressions.

To get a test code coverage report of the entire code base, run:

yarn coverage

TODO

Onboarding guide when starting from scratch

Add Checks and metrics on CI