Since we are using Prettier to enforce basic code style, there’s no need to go into detail on those bits of syntax (e.g. always using semicolons, avoiding extraneous whitespace, etc).
In nearly all cases, there should be only one React component per file. The file name should match the component name.
A component’s story file (or test file) should be colocated with the component.
File/component name should be descriptive.
Use .tsx
extension for React components.
Storybook files should be named ComponentName.stories.tsx
.
Unit test files should be named ComponentName.test.ts
.
Interface and type names should be in PascalCase.
Constant value names should be in ALL_CAPS.
Prefer <></>
shorthand over <React.Fragment></React.Fragment>
.
Avoid var
; use const
by default, or let
when necessary.
Use JSDoc style when documenting classes and functions, and standard //
elsewhere in the code.
Remember: TypeScript errors are for our benefit as developers, so we should always take the time to resolve type errors as often as possible. Override only as a last resort!
Declare as a field on the component’s Class definition, and set its type as a Partial of the component’s Props interface.
See https://reactjs.org/docs/refs-and-the-dom.html for detailed information. When referencing a Ref in your code, don’t forget that you need to use the current
attribute to access the actual DOM element!
See the Emotion guide.