Rendering Lists and Conditional Content

Book Overview & Buying
Table Of Contents

React Key Concepts - Second Edition

By : Maximilian Schwarzmüller

4.8 (6)

Buy this Book

React Key Concepts

4.8 (6)

By: Maximilian Schwarzmüller

Buy this Book

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 nine 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.

Preface

Who This Book Is For

What This Book Covers

Staying Up to Date with This Book

Following Along with the Book

Get in Touch

Share Your Thoughts

Download the Free PDF and Supplementary Content

Description of Supplementary Content

Free Chapter

React – What and Why

Introduction

What is React?

The Problem with “Vanilla JavaScript”

React and Declarative Code

Introducing SPAs

Summary and Key Takeaways

Join Us on Discord

Understanding React Components and JSX

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

Components and Props

Introduction

Can Components Do More?

Using Props in Components

Components, Props, and Reusability

Summary and Key Takeaways

Apply What You Learned

Working with Events and State

Introduction

What’s the Problem?

Updating State Correctly

Working with Multiple State Values

Deriving Values from State

Summary and Key Takeaways

Apply What You Learned

Rendering Lists and Conditional Content

Introduction

What Are Conditional Content and List Data?

Rendering Content Conditionally

Outputting List Data

Summary and Key Takeaways

Apply What You Learned

Styling React Apps

Introduction

How Does Styling Work in React Apps?

The Problem with Unscoped Styles

Summary and Key Takeaways

Apply What You Learned

Portals and Refs

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

Handling Side Effects

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

Handling User Input & Forms with Form Actions

Introduction

Handling Form Submissions without Actions

Handling Form Submissions with Actions

Behind the Scenes: Actions Are Transitions

Managing State Based on Form Submissions

Performing Optimistic Updates

Summary and Key Takeaways

Apply What You Learned

Behind the Scenes of React and Optimization Opportunities

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

Working with Complex State

Introduction

A Problem with Cross-Component State

Using Context to Handle Multi-Component State

Using the Context API Efficiently

Limitations of useState( )

Managing State with useReducer( )

Summary and Key Takeaways

Apply What You Learned

Building Custom React Hooks

Introduction

Introducing Custom Hooks

Custom Hooks: A Flexible Feature

A More Complex Example

Using Custom Hooks for Context Access

Summary and Key Takeaways

Apply What You Learned

Multipage Apps with React Router

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

Managing Data with React Router

Introduction

Data Fetching and Routing Are Tightly Coupled

Loading Data with React Router

Layouts Revisited

Handling Errors

Onward to Data Submission

Summary and Key Takeaways

Apply What You Learned

Server-side Rendering & Building Fullstack Apps with Next.js

Introduction

What’s the Problem with Client-Side React Apps?

Making Sense of Server-side Rendering (SSR)

Adding SSR to a React Application

Introducing Next.js

Diving Deeper into Next.js

Summary and Key Takeaways

Apply What You Learned

React Server Components & Server Actions

Introduction

The Problem with Server-side Data Fetching

Introducing RSCs

From Data Fetching to Data Mutations

Summary and Key Takeaways

Apply What You Learned

Understanding React Suspense & The use() Hook

Introduction

Showing Granular Fallback Content with Suspense

Suspense Usage Patterns

Should You Fetch Data via Suspense or useEffect()?

Summary and Key Takeaways

Test Your Knowledge!

Apply What You Learned

Next Steps and Further Resources

Introduction

How Should You Proceed?

Final Words

Join Us on Discord

Why Subscribe?

Other Books You May Enjoy

Share Your Thoughts

Index

Download the Free PDF and Supplementary Content

Description of Supplementary Content

React Key Concepts - Second Edition

By : Maximilian Schwarzmüller

React Key Concepts

By: Maximilian Schwarzmüller

Overview of this book

Apply What You Learned

Activity 5.1: Showing a Conditional Error Message

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access