An Atlas for Learning React

March 29, 2019

Learning something like React takes time. For every excellent react resource that exists on the internet, there are several poorly written tutorials showing you how to make a todo list app. This ‘atlas’ serves as a guide for myself and others. It will probably be updated over time. Information found in the glossary of terms is largely indebted to the various resources mentioned here.

Conceptual Overviews


  • Create React App, A CLI and set of sensible defaults for react projects
  • React devtools, Chrome and Firefox extension fo view react stuff along with dev tools




Glossary of Terms


React elements are plain javascript objects that represent something that react will render in the DOM.

  • Treated as immutable by react
  • Can reference valid DOM tags or user-created components


React components functions or instances of classes that receive props and return elements.

  • Can be as simple as a js function that receives an object and returns and element
  • Can also be a class that extends React.component
  • Components start with an uppercase char
  • Must not mutate props


State is essentially a property on component classes that is accessible at this.state.

  • Only mutate state using setState
  • setState is asynchronous
  • setState merges properties shallowly
  • state is local to a given component and uses a top-down data flow


  • Mouting is when an element is rendered to the DOM for the first time
  • Unmounting is when an element is removed from the DOM

Lifecycle Methods

  • componentDidMount
  • componentWillUnmount

Did you come across some excellent resources when learning React? Did you have a turning point where react suddenly ‘made sense’ to you? Let me know in the comments.