Multilingual Book

🇺🇸 English (Original) 🇪🇸 Spanish (Translation)

✅ All languages are included in your purchase

Publisher SAP PRESS

Year / Edition 2024 / 1

Pages 676

Authors Sebastian Springer

React

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!

Build user interfaces with React.js, a frontend JavaScript library
Work with classes, hooks, type systems, CSS, forms, and more
Grow your skills in areas such as testing, debugging, server communication, and server-side rendering

You'll learn about:

Getting Started with React:
New to React? Learn the basics of how the library is used. Take your first steps into the development process and explore the structure of an application.
Hands-On Code Examples:
See React and its component-based architecture in action! Walk through detailed example programs and get practical tips for building applications.
Advanced Development:
Working with larger, more complex applications? Find the resources you need for using Redux, automated tests, i18n, server communication, and more.

Key Highlights:

Class components
Hook APIs
Type safety and TypeScript
CSS and inline styling
Testing and security
Forms
Component libraries
Application navigation
Redux
GraphQL and Apollo
Next.js
Progressive web apps

View Full Table of Contents

Foreword
Preface
- Structure of the Book
- Download the Code Samples
- Acknowledgments
1 Getting Started with React
- 1.1 What Is React?
  - 1.1.1 Single-Page Applications
  - 1.1.2 The Story of React
- 1.2 Why React?
- 1.3 The Most Important Terms and Concepts of the React World
  - 1.3.1 Components and Elements
  - 1.3.2 Data Flow
  - 1.3.3 The Renderer
  - 1.3.4 The Reconciler
- 1.4 A Look into the React Universe
  - 1.4.1 State Management
  - 1.4.2 The Router
  - 1.4.3 Material UI
  - 1.4.4 Jest
- 1.5 Thinking in React
  - 1.5.1 Decomposing the UI into a Component Hierarchy
  - 1.5.2 Implementing a Static Version in React
  - 1.5.3 Defining the Minimum UI State
  - 1.5.4 Defining the Location of the State
  - 1.5.5 Modeling the Inverse Data Flow
- 1.6 Code Examples
- 1.7 Summary
2 The First Steps in the Development Process
- 2.1 Quick Start
  - 2.1.1 Initialization
  - 2.1.2 TypeScript Support
- 2.2 Playgrounds for React
  - 2.2.1 CodePen: A Playground for Web Development
  - 2.2.2 A React Project on CodePen
- 2.3 Local Development
- 2.4 Getting Started with Developing in React
  - 2.4.1 Requirements
  - 2.4.2 Installing Create React App
  - 2.4.3 Alternatives to Create React App
  - 2.4.4 React Scripts
  - 2.4.5 Server Communication in Development Mode
  - 2.4.6 Encrypted Communication during Development
- 2.5 The Structure of the Application
- 2.6 Troubleshooting in a React Application
- 2.7 Building the Application
- 2.8 Summary
3 Basic Principles of React
- 3.1 Preparation
  - 3.1.1 Tidying Up the Application
- 3.2 Getting Started with the Application
  - 3.2.1 The index.jsx File: Renderingthe Application
  - 3.2.2 The App.jsx File: The Root Component
- 3.3 Function Components
  - 3.3.1 One Component per File
- 3.4 JSX: Defining Structures in React
  - 3.4.1 Expressions in JSX
  - 3.4.2 Iterations: Loops in Components
  - 3.4.3 Conditions in JSX
- 3.5 Props: Information Flow in an Application
  - 3.5.1 Props and Child Components
  - 3.5.2 Type Safety with PropTypes
- 3.6 Local State
- 3.7 Event Binding: Responding to User Interactions
  - 3.7.1 Responding to Events
  - 3.7.2 Using Event Objects
- 3.8 Immutability
  - 3.8.1 Immer in a React Application
