Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • React and React Native
  • Toc
  • feedback
React and React Native

React and React Native

By : Mikhail Sakhniuk, Roy Derks, Adam Boduch
4.3 (10)
close
React and React Native

React and React Native

4.3 (10)
By: Mikhail Sakhniuk, Roy Derks, Adam Boduch

Overview of this book

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.
Table of Contents (33 chapters)
close
close
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
1
Part I: React
Part I: React
Free Chapter
2
Why React?
Why React?
What is React?
What’s new in React?
Setting up a new React project
Using web bundlers
Summary
Join us on Discord!
3
Rendering with JSX
Rendering with JSX
Technical requirements
Your first JSX content
Rendering HTML
Creating your own JSX elements
Using JavaScript expressions
Building fragments of JSX
Summary
4
Understanding React Components and Hooks
Understanding React Components and Hooks
Technical requirements
Introduction to React components
What are component properties?
What is component state?
React Hooks
Performing initialization and cleanup actions
Sharing data using context Hooks
Memoization with Hooks
Summary
5
Event Handling in the React Way
Event Handling in the React Way
Technical requirements
Declaring event handlers
Declaring inline event handlers
Binding handlers to elements
Using synthetic event objects
Understanding event pooling
Summary
6
Crafting Reusable Components
Crafting Reusable Components
Technical requirements
Reusable HTML elements
The diffculty with monolithic components
Refactoring component structures
Render props
Rendering component trees
Summary
7
Type-Checking and Validation with TypeScript
Type-Checking and Validation with TypeScript
Technical requirements
Knowing what to expect
Introduction to TypeScript
Using TypeScript in React
Summary
8
Handling Navigation with Routes
Handling Navigation with Routes
Technical requirements
Declaring routes
Handling route parameters
Using link components
Summary
9
Code Splitting Using Lazy Components and Suspense
Code Splitting Using Lazy Components and Suspense
Technical requirements
Using the lazy API
Using the Suspense component
Avoiding lazy components
Exploring lazy pages and routes
Summary
10
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
11
High-Performance State Updates
High-Performance State Updates
Technical requirements
Batching state updates
Prioritizing state updates
Handling asynchronous state updates
Summary
12
Fetching Data from a Server
Fetching Data from a Server
Technical requirements
Working with remote data
Using the Fetch API
Using Axios
Using TanStack Query
Using GraphQL
Summary
13
State Management in React
State Management in React
What is global state?
React Context API and useReducer
Redux
MobX
Summary
14
Server-Side Rendering
Server-Side Rendering
Technical requirements
Working on the server
Using Next.js
React Server Components
Summary
15
Unit Testing in React
Unit Testing in React
Technical requirements
Testing in general
Unit testing
Testing ReactJS
Summary
Join us on Discord!
16
Part II: React Native
Part II: React Native
17
Why React Native?
Why React Native?
Technical requirements
What is React Native?
React and JSX are familiar
The mobile browser experiences
Android and iOS: different yet the same
The case for mobile web apps
Summary
18
React Native under the Hood
React Native under the Hood
Exploring the React Native architecture
React Native current architecture
Explaining JS and Native modules
Exploring React Native components and APIs
Summary
19
Kick-Starting React Native Projects
Kick-Starting React Native Projects
Technical requirements
Exploring React Native CLI tools
Installing and using the Expo command-line tool
Viewing your app on your phone
Viewing your app on Expo Snack
Summary
20
Building Responsive Layouts with Flexbox
Building Responsive Layouts with Flexbox
Technical requirements
Introducing Flexbox
Introducing React Native styles
Using the Styled Components library
Building Flexbox layouts
Summary
21
Navigating Between Screens
Navigating Between Screens
Technical requirements
The basics of navigation
Route parameters
The navigation header
Tab and drawer navigation
File-based navigation
Summary
22
Rendering Item Lists
chevron up
Rendering Item Lists
Technical requirements
Rendering data collections
Sorting and filtering lists
Fetching list data
Lazy list loading
Implementing pull to refresh
Summary
23
Geolocation and Maps
Geolocation and Maps
Technical requirements
Using the Geolocation API
Rendering the map
Annotating points of interest
Summary
24
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
25
Responding to User Gestures
Responding to User Gestures
Technical requirements
Scrolling with your fingers
Giving touch feedback
Using Swipeable and Cancellable components
Summary
26
Showing Progress
Showing Progress
Technical requirements
Understanding progress and usability
Indicating progress
Exploring navigation indicators
Measuring progress
Step progress
27
Displaying Modal Screens
Displaying Modal Screens
Technical requirements
Terminology definitions
Getting user confirmation
Error confirmation
Passive notifications
Activity modals
Summary
28
Using Animations
Using Animations
Technical requirements
Using React Native Reanimated
The Animated API
Animating layout components
Animating component styles
Summary
29
Controlling Image Display
Controlling Image Display
Technical requirements
Loading images
Resizing images
Lazy image loading
Rendering icons
Summary
30
Going Offline
Going Offline
Technical requirements
Detecting the state of the network
Storing application data
Synchronizing application data
Summary
Join us on Discord!
31
Other Books You May Enjoy
Other Books You May Enjoy
32
Index
Index

Fetching list data

Commonly, you’ll fetch your list data from some API endpoint. In this section, you’ll learn about making API requests from React Native components. The good news is that the fetch() API is polyfilled by React Native, so the networking code in your mobile applications should look and feel a lot like it does in your web applications.

To start things off, let’s build a mock API for our list items using functions that return promises just like fetch() does:

const items = new Array(100).fill(null).map((v, i) => `Item ${i}`);
function filterAndSort(data: string[], text: string, asc: boolean) {
  return data
    .filter((i) => text.length === 0 || i.includes(text))
    .sort(
      asc
        ? (a, b) => (b > a ? -1 : a === b ? 0 : 1)
        : (a, b) => (a > b ? -1 : a === b ? 0 : 1)
    );
}
export function fetchItems(
  filter: string,
  asc: boolean
): Promise<{ json: () => Promise<{ items: string[] }> }&gt...
End of Section 5
Next Section
bookmark search playlist font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete