This README is intended to further detail some of the steps mentioned in the PatternFly React Contributing Guide and help new contributors getting started with PatternFly React.
If you haven't already, we highly recommend taking a look at the React Documentation site. This contains up to date information on React from the project's core maintainers at Facebook.
We also have a few documents started on this subject with some helpful links and descriptions that might help you learn React. Feel free to add your own docs and helpful links here!
- Getting Started w/ React by Patrick Riley
See how to write documentation in the react-docs README
When writing examples:
- Keep them simple. It is much easier for a person to understand what is going on.
- Try not to add extra external dependencies. These will only be approved on a case by case basis.
PatternFly React currently uses Jest with React Testing Library for running unit tests and Cypress for running integration tests.
Use Jest and React Testing Library to capture how the DOM should look after rendering and verify that it functions as you expect. Save tests (*.test.tsx files) under a __tests__ folder. A common test is to expect a rendered component to match a snapshot. You can run these with yarn test. You can find more information about React Testing Library as it pertains to this project and the standards we're following on our React Testing Library Basics wiki article.
Use Cypress tests to capture how the DOM should look after interactions. Save Cypress tests (*.spec.ts files) under packages/react-integration/cypress/integration. You can run these with yarn start:cypress.
PatternFly React has 3 linters you can run all at once using yarn lint:all. These are run in --fix mode in on your staged files each commit.
ESLint is run on .js, .jsx, .ts, and .tsx files. It uses the @typescript-eslint parser with custom config added over the years. We write some of our own ESLint rules in eslint-plugin-patternfly-react. You can run this linter with yarn lint:ts or on specific files with yarn lint <path>.