React The Comprehensive Guide (Sebastian Springer) (Z-Library)

The Rheinwerk Computing series from Rheinwerk Publishing offers new and established professionals comprehensive guidance to enrich their skillsets and enhance their career prospects. Our publications are written by leading experts in the fields of programming, administration, security, analytics, and more. Each book is detailed and hands-on to help readers develop essential, practical skills that they can apply to their daily work. For further information, please visit our website: www.rheinwerk-computing.com. Philip Ackermann JavaScript: The Comprehensive Guide 2022, approx. 1292 pp, paperback and e-book www.rheinwerk-computing.com/5554 Sebastian Springer Node.js: The Comprehensive Guide 2022, 834 pages, paperback and e-book www.rheinwerk-computing.com/5556 Jürgen Wolf HTML and CSS: The Comprehensive Guide 2023, 814 pages, paperback and e-book www.rheinwerk-computing.com/5695 Philip Ackermann Full Stack Web Development: The Comprehensive Guide 2023, 740 pages, paperback and e-book www.rheinwerk-computing.com/5704 Johannes Ernesti, Peter Kaiser Python 3: The Comprehensive Guide 2022, 1036 pages, paperback and e-book www.rheinwerk-computing.com/5566 Rheinwerk Computing

Sebastian Springer React The Comprehensive Guide

Imprint This e-book is a publication many contributed to, specifically: Editor Rachel Gibson Acquisitions Editor Hareem Shafi German Edition Editor Patricia Schiewald Translation Winema Language Services, Inc. Copyeditor Melinda Rankin Cover Design Graham Geary Photo Credit Shutterstock: 2265417157/© Oleksandr Antonov; iStockphoto: 1385385993/© D3Damon Layout Design Vera Brauner Production E-Book Hannah Lane Typesetting E-Book III-satz, Germany We hope that you liked this e-book. Please share your feedback with us and read the Service Pages to find out how to contact us. The Library of Congress has cataloged the printed edition Cataloging-in-Publication Number as follows: 2023945633 ISBN 978-1-4932-2440-1 (print) ISBN 978-1-4932-2441-8 (e-book) ISBN 978-1-4932-2442-5 (print and e-book) © 2024 by Rheinwerk Publishing, Inc., Boston (MA) 1st edition 2024 2nd German edition published 2023 by Rheinwerk Verlag, Bonn, Germany

Contents Foreword .................................................................................................................................................. 21 Preface ....................................................................................................................................................... 23 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 ................................................................................................. 467

Contents2.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 ............................................................................................... 1078

Contents3.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 ................................................................................................................................... 1599

Contents5 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 ........................................................................................... 19210

Contents6.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 ................................................................................. 22411

Contents7.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 .................................................................................... 27412

Contents9.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 .................................................................................................... 35513

Contents11.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 ................................................................................................ 41414

Contents13.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 ........................................................................................................... 45515

Contents15.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 ................................................................................................................................... 53416

Contents17 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 ......................................................................... 58817

Contents19.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 .................................... 64818

Contents21.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 Service Pages .....................................................................................................................................  I Legal Notes .........................................................................................................................................    II 19

Foreword Web development is advancing continuously, which is both a curse and a blessing for web developers. Hardly a week goes by without another new library or framework being hyped in the community and celebrated as the supposed savior. Developers with experience know that such hype should be treated with caution. But don't misunder- stand me: there is often something to hype, but as with everything, you should use your common sense and not jump onto every new bandwagon without being asked. One bandwagon that has been running for a long time and can be jumped onto without hesitation is React, a library developed by Facebook. The year 2023 marks the 10th anniversary of React, which means it’s already a prehis- toric rock if you consider the fast pace of software. It's both nice and reassuring to know both that React is now firmly established and that developers are regularly adding new aspects and features. In addition, React is very well thought-out in terms of its underly- ing concepts, which in turn makes it extraordinarily performant and—compared to other large frameworks—lets it move in an extremely attractive cosmos—be it the alter- native package manager Yarn, which is also developed by Meta, the company behind Facebook, and which has already inspired a couple of features for the official Node.js package manager, npm; or the Jest testing tool, which is particularly suitable for testing React applications thanks to snapshot testing. GraphQL, the more flexible alternative to REST, also comes from Meta and integrates seamlessly with React applications. The total of all this is why React remains my personal preference over other comparable libraries and frameworks. For newcomers, there are of course a few hurdles to overcome with React. Concepts like Redux, JSX, and Hooks need to be understood before they can be used effectively. And this is exactly where this completely revised second edition by Sebastian Springer will help. You’ll learn how to best set up, organize, and plan React applications, how to struc- ture components, and best practices to follow. Particularly noteworthy is that Sebastian manages to explain topics in individual, self-contained chapters, which nevertheless fol- low a common thread and build on each other in a didactically outstanding manner. As a reviewer, I had the pleasure of reading both German editions (or the respective manuscripts) in advance and have to say: in this English edition, Sebastian achieves perfection. Not only are newer features presented and described so that you are brought up to date with React, but Sebastian has also taken the trouble to revise the entire book, which has an extremely positive effect on your reading experience. My respect, Sebastian! And to you, dear readers, enjoy the book and learning React. Philip Ackermann Chief Technology Officer at Cedalo GmbH21Personal Copy for Jaleel Hussain, alex76alex43@gmail.com