React: The Comprehensive Guide 2265417157, 1385385993, 2023945633, 9781493224401, 9781493224418, 9781493224425

Table of contents :
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