⚛ 🤌React Handbook

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

Why React?

As a React enthusiast and the author of the React Handbook, I often get asked why I like React more than other UI frameworks. I'll try to answer that below:

At the core of React is an idea that really resonates with me when building software: simplicity. While there are some not-so-simple concepts to learn before truly mastering React as a tool, I do believe it is the simplest API available today for building UIs.

Many developers might claim React's simplicity (or flexibility) makes it ripe for misuse and leads to spaghetti-filled codebases (especially on large teams).

That ^ may be a valid critique. I've seen some pretty bad React code in my days.

And maybe some people aren't wrong when they say, "A more opinionated and rigid framework like Angular gives less room for chaotic code and provides guardrails to the team".

But even acknowledging all that - in my eight years building for the web, my most memorable & delightful work experiences were on applications built with React. It made building UIs and frontends so much fun and simple. I want to help other engineering teams feel that same delight when working on their React codebase.

React Basics

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.

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:

Free React Courses & Tutorials

Ready for more?

Head on over and see the topics we try to cover.