Book Image

React and React Native - Third Edition

By : Adam Boduch, Roy Derks
Book Image

React and React Native - Third Edition

By: Adam Boduch, Roy Derks

Overview of this book

React and React Native, Facebook’s innovative User Interface (UI) libraries, are designed to help you build robust cross-platform web and mobile applications. This updated third edition is improved and updated to cover the latest version of React. The book particularly focuses on the latest developments in the React ecosystem, such as modern Hook implementations, code splitting using lazy components and Suspense, user interface framework components using Material-UI, and Apollo. In terms of React Native, the book has been updated to version 0.62 and demonstrates how to apply native UI components for your existing mobile apps using NativeBase. You will begin by learning about the essential building blocks of React components. Next, you’ll progress to working with higher-level functionalities in application development, before putting this knowledge to use by developing user interface components for the web and for 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.

Related Content you might be interested in

Current Title:

Small book image
React and React Native - Third Edition
Adam Boduch | Roy Derks
Apr, 2020 | 526 pages
Small book image
React Material-UI Cookbook
Adam Boduch
Mar, 2019 | 534 pages
Small book image
React 16 Tooling
Adam Boduch
Apr, 2018 | 298 pages
Small book image
React 16 Essentials
Adam Boduch | Artemij Fedosejev
Nov, 2017 | 240 pages
Table of Contents (33 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
1
Section 1: React
Section 1: React
Free Chapter
2
Why React?
Why React?
What is React?
React Features
What's new in React?
Summary
Further reading
3
Rendering with JSX
Rendering with JSX
Technical requirements
Your first JSX content
Rendering HTML
Describing UI structures
Creating your own JSX elements
Using JavaScript expressions
Fragments of JSX
Summary
Further reading
4
Component Properties, State, and Context
Component Properties, State, and Context
Technical requirements
What is component state?
What are component properties?
Setting a component state
Passing property values
Stateless components
Container components
Providing and consuming context
Summary
Further reading
5
Getting Started with Hooks
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
Event Handling - The React Way
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
Crafting Reusable Components
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
The React Component Life Cycle
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
Validating Component Properties
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
Handling Navigation with Routes
Handling Navigation with Routes
Technical requirements
Declaring routes
Handling route parameters
Using link components
Summary
Further reading
11
Code Splitting Using Lazy Components and Suspense
Code Splitting Using Lazy Components and Suspense
Technical requirements
Using the lazy API
Using the Suspense component
When to avoid lazy components
Lazy pages and routes
Summary
12
Server-Side React Components
Server-Side React Components
Technical requirements
What is isomorphic JavaScript?
Rendering to strings
Backend routing
Frontend reconciliation
Fetching data
Summary
Further reading
13
User Interface Framework Components
User Interface Framework Components
Technical requirements
Layout and organization
Using navigation components
Collecting user input
Working with styles and themes
Summary
14
Section 2: React Native
Section 2: React Native
15
Why React Native?
Why React Native?
Technical requirements
What is React Native?
React and JSX are familar
The mobile browser experience
Android and iOS – different yet the same
The case for mobile web apps
Summary
Further reading
16
Kick-Starting React Native Projects
Kick-Starting React Native Projects
Technical requirements
Installing and using the Expo command-line tool
Viewing your app on your phone
Viewing your app on Expo Snack
Summary
17
Building Responsive Layouts with Flexbox
Building Responsive Layouts with Flexbox
Technical requirements
Flexbox is the new layout standard
Introducing React Native styles
Building Flexbox layouts
Summary
Further reading
18
Navigating Between Screens
Navigating Between Screens
Technical requirements
Navigation basics
Route parameters
The navigation header
Tab and drawer navigation
Handling state
Summary
Further reading
19
Rendering Item Lists
Rendering Item Lists
Technical requirements
Rendering data collections
Sorting and filtering lists
Fetching list data
Lazy list loading
Summary
Further reading
20
Showing Progress
Showing Progress
Technical requirements
Progress and usability
Indicating progress
Measuring progress
Navigation indicators
Step progress
Summary
Further reading
21
Geolocation and Maps
Geolocation and Maps
Technical requirements
Where am I?
What's around me?
Annotating points of interest
Summary
Further reading
22
Collecting User Input
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
23
Displaying Modal Screens
Displaying Modal Screens
Technical requirements
Important information
Getting user confirmation
Passive notifications
Activity modals
Summary
Further reading
24
Responding to User Gestures
Responding to User Gestures
Technical requirements
Scrolling with your fingers
Giving touch feedback
Swipeable and cancellable
Summary
Further reading
25
Controlling Image Display
Controlling Image Display
Technical requirements
Loading images
Resizing images
Lazy image loading
Rendering icons
Summary
Further reading
26
Going Offline
Going Offline
Technical requirements
Detecting the state of the network
Storing application data
Synchronizing application data
Summary
Further reading
27
Section 3: React Architecture
Section 3: React Architecture
28
Native UI Components Using NativeBase
Native UI Components Using NativeBase
Technical requirements
Application containers
Headers, footers, and navigation
Using layout components
Collecting input using form components
Displaying data using lists
Showing user notifications
Summary
29
Handling Application State
Handling Application State
Technical requirements
Information architecture and Flux
Unified information architecture
Implementing Redux
Scaling the architecture
Summary
Further reading
30
Why Apollo?
Why Apollo?
Yet another approach?
Verbose vernacular
Declarative data fetching
Mutating application state
Summary
Further reading
31
Building an Apollo React App
Building an Apollo React App
Technical requirements
Todo and Apollo Client
The GraphQL schema
Bootstrapping Apollo Client
Adding todo items
Rendering todo items
Completing todo items
Summary
32
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think
Code Splitting Using Lazy Components and Suspense

Code splitting has been happening in React applications for some time now, long before there was any official support in the React API. With the latest version of React, there are new APIs that we can use that directly support code-splitting scenarios. Code splitting is necessary when you have larger applications with a lot of JavaScript code that must be delivered to the browser.

Big monolithic JavaScript bundles that house the entire application can create usability issues on initial page loads due to longer load times. With code splitting, we have more fine-grained control over how code makes its way from the server to the browser. This means more opportunities for us to properly handle load-time User Experience (UX). You'll learn how to do this in your React applications by using the lazy() API and the Suspense components...

Previous Section
End of Section 1
Next Section