React and React Native - Fourth Edition

React and React Native - Fourth Edition

by Adam Boduch, Roy Derks, Mikhail Sakhniuk
Released May 2022
Publisher(s): Packt Publishing
ISBN: 9781803231280

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

PUBLISHER'S NOTE: An updated 2024 edition of this book, with new emphasis on TypeScript, is now available.

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

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.

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. Fourth Edition
  2. React and React Native
    1. Fourth Edition
  3. Contributors
  4. About the authors
  5. About the reviewers
  6. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Download the example code files
    5. Download the color images
    6. Conventions used
    7. Get in touch
  7. Part 1 – React
  8. Chapter 1: Why React?
    1. What is React?
      1. React is just the view layer
      2. Simplicity is good
      3. Declarative UI structures
      4. Data changes over time
      5. Performance matters
      6. The right level of abstraction
    2. What's new in React 18?
      1. Automatic batching
      2. State transitions
    3. Summary
    4. Further reading
  9. Chapter 2: 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
      3. Describing UI structures
    4. Creating your own JSX elements
      1. Encapsulating HTML
      2. Nested elements
      3. Namespaced components
    5. Using JavaScript expressions
      1. Dynamic property values and text
      2. Mapping collections to elements
    6. Building fragments of JSX
      1. Using wrapper elements
      2. Using fragments
    7. Summary
    8. Further reading
  10. Chapter 3: Component Properties, State, and Context
    1. Technical requirements
    2. What is component state?
    3. What are component properties?
    4. Setting component state
      1. Setting initial component state
      2. Creating component state
      3. Merging 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
  11. Chapter 4: 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
  12. Chapter 5: 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
  13. Chapter 6: 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
  14. Chapter 7: 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
  15. Chapter 8: 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
  16. Chapter 9: Handling Navigation with Routes
    1. Technical requirements
    2. Declaring routes
      1. Hello route
      2. Decoupling route declarations
    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
  17. Chapter 10: 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. Avoiding lazy components
    5. Exploring lazy pages and routes
    6. Summary
  18. Chapter 11: 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
  19. Chapter 12: 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
    5. Working with buttons
    6. Working with styles and themes
      1. Making styles
      2. Customizing themes
    7. Summary
  20. Chapter 13: High-Performance State Updates
    1. Technical requirements
    2. Batching state updates
    3. Prioritizing state updates
    4. Handling asynchronous state updates
    5. Summary
  21. Part 2 – React Native
  22. Chapter 14: Why React Native?
    1. Technical requirements
    2. What is RN?
    3. React and JSX are familiar
    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
  23. Chapter 15: React Native under the Hood
    1. Technical requirements
    2. Exploring React Native architecture
      1. The state of web and mobile apps in the past
      2. React Native current architecture
      3. React Native future architecture
    3. Explaining JS and Native modules
      1. React Navigation
      2. UI component libraries
      3. Splash screen
      4. Icons
      5. Handling errors
      6. Push notifications
      7. Over the air updates
      8. JS libraries
    4. Exploring React Native components and APIs
    5. Summary
  24. Chapter 16: Kick-Starting React Native Projects
    1. Technical requirements
    2. Exploring React Native CLI tools
    3. Installing and using the Expo command-line tool
    4. Viewing your app on your phone
    5. Viewing your app on Expo Snack
    6. Summary
  25. Chapter 17: Building Responsive Layouts with Flexbox
    1. Technical requirements
    2. Introducing Flexbox
    3. Introducing React Native styles
    4. Using the Styled Components library
    5. Building Flexbox layouts
      1. Simple three-column layout
      2. Improved three-column layout
      3. Flexible rows
      4. Flexible grids
      5. Flexible rows and columns
    6. Summary
    7. Further reading
  26. Chapter 18: Navigating Between Screens
    1. Technical requirements
    2. Navigation basics
    3. Route parameters
    4. The navigation header
    5. Tab and drawer navigation
    6. Summary
    7. Further reading
  27. Chapter 19: Rendering Item Lists
    1. Technical requirements
    2. Rendering data collections
    3. Sorting and filtering lists
    4. Fetching list data
    5. Lazy list loading
    6. Implementing pull to refresh
    7. Summary
    8. Further reading
  28. Chapter 20: Showing Progress
    1. Technical requirements
    2. Understanding progress and usability
    3. Indicating progress
    4. Measuring progress
    5. Exploring navigation indicators
    6. Step progress
    7. Summary
    8. Further reading
  29. Chapter 21: Geolocation and Maps
    1. Technical requirements
    2. Using Location API
    3. Rendering the Map
    4. Annotating points of interest
      1. Plotting points
      2. Plotting overlays
    5. Summary
    6. Further reading
  30. Chapter 22: 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
  31. Chapter 23: 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
  32. Chapter 24: Responding to User Gestures
    1. Technical requirements
    2. Scrolling with your fingers
    3. Giving touch feedback
    4. Using Swipeable and cancellable components
    5. Summary
    6. Further reading
  33. Chapter 25: Using Animations
    1. Technical requirements
    2. Using React Native Reanimated
      1. Animated API
      2. React Native Reanimated
      3. Installing the React Native Reanimated library
    3. Animating layout components
    4. Animating styling components
    5. Summary
    6. Further reading
  34. Chapter 26: Controlling Image Display
    1. Technical requirements
    2. Loading images
    3. Resizing images
    4. Lazy image loading
    5. Rendering icons
    6. Summary
    7. Further reading
  35. Chapter 27: 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
  36. Chapter 28: Selecting Native UI Components Using NativeBase
    1. Technical requirements
    2. Application containers
    3. Headers and footers
    4. Using layout components
    5. Collecting input using form components
    6. Summary
    7. Further reading
  37. Part 3 – React Architecture
  38. Chapter 29: Handling Application State
    1. Technical requirements
    2. Organizing state in React
      1. Unidirectionality
      2. Synchronous update rounds
      3. Predictable state transformations
      4. Unified information architecture
    3. Implementing Context
      1. Creating Context
      2. Context provider
      3. Reducer functions
      4. The Home component
      5. Preventing unwanted re-renders
    4. Managing state in mobile apps
    5. Scaling the architecture
    6. Summary
    7. Further reading
  39. Chapter 30: Why GraphQL?
    1. Approaching state with GraphQL
    2. Understanding some verbose vernacular about GraphQL
    3. Declarative data fetching
    4. Mutating application state
    5. Summary
    6. Further reading
  40. Chapter 31: Building a GraphQL React App
    1. Technical requirements
    2. Creating a Todo app
    3. Constructing a GraphQL schema
    4. Bootstrapping the Apollo Client
    5. Adding todo items
    6. Rendering todo items
    7. Completing todo items
    8. Summary
    9. Further reading
    10. Why subscribe?
  41. Other Books You May Enjoy
    1. Packt is searching for authors like you

Product information

  • Title: React and React Native - Fourth Edition
  • Author(s): Adam Boduch, Roy Derks, Mikhail Sakhniuk
  • Release date: May 2022
  • Publisher(s): Packt Publishing
  • ISBN: 9781803231280