React
The Comprehensive Guide
1st Edition
Published on 30. November 2023
Book
Paperback/Softback
676 pages
978-1-4932-2440-1 (ISBN)
Description
React.js makes developing dynamic user interfaces faster and easier than ever. Learn how to get the most out of the library with this comprehensive guide! Start with the basics: what React is and how it works. Then follow practical code examples to build an application, from styling with CSS to maximizing app performance. Whether you're new to JavaScript or you're an advanced developer, you'll find everything you need to build your frontend with React!
Highlights include:
1) Class components
2) Hook APIs
3) Type safety and TypeScript
4) CSS and inline styling
5) Testing and security
6) Forms
7) Component libraries
8) Application navigation
9) Redux
10) GraphQL and Apollo
11) Next.js
12) Progressive web apps
More details
Language
English
Place of publication
Bonn
Germany
Publishing group
Rheinwerk Publishing Inc.
Target group
Professional and scholarly
Edition type
New edition
Product notice
Klappenbroschur
Dimensions
Height: 251 mm
Width: 179 mm
Thickness: 41 mm
Weight
1416 gr
ISBN-13
978-1-4932-2440-1 (9781493224401)
Schweitzer Classification
Person
Sebastian Springer is a JavaScript engineer at MaibornWolff. In addition to developing and designing both client-side and server-side JavaScript applications, he focuses on imparting knowledge. As a lecturer for JavaScript, a speaker at numerous conferences, and an author, he inspires enthusiasm for professional development with JavaScript. Sebastian was previously a team leader at Mayflower GmbH, one of the premier web development agencies in Germany. He was responsible for project and team management, architecture, and customer care for companies such as Nintendo Europe, Siemens, and others.
Content
... 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.2 ... Why React? ... 32
1.3 ... The Most Important Terms and Concepts of the React World ... 34
1.4 ... A Look into the React Universe ... 40
1.5 ... Thinking in React ... 41
1.6 ... Code Examples ... 42
1.7 ... Summary ... 43
2 ... The First Steps in the Development Process ... 45
2.1 ... Quick Start ... 45
2.2 ... Playgrounds for React ... 46
2.3 ... Local Development ... 49
2.4 ... Getting Started with Developing in React ... 52
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.2 ... Getting Started with the Application ... 74
3.3 ... Function Components ... 78
3.4 ... JSX: Defining Structures in React ... 84
3.5 ... Props: Information Flow in an Application ... 95
3.6 ... Local State ... 100
3.7 ... Event Binding: Responding to User Interactions ... 102
3.8 ... Immutability ... 110
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.3 ... Server Communication ... 126
4.4 ... Container Components ... 137
4.5 ... Higher-Order Components ... 142
4.6 ... Render Props ... 146
4.7 ... Context ... 150
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.4 ... State: The State of the Class Component ... 166
5.5 ... The Component Lifecycle ... 169
5.6 ... Error Boundaries ... 179
5.7 ... Using the Context API in a Class Component ... 183
5.8 ... Differences between Function and Class Components ... 185
5.9 ... Summary ... 186
6 ... The Hooks API of React ... 187
6.1 ... A First Overview ... 188
6.2 ... "useReducer": The Reducer Hook ... 190
6.3 ... "useCallback": Memoizing Functions ... 197
6.4 ... "useMemo": Memoizing Objects ... 198
6.5 ... "useRef": References and Immutable Values ... 200
6.6 ... "useImperativeHandle": Controlling Forward Refs ... 202
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.13 ... Custom Hooks ... 214
6.14 ... Rules of Hooks: Things to Consider ... 215
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.4 ... Using TypeScript in a React Application ... 225
7.5 ... TypeScript and React ... 231
7.6 ... Summary ... 242
8 ... Styling React Components ... 245
8.1 ... CSS Import ... 245
8.2 ... Inline Styling ... 253
8.3 ... CSS Modules ... 255
8.4 ... CSS in JavaScript Using Emotion ... 257
8.5 ... Tailwind ... 266
8.6 ... Summary ... 268
9 ... Securing a React Application through Testing ... 271
9.1 ... Getting Started with Jest ... 272
9.2 ... Testing Helper Functions ... 287
9.3 ... Snapshot Testing ... 289
9.4 ... Testing Components ... 294
9.5 ... Dealing with Server Dependencies ... 299
9.6 ... Summary ... 303
10 ... Forms in React ... 305
10.1 ... Uncontrolled Components ... 305
10.2 ... Controlled Components ... 318
10.3 ... File Uploads ... 328
10.4 ... Form Validation Using React Hook Form ... 334
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.3 ... Grids and Breakpoints ... 358
11.4 ... Icons ... 361
11.5 ... Deleting Data Records ... 363
11.6 ... Creating New Data Records ... 369
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.3 ... "NotFound" Component ... 390
12.4 ... Testing the Routing ... 392
12.5 ... Conditional Redirects ... 396
12.6 ... Dynamic Routes ... 400
12.7 ... Summary ... 406
13 ... Creating Custom React Libraries ... 407
13.1 ... Creating a Custom Component Library ... 407
13.2 ... Integrating the Library ... 415
13.3 ... Testing the Library ... 419
13.4 ... Storybook ... 422
13.5 ... Summary ... 425
14 ... Central State Management Using Redux ... 427
14.1 ... The Flux Architecture ... 427
14.2 ... Installing Redux ... 431
14.3 ... Configuring the Central Store ... 431
14.4 ... Handling Changes to the Store Using Reducers ... 435
14.5 ... Linking Components and the Store ... 438
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.3 ... Generators: Redux Saga ... 473
15.4 ... State Management Using RxJS: Redux Observable ... 491
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.2 ... Apollo: A GraphQL Client for React ... 514
16.3 ... Apollo Client Devtools ... 526
16.4 ... Local State Management Using Apollo ... 527
16.5 ... Authentication ... 532
16.6 ... Summary ... 534
17 ... Internationalization ... 535
17.1 ... Using react-i18next ... 535
17.2 ... Using Placeholders ... 544
17.3 ... Formatting Values ... 546
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.3 ... Server-Side Rendering Using Next.js ... 569
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.5 ... Suspense for Data Fetching ... 591
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.4 ... Offline Capability ... 618
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.3 ... Displaying an Overview List ... 636
21.4 ... Debugging in the Simulated React Native Environment ... 648
21.5 ... Editing Data Records ... 650
21.6 ... Publishing ... 657
21.7 ... Summary ... 658
... The Author ... 661
... Index ... 663
... 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.2 ... Why React? ... 32
1.3 ... The Most Important Terms and Concepts of the React World ... 34
1.4 ... A Look into the React Universe ... 40
1.5 ... Thinking in React ... 41
1.6 ... Code Examples ... 42
1.7 ... Summary ... 43
2 ... The First Steps in the Development Process ... 45
2.1 ... Quick Start ... 45
2.2 ... Playgrounds for React ... 46
2.3 ... Local Development ... 49
2.4 ... Getting Started with Developing in React ... 52
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.2 ... Getting Started with the Application ... 74
3.3 ... Function Components ... 78
3.4 ... JSX: Defining Structures in React ... 84
3.5 ... Props: Information Flow in an Application ... 95
3.6 ... Local State ... 100
3.7 ... Event Binding: Responding to User Interactions ... 102
3.8 ... Immutability ... 110
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.3 ... Server Communication ... 126
4.4 ... Container Components ... 137
4.5 ... Higher-Order Components ... 142
4.6 ... Render Props ... 146
4.7 ... Context ... 150
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.4 ... State: The State of the Class Component ... 166
5.5 ... The Component Lifecycle ... 169
5.6 ... Error Boundaries ... 179
5.7 ... Using the Context API in a Class Component ... 183
5.8 ... Differences between Function and Class Components ... 185
5.9 ... Summary ... 186
6 ... The Hooks API of React ... 187
6.1 ... A First Overview ... 188
6.2 ... "useReducer": The Reducer Hook ... 190
6.3 ... "useCallback": Memoizing Functions ... 197
6.4 ... "useMemo": Memoizing Objects ... 198
6.5 ... "useRef": References and Immutable Values ... 200
6.6 ... "useImperativeHandle": Controlling Forward Refs ... 202
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.13 ... Custom Hooks ... 214
6.14 ... Rules of Hooks: Things to Consider ... 215
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.4 ... Using TypeScript in a React Application ... 225
7.5 ... TypeScript and React ... 231
7.6 ... Summary ... 242
8 ... Styling React Components ... 245
8.1 ... CSS Import ... 245
8.2 ... Inline Styling ... 253
8.3 ... CSS Modules ... 255
8.4 ... CSS in JavaScript Using Emotion ... 257
8.5 ... Tailwind ... 266
8.6 ... Summary ... 268
9 ... Securing a React Application through Testing ... 271
9.1 ... Getting Started with Jest ... 272
9.2 ... Testing Helper Functions ... 287
9.3 ... Snapshot Testing ... 289
9.4 ... Testing Components ... 294
9.5 ... Dealing with Server Dependencies ... 299
9.6 ... Summary ... 303
10 ... Forms in React ... 305
10.1 ... Uncontrolled Components ... 305
10.2 ... Controlled Components ... 318
10.3 ... File Uploads ... 328
10.4 ... Form Validation Using React Hook Form ... 334
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.3 ... Grids and Breakpoints ... 358
11.4 ... Icons ... 361
11.5 ... Deleting Data Records ... 363
11.6 ... Creating New Data Records ... 369
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.3 ... "NotFound" Component ... 390
12.4 ... Testing the Routing ... 392
12.5 ... Conditional Redirects ... 396
12.6 ... Dynamic Routes ... 400
12.7 ... Summary ... 406
13 ... Creating Custom React Libraries ... 407
13.1 ... Creating a Custom Component Library ... 407
13.2 ... Integrating the Library ... 415
13.3 ... Testing the Library ... 419
13.4 ... Storybook ... 422
13.5 ... Summary ... 425
14 ... Central State Management Using Redux ... 427
14.1 ... The Flux Architecture ... 427
14.2 ... Installing Redux ... 431
14.3 ... Configuring the Central Store ... 431
14.4 ... Handling Changes to the Store Using Reducers ... 435
14.5 ... Linking Components and the Store ... 438
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.3 ... Generators: Redux Saga ... 473
15.4 ... State Management Using RxJS: Redux Observable ... 491
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.2 ... Apollo: A GraphQL Client for React ... 514
16.3 ... Apollo Client Devtools ... 526
16.4 ... Local State Management Using Apollo ... 527
16.5 ... Authentication ... 532
16.6 ... Summary ... 534
17 ... Internationalization ... 535
17.1 ... Using react-i18next ... 535
17.2 ... Using Placeholders ... 544
17.3 ... Formatting Values ... 546
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.3 ... Server-Side Rendering Using Next.js ... 569
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.5 ... Suspense for Data Fetching ... 591
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.4 ... Offline Capability ... 618
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.3 ... Displaying an Overview List ... 636
21.4 ... Debugging in the Simulated React Native Environment ... 648
21.5 ... Editing Data Records ... 650
21.6 ... Publishing ... 657
21.7 ... Summary ... 658
... The Author ... 661
... Index ... 663