- 3.9 Summary
4 A Look Behind the Scenes: Further Topics
- 4.1 The Lifecycle of a Component
- 4.2 The Lifecycle of a Function Component with the Effect Hook
  - 4.2.1 Mount: The Mounting of a Component
  - 4.2.2 Update: Updating the Component
  - 4.2.3 Unmount: Tidying Up at the End of the Lifecycle
- 4.3 Server Communication
  - 4.3.1 Server Implementation
  - 4.3.2 Server Communication via the Fetch API
  - 4.3.3 Things to Know about Server Communication
  - 4.3.4 Server Communication with Axios
- 4.4 Container Components
  - 4.4.1 Swapping Out Logic to a Container Component
  - 4.4.2 Integrating the Container Component
  - 4.4.3 Implementing the Presentational Component
- 4.5 Higher-Order Components
  - 4.5.1 A Simple Higher-Order Component
  - 4.5.2 Integrating a Higher-Order Component in the BooksList Component
  - 4.5.3 Integrating the Higher-Order Component
- 4.6 Render Props
  - 4.6.1 Alternative Names for Render Props
  - 4.6.2 Integrating the Render Props into the Application
- 4.7 Context
  - 4.7.1 The Context API
  - 4.7.2 Using the Context API in the Sample Application
- 4.8 Fragments
- 4.9 Summary
5 Class Components
- 5.1 Class Components in React
- 5.2 Basic Structure of a Class Component
- 5.3 Props in a Class Component
  - 5.3.1 Defining Prop Structures Using PropTypes
  - 5.3.2 Default Values for Props
- 5.4 State: The State of the Class Component
  - 5.4.1 Initializing the State via the State Property of the Class
  - 5.4.2 Initializing the State in the Constructor
- 5.5 The Component Lifecycle
  - 5.5.1 Constructor
  - 5.5.2 “getDerivedStateFromProps”
  - 5.5.3 “render”
  - 5.5.4 “componentDidMount”
  - 5.5.5 “shouldComponentUpdate”
  - 5.5.6 “getSnapshotBeforeUpdate”
  - 5.5.7 “componentDidUpdate”
  - 5.5.8 “componentWillUnmount”
  - 5.5.9 Unsafe Hooks
- 5.6 Error Boundaries
  - 5.6.1 Logging Errors Using “componentDidCatch”
  - 5.6.2 Alternative Representation in Case of an Error with “getDerivedStateFromError”
- 5.7 Using the Context API in a Class Component
- 5.8 Differences between Function and Class Components
  - 5.8.1 State
  - 5.8.2 Lifecycle
- 5.9 Summary
6 The Hooks API of React
- 6.1 A First Overview
  - 6.1.1 The Three Basic Hooks
  - 6.1.2 Other Components of the Hooks API
- 6.2 “useReducer”: The Reducer Hook
  - 6.2.1 The Reducer Function
  - 6.2.2 Actions and Dispatching
  - 6.2.3 Asynchronicity in the Reducer Hook
- 6.3 “useCallback”: Memoizing Functions
- 6.4 “useMemo”: Memoizing Objects
- 6.5 “useRef”: References and Immutable Values
  - 6.5.1 Form Handling Using the Ref Hook
  - 6.5.2 Caching Values Using the Ref Hook
- 6.6 “useImperativeHandle”: Controlling Forward Refs
  - 6.6.1 Forward Refs
  - 6.6.2 The Imperative Handle Hook
- 6.7 “useLayoutEffect”: The Synchronous Alternative to “useEffect”
- 6.8 “useDebugValue”: Debugging Information in React Developer Tools
- 6.9 “useDeferredValue”: Performing Updates According to Priority
- 6.10 “useTransition”: Lowering the Priority of Operations
- 6.11 “useId”: Creating Unique Identifiers
- 6.12 Library Hooks
  - 6.12.1 “useSyncExternalStore”
  - 6.12.2 “useInsertionEffect”
- 6.13 Custom Hooks
- 6.14 Rules of Hooks: Things to Consider
  - 6.14.1 Rule #1: Execute Hooks Only at the Top Level
  - 6.14.2 Rule #2: Hooks May Only Be Used in Function Components or Custom Hooks
