Table of Contents

Open all
Close all
Foreword
21
Preface
23
Structure of the Book
24
Download the Code Samples
25
Acknowledgments
25
1 Getting Started with React
27
1.1 What Is React?
27
1.1.1 Single-Page Applications
28
1.1.2 The Story of React
28
1.2 Why React?
32
1.3 The Most Important Terms and Concepts of the React World
34
1.3.1 Components and Elements
34
1.3.2 Data Flow
36
1.3.3 The Renderer
37
1.3.4 The Reconciler
37
1.4 A Look into the React Universe
40
1.4.1 State Management
40
1.4.2 The Router
40
1.4.3 Material UI
40
1.4.4 Jest
41
1.5 Thinking in React
41
1.5.1 Decomposing the UI into a Component Hierarchy
41
1.5.2 Implementing a Static Version in React
42
1.5.3 Defining the Minimum UI State
42
1.5.4 Defining the Location of the State
42
1.5.5 Modeling the Inverse Data Flow
42
1.6 Code Examples
42
1.7 Summary
43
2 The First Steps in the Development Process
45
2.1 Quick Start
45
2.1.1 Initialization
45
2.1.2 TypeScript Support
46
2.2 Playgrounds for React
46
2.2.1 CodePen: A Playground for Web Development
46
2.2.2 A React Project on CodePen
47
2.3 Local Development
49
2.4 Getting Started with Developing in React
52
2.4.1 Requirements
53
2.4.2 Installing Create React App
54
2.4.3 Alternatives to Create React App
61
2.4.4 React Scripts
62
2.4.5 Server Communication in Development Mode
64
2.4.6 Encrypted Communication during Development
66
2.5 The Structure of the Application
66
2.6 Troubleshooting in a React Application
68
2.7 Building the Application
71
2.8 Summary
71
3 Basic Principles of React
73
3.1 Preparation
73
3.1.1 Tidying Up the Application
74
3.2 Getting Started with the Application
74
3.2.1 The index.jsx File: Renderingthe Application
74
3.2.2 The App.jsx File: The Root Component
77
3.3 Function Components
78
3.3.1 One Component per File
80
3.4 JSX: Defining Structures in React
84
3.4.1 Expressions in JSX
86
3.4.2 Iterations: Loops in Components
89
3.4.3 Conditions in JSX
91
3.5 Props: Information Flow in an Application
95
3.5.1 Props and Child Components
95
3.5.2 Type Safety with PropTypes
97
3.6 Local State
100
3.7 Event Binding: Responding to User Interactions
102
3.7.1 Responding to Events
102
3.7.2 Using Event Objects
107
3.8 Immutability
110
3.8.1 Immer in a React Application
111
3.9 Summary
113
4 A Look Behind the Scenes: Further Topics
115
4.1 The Lifecycle of a Component
115
4.2 The Lifecycle of a Function Component with the Effect Hook
116
4.2.1 Mount: The Mounting of a Component
116
4.2.2 Update: Updating the Component
119
4.2.3 Unmount: Tidying Up at the End of the Lifecycle
123
4.3 Server Communication
126
4.3.1 Server Implementation
126
4.3.2 Server Communication via the Fetch API
128
4.3.3 Things to Know about Server Communication
132
4.3.4 Server Communication with Axios
135
4.4 Container Components
137
4.4.1 Swapping Out Logic to a Container Component
137
4.4.2 Integrating the Container Component
140
4.4.3 Implementing the Presentational Component
140
4.5 Higher-Order Components
142
4.5.1 A Simple Higher-Order Component
142
4.5.2 Integrating a Higher-Order Component in the BooksList Component
144
4.5.3 Integrating the Higher-Order Component
145
4.6 Render Props
146
4.6.1 Alternative Names for Render Props
147
4.6.2 Integrating the Render Props into the Application
149
4.7 Context
150
4.7.1 The Context API
151
4.7.2 Using the Context API in the Sample Application
154
4.8 Fragments
158
4.9 Summary
159
5 Class Components
161
5.1 Class Components in React
161
5.2 Basic Structure of a Class Component
162
5.3 Props in a Class Component
163
5.3.1 Defining Prop Structures Using PropTypes
164
5.3.2 Default Values for Props
165
5.4 State: The State of the Class Component
166
5.4.1 Initializing the State via the State Property of the Class
166
5.4.2 Initializing the State in the Constructor
167
5.5 The Component Lifecycle
169
5.5.1 Constructor
171
5.5.2 “getDerivedStateFromProps”
171
5.5.3 “render”
172
5.5.4 “componentDidMount”
173
5.5.5 “shouldComponentUpdate”
174
5.5.6 “getSnapshotBeforeUpdate”
175
5.5.7 “componentDidUpdate”
175
5.5.8 “componentWillUnmount”
177
5.5.9 Unsafe Hooks
178
5.6 Error Boundaries
179
5.6.1 Logging Errors Using “componentDidCatch”
180
5.6.2 Alternative Representation in Case of an Error with “getDerivedStateFromError”
182
5.7 Using the Context API in a Class Component
183
5.8 Differences between Function and Class Components
185
5.8.1 State
185
5.8.2 Lifecycle
186
5.9 Summary
186
6 The Hooks API of React
187
6.1 A First Overview
188
6.1.1 The Three Basic Hooks
188
6.1.2 Other Components of the Hooks API
188
6.2 “useReducer”: The Reducer Hook
190
6.2.1 The Reducer Function
192
6.2.2 Actions and Dispatching
192
6.2.3 Asynchronicity in the Reducer Hook
193
6.3 “useCallback”: Memoizing Functions
197
6.4 “useMemo”: Memoizing Objects
198
6.5 “useRef”: References and Immutable Values
200
6.5.1 Form Handling Using the Ref Hook
200
6.5.2 Caching Values Using the Ref Hook
201
6.6 “useImperativeHandle”: Controlling Forward Refs
202
6.6.1 Forward Refs
202
6.6.2 The Imperative Handle Hook
204
6.7 “useLayoutEffect”: The Synchronous Alternative to “useEffect”
205
6.8 “useDebugValue”: Debugging Information in React Developer Tools
206
6.9 “useDeferredValue”: Performing Updates According to Priority
207
6.10 “useTransition”: Lowering the Priority of Operations
210
6.11 “useId”: Creating Unique Identifiers
212
6.12 Library Hooks
213
6.12.1 “useSyncExternalStore”
213
6.12.2 “useInsertionEffect”
213
6.13 Custom Hooks
214
6.14 Rules of Hooks: Things to Consider
215
6.14.1 Rule #1: Execute Hooks Only at the Top Level
216
6.14.2 Rule #2: Hooks May Only Be Used in Function Components or Custom Hooks
216
6.15 Changing over to Hooks
217
6.16 Summary
218
7 Type Safety in React Applications with TypeScript
219
7.1 What Is the Benefit of a Type System?
219
7.2 The Different Type Systems
220
7.3 Type Safety in a React Application with Flow
220
7.3.1 Integration into a React Application
221
7.3.2 The Major Features of Flow
224
7.3.3 Flow in React Components
224
7.4 Using TypeScript in a React Application
225
7.4.1 Integrating TypeScript in a React Application
226
7.4.2 Configuration of TypeScript
229
7.4.3 The Major Features of TypeScript
230
7.4.4 Type Definitions: Information about Third-Party Software
230
7.5 TypeScript and React
231
7.5.1 Adding TypeScript to an Existing Application
231
7.5.2 Basic Features
231
7.5.3 Function Components
235
7.5.4 Context
238
7.5.5 Class Components
241
7.6 Summary
242
8 Styling React Components
245
8.1 CSS Import
245
8.1.1 Advantages and Disadvantages of CSS Import
246
8.1.2 Dealing with Class Names
248
8.1.3 Improved Handling of Class Names via the “classnames” Library
250
8.1.4 Using Sass as CSS Preprocessor
252
8.2 Inline Styling
253
8.3 CSS Modules
255
8.4 CSS in JavaScript Using Emotion
257
8.4.1 Installing Emotion
258
8.4.2 Using the “css” Prop
258
8.4.3 The Styled Approach of Emotion
260
8.4.4 Pseudoselectors in Styled Components
262
8.4.5 Dynamic Styling
263
8.4.6 Other Features of Styled Components
265
8.5 Tailwind
266
8.6 Summary
268
9 Securing a React Application through Testing
271
9.1 Getting Started with Jest
272
9.1.1 Installation and Execution
273
9.1.2 Organization of the Tests
274
9.1.3 Jest: The Basic Principles
274
9.1.4 Structure of a Test: Triple A
276
9.1.5 The Matchers of Jest
277
9.1.6 Grouping Tests: Test Suites
279
9.1.7 Setup and Teardown Routines
279
9.1.8 Skipping Tests and Running Them Exclusively
281
9.1.9 Handling Exceptions
283
9.1.10 Testing Asynchronous Operations
284
9.2 Testing Helper Functions
287
9.3 Snapshot Testing
289
9.4 Testing Components
294
9.4.1 Testing the “BooksListItem” Component
294
9.4.2 Testing the Interaction
297
9.5 Dealing with Server Dependencies
299
9.5.1 Simulating Errors during Communication
301
9.6 Summary
303
10 Forms in React
305
10.1 Uncontrolled Components
305
10.1.1 Handling References in React
306
10.2 Controlled Components
318
10.3 File Uploads
328
10.4 Form Validation Using React Hook Form
334
10.4.1 Form Validation Using React Hook Form
337
10.4.2 Form Validation Using a Schema
339
10.4.3 Styling the Form
342
10.4.4 Testing the Form Validation Automatically
343
10.5 Summary
345
11 Component Libraries in a React Application
347
11.1 Installing and Integrating Material UI
347
11.2 List Display with the “Table” Component
348
11.2.1 Filtering the List in the Table
352
11.2.2 Sorting the Table
355
11.3 Grids and Breakpoints
358
11.4 Icons
361
11.5 Deleting Data Records
363
11.5.1 Preparing a Delete Operation
364
11.5.2 Implementing a Confirmation Dialog
365
11.5.3 Deleting Data Records
367
11.6 Creating New Data Records
369
11.6.1 Preparing the Creation of Data Records
369
11.6.2 Implementation of the “Form” Component
370
11.6.3 Integration of the Form Dialog
373
11.7 Editing Data Records
376
11.8 Summary
381
12 Navigating Within an Application: The Router
383
12.1 Installation and Integration
383
12.2 Navigating in the Application
385
12.2.1 The Best Route Is Always Activated
387
12.2.2 A Navigation Bar for the Application
387
12.2.3 Integrating the Navigation Bar
389
12.3 “NotFound” Component
390
12.4 Testing the Routing
392
12.5 Conditional Redirects
396
12.6 Dynamic Routes
400
12.6.1 Defining Subroutes
400
12.7 Summary
406
13 Creating Custom React Libraries
407
13.1 Creating a Custom Component Library
407
13.1.1 Initializing the Library
408
13.1.2 The Structure of the Library
411
13.1.3 Hooks in the Library
413
13.1.4 Building the Library
414
13.2 Integrating the Library
415
13.2.1 Regular Installation of the Package
418
13.3 Testing the Library
419
13.3.1 Preparing the Testing Environment
419
13.3.2 Unit Test for the Library Component
419
13.3.3 Unit Test for the Custom Hook of the Library
420
13.4 Storybook
422
13.4.1 Installing and Configuring Storybook
422
13.4.2 Button Story in Storybook
423
13.5 Summary
425
14 Central State Management Using Redux
427
14.1 The Flux Architecture
427
14.1.1 The Central Data Store: The Store
428
14.1.2 Displaying the Data in the Views
428
14.1.3 Actions: The Description of Changes
429
14.1.4 The Dispatcher: The Interface between Actions and the Store
430
14.2 Installing Redux
431
14.3 Configuring the Central Store
431
14.3.1 Debugging Using the Redux Dev Tools
433
14.4 Handling Changes to the Store Using Reducers
435
14.4.1 The Books Slice
435
14.4.2 Integration of “BooksSlice”
437
14.5 Linking Components and the Store
438
14.5.1 Displaying the Data from the Store
439
14.5.2 Selectors
440
14.5.3 Implementing Selectors Using Reselect
443
14.6 Describing Changes with Actions
444
14.7 Creating and Editing Data Records
448
14.8 Summary
453
15 Handling Asynchronicity and Side Effects in Redux
455
15.1 Middleware in Redux
455
15.2 Redux with Redux Thunk
457
15.2.1 Manual Integration of Redux Thunk
457
15.2.2 Reading Data from the Server
458
15.2.3 Deleting Data Records
465
15.2.4 Creating and Modifying Data Records
470
15.3 Generators: Redux Saga
473
15.3.1 Installation and Integration of Redux Saga
475
15.3.2 Loading Data from the Server
476
15.3.3 Deleting Existing Data
482
15.3.4 Creating and Modifying Data Records Using Redux Saga
487
15.4 State Management Using RxJS: Redux Observable
491
15.4.1 Installing and integrating Redux Observable
492
15.4.2 Read Access to the Server Using Redux Observable
493
15.4.3 Deleting Using Redux Observable
495
15.4.4 Creating and Editing Data Records Using Redux Observable
496
15.5 JSON Web Token for Authentication
498
15.6 Summary
507
16 Server Communication Using GraphQL and the Apollo Client
509
16.1 Introduction to GraphQL
509
16.1.1 The Characteristics of GraphQL
509
16.1.2 The Disadvantages of GraphQL
510
16.1.3 The Principles of GraphQL
511
16.2 Apollo: A GraphQL Client for React
514
16.2.1 Installation and Integration into the Application
515
16.2.2 Read Access to the GraphQL Server
516
16.2.3 States of a Request
518
16.2.4 Type Support in the Apollo Client
520
16.2.5 Deleting Data Records
522
16.3 Apollo Client Devtools
526
16.4 Local State Management Using Apollo
527
16.4.1 Initializing the Local State
527
16.4.2 Using the Local State
528
16.5 Authentication
532
16.6 Summary
534
17 Internationalization
535
17.1 Using react-i18next
535
17.1.1 Loading Language Files from the Backend
540
17.1.2 Using the Language of the Browser
541
17.1.3 Extending the Navigation with Language Switching
542
17.2 Using Placeholders
544
17.3 Formatting Values
546
17.3.1 Formatting Numbers and Currencies
547
17.3.2 Formatting Date Values
549
17.4 Singular and Plural
551
17.5 Summary
553
18 Universal React Apps with Server-Side Rendering
555
18.1 How Does Server-Side Rendering Work?
556
18.2 Implementing Server-Side Rendering
557
18.2.1 Initializing and Configuring the Server Application
557
18.2.2 Implementing the Client-Side Application
563
18.2.3 Dynamics in Server-Side Rendering
565
18.3 Server-Side Rendering Using Next.js
569
18.3.1 Initializing a Next.js Application
569
18.3.2 Implementing the Page Component
569
18.3.3 Implementing the Server Side
571
18.3.4 API Routes in Next.js
573
18.4 Summary
574
19 Performance
577
19.1 The Callback Hook
577
19.2 Pure Components
580
19.3 “React.memo”
581
19.4 “React.lazy”: “Suspense” for Code Splitting
584
19.4.1 Lazy Loading in an Application
584
19.4.2 Lazy Loading with React Router
588
19.5 Suspense for Data Fetching
591
19.5.1 Installing and Using React Query
592
19.5.2 React Query and Suspense
596
19.5.3 Concurrency Patterns
598
19.6 Virtual Tables
599
19.7 Summary
603
20 Progressive Web Apps
605
20.1 Features of a Progressive Web App
605
20.2 Initializing the Application
606
20.3 Installability
606
20.3.1 Secure Delivery of an Application
607
20.3.2 The Web App Manifest
609
20.3.3 Service Worker in the React Application
612
20.3.4 Installing the Application
613
20.3.5 Asking the Users
614
20.4 Offline Capability
618
20.4.1 Integrating Workbox
619
20.4.2 Handling Dynamic Data
623
20.5 Tools for Development
628
20.6 Summary
629
21 Native Apps with React Native
631
21.1 The Structure of React Native
631
21.2 Installing React Native
631
21.2.1 Project Structure
632
21.2.2 Starting the Application
633
21.3 Displaying an Overview List
636
21.3.1 Static List View
636
21.3.2 Styling in React Native
639
21.3.3 Search Field for the “List” Component
644
21.3.4 Server Communication
646
21.4 Debugging in the Simulated React Native Environment
648
21.5 Editing Data Records
650
21.5.1 Implementing the “Form” Component
652
21.6 Publishing
657
21.7 Summary
658
The Author
661
Index
663