Coder Social home page Coder Social logo

react-scaffolding's Introduction

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.