React: The Comprehensive Guide

Notes on Usage
Table of Contents
  Foreword
  Preface
     Structure of the Book
     Download the Code Samples
     Acknowledgments
1   Getting Started with React
   1.1   What Is React?
      1.1.1   Single-Page Applications
      1.1.2   The Story of React
   1.2   Why React?
   1.3   The Most Important Terms and Concepts of the React World
      1.3.1   Components and Elements
      1.3.2   Data Flow
      1.3.3   The Renderer
      1.3.4   The Reconciler
   1.4   A Look into the React Universe
      1.4.1   State Management
      1.4.2   The Router
      1.4.3   Material UI
      1.4.4   Jest
   1.5   Thinking in React
      1.5.1   Decomposing the UI into a Component Hierarchy
      1.5.2   Implementing a Static Version in React
      1.5.3   Defining the Minimum UI State
      1.5.4   Defining the Location of the State
      1.5.5   Modeling the Inverse Data Flow
   1.6   Code Examples
   1.7   Summary
2   The First Steps in the Development Process
   2.1   Quick Start
      2.1.1   Initialization
      2.1.2   TypeScript Support
   2.2   Playgrounds for React
      2.2.1   CodePen: A Playground for Web Development
      2.2.2   A React Project on CodePen
   2.3   Local Development
   2.4   Getting Started with Developing in React
      2.4.1   Requirements
      2.4.2   Installing Create React App
      2.4.3   Alternatives to Create React App
      2.4.4   React Scripts
      2.4.5   Server Communication in Development Mode
      2.4.6   Encrypted Communication during Development
   2.5   The Structure of the Application
   2.6   Troubleshooting in a React Application
   2.7   Building the Application
   2.8   Summary
3   Basic Principles of React
   3.1   Preparation
      3.1.1   Tidying Up the Application
   3.2   Getting Started with the Application
      3.2.1   The index.jsx File: Renderingthe Application
      3.2.2   The App.jsx File: The Root Component
   3.3   Function Components
      3.3.1   One Component per File
   3.4   JSX: Defining Structures in React
      3.4.1   Expressions in JSX
      3.4.2   Iterations: Loops in Components
      3.4.3   Conditions in JSX
   3.5   Props: Information Flow in an Application
      3.5.1   Props and Child Components
      3.5.2   Type Safety with PropTypes
   3.6   Local State
   3.7   Event Binding: Responding to User Interactions
      3.7.1   Responding to Events
      3.7.2   Using Event Objects
   3.8   Immutability
      3.8.1   Immer in a React Application
   3.9   Summary
4   A Look Behind the Scenes: Further Topics
   4.1   The Lifecycle of a Component
   4.2   The Lifecycle of a Function Component with the Effect Hook
      4.2.1   Mount: The Mounting of a Component
      4.2.2   Update: Updating the Component
      4.2.3   Unmount: Tidying Up at the End of the Lifecycle
   4.3   Server Communication
      4.3.1   Server Implementation
      4.3.2   Server Communication via the Fetch API
      4.3.3   Things to Know about Server Communication
      4.3.4   Server Communication with Axios
   4.4   Container Components
      4.4.1   Swapping Out Logic to a Container Component
      4.4.2   Integrating the Container Component
      4.4.3   Implementing the Presentational Component
   4.5   Higher-Order Components
      4.5.1   A Simple Higher-Order Component
      4.5.2   Integrating a Higher-Order Component in the BooksList Component
      4.5.3   Integrating the Higher-Order Component
   4.6   Render Props
      4.6.1   Alternative Names for Render Props
      4.6.2   Integrating the Render Props into the Application
   4.7   Context
      4.7.1   The Context API
      4.7.2   Using the Context API in the Sample Application
   4.8   Fragments
   4.9   Summary
