React is “a Javascript library for building user interfaces.” This lesson provides a recommended structure for learning the basic syntax and concepts of React.
This sequence assumes that:
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.
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.
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.
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.
render
lifecycle method. React 16.8 introduced “hooks” which allow functional components to behave more like class-based components.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.
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!