⚛ 🤌React Handbook

React Fundamentals

What You'll Learn

  • Resources for learning JavaScript & TypeScript
  • Core React concepts you absolutely need to know
  • Advanced understanding of render/re-render behavior in React
  • More crash courses & tutorials to help you learn React

JavaScript & TypeScript (JS/TS)

JavaScript

TypeScript

A JavaScript (JS) developer can pick up the basics of TypeScript (TS) in about 10 minutes. But learning TS is more than just adding "types" to your variables here and there. It's about removing the possibility of a bug you'll probably run into if you wrote an application in pure JS. It's likely you already have an internal mental model of "data structures" when you're coding in JS - TypeScript just solidifies those mental models (in your head) into actual "rules" that can apply to your code and how it gets used.

The class of bugs you're getting rid of are all those pesky (…cannot read… 'undefined') errors in the console. If you're ready to get started, check out some of the links below:

It is not an exaggeration to call TypeScript an entire programming language. The good news is you can adopt TS complexity only as it aids you. Sometimes you might have to temporarily level up or step outside your level of expertise to complete a feature. For example, if a library gives you code to work with and it's more advanced TS than you can ordinarily write on your own, it's perfectly acceptable to use it. In most cases, adopting it incrementally in your JS projects and code is pretty painless, and it allows you to learn at your own pace without halting development altogether.

Applying JS/TS to React

To give you a quick idea of the current state of React, check out this 2-minute clip by Fireship titled React in 100 Seconds. While it barely scratches the surface, it quickly communicates why React is so popular today (an important context to keep in mind).

Some JS fundamentals you'll want to brush up on are Events, Promises, Arrays. Events drive interactivity in web applications. Understanding events at their core and how they propagate through the DOM (in the correct hierarchy and order) is critical to understanding browser behavior. To understand events, you should start by reading An Interactive Guide to JavaScript Events by Aleksandr Hovhannisyan.

Asynchronous JavaScript allows us to write UIs and apps with non-blocking interactivity. At the same time, potentially long-running processes run in the background, which helps us defer behavior until those processes have been completed. Promises are the primary way of dealing with asynchronous behavior and the associated information.

Arrays have developed as of ES6 and now provide rich means of manipulating datasets. Read more about the functions of Arrays in JavaScript.

React Concepts You MUST Know

Now, moving onto the React API, JSX is a declarative way to describe our UI. React allows us to ignore the chaos of browser DOM APIs for rendering our apps (or mobile rendering in the case of react-native). You're really going to want to know JSX.

Below are some specific recommended articles both in the docs and from various sources to help you "think" like a React developer. We recommend them precisely because they help you build the mental model of how React works:

Really Understanding How Rendering Works in React

Many newcomers to React think a performant React app means simply cutting down the number of "re-renders" - but to really master performant React code you need to understand when/how/why re-renders happen, and what's actually happening when a re-render occurs.

Advanced Material on Rendering in React

Courses & Video Tutorials

Crash courses and more you can blow through below.