ComponentDoesWhat? React Native Cheat Sheets

3 min readFeb 7, 2018

Before I started my job at Major League Soccer, I only had one week of React training. Great news when I was about to join a team of React engineers to rebuild their mobile app in React Native, right?

Over 6 months have gone by now and I have learned SO MUCH, it’s crazy. From pair programming on custom gestures, getting mind twisted with flex-box, to working on GraphQL queries, it’s been loads of information. I frequently take notes of random words to look up later, and new tech I’ll eventually be using, but I never realized the power of my chrome bookmarks.

Having the following links easily accessible while I am coding saves me a lot of time and stress. Hopefully they’ll do the same for you.

React

https://reactcheatsheet.com/

I usually tend to forget how the lifecycle methods function. ComponentDidWhat? This makes “command f” a magical thing for this site. The filters and tags allow it to be even more glorious.

GIT

https://the-awesome-git-cheat-sheet.com/

“The Awesome Git Cheat Sheet” needs no further explanation. (oh, but ++ because it’s build in React)

Flex / Layout

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://medium.com/@drorbiran/the-full-react-native-layout-cheat-sheet-a4147802405c

https://geddski.teachable.com/p/flexbox-zombies

There’s been days when I wanted to pull my hair out because my flex style properties weren’t working the way I wanted them too. These 3 sites really help visually by seeing what each property does. Even the zombies help.

SVG Optimizer

https://jakearchibald.github.io/svgomg/

I feel like an SVG queen whenever I use this handy conversion site.

Easing Functions

http://easings.net/

Not only is it really fun to hover over all of these functions to see their animations, it’s really helpful.

Images (when you have no images)

https://source.unsplash.com/

I spend way to much time trying to find placeholder photos. https://source.unsplash.com/random is quick and makes it exciting to see what the next image will be. Command r. Command r.