React Key Concepts. Consolidate your knowledge of React’s core features

591 Pages·2022·4.68 MB·English

by  M. Schwarzmuller

React
Key Concepts
Consolidate your knowledge of React's
core features
Maximilian Schwarzmüller
React Key Concepts
Copyright © 2022 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval
system, or transmitted in any form or by any means without the prior written
permission of the publisher, except in the case of brief quotations embedded in
critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of
the information presented. However, the information contained in this book is sold
without warranty, either express or implied. Neither the author nor Packt Publishing
and its dealers and distributors will be held liable for any damages caused or alleged
to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all
companies and products mentioned in this book by the appropriate use of capitals.
However, Packt Publishing cannot guarantee the accuracy of this information.
Author: Maximilian Schwarzmüller
Reviewer: Cihan Yakar
Senior Editor: Megan Carlisle
Acquisitions Editors: Bridget Kenningham and Sneha Shinde
Production Editor: Shantanu Zagade
Editorial Board: Vijin Boricha, Megan Carlisle, Ketan Giri, Heather Gopsill,
Akin Babu Joseph, Bridget Kenningham, Manasa Kumar, Alex Mazonowicz,
Monesh Mirpuri, Aaron Nash, Abhishek Rane, Brendan Rodrigues, Ankita Thakur,
Nitesh Thakur, and Jonathan Wray
First published: December 2022
Production reference: 1211222
ISBN: 978-1-80323-450-2
Published by Packt Publishing Ltd.
Livery Place, 35 Livery Street
Birmingham B3 2PB, UK
Table of Contents
Preface i
Chapter 1: React – What and Why 1
Introduction .............................................................................................. 2
What Is React? .............................................................................................. 2
The Problem with "Vanilla JavaScript" ...................................................... 4
React and Declarative Code ........................................................................ 8
How React Manipulates the DOM ............................................................ 12
Introducing Single Page Applications ...................................................... 14
Creating a React Project ............................................................................ 14
Summary and Key Takeaways .................................................................. 17
What's Next? ............................................................................................... 17
Test Your Knowledge! ................................................................................ 18
Chapter 2: Understanding React Components and JSX 21
Introduction ........................................................................................... 22
What Are Components? ............................................................................ 22
Why Components? ..................................................................................... 23
The Anatomy of a Component ................................................................. 24
What Exactly Are Component Functions? ............................................... 27
What Does React Do with All These Components? ................................ 28
Built-in Components .................................................................................. 32
Naming Conventions ................................................................................. 33
JSX vs HTML vs Vanilla JavaScript ............................................................. 34
Using React without JSX ............................................................................ 36
JSX Elements Are Treated like Regular JavaScript Values! .................... 38
JSX Elements Must Be Self-Closing ........................................................... 40
Outputting Dynamic Content ................................................................... 41
When Should You Split Components? ..................................................... 41
Summary and Key Takeaways .................................................................. 43
What's Next? ............................................................................................... 43
Test Your Knowledge! ................................................................................ 44
Apply What You Learned ........................................................................... 44
Activity 2.1: Creating a React App to Present Yourself .......................... 44
Activity 2.2: Creating a React App to Log Your Goals for This Book .... 45
Chapter 3: Components and Props 49
Introduction ........................................................................................... 50
Not There Yet ............................................................................................. 50
Using Props in Components ..................................................................... 51
Passing Props to Components ................................................................. 51
Consuming Props in a Component .......................................................... 52
Components, Props, and Reusability ...................................................... 53
The Special "children" Prop ...................................................................... 54
Which Components Need Props? ............................................................ 55
How to Deal with Multiple Props ............................................................. 56
Spreading Props ......................................................................................... 57
Prop Chains / Prop Drilling ....................................................................... 59
Summary and Key Takeaways .................................................................. 60
What's Next? ............................................................................................... 60
Test Your Knowledge! ................................................................................ 61
Apply What You Learned ........................................................................... 61
Activity 3.1: Creating an App to Output Your Goals for This Book ...... 61
Chapter 4: Working with Events and State 65
Introduction ........................................................................................... 66
What's the Problem? ................................................................................. 66
How Not to Solve the Problem ................................................................. 67
A Better Incorrect Solution ....................................................................... 69
Properly Reacting to Events ...................................................................... 71
Updating State Correctly ........................................................................... 73
A Closer Look at useState() ....................................................................... 75
A Look under the Hood of React .............................................................. 76
Naming Conventions ................................................................................. 78
Allowed State Value Types ........................................................................ 78
Working with Multiple State Values ........................................................ 79
Using Multiple State Slices ........................................................................ 80
Managing Combined State Objects ......................................................... 82
Updating State Based on Previous State Correctly ............................... 84
Two-Way Binding ....................................................................................... 88
Deriving Values from State ....................................................................... 90
Working with Forms and Form Submission ............................................ 92
Lifting State Up ........................................................................................... 94
Summary and Key Takeaways .................................................................. 98
What's Next? ............................................................................................... 99
Test Your Knowledge! ................................................................................ 99
Apply What You Learned ........................................................................... 99
Activity 4.1: Building a Simple Calculator .............................................. 100
Activity 4.2: Enhancing the Calculator ................................................... 101
Chapter 5: Rendering Lists and Conditional Content 103
Introduction ......................................................................................... 104
What Are Conditional Content and List Data? ..................................... 104
Rendering Content Conditionally .......................................................... 106
Different Ways of Rendering Content Conditionally ........................... 109
Utilizing Ternary Expressions ..........................................................................109
Abusing JavaScript Logical Operators ............................................................112
Get Creative! ......................................................................................................113
Which Approach Is Best? ..................................................................................114
Setting Element Tags Conditionally ....................................................... 114
Outputting List Data ................................................................................ 116
Mapping List Data .................................................................................... 119
Updating Lists ........................................................................................... 121
A Problem with List Items ....................................................................... 124
Keys to the Rescue! .................................................................................. 127
Summary and Key Takeaways ................................................................ 129
What's Next? ............................................................................................. 129
Test Your Knowledge! .............................................................................. 130
Apply What You Learned ......................................................................... 130
Activity 5.1: Showing a Conditional Error Message ............................. 130
Activity 5.2: Outputting a List of Products ............................................ 131
Chapter 6: Styling React Apps 135
Introduction ......................................................................................... 136
How Does Styling Work in React Apps? ................................................. 136
Using Inline Styles .................................................................................... 140
Setting Styles via CSS Classes ................................................................. 142
Setting Styles Dynamically ...................................................................... 144
Conditional Styles .................................................................................... 146
Combining Multiple Dynamic CSS Classes ............................................ 148
Merging Multiple Inline Style Objects ................................................... 149
Building Components with Customizable Styles ................................. 150
Customization with Fixed Configuration Options ........................................151
The Problem with Unscoped Styles ....................................................... 152
Scoped Styles with CSS Modules ............................................................ 152
The styled-components Library ............................................................. 156
Using Other CSS or JavaScript Styling Libraries
and Frameworks ...................................................................................... 158
Summary and Key Takeaways ................................................................ 159
What's Next? ........................................................................................ 160
Test Your Knowledge! .............................................................................. 160
Apply What You Learned ................................................................... 160
Activity 6.1: Providing Input Validity Feedback
upon Form Submission ........................................................................... 160
Activity 6.2: Using CSS Modules for Style Scoping ............................... 162
Chapter 7: Portals and Refs 165
Introduction ......................................................................................... 166
A World without Refs ............................................................................... 166
Refs versus State ...................................................................................... 170
Using Refs for More than DOM Access .................................................. 172
Forwarding Refs ....................................................................................... 175
Controlled versus Uncontrolled Components ...................................... 181
React and Where Things End up in the DOM ....................................... 184
Portals to the Rescue ............................................................................... 187
Summary and Key Takeaways ................................................................ 189
What's Next? ............................................................................................. 190
Test Your Knowledge! .............................................................................. 190
Apply What You Have Learned ............................................................... 190
Activity 7.1: Extract User Input Values .................................................. 191
Activity 7.2: Add a Side-Drawer .............................................................. 192
Chapter 8: Handling Side Effects 197
Introduction ......................................................................................... 198
What's the Problem? ............................................................................... 198
Understanding Side Effects .................................................................... 200
Side Effects Are Not Just about HTTP Requests ................................... 202
Dealing with Side Effects with the useEffect() Hook ............................ 204
How to Use useEffect() ............................................................................ 205
Effects and Their Dependencies ............................................................. 207
Unnecessary Dependencies ................................................................... 209
Cleaning Up after Effects ........................................................................ 212
Dealing with Multiple Effects .................................................................. 216
Functions as Dependencies .................................................................... 217
Avoiding Unnecessary Effect Executions .............................................. 223
Effects and Asynchronous Code ............................................................. 230
Rules of Hooks .......................................................................................... 231
Summary and Key Takeaways ................................................................ 232
What's Next? ............................................................................................. 233
Test Your Knowledge! .............................................................................. 233
Apply What You Learned ......................................................................... 233
Activity 8.1: Building a Basic Blog ........................................................... 234
Chapter 9: Behind the Scenes of React and
Optimization Opportunities 237
Introduction ......................................................................................... 238
Revisiting Component Evaluations and Updates ................................. 238
What Happens When a Component Function Is Called ...................... 241
The Virtual DOM vs the Real DOM ......................................................... 242
State Batching .......................................................................................... 245
Avoiding Unnecessary Child Component Evaluations ........................ 247
Avoiding Costly Computations ............................................................... 252
Utilizing useCallback() ............................................................................. 256
Avoiding Unnecessary Code Download ................................................ 259
Reducing Bundle Sizes via Code Splitting (Lazy Loading) ................... 260
Strict Mode ................................................................................................ 267
Debugging Code and the React Developer Tools ................................. 268
Summary and Key Takeaways ................................................................ 272