React (WIP)


React is “a Javascript library for building user interfaces.” This lesson provides a recommended structure for learning the basic syntax and concepts of React.

Learning Material

Getting Started in React

This sequence assumes that:

  1. You are new to React.
  2. You are preparing to work on a project which already utilizes React.

If you will be responsible for adding React to a project or starting a new React project, you will need to supplement these resources.

The React docs are written in an approachable style and are used extensively below. Working through all of the Main Concepts and the Advanced Guides, as needed, is a worthwhile investment if you will be using React on a regular basis.

React Syntax and Terminology

From the React Main Concepts:

  1. Hello World
  2. Introducing JSX
  3. Rendering Elements
  4. Components and Props
  5. State and Lifecycle

Understanding these sections should prepare you to read idiomatic React and understand basic rendering and data flow. You will also be equipped to make modifications at the individual component level.

Component Design

Thinking in React, again from the Main Concepts, provides a mental model for decomposing a desired UX outcome into a set of React components. Reading this guide is highly recommended before attempting to add new components or functionality to a project.

Lifting State Up and Composition vs Inheritance describe best practices for implementing some of the concepts described in Thinking in React.

Common React Subtopics

These topics may not be immediately relevant to your project, but they are common enough that you will almost certainly encounter them if you work in React for long.

State Management

Large React applications typically accumulate a proportionately large amount of internal state. Some of this state is easily encapsulated into individual components. For example, the text value of an input element can often belong solely to its component. But state often needs to be shared between components. Further complicating the issue, state which is initially utilized only locally will frequently become more global as the project expands. If such problems are addressed in an ad hoc fashion, it can quickly become difficult to track and reason about the flow of state within the project.

State management libraries provide a framework for addressing this problem in a consistent manner. The relative merits of these libraries are the topic of innumerable blog posts and Medium articles. Rather than relitigate these debates, we present only a list of commonly used libraries:

Note that React-only approaches have become more viable as React’s internal state management capabilities have improved, particularly for applications with relatively simple state management needs.


No problems are written for this lesson yet.

Continuous Lesson Improvement

Open the lesson page in the GitHub editor.

Remove any exercises or learning material that are not useful to the intended audience. Find ways to shorten and clarify the writing. Add generally useful exercises, responses, or learning material. Your improvements will make our training program great!

Create a new branch and pull request and assign it to your lesson mentor. The available lesson mentors are included in the YAML front matter of the lesson. They will set up a time to review your suggested changes and to talk through your exercises for the lesson.

After the review add your self to the "completed" property in the lesson's YAML front matter and merge in your changes!