React (WIP)

Purpose

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.

Exercises

No problems are written for this lesson yet.

Continuous Lesson Improvement

Please help us make these lessons as relevant and up-to-date for future engineers as possible!

You can help in several ways:

  • Shorten or clarify the writing. We're all busy and less is more.
  • Ask if the purpose of the lesson is unclear. We want all of the lessons to seem useful.
  • Remove exercises or learning material that aren't useful.
  • Add more exercises, exercise answers, or learning material as appropriate.

You can quickly open the lesson page in the GitHub editor. Create a new branch and pull request and assign it to David.