React and React Native: Build cross-platform JavaScript applications with native power for the web, desktop, and mobile

606 Pages·2022·11.233 MB·English

by  Adam Boduch, Roy Derks, Mikhail Sakhniuk

React and
React Native
Fourth Edition
Build cross-platform JavaScript applications with
native power for the web, desktop, and mobile
Adam Boduch
Roy Derks
Mikhail Sakhniuk
BIRMINGHAM—MUMBAI
React and React Native
Fourth Edition
Copyright © 2022 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or
transmitted in any form or by any means, without the prior written permission of the publisher,
except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information
presented. However, the information contained in this book is sold without warranty, either express
or implied. Neither the authors, nor Packt Publishing or its dealers and distributors, will be held liable
for any damages caused or alleged to have been caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies
and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing
cannot guarantee the accuracy of this information.
Group Product Manager: Pavan Ramchandani
Publishing Product Manager: Aaron Tanna
Senior Editor: Hayden Edwards
Content Development Editor: Rashi Dubey
Technical Editor: Joseph Aloocaran
Copy Editor: Safis Editing
Project Coordinator: Rashika Ba
Proofreader: Safis Editing
Indexer: Pratik Shirodkar
Production Designer: Ponraj Dhandapani
Marketing Coordinator: Anamika Singh
First published: March 2017
Second edition: September 2018
Third edition: April 2020
Fourth edition: May 2022
Production reference: 1270522
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham
B3 2PB, UK.
ISBN 978-1-80323-128-0
www.packt.com
For Jason, Simon, and Kevin
– Adam Boduch
For every developer out there that needs a friend on their programming
journey
– Roy Derks
For my wife, Anna, and daughter, Polina
– Mikhail Sakhniuk
Contributors
About the authors
Adam Boduch has been involved in large-scale JavaScript development for nearly 15
years. Before moving to the frontend, he worked on several large-scale cloud computing
products using Python and Linux. No stranger to complexity, Adam has practical
experience with real-world software systems and the scaling challenges they pose.
Thanks to the React team for providing the web with this fantastic tool.
Roy Derks is a serial start-up CTO, international speaker, and author from the
Netherlands. He has been working with React, React Native, and GraphQL since 2016.
You might know him from the book React Projects – Second Edition, which was released
by Packt earlier this year. Over the last few years, he has inspired tens of thousands of
developers worldwide through his talks, books, workshops, and courses.
Mikhail Sakhniuk is a software engineer who is highly proficient in JavaScript, React,
and React Native. He has more than 6 years of experience in developing web and mobile
applications. He has worked for start-ups, fintech companies, and product companies with
more than 30 million users. Currently, Mikhail is working as a senior frontend engineer.
In addition, he owns and maintains a number of open source projects. He also shares his
knowledge and experience through books and articles.
I'd like to thank the entire JavaScript community for creating, maintaining,
and using a thousand libraries and tools that make the web faster, bigger,
and more accessible.
About the reviewers
Kirill Ezhemenskii is an experienced software engineer, frontend and mobile developer,
solution architect, and CTO at a healthcare company. He's a functional programming
advocate and an expert in the React Stack, GraphQL, and TypeScript. Kirill is also a React
Native mentor.
Sunki Baek is an experienced frontend developer who primarily works with React Native
to develop cross-platform applications. His React Native journey started in 2016, shortly
after React Native was introduced—his first project was to create an e-commerce app with
a chat feature. Ever since then, he has been involved in e-commerce, online-to-offline
commerce, and food technology projects. Currently, he is working as a senior mobile
developer in the Restaurant Live Order team at SkipTheDishes.
Andrew Baisden is a software developer who has experience working across different
technical stacks. Primarily skilled as a JavaScript developer, he is also familiar with the
programming languages Python and C#. He has a university degree and has spent a lot
of time self-training to expand his knowledge and skillset. Technical writing and content
creation are two other areas where he excels. Many of his articles have been shared across
social media and are used as motivation and essential resources for other developers and
aspiring developers who are trying to break into the industry. With a growing audience of
over 5,000 members, Andrew continues to add value wherever he goes.

Table of Contents
Preface
Part 1 – React
1
Why React?
What is React? 4 What's new in React 18? 10
React is just the view layer 4 Automatic batching 10
Simplicity is good 5 State transitions 11
Declarative UI structures 6
Summary 11
Data changes over time 7
Further reading 11
Performance matters 7
The right level of abstraction 9
2
Rendering with JSX
Technical requirements 14 Nested elements 20
Your first JSX content 14 Namespaced components 23
Hello JSX 14 Using JavaScript expressions 24
Declarative UI structures 15
Dynamic property values and text 25
Rendering HTML 15 Mapping collections to elements 26
Built-in HTML tags 16 Building fragments of JSX 28
HTML tag conventions 17
Using wrapper elements 29
Describing UI structures 18
Using fragments 30
Creating your own JSX elements 19
Summary 31
Encapsulating HTML 19
Further reading 31
viii Table of Contents
3
Component Properties, State, and Context
Technical requirements 34 Setting property values 44
What is component state? 34
Stateless components 46
What are component properties? 35
Pure functional components 46
Setting component state 36 Defaults in functional components 48
Setting initial component state 36
Container components 49
Creating component state 38
Providing and consuming
Merging component state 40
context 52
Passing property values 42
Summary 56
Default property values 42
Further reading 56
4
Getting Started with Hooks
Technical requirements 57 Sharing data using context
Maintaining state using Hooks 58 Hooks 70
Initial state values 58 Sharing fetched data 71
Updating state values 59 Updating stateful context data 75
Performing initialization and Using reducer Hooks to scale
cleanup actions 62 state management 80
Fetching component data 62 Using reducer actions 80
Canceling requests and resetting state 64 Handling state dependencies 84
Optimizing side-effect actions 68
Summary 90
5
Event Handling, the React Way
Technical requirements 92 Using event handler context
Declaring event handlers 92 and parameters 96
Declaring handler functions 92 Getting component data 96
Multiple event handlers 93 Higher-order event handlers 99
Importing generic handlers 94
Declaring inline event handlers 100
Table of Contents ix
Binding handlers to elements 101 Summary 105
Using synthetic event objects 102 Further reading 105
Understanding event pooling 103
6
Crafting Reusable Components
Technical requirements 108 component 119
Reusable HTML elements 108 Implementing an add article
component 121
The difficulty with monolithic
Making components functional 123
components 109
The JSX markup 109 Render props 126
Initial state 111 Refactoring class components
Event handler implementation 112 using hooks 128
Rendering component trees 133
Refactoring component
structures 115 Feature components and utility
components 134
Starting with the JSX 115
Implementing an article list component 117 Summary 135
Implementing an article item Further reading 135
7
The React Component Life Cycle
Technical requirements 138 Rendering imperative
Why components need a life components 154
cycle 138 Rendering jQuery UI widgets 154
Initializing properties and state 139
Cleaning up after components 157
Fetching component data 140
Cleaning up asynchronous calls 157
Initializing state with properties 143
Updating state with properties 145 Containing errors with error
boundaries 160
Optimizing rendering efficiency 148
Summary 165
To render or not to render 148
Further reading 165
Using metadata to optimize rendering 152