# React Lifecycle Methods diagram
An interactive version of [React Lifecycle Methods diagram tweeted by Dan Abramov](https://twitter.com/dan_abramov/status/981712092611989509). Built with React, obviously.
I did my best to make the diagram fully accessible, both for keyboard navigation and screen readers for visually impaired people.
[Online version](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) is also available!
## How to use the diagram
- Click any method name to read its official documentation (opens in a new tab).
- Methods in **bold** are the most common ones.
- Actions that are not methods, but otherwise help reading the diagram, are in _italics_.
## Collaboration
You are welcome to raise issues and create pull requests.
Particularly valuable contributions are those regarding [i18n](https://en.wikipedia.org/wiki/i18n) as I only know so many languages. Adding new locale is pretty easy, but there's a [separate i18n guide](/src/i18n/README.md) in case you get lost.
You can also add a new version of the diagram in case React lifecycle methods are changed. There is a [separate versions guide](/src/versions/README.md) in case you get lost.
### Prerequisites
To contribute, you need to have the following prerequisites installed:
- Node.js
- Yarn
- IDE of your choice
### Starting the project
- `yarn install` (first time only)
- `yarn dev`
### Building the project
- `yarn build`
## License
The MIT License.
## Author
Wojciech Maj
[email protected]
https://wojtekmaj.pl
## Thank you
### Sponsors
Thank you to all our sponsors! [Become a sponsor](https://opencollective.com/react-lifecycle-methods-diagram#sponsor) and get your image on our README on GitHub.
### Backers
Thank you to all our backers! [Become a backer](https://opencollective.com/react-lifecycle-methods-diagram#backer) and get your image on our README on GitHub.
### Top Contributors
Thank you to all our contributors that helped on this project!