5   Class Components
   5.1   Class Components in React
   5.2   Basic Structure of a Class Component
   5.3   Props in a Class Component
      5.3.1   Defining Prop Structures Using PropTypes
      5.3.2   Default Values for Props
   5.4   State: The State of the Class Component
      5.4.1   Initializing the State via the State Property of the Class
      5.4.2   Initializing the State in the Constructor
   5.5   The Component Lifecycle
      5.5.1   Constructor
      5.5.2   “getDerivedStateFromProps”
      5.5.3   “render”
      5.5.4   “componentDidMount”
      5.5.5   “shouldComponentUpdate”
      5.5.6   “getSnapshotBeforeUpdate”
      5.5.7   “componentDidUpdate”
      5.5.8   “componentWillUnmount”
      5.5.9   Unsafe Hooks
   5.6   Error Boundaries
      5.6.1   Logging Errors Using “componentDidCatch”
      5.6.2   Alternative Representation in Case of an Error with “getDerivedStateFromError”
   5.7   Using the Context API in a Class Component
   5.8   Differences between Function and Class Components
      5.8.1   State
      5.8.2   Lifecycle
   5.9   Summary
6   The Hooks API of React
   6.1   A First Overview
      6.1.1   The Three Basic Hooks
      6.1.2   Other Components of the Hooks API
   6.2   “useReducer”: The Reducer Hook
      6.2.1   The Reducer Function
      6.2.2   Actions and Dispatching
      6.2.3   Asynchronicity in the Reducer Hook
   6.3   “useCallback”: Memoizing Functions
   6.4   “useMemo”: Memoizing Objects
   6.5   “useRef”: References and Immutable Values
      6.5.1   Form Handling Using the Ref Hook
      6.5.2   Caching Values Using the Ref Hook
   6.6   “useImperativeHandle”: Controlling Forward Refs
      6.6.1   Forward Refs
      6.6.2   The Imperative Handle Hook
   6.7   “useLayoutEffect”: The Synchronous Alternative to “useEffect”
   6.8   “useDebugValue”: Debugging Information in React Developer Tools
   6.9   “useDeferredValue”: Performing Updates According to Priority
   6.10   “useTransition”: Lowering the Priority of Operations
   6.11   “useId”: Creating Unique Identifiers
   6.12   Library Hooks
      6.12.1   “useSyncExternalStore”
      6.12.2   “useInsertionEffect”
   6.13   Custom Hooks
   6.14   Rules of Hooks: Things to Consider
      6.14.1   Rule #1: Execute Hooks Only at the Top Level
      6.14.2   Rule #2: Hooks May Only Be Used in Function Components or Custom Hooks
   6.15   Changing over to Hooks
   6.16   Summary
7   Type Safety in React Applications with TypeScript
   7.1   What Is the Benefit of a Type System?
   7.2   The Different Type Systems
   7.3   Type Safety in a React Application with Flow
      7.3.1   Integration into a React Application
      7.3.2   The Major Features of Flow
      7.3.3   Flow in React Components
   7.4   Using TypeScript in a React Application
      7.4.1   Integrating TypeScript in a React Application
      7.4.2   Configuration of TypeScript
      7.4.3   The Major Features of TypeScript
      7.4.4   Type Definitions: Information about Third-Party Software
   7.5   TypeScript and React
      7.5.1   Adding TypeScript to an Existing Application
      7.5.2   Basic Features
      7.5.3   Function Components
      7.5.4   Context
      7.5.5   Class Components
   7.6   Summary
8   Styling React Components
   8.1   CSS Import
      8.1.1   Advantages and Disadvantages of CSS Import
      8.1.2   Dealing with Class Names
      8.1.3   Improved Handling of Class Names via the “classnames” Library
      8.1.4   Using Sass as CSS Preprocessor
   8.2   Inline Styling
   8.3   CSS Modules
   8.4   CSS in JavaScript Using Emotion
      8.4.1   Installing Emotion
      8.4.2   Using the “css” Prop
      8.4.3   The Styled Approach of Emotion
      8.4.4   Pseudoselectors in Styled Components
      8.4.5   Dynamic Styling
      8.4.6   Other Features of Styled Components
   8.5   Tailwind
   8.6   Summary
