Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wojtekmaj/react-lifecycle-methods-diagram
Interactive React Lifecycle Methods diagram.
https://github.com/wojtekmaj/react-lifecycle-methods-diagram
cheatsheet diagram react react-lifecycle
Last synced: 4 days ago
JSON representation
Interactive React Lifecycle Methods diagram.
- Host: GitHub
- URL: https://github.com/wojtekmaj/react-lifecycle-methods-diagram
- Owner: wojtekmaj
- License: mit
- Created: 2018-04-05T20:03:26.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2024-12-19T22:58:45.000Z (about 1 month ago)
- Last Synced: 2025-01-14T15:10:24.545Z (11 days ago)
- Topics: cheatsheet, diagram, react, react-lifecycle
- Language: TypeScript
- Homepage: https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
- Size: 4.88 MB
- Stars: 3,899
- Watchers: 53
- Forks: 320
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome - wojtekmaj/react-lifecycle-methods-diagram - Interactive React Lifecycle Methods diagram. (TypeScript)
- awesome-github-star - react-lifecycle-methods-diagram
- awesome-list - react-lifecycle-methods-diagram
- awesome-star-libs - wojtekmaj / react-lifecycle-methods-diagram
README
[](https://github.com/wojtekmaj/react-lifecycle-methods-diagram/actions)
# 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!
