React and React Native

Use React and React Native to build applications for desktop browsers, mobile browsers, and even as native mobile apps
Preview in Mapt

React and React Native

Adam Boduch

Use React and React Native to build applications for desktop browsers, mobile browsers, and even as native mobile apps
Mapt Subscription
FREE
$29.99/m after trial
eBook
$28.00
RRP $39.99
Save 29%
Print + eBook
$49.99
RRP $49.99
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$28.00
$49.99
$29.99 p/m after trial
RRP $39.99
RRP $49.99
Subscription
eBook
Print + eBook
Start 30 Day Trial

Frequently bought together


React and React Native Book Cover
React and React Native
$ 39.99
$ 28.00
React Native Blueprints Book Cover
React Native Blueprints
$ 35.99
$ 25.20
Buy 2 for $35.00
Save $40.98
Add to Cart

Book Details

ISBN 139781786465658
Paperback500 pages

Book Description

React and React Native allow you to build cross-platform desktop and mobile applications using Facebook’s innovative UI libraries. Combined with the Flux data architecture and Relay, you can now create powerful and feature-complete applications from just one code base!

This book is split into three parts. The first part shows you how to start crafting composable UIs using React, from rendering with JSX and creating reusable components through to routing and creating isomorphic applications that run on Node.

We then move on to showing you how to take the concepts of React and apply them to building Native UIs using React Native. You’ll find out how to build responsive and streamlined UIs that can properly handle user interactions in a mobile environment. You’ll also learn how to access device-specific APIs such as the geolocation API, and how to handle offline development with React Native.

Finally, we’ll tie all of these skills together and shows you how you can create React applications that run on every major platform. As well as understanding application state in depth, you’ll learn how to leverage Relay to make feature-complete, data-driven web and native mobile applications.

Table of Contents

Chapter 1: Why React?
What is React?
Simplicity is good
Declarative UI structure
Time and data
Performance matters
The right level of abstraction
Summary
Chapter 2: Rendering with JSX
What is JSX?
Just like HTML
Describing UI structures
Creating your own JSX elements
Using JavaScript expressions
Summary
Chapter 3: Understanding Properties and State
What is component state?
What are component properties?
Setting component state
Passing property values
Stateless components
Container components
Summary
Chapter 4: Event Handling – The React Way
Declaring event handlers
Event handler context and parameters
Inline event handlers
Binding handlers to elements
Synthetic event objects
Event pooling
Summary
Chapter 5: Crafting Reusable Components
Reusable HTML elements
The difficulty with monolithic components
Refactoring component structures
Rendering component trees
Feature components and utility components
Summary
Chapter 6: The React Component Lifecycle
Why components need a lifecycle
Initializing properties and state
Optimize rendering efficiency
Rendering imperative components
Cleaning up after components
Summary
Chapter 7: Validating Component Properties
Knowing what to expect
Promoting portable components
Simple property validators
Type and value validators
Writing custom property validators
Summary
Chapter 8: Extending Components
Component inheritance
Composition with higher-order components
Summary
Chapter 9: Handling Navigation with Routes
Declaring routes
Handling route parameters
Using link components
Lazy routing
Summary
Chapter 10: Server-Side React Components
What is isomorphic JavaScript?
Rendering to strings
Backend routing
Frontend reconciliation
Fetching data
Summary
Chapter 11: Mobile-First React Components
The rationale behind mobile-first design
Using react-bootstrap components
Summary
Chapter 12: Why React Native?
What is React Native?
React and JSX are familiar
The mobile browser experience
Android and iOS, different yet the same
The case for mobile web apps
Summary
Chapter 13: Kickstarting React Native Projects
Using the React Native command-line tool
iOS and Android simulators
Running the project
Summary
Chapter 14: Building Responsive Layouts with Flexbox
Flexbox is the new layout standard
Introducing React Native styles
Building flexbox layouts
Summary
Chapter 15: Navigating Between Screens
Screen organization
Navigators, scenes, routes, and stacks
Responding to routes
Navigation bar
Dynamic scenes
Jumping back and forth
Summary
Chapter 16: Rendering Item Lists
Rendering data collections
Sorting and filtering lists
Fetching list data
Lazy list loading
Summary
Chapter 17: Showing Progress
Progress and usability
Indicating progress
Measuring progress
Navigation indicators
Step progress
Summary
Chapter 18: Geolocation and Maps
Where am I?
What's around me?
Annotating points of interest
Summary
Chapter 19: Collecting User Input
Collecting text input
Selecting from a list of options
Toggling between off and on
Collecting date/time input
Summary
Chapter 20: Alerts, Notifications, and Confirmation
Important information
Getting user confirmation
Passive notifications
Activity modals
Summary
Chapter 21: Responding to User Gestures
Scrolling with our fingers
Giving touch feedback
Swipeable and cancellable
Summary
Chapter 22: Controlling Image Display
Loading images
Resizing images
Lazy image loading
Rendering icons
Summary
Chapter 23: Going Offline
Detecting the state of the network
Storing application data
Synchronizing application data
Summary
Chapter 24: Handling Application State
Information architecture and Flux
Unified information architecture
Implementing Redux
Scaling the architecture
Summary
Chapter 25: Why Relay and GraphQL?
Yet another approach?
Verbose vernacular
Declarative data dependencies
Mutating application state
The GraphQL backend and microservices
Summary
Chapter 26: Building a Relay React App
TodoMVC and Relay
The GraphQL schema
Bootstrapping Relay
Adding todo items
Rendering todo items
Completing todo items
Summary

