React - The Comprehensive Guide

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

... 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 ... useMemö: 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.memö ... 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