React: Key Concepts

Contributors
   About the Author
   About the Reviewers
   Join Us on Discord
Preface
   Who This Book Is For
   What This Book Covers
   Staying Up to Date with This Book
   Following Along with the Book
      Installing React.js
      Download the Example Code Files
      Download the Color Images
      Conventions Used
   Get in Touch
   Share Your Thoughts
   Download the Free PDF and Supplementary Content
   Description of Supplementary Content
React – What and Why
   Introduction
   What is React?
   The Problem with “Vanilla JavaScript”
   React and Declarative Code
      How React Manipulates the DOM
   Introducing SPAs
      Creating a React Project with Vite
   Summary and Key Takeaways
      What’s Next?
      Test Your Knowledge!
   Join Us on Discord
Understanding React Components and JSX
   Introduction
   What Are Components?
      Why Components?
      The Anatomy of a Component
      What Exactly Are Component Functions?
   What Does React Do with All These Components?
      Built-In Components
      Naming Conventions
   JSX vs HTML vs Vanilla JavaScript
      Using React without JSX
      JSX Elements Are Treated Like Regular JavaScript Values
      JSX Elements Must Have a Closing Tag
   Moving Beyond Static Content
      Outputting Dynamic Content
      Rendering Images
   When Should You Split Components?
   Summary and Key Takeaways
      What’s Next?
      Test Your Knowledge!
   Apply What You Learned
      Activity 2.1: Creating a React App to Present Yourself
      Activity 2.2: Creating a React App to Log Your Goals for This Book
Components and Props
   Introduction
   Can Components Do More?
   Using Props in Components
      Passing Props to Components
      Consuming Props in a Component
   Components, Props, and Reusability
      The Special “children” Prop
      Which Components Need Props?
      How to Deal with Multiple Props
      Spreading Props
      Prop Chains/Prop Drilling
   Summary and Key Takeaways
      What’s Next?
      Test Your Knowledge!
   Apply What You Learned
      Activity 3.1: Creating an App to Output Your Goals for This Book
Working with Events and State
   Introduction
   What’s the Problem?
      How Not to Solve the Problem
      A Better Incorrect Solution
      Improving the Solution by Properly Reacting to Events
   Updating State Correctly
      A Closer Look at useState()
         A Look Under the Hood of React
   Working with Multiple State Values
      Using Multiple State Slices
      Managing Merged State Objects
      Updating State Based on Previous State Correctly
      Two-Way Binding
   Deriving Values from State
      Working with Forms and Form Submission
      Lifting State Up
   Summary and Key Takeaways
      What’s Next?
      Test Your Knowledge!
   Apply What You Learned
      Activity 4.1: Building a Simple Calculator
      Activity 4.2: Enhancing the Calculator
Rendering Lists and Conditional Content
   Introduction
   What Are Conditional Content and List Data?
   Rendering Content Conditionally
      Different Ways of Rendering Content Conditionally
         Utilizing Ternary Expressions
         Abusing JavaScript Logical Operators
         Get Creative!
         Which Approach is Best?
      Setting Element Tags Conditionally
   Outputting List Data
      Mapping List Data
      Updating Lists
      A Problem with List Items
         Keys to the Rescue!
   Summary and Key Takeaways
      What’s Next?
      Test Your Knowledge!
   Apply What You Learned
      Activity 5.1: Showing a Conditional Error Message
      Activity 5.2: Outputting a List of Products
Styling React Apps
   Introduction
   How Does Styling Work in React Apps?
      Using Inline Styles
      Setting Styles via CSS Classes
      Setting Styles Dynamically
      Conditional Styles
      Combining Multiple Dynamic CSS Classes
      Merging Multiple Inline Style Objects
      Building Components with Customizable Styles
         Customization with Fixed Configuration Options
   The Problem with Unscoped Styles
      Scoped Styles with CSS Modules
      The styled-components Library
      Use the Tailwind CSS Library for Styling
      Using Other CSS or JavaScript Styling Libraries and Frameworks
   Summary and Key Takeaways
      What’s Next?
      Test Your Knowledge!
   Apply What You Learned
      Activity 6.1: Providing Input Validity Feedback upon Form Submission
      Activity 6.2: Using CSS Modules for Style Scoping
