Author: Dennis O'Keeffe

Section: React

React Structure

The structure of a React component may very down the track, so this document should be updated to reflect this.

An example of a component tree for makeshift component Component in src/components/PageFormTest:

Component
├── Component.mocha.js
├── Component.puppeteer.js
├── Component.storybook.js
├── README.md
├── DOCS.md
├── index.js
└── styles.scss
copy

In the case of some of these components, there will not be a full suite of these files.

index.js

This is the main component file. With this and the setup for resolvers in webpack, you can require a component by using import 'components/ComponentName and using the index.js to default as the import for there. Note: this is a change to previous projects.

Component.mocha.js

This will be the main mocha + chai + enzyme tests for the file. This file should cover all methods used within the component and thoroughly check rendering.

Component.puppeteer.js

There is an issue for using Istanbul for coverage when also using Puppeteer, so these tests have been separated. Puppeteer tests should be used for UI testing. You can use this is either headless mode or visually see the tests carried out in the browser.

Component.storybook.js

This is the storybook file to be imported into Storybook. It is a good idea for the individual, smaller components to develop them while inside of storybook, although not always required.

README.md

Every file should have a README.md file to explain why it exists and what the component is used for. These files are also used by storybook to generate the README for a component.

DOCS.md

This is the documentation markdown file. This is optional and should not be manually created. This is created through a gulp task, although the package that generates the markdown relies on esprima and esprima cannot handle the bleeding edge tech of React sometimes and will fail to turn out Docblockr comments into the file.

styles.scss

This is the styles file for the specific component. It should always have a parent wrapper selector to prevent bleeding thorugh to another component. In src/styles/main.scss there is a import 'src/components/**/*.scss statement to require all these style files so they too can use the variables and mixins avaiable to us with Sass.