- 6.15 Changing over to Hooks
- 6.16 Summary
7 Type Safety in React Applications with TypeScript
- 7.1 What Is the Benefit of a Type System?
- 7.2 The Different Type Systems
- 7.3 Type Safety in a React Application with Flow
  - 7.3.1 Integration into a React Application
  - 7.3.2 The Major Features of Flow
  - 7.3.3 Flow in React Components
- 7.4 Using TypeScript in a React Application
  - 7.4.1 Integrating TypeScript in a React Application
  - 7.4.2 Configuration of TypeScript
  - 7.4.3 The Major Features of TypeScript
  - 7.4.4 Type Definitions: Information about Third-Party Software
- 7.5 TypeScript and React
  - 7.5.1 Adding TypeScript to an Existing Application
  - 7.5.2 Basic Features
  - 7.5.3 Function Components
  - 7.5.4 Context
  - 7.5.5 Class Components
- 7.6 Summary
8 Styling React Components
- 8.1 CSS Import
  - 8.1.1 Advantages and Disadvantages of CSS Import
  - 8.1.2 Dealing with Class Names
  - 8.1.3 Improved Handling of Class Names via the “classnames” Library
  - 8.1.4 Using Sass as CSS Preprocessor
- 8.2 Inline Styling
- 8.3 CSS Modules
- 8.4 CSS in JavaScript Using Emotion
  - 8.4.1 Installing Emotion
  - 8.4.2 Using the “css” Prop
  - 8.4.3 The Styled Approach of Emotion
  - 8.4.4 Pseudoselectors in Styled Components
  - 8.4.5 Dynamic Styling
  - 8.4.6 Other Features of Styled Components
- 8.5 Tailwind
- 8.6 Summary
9 Securing a React Application through Testing
- 9.1 Getting Started with Jest
  - 9.1.1 Installation and Execution
  - 9.1.2 Organization of the Tests
  - 9.1.3 Jest: The Basic Principles
  - 9.1.4 Structure of a Test: Triple A
  - 9.1.5 The Matchers of Jest
  - 9.1.6 Grouping Tests: Test Suites
  - 9.1.7 Setup and Teardown Routines
  - 9.1.8 Skipping Tests and Running Them Exclusively
  - 9.1.9 Handling Exceptions
  - 9.1.10 Testing Asynchronous Operations
- 9.2 Testing Helper Functions
- 9.3 Snapshot Testing
- 9.4 Testing Components
  - 9.4.1 Testing the “BooksListItem” Component
  - 9.4.2 Testing the Interaction
- 9.5 Dealing with Server Dependencies
  - 9.5.1 Simulating Errors during Communication
- 9.6 Summary
10 Forms in React
- 10.1 Uncontrolled Components
  - 10.1.1 Handling References in React
- 10.2 Controlled Components
- 10.3 File Uploads
- 10.4 Form Validation Using React Hook Form
  - 10.4.1 Form Validation Using React Hook Form
  - 10.4.2 Form Validation Using a Schema
  - 10.4.3 Styling the Form
  - 10.4.4 Testing the Form Validation Automatically
- 10.5 Summary
11 Component Libraries in a React Application
- 11.1 Installing and Integrating Material UI
- 11.2 List Display with the “Table” Component
  - 11.2.1 Filtering the List in the Table
  - 11.2.2 Sorting the Table
- 11.3 Grids and Breakpoints
- 11.4 Icons
- 11.5 Deleting Data Records
  - 11.5.1 Preparing a Delete Operation
  - 11.5.2 Implementing a Confirmation Dialog
  - 11.5.3 Deleting Data Records
- 11.6 Creating New Data Records
  - 11.6.1 Preparing the Creation of Data Records
  - 11.6.2 Implementation of the “Form” Component
  - 11.6.3 Integration of the Form Dialog
