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:

You are new to React.
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:

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.

Handling Events—Users interact with your UI components through events. Unless your page is purely static, you will likely want to recognize and react to these events.
AJAX and APIs—React applications often communicate with a server (or multiple servers) outside of the initial request/response cycle in which the page is retrieved by the browser. For example, the user may select a new date in a calendar application, prompting the application to retrieve a list of events scheduled for that date. These interactions occur through AJAX requests.
Context—Application state is often stored at the top of the component tree but utilized at the bottom. The obvious way to facilitate this sharing is to pass the state as props. If the application has many layers, this results in a “prop drilling” pattern in which many components receive a prop for the sole purpose of passing it to a child component. This pattern is verbose and often confusing to read. Contexts provide an alternative method of passing props without requiring each intermediate component to handle (or even be aware of) the communication.
Styling and CSS—CSS integrates with React in a relatively straightforward manner. Additional libraries are available for more advanced styling tasks, but understanding basic CSS and a few React-specific syntax quirks is initially sufficient.
Hooks—Historically, functional components were pure maps from props to rendered elements. They had no internal state and exposed only the render lifecycle method. React 16.8 introduced “hooks” which allow functional components to behave more like class-based components.

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.