React and React Native: Build cross-platform JavaScript applications with native power for the web, desktop, and mobile

✍ Scribed by Adam Boduch, Roy Derks, Mikhail Sakhniuk

• Publisher: Packt Publishing
• Year: 2022
• Tongue: English
• Leaves: 606
• Edition: 4
• Category: Library

✦ Synopsis

Get up to speed with React and React Native to build cross-platform native applications with the help of practical examples

Key Features

• Discover React’s latest features including automatic state update batching and prioritizing state updates
• Get to grips with React architecture to write cross-platform apps using libraries such as NativeBase
• Understand GraphQL and Apollo for building a scalable backend for your applications

Book Description

React and React Native, the innovative user interface libraries made by Meta (formerly Facebook), are designed to help you build robust, cross-platform web and mobile applications.

In its fourth edition, this React and React Native book has been updated to cover the latest additions and developments in the React 18 ecosystem, while also being compatible with React Native. You'll begin by learning about the essential building blocks of React components. As you advance through the chapters, you'll work with higher-level functionalities in application development and then put your knowledge to work by developing user interface components for the web and native platforms. In the concluding chapters, you'll learn how to bring your application together with a robust data architecture.

By the end of this book, you'll be able to build React applications for the web and React Native applications for multiple mobile platforms with confidence.

What you will learn

• Explore React architecture, component properties, state, and context
• Work with React Hooks for handling functions and components
• Implement code splitting using lazy components and Suspense
• Build robust user interfaces for mobile and desktop apps using Material-UI
• Write shared components for Android and iOS apps using React Native
• Simplify layout design for React Native apps using NativeBase
• Write GraphQL schemas to power web and mobile apps
• Implement Apollo-driven components

Who This Book Is For

This book is for any JavaScript developer who wants to start learning how to use React and React Native for mobile and web application development. No prior knowledge of React is required, however working knowledge of JavaScript is necessary to be able to follow along the content covered.

Table of Contents

1. Why React?
2. Rendering with JSX
3. Component Properties, State, and Context
4. Getting Started with Hooks
5. Event Handling The React Way
6. Crafting Reusable Components
7. The React Component Lifecycle
8. Validating Component Properties
9. Handling Navigation with Routes
10. Code Splitting Using Lazy Components and Suspense
11. Server-Side React Components
12. User Interface Framework Components
13. High Performance State Updates
14. Why React Native?
15. React Native Under The Hood?
16. Kickstarting React Native Projects
17. Building Responsive Layouts with Flexbox
18. Navigating between Screens
19. Rendering Item Lists
20. Showing Progress
21. Geolocation and Maps
22. Collecting User Input
23. Displaying Modal Screens
24. Animations
25. Responding to User Gestures
26. Controlling Image Display
27. Going Offline
28. Selecting Native UI Components Using NativeBase
29. Handling Application State
30. Why Apollo?
31. Building an Apollo React App

✦ Table of Contents

Cover
Title Page
Copyright and Credits
Contributors
Table of Contents
Preface
Part 1 – React
Chapter 1: Why React?
What is React?
React is just the view layer
Simplicity is good
Declarative UI structures
Data changes over time
Performance matters
The right level of abstraction
What's new in React 18?
Automatic batching
State transitions
Summary
Further reading
Chapter 2: Rendering with JSX
Technical requirements
Your first JSX content
Hello JSX
Declarative UI structures
Rendering HTML
Built-in HTML tags
HTML tag conventions
Describing UI structures
Creating your own JSX elements
Encapsulating HTML
Nested elements
Namespaced components
Using JavaScript expressions
Dynamic property values and text
Mapping collections to elements
Building fragments of JSX
Using wrapper elements
Using fragments
Summary
Further reading
Chapter 3: Component Properties, State, and Context
Technical requirements
What is component state?
What are component properties?
Setting component state
Setting initial component state
Creating component state
Merging component state
Passing property values
Default property values
Setting property values
Stateless components
Pure functional components
Defaults in functional components
Container components
Providing and consuming context
Summary
Further reading
Chapter 4: Getting Started with Hooks
Technical requirements
Maintaining state using Hooks
Initial state values
Updating state values
Performing initialization and cleanup actions
Fetching component data
Canceling requests and resetting state
Optimizing side-effect actions
Sharing data using context Hooks
Sharing fetched data
Updating stateful context data
Using reducer Hooks to scale state management
Using reducer actions
Handling state dependencies
Summary
Chapter 5: Event Handling, the React Way
Technical requirements
Declaring event handlers
Declaring handler functions
Multiple event handlers
Importing generic handlers
Using event handler context and parameters
Getting component data
Higher-order event handlers
Declaring inline event handlers
Binding handlers to elements
Using synthetic event objects
Understanding event pooling
Summary
Further reading
Chapter 6: Crafting Reusable Components
Technical requirements
Reusable HTML elements
The difficulty with monolithic components
The JSX markup
Initial state
Event handler implementation
Refactoring component structures
Starting with the JSX
Implementing an article list component
Implementing an article item component
Implementing an add article component
Making components functional
Render props
Refactoring class components using hooks
Rendering component trees
Feature components and utility components
Summary
Further reading
Chapter 7: The React Component Life Cycle
Technical requirements
Why components need a life cycle
Initializing properties and state
Fetching component data
Initializing state with properties
Updating state with properties
Optimizing rendering efficiency
To render or not to render
Using metadata to optimize rendering
Rendering imperative components
Rendering jQuery UI widgets
Cleaning up after components
Cleaning up asynchronous calls
Containing errors with error boundaries
Summary
Further reading
Chapter 8: Validating Component Properties
Technical requirements
Knowing what to expect
Promoting portable components
Simple property validators
Basic type validation
Requiring values
Any property value
Type and value validators
Things that can be rendered
Requiring specific types
Requiring specific values
Writing custom property validators
Summary
Further reading
Chapter 9: Handling Navigation with Routes
Technical requirements
Declaring routes
Hello route
Decoupling route declarations
Handling route parameters
Resource IDs in routes
Optional parameters
Using link components
Basic linking
URL and query parameters
Summary
Further reading
Chapter 10: Code Splitting Using Lazy Components and Suspense
Technical requirements
Using the lazy API
Dynamic imports and bundles
Making components lazy
Using the Suspense component
Top-level Suspense components
Simulating latency
Working with spinner fallbacks
Avoiding lazy components
Exploring lazy pages and routes
Summary
Chapter 11: Server-Side React Components
Technical requirements
What is isomorphic JavaScript?
The server is a render target
Initial load performance
Sharing code between the server and the browser
Rendering to strings
Backend routing
Frontend reconciliation
Fetching data
Summary
Chapter 12: User Interface Framework Components
Technical requirements
Layout and organization
Using containers
Building responsive grid layouts
Using navigation components
Navigating with drawers
Navigating with tabs
Collecting user input
Checkboxes and radio buttons
Text inputs and select inputs
Working with buttons
Working with styles and themes
Making styles
Customizing themes
Summary
Chapter 13: High-Performance State Updates
Technical requirements
Batching state updates
Prioritizing state updates
Handling asynchronous state updates
Summary
Part 2 – React Native
Chapter 14: Why React Native?
Technical requirements
What is RN?
React and JSX are familiar
The mobile browser experience
Android and iOS – different yet the same
The case for mobile web apps
Summary
Further reading
Chapter 15: React Native under the Hood
Technical requirements
Exploring React Native architecture
The state of web and mobile apps in the past
React Native current architecture
React Native future architecture
Explaining JS and Native modules
React Navigation
UI component libraries
Splash screen
Icons
Handling errors
Push notifications
Over the air updates
JS libraries
Exploring React Native components and APIs
Summary
Chapter 16: Kick-Starting React Native Projects
Technical requirements
Exploring React Native CLI tools
Installing and using the Expo command-line tool
Viewing your app on your phone
Viewing your app on Expo Snack
Summary
Chapter 17: Building Responsive Layouts with Flexbox
Technical requirements
Introducing Flexbox
Introducing React Native styles
Using the Styled Components library
Building Flexbox layouts
Simple three-column layout
Improved three-column layout
Flexible rows
Flexible grids
Flexible rows and columns
Summary
Further reading
Chapter 18: Navigating Between Screens
Technical requirements
Navigation basics
Route parameters
The navigation header
Tab and drawer navigation
Summary
Further reading
Chapter 19: Rendering Item Lists
Technical requirements
Rendering data collections
Sorting and filtering lists
Fetching list data
Lazy list loading
Implementing pull to refresh
Summary
Further reading
Chapter 20: Showing Progress
Technical requirements
Understanding progress and usability
Indicating progress
Measuring progress
Exploring navigation indicators
Step progress
Summary
Further reading
Chapter 21: Geolocation and Maps
Technical requirements
Using Location API
Rendering the Map
Annotating points of interest
Plotting points
Plotting overlays
Summary
Further reading
Chapter 22: Collecting User Input
Technical requirements
Collecting text input
Selecting from a list of options
Toggling between on and off
Collecting date/time input
Summary
Further reading
Chapter 23: Displaying Modal Screens
Technical requirements
Important information
Getting user confirmation
Displaying a success confirmation
Error confirmation
Passive notifications
Activity modals
Summary
Further reading
Chapter 24: Responding to User Gestures
Technical requirements
Scrolling with your fingers
Giving touch feedback
Using Swipeable and cancellable components
Summary
Further reading
Chapter 25: Using Animations
Technical requirements
Using React Native Reanimated
Animated API
React Native Reanimated
Installing the React Native Reanimated library
Animating layout components
Animating styling components
Summary
Further reading
Chapter 26: Controlling Image Display
Technical requirements
Loading images
Resizing images
Lazy image loading
Rendering icons
Summary
Further reading
Chapter 27: Going Offline
Technical requirements
Detecting the state of the network
Storing application data
Synchronizing application data
Summary
Further reading
Chapter 28: Selecting Native UI Components Using NativeBase
Technical requirements
Application containers
Headers and footers
Using layout components
Collecting input using form components
Summary
Further reading
Part 3 – React Architecture
Chapter 29: Handling Application State
Technical requirements
Organizing state in React
Unidirectionality
Synchronous update rounds
Predictable state transformations
Unified information architecture
Implementing Context
Creating Context
Context provider
Reducer functions
The Home component
Preventing unwanted re-renders
Managing state in mobile apps
Scaling the architecture
Summary
Further reading
Chapter 30: Why GraphQL?
Approaching state with GraphQL
Understanding some verbose vernacular about GraphQL
Declarative data fetching
Mutating application state
Summary
Further reading
Chapter 31: Building a GraphQL React App
Technical requirements
Creating a Todo app
Constructing a GraphQL schema
Bootstrapping the Apollo Client
Adding todo items
Rendering todo items
Completing todo items
Summary
Further reading
Index
Other Books You May Enjoy