What You Will Learn

  • Craft reusable React components
  • Control navigation using the React Router to help keep your UI in sync with URLs
  • Build isomorphic web applications using Node.js
  • Use the Flexbox layout model to create responsive mobile designs
  • Leverage the native APIs of Android and iOS to build engaging applications with React Native
  • Respond to gestures in a way that’s intuitive for the user
  • Use Relay to build a unified data architecture for your React UIs

Authors

Table of Contents

Chapter 1: Why React?
What is React?
Simplicity is good
Declarative UI structure
Time and data
Performance matters
The right level of abstraction
Summary
Chapter 2: Rendering with JSX
What is JSX?
Just like HTML
Describing UI structures
Creating your own JSX elements
Using JavaScript expressions
Summary
Chapter 3: Understanding Properties and State
What is component state?
What are component properties?
Setting component state
Passing property values
Stateless components
Container components
Summary
Chapter 4: Event Handling – The React Way
Declaring event handlers
Event handler context and parameters
Inline event handlers
Binding handlers to elements
Synthetic event objects
Event pooling
Summary
Chapter 5: Crafting Reusable Components
Reusable HTML elements
The difficulty with monolithic components
Refactoring component structures
Rendering component trees
Feature components and utility components
Summary
Chapter 6: The React Component Lifecycle
Why components need a lifecycle
Initializing properties and state
Optimize rendering efficiency
Rendering imperative components
Cleaning up after components
Summary
Chapter 7: Validating Component Properties
Knowing what to expect
Promoting portable components
Simple property validators
Type and value validators
Writing custom property validators
Summary
Chapter 8: Extending Components
Component inheritance
Composition with higher-order components
Summary
Chapter 9: Handling Navigation with Routes
Declaring routes
Handling route parameters
Using link components
Lazy routing
Summary
Chapter 10: Server-Side React Components
What is isomorphic JavaScript?
Rendering to strings
Backend routing
Frontend reconciliation
Fetching data
Summary
Chapter 11: Mobile-First React Components
The rationale behind mobile-first design
Using react-bootstrap components
Summary
Chapter 12: Why React Native?
What is React Native?
React and JSX are familiar
The mobile browser experience
Android and iOS, different yet the same
The case for mobile web apps
Summary
Chapter 13: Kickstarting React Native Projects
Using the React Native command-line tool
iOS and Android simulators
Running the project
Summary
Chapter 14: Building Responsive Layouts with Flexbox
Flexbox is the new layout standard
Introducing React Native styles
Building flexbox layouts
Summary
Chapter 15: Navigating Between Screens
Screen organization
Navigators, scenes, routes, and stacks
Responding to routes
Navigation bar
Dynamic scenes
Jumping back and forth
Summary
Chapter 16: Rendering Item Lists
Rendering data collections
Sorting and filtering lists
Fetching list data
Lazy list loading
Summary
Chapter 17: Showing Progress
Progress and usability
Indicating progress
Measuring progress
Navigation indicators
Step progress
Summary
Chapter 18: Geolocation and Maps
Where am I?
What's around me?
Annotating points of interest
Summary
Chapter 19: Collecting User Input
Collecting text input
Selecting from a list of options
Toggling between off and on
Collecting date/time input
Summary
Chapter 20: Alerts, Notifications, and Confirmation
Important information
Getting user confirmation
Passive notifications
Activity modals
Summary
Chapter 21: Responding to User Gestures
Scrolling with our fingers
Giving touch feedback
Swipeable and cancellable
Summary
Chapter 22: Controlling Image Display
Loading images
Resizing images
Lazy image loading
Rendering icons
Summary
Chapter 23: Going Offline
Detecting the state of the network
Storing application data
Synchronizing application data
Summary
Chapter 24: Handling Application State
Information architecture and Flux
Unified information architecture
Implementing Redux
Scaling the architecture
Summary
Chapter 25: Why Relay and GraphQL?
Yet another approach?
Verbose vernacular
Declarative data dependencies
Mutating application state
The GraphQL backend and microservices
Summary
Chapter 26: Building a Relay React App
TodoMVC and Relay
The GraphQL schema
Bootstrapping Relay
Adding todo items
Rendering todo items
Completing todo items
Summary

Book Details

ISBN 139781786465658
Paperback500 pages
Read More

Read More Reviews

Recommended for You

Vue.js 2 Cookbook Book Cover
Vue.js 2 Cookbook
$ 35.99
$ 25.20
React.js Essentials Book Cover
React.js Essentials
$ 23.99
$ 16.80
ReactJS by Example - Building Modern Web Applications with React Book Cover
ReactJS by Example - Building Modern Web Applications with React
$ 35.99
$ 25.20
Mastering React Book Cover
Mastering React
$ 35.99
$ 7.20
MEAN Web Development Book Cover
MEAN Web Development
$ 29.99
$ 3.00
Learning Vue.js 2 Book Cover
Learning Vue.js 2
$ 35.99
$ 25.20