Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • React Key Concepts
  • Toc
  • feedback
React Key Concepts

React Key Concepts

By : Maximilian Schwarzmüller
4.8 (4)
close
React Key Concepts

React Key Concepts

4.8 (4)
By: Maximilian Schwarzmüller

Overview of this book

Maximilian Schwarzmüller is a bestselling instructor who has helped more than three million students worldwide learn how to code. His bestselling React video course, “React – The Complete Guide”, has over eight hundred thousand students on Udemy. Max has written this quick-start reference that distills the core concepts of React. Simple explanations, relevant examples, and step-by-step derivations make this guide the ideal resource for busy developers. In this second edition, Max guides you through changes brought by React 19, including the new use() hook, form actions, and how to think about React on the server. This book will support you through your next React projects in giving you a behind-the-scenes understanding of the framework – whether you've just finished Max's video course and are looking for a handy reference, or you’re using a variety of other learning materials and need a single study guide to bring everything together. You’ll find full solutions to all end-of-chapter quizzes and exercises in the book’s GitHub repository.
Table of Contents (14 chapters)
close
close
Free Chapter
1
React Key Concepts, Second Edition: An in-depth guide to React’s core features
React Key Concepts, Second Edition: An in-depth guide to React’s core features
2
React – What and Why
Before you begin: Join our book community on Discord
Introduction
What Is React?
The Problem with "Vanilla JavaScript"
React and Declarative Code
Introducing Single Page Applications
Summary and Key Takeaways
3
Understanding React Components and JSX
Before you begin: Join our book community on Discord
Introduction
What Are Components?
What Does React Do with All These Components?
JSX vs HTML vs Vanilla JavaScript
Moving Beyond Static Content
When Should You Split Components?
Summary and Key Takeaways
Apply What You Learned
4
Components and Props
Before you begin: Join our book community on Discord
Introduction
Not There Yet
Using Props in Components
Components, Props, and Reusability
How to Deal with Multiple Props
Summary and Key Takeaways
Apply What You Learned
5
Working with Events and State
Before you begin: Join our book community on Discord
Introduction
What's the Problem?
Updating State Correctly
A Look under the Hood of React
Working with Multiple State Values
Deriving Values from State
Summary and Key Takeaways
Apply What You Learned
6
Rendering Lists and Conditional Content
chevron up
Before you begin: Join our book community on Discord
Introduction
What Are Conditional Content and List Data?
Rendering Content Conditionally
Outputting List Data
A Problem with List Items
Summary and Key Takeaways
Apply What You Learned
7
Styling React Apps
Before you begin: Join our book community on Discord
Introduction
How Does Styling Work in React Apps?
Scoped Styles with CSS Modules
Summary and Key Takeaways
Apply What You Learned
8
Portals and Refs
Before you begin: Join our book community on Discord
Introduction
A World without Refs
Refs versus State
Using Refs for More than DOM Access
React and Where Things End up in the DOM
Summary and Key Takeaways
Apply What You Have Learned
9
Handling Side Effects
Before you begin: Join our book community on Discord
Introduction
What's the Problem?
Understanding Side Effects
Dealing with Side Effects with the useEffect() Hook
Effects and Their Dependencies
Summary and Key Takeaways
Apply What You Learned
10
Behind the Scenes of React and Optimization Opportunities
Before you begin: Join our book community on Discord
Introduction
Revisiting Component Evaluations and Updates
The Virtual DOM vs the Real DOM
Avoiding Unnecessary Code Download
Strict Mode
Debugging Code and the React Developer Tools
Summary and Key Takeaways
Apply What You Learned
11
Working with Complex State
Before you begin: Join our book community on Discord
Introduction
A Problem with Cross-Component State
Using Context to Handle Multi-Component State
Limitations of useState( )
Managing State with useReducer( )
Summary and Key Takeaways
Apply What You Learned
12
Building Custom React Hooks
Before you begin: Join our book community on Discord
Introduction
Why Would You Build Custom Hooks?
Custom Hooks: A Flexible Feature
A More Complex Example
Summary and Key Takeaways
Apply What You Learned
13
Multipage Apps with React Router
Before you begin: Join our book community on Discord
Introduction
One Page Is Not Enough
Getting Started with React Router and Defining Routes
From Static to Dynamic Routes
Redirecting
Summary and Key Takeaways
Apply What You Learned
14
Managing Data with React Router
Before you begin: Join our book community on Discord
Introduction
Data Fetching and Routing Are Tightly Coupled
Loading Data with React Router
Getting Access to Loaded Data
Layouts Revisited
Handling Errors
Onward to Data Submission
Summary and Key Takeaways
Apply What You Learned

A Problem with List Items

If you're following along with your own code, you might've noticed that React actually shows a warning in the browser developer tools console, as shown in the following screenshot:

Figure 5.4: React sometimes generates a warning regarding missing unique keys

React is complaining about missing keys.

To understand this warning and the idea behind keys, it's helpful to explore a specific use case and a potential problem with that scenario. Assume that you have a React component that is responsible for displaying a list of items—maybe a list of to-do items. In addition, assume that those list items can be reordered and that the list can be edited in other ways (for example, new items can be added, existing items can be updated or deleted, and so on). Put in other words, the list is not static.

Consider this example user interface, in which a new item is added to a list of to-do items:

Figure 5.5: A list gets updated by inserting a new item at the top
End of Section 6
Next Section
bookmark search playlist download
font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete