Skip to content
Interactive React Lifecycle Methods diagram.
Branch: master
Clone or download
Latest commit 270b406 Mar 20, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Update zh-CN.json (#41) Mar 20, 2019
.babelrc
.codeclimate.yml Add .codeclimate.yml Jul 18, 2018
.eslintrc.json Remove deprecated experimentalObjectRestSpread Oct 8, 2018
.gitattributes Create .gitattributes Oct 16, 2018
.gitignore Add .idea to .gitignore Oct 17, 2018
.travis.yml
LICENSE Add LICENSE and README Apr 5, 2018
README.md
package.json
yarn.lock

README.md

React Lifecycle Methods diagram

An interactive version of React Lifecycle Methods diagram tweeted by Dan Abramov. Built in 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 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 as I only know so many languages. Adding new locale is pretty easy, but there's a separate i18n guide 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 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 start

Building the project

  • yarn build

License

The MIT License.

Author

Wojciech Maj
kontakt@wojtekmaj.pl
http://wojtekmaj.pl

Thank you

Sponsors

Thank you to all our sponsors! Become a sponsor and get your image on our README on GitHub.

Backers

Thank you to all our backers! Become a backer and get your image on our README on GitHub.

Top Contributors

Thank you to all our contributors that helped on this project!

Top Contributors

You can’t perform that action at this time.