👋 Hey, Web Devs

If you want to build web applications with React, this guide will get you there.

This guide is a compilation of the best quality material on the internet for learning development practices in React projects.

What's covered here is typically high-level, the basics, or only a preview of what you can expect when working with a feature/library. After exposing you to the basics, off-site links will be recommended to explain the concepts you need to learn in more detail.

It may be hard to avoid arguments over ideologies, clashes in opinions, or disagreements of philosophy, but this website will keep things civil! The main point is to surface the best ideas.

Specific Parts of JS for 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 processes and the information carried.

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

Things to Read Twice (or more)

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:

• Thinking in React
• Responding to Events (like clicking, typing, scrolling, etc.)
• Describing the UI
• Managing State (locally, in components)
• Built-In React Hooks (hooks reference)
  • A Complete Guide to useEffect - a very detailed article on the nuance of useEffect by core-team member Dan Abramov
  • Myths about useEffect
• Escape Hatches
• Common Beginner Mistakes with React

All About Rendering

• Rendering in React
  • Why React Renders
  • Why React Re-Renders
  • A (mostly) complete guide to react rendering behavior
  • React, Visualized
  • A Visual Guide to React Rendering
  • Interactive CodeSandbox to Demonstrate React Rendering (Parent/Child)
    • Notice that Component B in this example is memoized with memo()
  • React recursively re-renders child components, but there is a nuance
    • Props changing will trigger a re-render or all child components directly used in a parent
    • the children prop changes will NOT trigger re-renders (assuming you just pass the {children} right through to render in the component's definition)

Courses & Videos

Free React Courses & Tutorials

• Egghead.io (react lessons - free tier) - catalog of React tutorials/lessons
• The Beginner's Guide to React - video course by Kent C. Dodds
• Interactive React Tutorial - build React projects with Jad Joubran

Misc

• How React Works - 2023