React and React Native - Fifth Edition

React and React Native - Fifth Edition

by Mikhail Sakhniuk, Adam Boduch
Released April 2024
Publisher(s): Packt Publishing
ISBN: 9781805127307

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

Get a big-picture view of modern React and React Native and see how they go hand-in-hand – covering TypeScript development, Vite, state management strategies, unit testing with Jest, and more. Purchase of the print or Kindle book includes a free PDF eBook.

Key Features

  • New content on TypeScript, React frameworks, state management strategies, and unit testing
  • Get to grips with React fundamentals and modern React techniques and architecture
  • Broaden your React expertise through mobile development with React Native

Book Description

Welcome to your big-picture guide to the React ecosystem.

If you’re new to React and looking to become a professional React developer, this book is for you. This updated fifth edition reflects the current state of React, including React framework coverage as well as TypeScript.

Part 1 introduces you to React. You’ll discover JSX syntax, hooks, functional components, and event handling, learn techniques to fetch data from a server, and tackle the tricky problem of state management. Once you’re comfortable with writing React in JavaScript, you’ll pick up TypeScript development in later chapters.

Part 2 transitions you into React Native for mobile development. React Native goes hand-in-hand with React. With your React knowledge behind you, you’ll appreciate where and how React Native differs as you write shared components for Android and iOS apps. You’ll learn how to build responsive layouts, use animations, and implement geolocation.

By the end of this book, you’ll have a big-picture view of React and React Native and be able to build applications with both.

What you will learn

  • Explore React architecture, component properties, state, and context
  • Work with React Hooks for handling functions and components
  • Fetch data from a server using the Fetch API, GraphQL, and WebSockets
  • Dive into internal and external state management strategies
  • Build robust user interfaces (UIs) for mobile and desktop apps using Material-UI
  • Perform unit testing for your components with Vitest and mocking
  • Manage app performance with server-side rendering, lazy components, and Suspense

Who this book is for

This book is for any JavaScript or TypeScript developer who wants to start learning how to use React and React Native for web and mobile app development. No prior knowledge of React or React Native is required. However, a working knowledge of JavaScript is necessary to be able to follow along the content covered.