- 11.7 Editing Data Records
- 11.8 Summary
12 Navigating Within an Application: The Router
- 12.1 Installation and Integration
- 12.2 Navigating in the Application
  - 12.2.1 The Best Route Is Always Activated
  - 12.2.2 A Navigation Bar for the Application
  - 12.2.3 Integrating the Navigation Bar
- 12.3 “NotFound” Component
- 12.4 Testing the Routing
- 12.5 Conditional Redirects
- 12.6 Dynamic Routes
  - 12.6.1 Defining Subroutes
- 12.7 Summary
13 Creating Custom React Libraries
- 13.1 Creating a Custom Component Library
  - 13.1.1 Initializing the Library
  - 13.1.2 The Structure of the Library
  - 13.1.3 Hooks in the Library
  - 13.1.4 Building the Library
- 13.2 Integrating the Library
  - 13.2.1 Regular Installation of the Package
- 13.3 Testing the Library
  - 13.3.1 Preparing the Testing Environment
  - 13.3.2 Unit Test for the Library Component
  - 13.3.3 Unit Test for the Custom Hook of the Library
- 13.4 Storybook
  - 13.4.1 Installing and Configuring Storybook
  - 13.4.2 Button Story in Storybook
- 13.5 Summary
14 Central State Management Using Redux
- 14.1 The Flux Architecture
  - 14.1.1 The Central Data Store: The Store
  - 14.1.2 Displaying the Data in the Views
  - 14.1.3 Actions: The Description of Changes
  - 14.1.4 The Dispatcher: The Interface between Actions and the Store
- 14.2 Installing Redux
- 14.3 Configuring the Central Store
  - 14.3.1 Debugging Using the Redux Dev Tools
- 14.4 Handling Changes to the Store Using Reducers
  - 14.4.1 The Books Slice
  - 14.4.2 Integration of “BooksSlice”
- 14.5 Linking Components and the Store
  - 14.5.1 Displaying the Data from the Store
  - 14.5.2 Selectors
  - 14.5.3 Implementing Selectors Using Reselect
- 14.6 Describing Changes with Actions
- 14.7 Creating and Editing Data Records
- 14.8 Summary
15 Handling Asynchronicity and Side Effects in Redux
- 15.1 Middleware in Redux
- 15.2 Redux with Redux Thunk
  - 15.2.1 Manual Integration of Redux Thunk
  - 15.2.2 Reading Data from the Server
  - 15.2.3 Deleting Data Records
  - 15.2.4 Creating and Modifying Data Records
- 15.3 Generators: Redux Saga
  - 15.3.1 Installation and Integration of Redux Saga
  - 15.3.2 Loading Data from the Server
  - 15.3.3 Deleting Existing Data
  - 15.3.4 Creating and Modifying Data Records Using Redux Saga
- 15.4 State Management Using RxJS: Redux Observable
  - 15.4.1 Installing and integrating Redux Observable
  - 15.4.2 Read Access to the Server Using Redux Observable
  - 15.4.3 Deleting Using Redux Observable
  - 15.4.4 Creating and Editing Data Records Using Redux Observable
- 15.5 JSON Web Token for Authentication
- 15.6 Summary
16 Server Communication Using GraphQL and the Apollo Client
- 16.1 Introduction to GraphQL
  - 16.1.1 The Characteristics of GraphQL
  - 16.1.2 The Disadvantages of GraphQL
  - 16.1.3 The Principles of GraphQL
- 16.2 Apollo: A GraphQL Client for React
  - 16.2.1 Installation and Integration into the Application
  - 16.2.2 Read Access to the GraphQL Server
  - 16.2.3 States of a Request
  - 16.2.4 Type Support in the Apollo Client
  - 16.2.5 Deleting Data Records
- 16.3 Apollo Client Devtools
- 16.4 Local State Management Using Apollo
  - 16.4.1 Initializing the Local State
  - 16.4.2 Using the Local State
- 16.5 Authentication
- 16.6 Summary
17 Internationalization
- 17.1 Using react-i18next
  - 17.1.1 Loading Language Files from the Backend
  - 17.1.2 Using the Language of the Browser
  - 17.1.3 Extending the Navigation with Language Switching