Portals and Refs
   Introduction
   A World without Refs
   Refs versus State
   Using Refs for More than DOM Access
      Refs in Custom Components
      Controlled versus Uncontrolled Components
   React and Where Things End up in the DOM
      Portals to the Rescue
   Summary and Key Takeaways
      What’s Next?
      Test Your Knowledge!
   Apply What You Have Learned
      Activity 7.1: Extract User Input Values
      Activity 7.2: Add a Side Drawer
Handling Side Effects
   Introduction
   What’s the Problem?
   Understanding Side Effects
      Side Effects Are Not Just about HTTP Requests
   Dealing with Side Effects with the useEffect() Hook
      How to Use useEffect()
   Effects and Their Dependencies
      Unnecessary Dependencies
      Cleaning Up after Effects
      Dealing with Multiple Effects
      Functions as Dependencies
      Avoiding Unnecessary Effect Executions
      Effects and Asynchronous Code
      Rules of Hooks
   Summary and Key Takeaways
      What’s Next?
      Test Your Knowledge!
   Apply What You Learned
      Activity 8.1: Building a Basic Blog
Handling User Input & Forms with Form Actions
   Introduction
   Handling Form Submissions without Actions
      Extracting User Input
         Tracking State
         Relying on Refs
         Taking Advantage of the event Object
      Which Solution Is Best?
   Handling Form Submissions with Actions
      Synchronous vs Asynchronous Actions
   Behind the Scenes: Actions Are Transitions
   Managing State Based on Form Submissions
      Updating UI State with useActionState()
         Managing Pending UI State with useActionState()
      Handling Pending UI State with useFormStatus()
   Performing Optimistic Updates
   Summary and Key Takeaways
      What’s Next?
      Test Your Knowledge!
   Apply What You Learned
      Activity 9.1: Managing a Feedback Form
Behind the Scenes of React and Optimization Opportunities
   Introduction
   Revisiting Component Evaluations and Updates
      What Happens When a Component Function Is Called
   The Virtual DOM vs the Real DOM
      State Batching
      Avoiding Unnecessary Child Component Evaluations
      Avoiding Costly Computations
      Utilizing useCallback()
      Using the React Compiler
   Avoiding Unnecessary Code Download
      Reducing Bundle Sizes via Code Splitting (Lazy Loading)
   Strict Mode
   Debugging Code and the React Developer Tools
   Summary and Key Takeaways
      What’s Next?
      Test Your Knowledge!
   Apply What You Learned
      Activity 10.1: Optimize an Existing App
Working with Complex State
   Introduction
   A Problem with Cross-Component State
   Using Context to Handle Multi-Component State
      Providing and Managing Context Values
      Using Context in Nested Components
      Changing Context from Nested Components
   Using the Context API Efficiently
      Getting Better Code Completion
      Context or Lifting State Up?
      Outsourcing Context Logic into Separate Components
      Combining Multiple Contexts
   Limitations of useState( )
   Managing State with useReducer( )
      Understanding Reducer Functions
      Dispatching Actions
   Summary and Key Takeaways
      What’s Next?
      Test Your Knowledge!
   Apply What You Learned
      Activity 11.1: Migrating an App to the Context API
      Activity 11.2: Replacing useState() with useReducer()
Building Custom React Hooks
   Introduction
   Introducing Custom Hooks
      Why Would You Build Custom Hooks?
      A First Custom Hook
   Custom Hooks: A Flexible Feature
      Custom Hooks and Parameters
      Custom Hooks and Return Values
   A More Complex Example
      Building a First Version of the Custom Hook
      Making the Hook Useful by Returning Values
      Improving Reusability by Accepting an Input Parameter
   Using Custom Hooks for Context Access
   Summary and Key Takeaways
      What’s Next?
      Test Your Knowledge!
   Apply What You Learned
      Activity 12.1: Build a Custom Keyboard Input Hook