Table of contents

  1. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Get in touch
  2. Part I: React
  3. 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?
    3. Setting up a new React project
    4. Using web bundlers
      1. Using frameworks
      2. Online code editors
    5. Summary
    6. Join us on Discord!
  4. Rendering with JSX
    1. Technical requirements
    2. Your first JSX content
      1. Hello JSX
    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
    5. Using JavaScript expressions
      1. Dynamic property values and text
      2. Handling events
      3. Mapping collections to elements
    6. Building fragments of JSX
      1. Using wrapper elements
      2. Using fragments
    7. Summary
  5. Understanding React Components and Hooks
    1. Technical requirements
    2. Introduction to React components
    3. What are component properties?
      1. Passing property values
      2. Default property values
    4. What is component state?
    5. React Hooks
      1. Maintaining state using Hooks
      2. Initial state values
        1. Updating state values
    6. Performing initialization and cleanup actions
      1. Fetching component data
      2. Canceling actions and resetting state
      3. Optimizing side-effect actions
    7. Sharing data using context Hooks
    8. Memoization with Hooks
      1. useMemo Hook
      2. useCallback hook
      3. useRef hook
    9. Summary
  6. Event Handling in the React Way
    1. Technical requirements
    2. Declaring event handlers
      1. Declaring handler functions
      2. Multiple event handlers
    3. Declaring inline event handlers
    4. Binding handlers to elements
    5. Using synthetic event objects
    6. Understanding event pooling
    7. Summary
  7. Crafting Reusable Components
    1. Technical requirements
    2. Reusable HTML elements
    3. The diffculty 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 AddArticle component
    5. Render props
    6. Rendering component trees
      1. Feature components and utility components
    7. Summary
  8. Type-Checking and Validation with TypeScript
    1. Technical requirements
    2. Knowing what to expect
      1. The importance of props validation
      2. Potential issues without props validation
      3. Options for props validation
    3. Introduction to TypeScript
      1. Why use TypeScript?
      2. Setting up TypeScript in a project
      3. Basic types in TypeScript
      4. Interfaces and type aliases
        1. Interfaces
        2. Type aliases
        3. Interfaces vs type aliases
    4. Using TypeScript in React
      1. Type-checking props in React components
      2. Typing state
      3. Typing event handlers
      4. Typing context
      5. Typing refs
    5. Summary
  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. Query parameters
    4. Using link components
      1. Basic linking
      2. URL and query parameters
    5. Summary
  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. Working with spinner fallbacks
    4. Avoiding lazy components
    5. Exploring lazy pages and routes
    6. Summary
  11. 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
  12. High-Performance State Updates
    1. Technical requirements
    2. Batching state updates
      1. React 18 batching
    3. Prioritizing state updates
    4. Handling asynchronous state updates
    5. Summary
  13. Fetching Data from a Server
    1. Technical requirements
    2. Working with remote data
    3. Using the Fetch API
    4. Using Axios
    5. Using TanStack Query
    6. Using GraphQL
    7. Summary
  14. State Management in React
    1. What is global state?
    2. React Context API and useReducer
    3. Redux
    4. MobX
    5. Summary
  15. Server-Side Rendering
    1. Technical requirements
    2. Working on the server
      1. Server-side rendering
      2. Static site and incremental static generation
    3. Using Next.js
    4. React Server Components
    5. Summary
  16. Unit Testing in React
    1. Technical requirements
    2. Testing in general
      1. Test types and approaches
    3. Unit testing
      1. Setting up the test environment
      2. Vitest features
      3. Mocking
    4. Testing ReactJS
    5. Summary
    6. Join us on Discord!
  17. Part II: React Native
  18. Why React Native?
    1. Technical requirements
    2. What is React Native?
    3. React and JSX are familiar
    4. The mobile browser experiences
    5. Android and iOS: different yet the same
    6. The case for mobile web apps
    7. Summary
  19. React Native under the Hood
    1. Exploring the React Native architecture
      1. The state of web and mobile apps in the past
    2. React Native current architecture
      1. JS as part of React Native
        1. The “Native” part
        2. Communication between threads
        3. Styling
      2. 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
  20. 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
  21. 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
  22. Navigating Between Screens
    1. Technical requirements
    2. The basics of navigation
    3. Route parameters
    4. The navigation header
    5. Tab and drawer navigation
    6. File-based navigation
    7. Summary
  23. 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
  24. Geolocation and Maps
    1. Technical requirements
    2. Using the Geolocation API
    3. Rendering the map
    4. Annotating points of interest
      1. Plotting points
      2. Plotting overlays
    5. Summary
  25. 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
  26. Responding to User Gestures
    1. Technical requirements
    2. Scrolling with your fingers
    3. Giving touch feedback
    4. Using Swipeable and Cancellable components
    5. Summary
  27. Showing Progress
    1. Technical requirements
    2. Understanding progress and usability
    3. Indicating progress
    4. Exploring navigation indicators
    5. Measuring progress
    6. Step progress
  28. Displaying Modal Screens
    1. Technical requirements
    2. Terminology definitions
    3. Getting user confirmation
      1. Displaying a success confirmation
    4. Error confirmation
    5. Passive notifications
    6. Activity modals
    7. Summary
  29. Using Animations
    1. Technical requirements
    2. Using React Native Reanimated
    3. The Animated API
      1. React Native Reanimated
      2. Installing the React Native Reanimated library
    4. Animating layout components
    5. Animating component styles
    6. Summary
  30. Controlling Image Display
    1. Technical requirements
    2. Loading images
    3. Resizing images
    4. Lazy image loading
    5. Rendering icons
    6. Summary
  31. Going Offline
    1. Technical requirements
    2. Detecting the state of the network
    3. Storing application data
    4. Synchronizing application data
    5. Summary
    6. Join us on Discord!
  32. Other Books You May Enjoy
  33. Index

Product information

  • Title: React and React Native - Fifth Edition
  • Author(s): Mikhail Sakhniuk, Adam Boduch
  • Release date: April 2024
  • Publisher(s): Packt Publishing
  • ISBN: 9781805127307