9   Securing a React Application through Testing
   9.1   Getting Started with Jest
      9.1.1   Installation and Execution
      9.1.2   Organization of the Tests
      9.1.3   Jest: The Basic Principles
      9.1.4   Structure of a Test: Triple A
      9.1.5   The Matchers of Jest
      9.1.6   Grouping Tests: Test Suites
      9.1.7   Setup and Teardown Routines
      9.1.8   Skipping Tests and Running Them Exclusively
      9.1.9   Handling Exceptions
      9.1.10   Testing Asynchronous Operations
   9.2   Testing Helper Functions
   9.3   Snapshot Testing
   9.4   Testing Components
      9.4.1   Testing the “BooksListItem” Component
      9.4.2   Testing the Interaction
   9.5   Dealing with Server Dependencies
      9.5.1   Simulating Errors during Communication
   9.6   Summary
10   Forms in React
   10.1   Uncontrolled Components
      10.1.1   Handling References in React
   10.2   Controlled Components
   10.3   File Uploads
   10.4   Form Validation Using React Hook Form
      10.4.1   Form Validation Using React Hook Form
      10.4.2   Form Validation Using a Schema
      10.4.3   Styling the Form
      10.4.4   Testing the Form Validation Automatically
   10.5   Summary
11   Component Libraries in a React Application
   11.1   Installing and Integrating Material UI
   11.2   List Display with the “Table” Component
      11.2.1   Filtering the List in the Table
      11.2.2   Sorting the Table
   11.3   Grids and Breakpoints
   11.4   Icons
   11.5   Deleting Data Records
      11.5.1   Preparing a Delete Operation
      11.5.2   Implementing a Confirmation Dialog
      11.5.3   Deleting Data Records
   11.6   Creating New Data Records
      11.6.1   Preparing the Creation of Data Records
      11.6.2   Implementation of the “Form” Component
      11.6.3   Integration of the Form Dialog
   11.7   Editing Data Records
   11.8   Summary
12   Navigating Within an Application: The Router
   12.1   Installation and Integration
   12.2   Navigating in the Application
      12.2.1   The Best Route Is Always Activated
      12.2.2   A Navigation Bar for the Application
      12.2.3   Integrating the Navigation Bar
   12.3   “NotFound” Component
   12.4   Testing the Routing
   12.5   Conditional Redirects
   12.6   Dynamic Routes
      12.6.1   Defining Subroutes
   12.7   Summary
13   Creating Custom React Libraries
   13.1   Creating a Custom Component Library
      13.1.1   Initializing the Library
      13.1.2   The Structure of the Library
      13.1.3   Hooks in the Library
      13.1.4   Building the Library
   13.2   Integrating the Library
      13.2.1   Regular Installation of the Package
   13.3   Testing the Library
      13.3.1   Preparing the Testing Environment
      13.3.2   Unit Test for the Library Component
      13.3.3   Unit Test for the Custom Hook of the Library
   13.4   Storybook
      13.4.1   Installing and Configuring Storybook
      13.4.2   Button Story in Storybook
   13.5   Summary
14   Central State Management Using Redux
   14.1   The Flux Architecture
      14.1.1   The Central Data Store: The Store
      14.1.2   Displaying the Data in the Views
      14.1.3   Actions: The Description of Changes
      14.1.4   The Dispatcher: The Interface between Actions and the Store
   14.2   Installing Redux
   14.3   Configuring the Central Store
      14.3.1   Debugging Using the Redux Dev Tools
   14.4   Handling Changes to the Store Using Reducers
      14.4.1   The Books Slice
      14.4.2   Integration of “BooksSlice”
   14.5   Linking Components and the Store
      14.5.1   Displaying the Data from the Store
      14.5.2   Selectors
      14.5.3   Implementing Selectors Using Reselect
   14.6   Describing Changes with Actions
   14.7   Creating and Editing Data Records 
   14.8   Summary