Multipage Apps with React Router
   Introduction
   One Page Is Not Enough
   Getting Started with React Router and Defining Routes
      Adding Page Navigation
      Working with Layouts & Nested Routes
      From Link to NavLink
      Route Components versus “Normal” Components
   From Static to Dynamic Routes
      Extracting Route Parameters
      Creating Dynamic Links
      Navigating Programmatically
   Redirecting
      Handling Undefined Routes
      Lazy Loading
   Summary and Key Takeaways
      What’s Next?
      Test Your Knowledge!
   Apply What You Learned
      Activity 13.1: Creating a Basic Three-Page Website
Managing Data with React Router
   Introduction
   Data Fetching and Routing Are Tightly Coupled
      Sending HTTP Requests without React Router
   Loading Data with React Router
      Getting Access to Loaded Data
      Loading Data for Dynamic Routes
      Loaders, Requests, and Client-Side Code
   Layouts Revisited
      Reusing Data across Routes
   Handling Errors
   Onward to Data Submission
      Working with action() and Form Data
      Returning Data Instead of Redirecting
      Controlling Which 
 Triggers Which Action
      Reflecting the Current Navigation Status
      Submitting Forms Programmatically
      Behind-the-Scenes Data Fetching and Submission
      Deferring Data Loading
   Summary and Key Takeaways
      What’s Next?
      Test Your Knowledge!
   Apply What You Learned
      Activity 14.1: A To-Dos App
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
      Server-side Data Fetching Is Not Trivial
   Introducing Next.js
      Creating Next.js Projects
      Working with File-Based Routes
      Server-side Rendering with Next.js
      Working with Layouts
      Managing Internal Navigation
         Highlighting Active Links & Using the “use client” Directive
      Creating & Using Regular Components
      Handling Dynamic Routes
      Other Filename Conventions
   Diving Deeper into Next.js
   Summary and Key Takeaways
      What’s Next?
      Test Your Knowledge!
   Apply What You Learned
      Activity 15.1: Migrating a Vite-Based React Router App
React Server Components & Server Actions
   Introduction
   The Problem with Server-side Data Fetching
   Introducing RSCs
      Making Sense of RSCs
      Creating & Using RSCs
      Unlocking RSCs in React Projects
      RSCs and Server Actions Can’t Be Used in All Projects
      RSCs vs Server-side Rendering
      RSCs vs Client Components
         Not All Components Should Be RSCs
         ‘use client’ Affects Child Components, Too!
         Combining RSCs and Client Components
      Advanced Data Fetching with Next.js
         Managing Loading States with Next.js
   From Data Fetching to Data Mutations
      Handling Data Mutations with Server Actions
      Unlocking Server Actions in React Projects
      Defining and Triggering Server Actions
      Handling User Input & Updating the UI
      Server Actions and useActionState()
      Storing Server Actions in Separate Files
   Summary and Key Takeaways
      What’s Next?
      Test Your Knowledge!
   Apply What You Learned
      Activity 16.1: Build a Mini Blog
Understanding React Suspense & The use() Hook
   Introduction
   Showing Granular Fallback Content with Suspense
      Using Suspense for Data Fetching with Next.js
      Using Suspense in Other React Projects—Possible, But Tricky
         Suspense Does Not Work with useEffect()
         Fetching Data while Rendering—the Incorrect Way
         Getting Suspense Support Is Tricky
         Using Suspense for Data Fetching with Supporting Libraries
         use()ing Data while Rendering
   Suspense Usage Patterns
      Revealing Content Together
      Revealing Content as Soon as Possible
      Nesting Suspended Content
   Should You Fetch Data via Suspense or useEffect()?
   Summary and Key Takeaways
      What’s Next?
   Test Your Knowledge!
   Apply What You Learned
      Activity 17.1: Implement Suspense in the Mini Blog
Next Steps and Further Resources
   Introduction
   How Should You Proceed?
      Become a Fullstack React Developer
      Interesting Problems to Explore
         Build a Shopping Cart
         Build an Application’s Authentication System (User Signup and Login)
         Build an Event Management Website
      Common and Popular React Libraries
      Using TypeScript
      Other Resources
      Beyond React for Web Applications
   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