An Atlas for Learning React

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

• The official React guide to main concepts
• React as a UI Runtime (Learning react from first principles)

Tools

• 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

Ecosystem

• Next.js, Server-side rendering
• Redux

Tutorials

• Official React Tutorial
• The Road to React with Firebase

People

• Jordan Walke, creator of React
• Dan Abramov, creator of Redux and Create React App

Glossary of Terms

Elements

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

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

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

Mounting

• 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.