React and React Native - Third Edition

Book description

Get up to speed with React, React Native, GraphQL and Apollo for building cross-platform native apps with the help of practical examples

Key Features

  • Covers the latest features of React such as Hooks, Suspense, NativeBase, and Apollo in this updated third edition
  • Get to grips with the React architecture for writing easy-to-manage web and mobile applications
  • Understand GraphQL and Apollo for building a scalable backend for your cross-platform apps

Book Description

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.

What you will learn

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

Who this book is for

This book is for any JavaScript developer who wants to start learning how to use Facebook's UI libraries, React and React Native, for mobile and web application development. Although no prior knowledge of React is needed, working knowledge of JavaScript programming will help you understand the concepts covered in the book more effectively.

Publisher resources

Download Example Code

Table of contents

  1. Title Page
  2. Copyright and Credits
    1. React and React Native Third Edition
  3. About Packt
    1. Why subscribe?
  4. Contributors
    1. About the authors
    2. About the reviewers
    3. Packt is searching for authors like you
  5. Preface
    1. Who this book is for
    2. What this book covers
      1. Section 1 – React
      2. Section 2 – React Native
      3. Section 3 – React Architecture
    3. To get the most out of this book
      1. Download the example code files
      2. Conventions used
    4. Get in touch
      1. Reviews
  6. Section 1: React
  7. Why React?
    1. What is React?
      1. React is just the view layer
      2. Simplicity is good
      3. Declarative UI structures
      4. Time and data
      5. Performance matters
      6. The right level of abstraction
    2. React Features
      1. Revamped core architecture
      2. Lifecycle methods
      3. The Context API
      4. Rendering fragments
      5. Portals
      6. Rendering lists and strings
      7. Handling errors
      8. Server-side rendering
    3. What's new in React?
      1. Memoizing functional components
      2. Code splitting and loading
      3. Hooks
    4. Summary
    5. Further reading
  8. Rendering with JSX
    1. Technical requirements
    2. Your first JSX content
      1. Hello JSX
      2. Declarative UI structures
    3. Rendering HTML
      1. Built-in HTML tags
      2. HTML tag conventions
    4. Describing UI structures
    5. Creating your own JSX elements
      1. Encapsulating HTML
      2. Nested elements
      3. Namespaced components
    6. Using JavaScript expressions
      1. Dynamic property values and text
      2. Mapping collections to elements
    7. Fragments of JSX
      1. Using wrapper elements
      2. Using fragments
    8. Summary
    9. Further reading
  9. Component Properties, State, and Context
    1. Technical requirements
    2. What is component state?
    3. What are component properties?
    4. Setting a component state
      1. Setting an initial component state
      2. Creating a component state
      3. Merging the component state
    5. Passing property values
      1. Default property values
      2. Setting property values
    6. Stateless components
      1. Pure functional components
      2. Defaults in functional components
    7. Container components
    8. Providing and consuming context
    9. Summary
    10. Further reading
  10. Getting Started with Hooks
    1. Technical requirements 
    2. Maintaining state using Hooks
      1. Initial state values
      2. Updating state values
    3. Performing initialization and cleanup actions
      1. Fetching component data
      2. Canceling requests and resetting state
      3. Optimizing side-effect actions
    4. Sharing data using context Hooks
      1. Sharing fetched data
      2. Updating stateful context data
    5. Using reducer Hooks to scale state management
      1. Using reducer actions
      2. Handling state dependencies
    6. Summary
  11. Event Handling - The React Way
    1. Technical requirements
    2. Declaring event handlers
      1. Declaring handler functions
      2. Multiple event handlers
      3. Importing generic handlers
    3. Using event handler context and parameters
      1. Getting component data
      2. Higher-order event handlers
    4. Declaring inline event handlers
    5. Binding handlers to elements
    6. Using synthetic event objects
    7. Understanding event pooling
    8. Summary
    9. Further reading
  12. Crafting Reusable Components
    1. Technical requirements 
    2. Reusable HTML elements
    3. The difficulty with monolithic components
      1. The JSX markup
      2. Initial state
      3. Event handler implementation
    4. Refactoring component structures
      1. Starting with the JSX
      2. Implementing an article list component
      3. Implementing an article item component
      4. Implementing an add article component
      5. Making components functional
    5. Render props
    6. Refactoring class components using Hooks
    7. Rendering component trees
    8. Feature components and utility components
    9. Summary
    10. Further reading
  13. The React Component Life Cycle
    1. Technical requirements
    2. Why components need a life cycle
    3. Initializing properties and state
      1. Fetching component data
      2. Initializing state with properties
      3. Updating state with properties
    4. Optimizing rendering efficiency
      1. To render or not to render
      2. Using metadata to optimize rendering
    5. Rendering imperative components
      1. Rendering jQuery UI widgets
    6. Cleaning up after components
      1. Cleaning up asynchronous calls
    7. Containing errors with error boundaries
    8. Summary
    9. Further reading
  14. Validating Component Properties
    1. Technical requirements
    2. Knowing what to expect
    3. Promoting portable components
    4. Simple property validators
      1. Basic type validation
      2. Requiring values
      3. Any property value
    5. Type and value validators
      1. Things that can be rendered
      2. Requiring specific types
      3. Requiring specific values
    6. Writing custom property validators
    7. Summary
    8. Further reading
  15. Handling Navigation with Routes
    1. Technical requirements
    2. Declaring routes
      1. Hello route
      2. Decoupling route declarations
      3. Parent and child routes
    3. Handling route parameters
      1. Resource IDs in routes
      2. Optional parameters
    4. Using link components
      1. Basic linking
      2. URL and query parameters
    5. Summary
    6. Further reading
  16. Code Splitting Using Lazy Components and Suspense
    1. Technical requirements
    2. Using the lazy API
      1. Dynamic imports and bundles
      2. Making components lazy
    3. Using the Suspense component
      1. Top-level Suspense components
      2. Simulating latency
      3. Working with spinner fallbacks
    4. When to avoid lazy components
    5. Lazy pages and routes
    6. Summary
  17. Server-Side React Components
    1. Technical requirements
    2. What is isomorphic JavaScript?
      1. The server is a render target
      2. Initial load performance
      3. Sharing code between the server and the browser
    3. Rendering to strings
    4. Backend routing
    5. Frontend reconciliation
    6. Fetching data
    7. Summary
    8. Further reading
  18. User Interface Framework Components
    1. Technical requirements 
    2. Layout and organization
      1. Using containers
      2. Building responsive grid layouts
    3. Using navigation components
      1. Navigating with drawers
      2. Navigating with tabs
    4. Collecting user input
      1. Checkboxes and radio buttons
      2. Text inputs and select inputs
      3. Working with buttons
    5. Working with styles and themes
      1. Making styles
      2. Customizing themes
    6. Summary
  19. Section 2: React Native
  20. Why React Native?
    1. Technical requirements
    2. What is React Native?
    3. React and JSX are familar
    4. The mobile browser experience
    5. Android and iOS – different yet the same
    6. The case for mobile web apps
    7. Summary
    8. Further reading
  21. Kick-Starting React Native Projects
    1. Technical requirements
    2. Installing and using the Expo command-line tool
    3. Viewing your app on your phone
    4. Viewing your app on Expo Snack
    5. Summary
  22. Building Responsive Layouts with Flexbox
    1. Technical requirements
    2. Flexbox is the new layout standard
    3. Introducing React Native styles
    4. Building Flexbox layouts
      1. Simple three-column layout
      2. Improved three-column layout
      3. Flexible rows
      4. Flexible grids
      5. Flexible rows and columns
    5. Summary
    6. Further reading
  23. Navigating Between Screens
    1. Technical requirements
    2. Navigation basics
    3. Route parameters
    4. The navigation header
    5. Tab and drawer navigation
    6. Handling state
    7. Summary
    8. Further reading
  24. Rendering Item Lists
    1. Technical requirements 
    2. Rendering data collections
    3. Sorting and filtering lists
    4. Fetching list data
    5. Lazy list loading
    6. Summary
    7. Further reading
  25. Showing Progress
    1. Technical requirements
    2. Progress and usability
    3. Indicating progress
    4. Measuring progress
    5. Navigation indicators
    6. Step progress
    7. Summary
    8. Further reading
  26. Geolocation and Maps
    1. Technical requirements 
    2. Where am I?
    3. What's around me?
    4. Annotating points of interest
      1. Plotting points
      2. Plotting overlays
    5. Summary
    6. Further reading
  27. Collecting User Input
    1. Technical requirements
    2. Collecting text input
    3. Selecting from a list of options
    4. Toggling between on and off
    5. Collecting date/time input
    6. Summary
    7. Further reading
  28. Displaying Modal Screens
    1. Technical requirements
    2. Important information
    3. Getting user confirmation
      1. Displaying a success confirmation
      2. Error confirmation
    4. Passive notifications
    5. Activity modals
    6. Summary
    7. Further reading
  29. Responding to User Gestures
    1. Technical requirements
    2. Scrolling with your fingers
    3. Giving touch feedback
    4. Swipeable and cancellable
    5. Summary
    6. Further reading
  30. Controlling Image Display
    1. Technical requirements
    2. Loading images
    3. Resizing images
    4. Lazy image loading
    5. Rendering icons
    6. Summary
    7. Further reading
  31. Going Offline
    1. Technical requirements
    2. Detecting the state of the network
    3. Storing application data
    4. Synchronizing application data
    5. Summary
    6. Further reading
  32. Section 3: React Architecture
  33. Native UI Components Using NativeBase
    1. Technical requirements
    2. Application containers
    3. Headers, footers, and navigation
    4. Using layout components
    5. Collecting input using form components
    6. Displaying data using lists
    7. Showing user notifications
    8. Summary
  34. Handling Application State
    1. Technical requirements
    2. Information architecture and Flux
      1. Unidirectionality
      2. Synchronous update rounds
      3. Predictable state transformations
    3. Unified information architecture
    4. Implementing Redux
      1. Initial application state
      2. Creating the store
      3. Store provider and routes
      4. The App component
      5. The Home component
      6. State in mobile apps
    5. Scaling the architecture
    6. Summary
    7. Further reading
  35. Why Apollo?
    1. Yet another approach?
    2. Verbose vernacular
    3. Declarative data fetching
    4. Mutating application state
    5. Summary
    6. Further reading
  36. Building an Apollo React App
    1. Technical requirements
    2. Todo and Apollo Client
    3. The GraphQL schema
    4. Bootstrapping Apollo Client
    5. Adding todo items
    6. Rendering todo items
    7. Completing todo items
    8. Summary
  37. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think

Product information

  • Title: React and React Native - Third Edition
  • Author(s): Adam Boduch, Roy Derks
  • Release date: April 2020
  • Publisher(s): Packt Publishing
  • ISBN: 9781839211140