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
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
chevron up
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

How Does Styling Work in React Apps?

Up to this point, the apps and examples presented in this book have only had minimal styling. But they at least had some basic styling, rather than no styling at all.

But how was that styling added? How can styles be added to user interface elements (such as DOM elements) when using React?

The short answer is "just as you would to non-React apps". You can add CSS styles and classes to JSX elements just as you would to regular HTML elements. And in your CSS code, you can use all the features and selectors you know from CSS. There are no React-specific changes you have to make when writing CSS code.

The code examples used up to this point (i.e., the activities or other examples hosted on GitHub) always used regular CSS styling with the help of CSS selectors to apply some basic styles to the final user interface. Those CSS rules were defined in an index.css file, which is part of every newly created React project (when using Vite for project...

End of Section 3
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