Save yourself some time with this React cheat sheet

Aug 12 · 3 min read
Photo by Michał Kubalczyk on Unsplash

Check out the cheat sheet here.

Sometimes, it can take 30 minutes to create a quick interface using React. But other times, it can take hours.

If you often forget the names of methods, properties, or the functionality they provide, it can become irritating to have to leave your code editor just for a Google search. You may be thinking, is it really that hard to type in a couple of letters and get the answers you want? Well, absolutely not. But if this happens more than once, then maybe it’s time to acquire a cheat sheet so that you don’t have to leave your code editor anymore. Having a cheat sheet next to you will certainly save you some time in the long run!

Here’s a cheat sheet you can use:

Check out the cheat sheet here.

While you’re looking at the cheat sheet, just keep in mind that you can:

1. Generate the cheat sheet into a downloadable PDF/JPEG, or you can bookmark the page and come back to it at a later time.

2. If you don't like how the columns are ordered, you can drag and re-order them before you generate the cheat sheet.

3. You can select any of the code syntax themes in the select box to generate in the cheat sheet (there are about 25 themes you can choose from):

I’ll go ahead and put this in a public repo if anyone needs it. I also just began this yesterday, and so it may not be a perfect cheat sheet yet.

Also, my goal was to fit all of this into one page, but there was too much information. If anyone has any suggestions on which parts to swap/remove, feel free to let me know.

The changes will also stay after you close your browser so that you don’t have to redo everything. Here’s a full list of what’s in the cheat sheet so far (I will keep updating the cheat sheet over time).


Return Types

Error Boundary (React v16.0)

Static Methods

Component States

Rendering Components

Default Props

Other React Exports


Pointer Events (React v16.4)

React Suspense/Lazy (React v16.6)

React Profiler (React v16.9)

Synchronous / Asynchronous act Test Utility (React v16.9)

Check out the cheat sheet here.


And that’s the end of this post! I hope you found this to be useful and lookout for more in the future!

Better Programming

Advice for programmers.


Written by

Team Lead Front End Developer for TeleMedicine. Follow and Join Me on my Adventures.

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade