Book Image

React and React Native - Fourth Edition

By : Adam Boduch, Roy Derks, Mikhail Sakhniuk
Book Image

React and React Native - Fourth Edition

By: Adam Boduch, Roy Derks, Mikhail Sakhniuk

Overview of this book

Over the years, React and React Native has proven itself among JavaScript developers as a popular choice for a complete and practical guide to the React ecosystem. This fourth edition comes with the latest features, enhancements, and fixes to align with React 18, while also being compatible with React Native. It includes new chapters covering critical features and concepts in modern cross-platform app development with React. From the basics of React to popular components such as Hooks, GraphQL, and NativeBase, this definitive guide will help you become a professional React developer in a step-by-step manner. 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 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.

Related Content you might be interested in

Current Title:

Small book image
React and React Native - Fourth Edition
Adam Boduch | Roy Derks | Mikhail Sakhniuk
May, 2022 | 606 pages
Small book image
React Material-UI Cookbook
Adam Boduch
Mar, 2019 | 534 pages
Small book image
Professional React Native
Alexander Benedikt Kuttig
Oct, 2022 | 268 pages
Small book image
React Projects..
Roy Derks
Apr, 2022 | 384 pages
Table of Contents (36 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Download the color images
Conventions used
Get in touch
1
Part 1 – React
Part 1 – React
Free Chapter
2
Chapter 1: Why React?
Chapter 1: Why React?
What is React?
What's new in React 18?
Summary
Further reading
3
Chapter 2: Rendering with JSX
Chapter 2: Rendering with JSX
Technical requirements
Your first JSX content
Rendering HTML
Creating your own JSX elements
Using JavaScript expressions
Building fragments of JSX
Summary
Further reading
4
Chapter 3: Component Properties, State, and Context
Chapter 3: Component Properties, State, and Context
Technical requirements
What is component state?
What are component properties?
Setting component state
Passing property values
Stateless components
Container components
Providing and consuming context
Summary
Further reading
5
Chapter 4: Getting Started with Hooks
Chapter 4: Getting Started with Hooks
Technical requirements
Maintaining state using Hooks
Performing initialization and cleanup actions
Sharing data using context Hooks
Using reducer Hooks to scale state management
Summary
6
Chapter 5: Event Handling, the React Way
Chapter 5: Event Handling, the React Way
Technical requirements
Declaring event handlers
Using event handler context and parameters
Declaring inline event handlers
Binding handlers to elements
Using synthetic event objects
Understanding event pooling
Summary
Further reading
7
Chapter 6: Crafting Reusable Components
Chapter 6: Crafting Reusable Components
Technical requirements
Reusable HTML elements
The difficulty with monolithic components
Refactoring component structures
Render props
Refactoring class components using hooks
Rendering component trees
Feature components and utility components
Summary
Further reading
8
Chapter 7: The React Component Life Cycle
Chapter 7: The React Component Life Cycle
Technical requirements
Why components need a life cycle
Initializing properties and state
Optimizing rendering efficiency
Rendering imperative components
Cleaning up after components
Containing errors with error boundaries
Summary
Further reading
9
Chapter 8: Validating Component Properties
Chapter 8: Validating Component Properties
Technical requirements
Knowing what to expect
Promoting portable components
Simple property validators
Type and value validators
Writing custom property validators
Summary
Further reading
10
Chapter 9: Handling Navigation with Routes
Chapter 9: Handling Navigation with Routes
Technical requirements
Declaring routes
Handling route parameters
Using link components
Summary
Further reading
11
Chapter 10: Code Splitting Using Lazy Components and Suspense
Chapter 10: Code Splitting Using Lazy Components and Suspense
Technical requirements
Using the lazy API
Using the Suspense component
Avoiding lazy components
Exploring lazy pages and routes
Summary
12
Chapter 11: Server-Side React Components
Chapter 11: Server-Side React Components
Technical requirements
What is isomorphic JavaScript?
Rendering to strings
Backend routing
Frontend reconciliation
Fetching data
Summary
13
Chapter 12: User Interface Framework Components
Chapter 12: User Interface Framework Components
Technical requirements
Layout and organization
Using navigation components
Collecting user input
Working with buttons
Working with styles and themes
Summary
14
Chapter 13: High-Performance State Updates
Chapter 13: High-Performance State Updates
Technical requirements
Batching state updates
Prioritizing state updates
Handling asynchronous state updates
Summary
15
Part 2 – React Native
Part 2 – React Native
16
Chapter 14: Why 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
17
Chapter 15: React Native under the Hood
Chapter 15: React Native under the Hood
Technical requirements
Exploring React Native architecture
Explaining JS and Native modules
Exploring React Native components and APIs
Summary
18
Chapter 16: Kick-Starting React Native Projects
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
19
Chapter 17: Building Responsive Layouts with Flexbox
Chapter 17: Building Responsive Layouts with Flexbox
Technical requirements
Introducing Flexbox
Introducing React Native styles
Using the Styled Components library
Building Flexbox layouts
Summary
Further reading
20
Chapter 18: Navigating Between Screens
Chapter 18: Navigating Between Screens
Technical requirements
Navigation basics
Route parameters
The navigation header
Tab and drawer navigation
Summary
Further reading
21
Chapter 19: Rendering Item Lists
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
22
Chapter 20: Showing Progress
Chapter 20: Showing Progress
Technical requirements
Understanding progress and usability
Indicating progress
Measuring progress
Exploring navigation indicators
Step progress
Summary
Further reading
23
Chapter 21: Geolocation and Maps
Chapter 21: Geolocation and Maps
Technical requirements
Using Location API
Rendering the Map
Annotating points of interest
Summary
Further reading
24
Chapter 22: Collecting User Input
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
25
Chapter 23: Displaying Modal Screens
Chapter 23: Displaying Modal Screens
Technical requirements
Important information
Getting user confirmation
Passive notifications
Activity modals
Summary
Further reading
26
Chapter 24: Responding to User Gestures
Chapter 24: Responding to User Gestures
Technical requirements
Scrolling with your fingers
Giving touch feedback
Using Swipeable and cancellable components
Summary
Further reading
27
Chapter 25: Using Animations
Chapter 25: Using Animations
Technical requirements
Using React Native Reanimated
Animating layout components
Animating styling components
Summary
Further reading
28
Chapter 26: Controlling Image Display
Chapter 26: Controlling Image Display
Technical requirements
Loading images
Resizing images
Lazy image loading
Rendering icons
Summary
Further reading
29
Chapter 27: Going Offline
Chapter 27: Going Offline
Technical requirements
Detecting the state of the network
Storing application data
Synchronizing application data
Summary
Further reading
30
Chapter 28: Selecting Native UI Components Using NativeBase
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
31
Part 3 – React Architecture
Part 3 – React Architecture
32
Chapter 29: Handling Application State
Chapter 29: Handling Application State
Technical requirements
Organizing state in React
Implementing Context
Managing state in mobile apps
Scaling the architecture
Summary
Further reading
33
Chapter 30: Why GraphQL?
Chapter 30: Why GraphQL?
Approaching state with GraphQL
Understanding some verbose vernacular about GraphQL
Declarative data fetching
Mutating application state
Summary
Further reading
34
Chapter 31: Building a GraphQL React App
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
Why subscribe?
35
Other Books You May Enjoy
Other Books You May Enjoy
Packt is searching for authors like you

Creating a Todo app

In this chapter, we'll build a Todo example for React that uses GraphQL to handle its data. This example is based on a popular open source library (https://todomvc.com/examples/react/), which is a robust, yet concise, starting point for creating the Todo application for this chapter.

I'm going to walk you through an example React implementation of a Todo app. Also, you can find a React Native implementation of this same web app in the GitHub repository for this chapter. The key is that the mobile version will use the same GraphQL backend as the web UI. I think this is a win for React developers who want to build both web and native versions of their apps as they can share the same schema!

The code for this chapter contains both a web version build with React and a native version with React Native. If you've worked on frontend development in the past 5 years, you've probably come across a sample Todo app. Here's what the web version...

Previous Section
End of Section 3
Next Section