- 17.2 Using Placeholders
- 17.3 Formatting Values
  - 17.3.1 Formatting Numbers and Currencies
  - 17.3.2 Formatting Date Values
- 17.4 Singular and Plural
- 17.5 Summary
18 Universal React Apps with Server-Side Rendering
- 18.1 How Does Server-Side Rendering Work?
- 18.2 Implementing Server-Side Rendering
  - 18.2.1 Initializing and Configuring the Server Application
  - 18.2.2 Implementing the Client-Side Application
  - 18.2.3 Dynamics in Server-Side Rendering
- 18.3 Server-Side Rendering Using Next.js
  - 18.3.1 Initializing a Next.js Application
  - 18.3.2 Implementing the Page Component
  - 18.3.3 Implementing the Server Side
  - 18.3.4 API Routes in Next.js
- 18.4 Summary
19 Performance
- 19.1 The Callback Hook
- 19.2 Pure Components
- 19.3 “React.memo”
- 19.4 “React.lazy”: “Suspense” for Code Splitting
  - 19.4.1 Lazy Loading in an Application
  - 19.4.2 Lazy Loading with React Router
- 19.5 Suspense for Data Fetching
  - 19.5.1 Installing and Using React Query
  - 19.5.2 React Query and Suspense
  - 19.5.3 Concurrency Patterns
- 19.6 Virtual Tables
- 19.7 Summary
20 Progressive Web Apps
- 20.1 Features of a Progressive Web App
- 20.2 Initializing the Application
- 20.3 Installability
  - 20.3.1 Secure Delivery of an Application
  - 20.3.2 The Web App Manifest
  - 20.3.3 Service Worker in the React Application
  - 20.3.4 Installing the Application
  - 20.3.5 Asking the Users
- 20.4 Offline Capability
  - 20.4.1 Integrating Workbox
  - 20.4.2 Handling Dynamic Data
- 20.5 Tools for Development
- 20.6 Summary
21 Native Apps with React Native
- 21.1 The Structure of React Native
- 21.2 Installing React Native
  - 21.2.1 Project Structure
  - 21.2.2 Starting the Application
- 21.3 Displaying an Overview List
  - 21.3.1 Static List View
  - 21.3.2 Styling in React Native
  - 21.3.3 Search Field for the “List” Component
  - 21.3.4 Server Communication
- 21.4 Debugging in the Simulated React Native Environment
- 21.5 Editing Data Records
  - 21.5.1 Implementing the “Form” Component
- 21.6 Publishing
- 21.7 Summary
The Author
Index

ℹ️ How to purchase this book?

This product has a special price upon request. You can start your order or clarify any doubts using the Contact for Price button on the page.

We have also prepared a step-by-step guide to explain how to easily request your quote.

Read the guide here →

Disclaimer

SAP, other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate company) in Germany and other countries. Our Company is not affiliated to SAP SE or any of its affiliated companies including but not limited to: Sybase, Business Objects, Hybris, Ariba and SuccessFactors. All other names, brands, logos, etc. are registered trade or service marks of their respective owners.

Home > SAP Books > Multilingual Books > React - The Comprehensive Guide

React - The Comprehensive Guide

Name: React - The Comprehensive Guide
Brand: SAP
SKU: BOOK-SAPPRESS-EBOOK-2024-9781493224418
Availability: InStock

Warranty

Receive the product you were expecting or we will refund your money

Would you like to see a sample of the course or book?

If you need a sample of the course or book, request it in the chat below and we will be happy to provide it to you.

1 installment of $0.00 USD without interest		Total $0.00 USD
2 installments of $0.00 USD without interest		Total $0.00 USD
3 installments of $0.00 USD without interest		Total $0.00 USD
4 installments of $0.00 USD without interest		Total $0.00 USD
5 installments of $0.00 USD without interest		Total $0.00 USD
6 installments of $0.00 USD without interest		Total $0.00 USD