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 components2) Hook APIs3) Type safety and TypeScript4) CSS and inline styling5) Testing and security6) Forms7) Component libraries8) Application navigation9) Redux10) GraphQL and Apollo11) Next.js12) Progressive web apps

Grow your skills in areas such as testing, debugging, server communication, and server-side rendering

... Foreword ... 21... Preface ... 23... Structure of the Book ... 24... Download the Code Samples ... 25... Acknowledgments ... 251 ... Getting Started with React ... 271.1 ... What Is React? ... 271.2 ... Why React? ... 321.3 ... The Most Important Terms and Concepts of the React World ... 341.4 ... A Look into the React Universe ... 401.5 ... Thinking in React ... 411.6 ... Code Examples ... 421.7 ... Summary ... 432 ... The First Steps in the Development Process ... 452.1 ... Quick Start ... 452.2 ... Playgrounds for React ... 462.3 ... Local Development ... 492.4 ... Getting Started with Developing in React ... 522.5 ... The Structure of the Application ... 662.6 ... Troubleshooting in a React Application ... 682.7 ... Building the Application ... 712.8 ... Summary ... 713 ... Basic Principles of React ... 733.1 ... Preparation ... 733.2 ... Getting Started with the Application ... 743.3 ... Function Components ... 783.4 ... JSX: Defining Structures in React ... 843.5 ... Props: Information Flow in an Application ... 953.6 ... Local State ... 1003.7 ... Event Binding: Responding to User Interactions ... 1023.8 ... Immutability ... 1103.9 ... Summary ... 1134 ... A Look Behind the Scenes: Further Topics ... 1154.1 ... The Lifecycle of a Component ... 1154.2 ... The Lifecycle of a Function Component with the Effect Hook ... 1164.3 ... Server Communication ... 1264.4 ... Container Components ... 1374.5 ... Higher-Order Components ... 1424.6 ... Render Props ... 1464.7 ... Context ... 1504.8 ... Fragments ... 1584.9 ... Summary ... 1595 ... Class Components ... 1615.1 ... Class Components in React ... 1615.2 ... Basic Structure of a Class Component ... 1625.3 ... Props in a Class Component ... 1635.4 ... State: The State of the Class Component ... 1665.5 ... The Component Lifecycle ... 1695.6 ... Error Boundaries ... 1795.7 ... Using the Context API in a Class Component ... 1835.8 ... Differences between Function and Class Components ... 1855.9 ... Summary ... 1866 ... The Hooks API of React ... 1876.1 ... A First Overview ... 1886.2 ... ¿useReducer¿: The Reducer Hook ... 1906.3 ... ¿useCallback¿: Memoizing Functions ... 1976.4 ... ¿useMemö: Memoizing Objects ... 1986.5 ... ¿useRef¿: References and Immutable Values ... 2006.6 ... ¿useImperativeHandle¿: Controlling Forward Refs ... 2026.7 ... ¿useLayoutEffect¿: The Synchronous Alternative to ¿useEffect¿ ... 2056.8 ... ¿useDebugValue¿: Debugging Information in React Developer Tools ... 2066.9 ... ¿useDeferredValue¿: Performing Updates According to Priority ... 2076.10 ... ¿useTransition¿: Lowering the Priority of Operations ... 2106.11 ... ¿useId¿: Creating Unique Identifiers ... 2126.12 ... Library Hooks ... 2136.13 ... Custom Hooks ... 2146.14 ... Rules of Hooks: Things to Consider ... 2156.15 ... Changing over to Hooks ... 2176.16 ... Summary ... 2187 ... Type Safety in React Applications with TypeScript ... 2197.1 ... What Is the Benefit of a Type System? ... 2197.2 ... The Different Type Systems ... 2207.3 ... Type Safety in a React Application with Flow ... 2207.4 ... Using TypeScript in a React Application ... 2257.5 ... TypeScript and React ... 2317.6 ... Summary ... 2428 ... Styling React Components ... 2458.1 ... CSS Import ... 2458.2 ... Inline Styling ... 2538.3 ... CSS Modules ... 2558.4 ... CSS in JavaScript Using Emotion ... 2578.5 ... Tailwind ... 2668.6 ... Summary ... 2689 ... Securing a React Application through Testing ... 2719.1 ... Getting Started with Jest ... 2729.2 ... Testing Helper Functions ... 2879.3 ... Snapshot Testing ... 2899.4 ... Testing Components ... 2949.5 ... Dealing with Server Dependencies ... 2999.6 ... Summary ... 30310 ... Forms in React ... 30510.1 ... Uncontrolled Components ... 30510.2 ... Controlled Components ... 31810.3 ... File Uploads ... 32810.4 ... Form Validation Using React Hook Form ... 33410.5 ... Summary ... 34511 ... Component Libraries in a React Application ... 34711.1 ... Installing and Integrating Material UI ... 34711.2 ... List Display with the ¿Table¿ Component ... 34811.3 ... Grids and Breakpoints ... 35811.4 ... Icons ... 36111.5 ... Deleting Data Records ... 36311.6 ... Creating New Data Records ... 36911.7 ... Editing Data Records ... 37611.8 ... Summary ... 38112 ... Navigating Within an Application: The Router ... 38312.1 ... Installation and Integration ... 38312.2 ... Navigating in the Application ... 38512.3 ... ¿NotFound¿ Component ... 39012.4 ... Testing the Routing ... 39212.5 ... Conditional Redirects ... 39612.6 ... Dynamic Routes ... 40012.7 ... Summary ... 40613 ... Creating Custom React Libraries ... 40713.1 ... Creating a Custom Component Library ... 40713.2 ... Integrating the Library ... 41513.3 ... Testing the Library ... 41913.4 ... Storybook ... 42213.5 ... Summary ... 42514 ... Central State Management Using Redux ... 42714.1 ... The Flux Architecture ... 42714.2 ... Installing Redux ... 43114.3 ... Configuring the Central Store ... 43114.4 ... Handling Changes to the Store Using Reducers ... 43514.5 ... Linking Components and the Store ... 43814.6 ... Describing Changes with Actions ... 44414.7 ... Creating and Editing Data Records ... 44814.8 ... Summary ... 45315 ... Handling Asynchronicity and Side Effects in Redux ... 45515.1 ... Middleware in Redux ... 45515.2 ... Redux with Redux Thunk ... 45715.3 ... Generators: Redux Saga ... 47315.4 ... State Management Using RxJS: Redux Observable ... 49115.5 ... JSON Web Token for Authentication ... 49815.6 ... Summary ... 50716 ... Server Communication Using GraphQL and the Apollo Client ... 50916.1 ... Introduction to GraphQL ... 50916.2 ... Apollo: A GraphQL Client for React ... 51416.3 ... Apollo Client Devtools ... 52616.4 ... Local State Management Using Apollo ... 52716.5 ... Authentication ... 53216.6 ... Summary ... 53417 ... Internationalization ... 53517.1 ... Using react-i18next ... 53517.2 ... Using Placeholders ... 54417.3 ... Formatting Values ... 54617.4 ... Singular and Plural ... 55117.5 ... Summary ... 55318 ... Universal React Apps with Server-Side Rendering ... 55518.1 ... How Does Server-Side Rendering Work? ... 55618.2 ... Implementing Server-Side Rendering ... 55718.3 ... Server-Side Rendering Using Next.js ... 56918.4 ... Summary ... 57419 ... Performance ... 57719.1 ... The Callback Hook ... 57719.2 ... Pure Components ... 58019.3 ... ¿React.memö ... 58119.4 ... ¿React.lazy¿: ¿Suspense¿ for Code Splitting ... 58419.5 ... Suspense for Data Fetching ... 59119.6 ... Virtual Tables ... 59919.7 ... Summary ... 60320 ... Progressive Web Apps ... 60520.1 ... Features of a Progressive Web App ... 60520.2 ... Initializing the Application ... 60620.3 ... Installability ... 60620.4 ... Offline Capability ... 61820.5 ... Tools for Development ... 62820.6 ... Summary ... 62921 ... Native Apps with React Native ... 63121.1 ... The Structure of React Native ... 63121.2 ... Installing React Native ... 63121.3 ... Displaying an Overview List ... 63621.4 ... Debugging in the Simulated React Native Environment ... 64821.5 ... Editing Data Records ... 65021.6 ... Publishing ... 65721.7 ... Summary ... 658... The Author ... 661... Index ... 663