15   Handling Asynchronicity and Side Effects in Redux
   15.1   Middleware in Redux
   15.2   Redux with Redux Thunk
      15.2.1   Manual Integration of Redux Thunk
      15.2.2   Reading Data from the Server
      15.2.3   Deleting Data Records
      15.2.4   Creating and Modifying Data Records 
   15.3   Generators: Redux Saga
      15.3.1   Installation and Integration of Redux Saga
      15.3.2   Loading Data from the Server
      15.3.3   Deleting Existing Data
      15.3.4   Creating and Modifying Data Records Using Redux Saga
   15.4   State Management Using RxJS: Redux Observable
      15.4.1   Installing and integrating Redux Observable
      15.4.2   Read Access to the Server Using Redux Observable
      15.4.3   Deleting Using Redux Observable
      15.4.4   Creating and Editing Data Records Using Redux Observable
   15.5   JSON Web Token for Authentication
   15.6   Summary
16   Server Communication Using GraphQL and the Apollo Client
   16.1   Introduction to GraphQL
      16.1.1   The Characteristics of GraphQL
      16.1.2   The Disadvantages of GraphQL
      16.1.3   The Principles of GraphQL
   16.2   Apollo: A GraphQL Client for React
      16.2.1   Installation and Integration into the Application
      16.2.2   Read Access to the GraphQL Server
      16.2.3   States of a Request
      16.2.4   Type Support in the Apollo Client
      16.2.5   Deleting Data Records
   16.3   Apollo Client Devtools
   16.4   Local State Management Using Apollo
      16.4.1   Initializing the Local State
      16.4.2   Using the Local State
   16.5   Authentication
   16.6   Summary
17   Internationalization
   17.1   Using react-i18next
      17.1.1   Loading Language Files from the Backend
      17.1.2   Using the Language of the Browser
      17.1.3   Extending the Navigation with Language Switching
   17.2   Using Placeholders
   17.3   Formatting Values
      17.3.1   Formatting Numbers and Currencies
      17.3.2   Formatting Date Values
   17.4   Singular and Plural
   17.5   Summary
18   Universal React Apps with Server-Side Rendering
   18.1   How Does Server-Side Rendering Work?
   18.2   Implementing Server-Side Rendering
      18.2.1   Initializing and Configuring the Server Application
      18.2.2   Implementing the Client-Side Application
      18.2.3   Dynamics in Server-Side Rendering
   18.3   Server-Side Rendering Using Next.js
      18.3.1   Initializing a Next.js Application
      18.3.2   Implementing the Page Component
      18.3.3   Implementing the Server Side
      18.3.4   API Routes in Next.js
   18.4   Summary
19   Performance
   19.1   The Callback Hook
   19.2   Pure Components
   19.3   “React.memo”
   19.4   “React.lazy”: “Suspense” for Code Splitting
      19.4.1   Lazy Loading in an Application
      19.4.2   Lazy Loading with React Router
   19.5   Suspense for Data Fetching
      19.5.1   Installing and Using React Query
      19.5.2   React Query and Suspense
      19.5.3   Concurrency Patterns
   19.6   Virtual Tables
   19.7   Summary
20   Progressive Web Apps
   20.1   Features of a Progressive Web App
   20.2   Initializing the Application
   20.3   Installability
      20.3.1   Secure Delivery of an Application
      20.3.2   The Web App Manifest
      20.3.3   Service Worker in the React Application
      20.3.4   Installing the Application
      20.3.5   Asking the Users
   20.4   Offline Capability
      20.4.1   Integrating Workbox
      20.4.2   Handling Dynamic Data
   20.5   Tools for Development
   20.6   Summary
21   Native Apps with React Native
   21.1   The Structure of React Native
   21.2   Installing React Native
      21.2.1   Project Structure
      21.2.2   Starting the Application
   21.3   Displaying an Overview List
      21.3.1   Static List View
      21.3.2   Styling in React Native
      21.3.3   Search Field for the “List” Component
      21.3.4   Server Communication
   21.4   Debugging in the Simulated React Native Environment
   21.5   Editing Data Records
      21.5.1   Implementing the “Form” Component
   21.6   Publishing
   21.7   Summary
The Author
Index
Service Pages
Legal Notes