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

Rendering Content Conditionally

Imagine the following scenario. You have a button that, when clicked, should result in the display of an extra text box, as shown below:

Figure 5.1: Initially, nothing but the button shows up on the screen.

After a click on the button:

Figure 5.2: After clicking the button, the info box is revealed.

This is a very simple example, but not an unrealistic one. Many websites have parts of the user interface that work like this. Showing extra information upon a button click (or some similar interaction) is a common pattern. Just think of nutrition information below a meal on a food order site or an FAQ section where answers are shown after selecting a question.

So, how could this scenario be implemented in a React app?

If you ignore the requirement of rendering some of the content conditionally, the overall React component could look like this:

function TermsOfUse() {
 return (
  <section>
   <button>Show Terms of Use Summary</button>...
End of Section 4
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