Professional React Native E-Book

Alexander Benedikt Kuttig

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 364

Veröffentlichungsjahr: 2022

Beschreibung

The React Native framework offers a range of powerful features that make it possible to efficiently build high-quality, easy-to-maintain frontend applications across multiple platforms such as iOS, Android, Linux, Mac OS X, Windows, and the web, helping you save both time and money. And this book is your key to unlocking its capabilities.
Professional React Native provides the ultimate coverage of essential concepts, best practices, advanced processes, and tips for everyday developer problems. The book makes it easy to understand how React Native works under the hood using step-by-step explanations and practical examples so you can use this knowledge to develop highly performant apps. As you follow along, you'll learn the difference between React and React Native, navigate the React Native ecosystem, and revisit the basics of JavaScript and TypeScript needed to create a React Native application. What’s more, you’ll work with animations and even control your app with gestures. Finally, you'll be able to structure larger apps and improve developer efficiency through automated processes, testing, and continuous integration.
By the end of this React native app development book, you'll have gained the confidence to build high-performance apps for multiple platforms, even on a bigger scale.

Leseprobe

Professional React Native

Expert techniques and solutions for building high-quality, cross-platform, production-ready apps

Alexander Benedikt Kuttig

BIRMINGHAM—MUMBAI

Professional React Native

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 author(s), 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: Rohit Rajkumar

Publishing Product Manager: Nitin Nainani

Senior Editor: Hayden Edwards

Content Development Editor: Abhishek Jadhav

Technical Editor: Simran Ali

Copy Editor: Safis Editing

Project Coordinator: Sonam Pandey

Proofreader: Safis Editing

Indexer: Rekha Nair

Production Designer: Nilesh Mohite

Marketing Coordinator: Teny Thomas

First published: October 2022

Production reference: 1061022

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-80056-368-1

www.packt.com

To my wife, Karin, for her love, support, and inspiration. To my daughter, Leonie, for showing me how talent and creativity evolve every day. To my parents, Roswitha and Burkhard, and my brother, Dominik, for always being there for me. To my business partners, Werner and Philipp, for always having my back. And to all my colleagues for making my job absolutely awesome.

– Alexander Benedikt Kuttig

Contributors

About the author

Alexander Benedikt Kuttig has a master’s degree in computer science and currently works as a software and app architect. With plenty of industry experience, he has created app architecture for different industries, such as education, sports and fitness, manufacturing, printing, and banking, which have been used by millions of users across the globe.

He runs multiple businesses, such as Horizon Alpha, an app development agency, and Teamfit, a digital corporate health platform. He also speaks about his work at different conferences, such as RNEU and the Geekle Cross-Platform Summit, and has a blog on Medium, which he uses to write about the challenges he faces. Alexander is highly experienced as a React Native developer, speaker, and contributor.

About the reviewer

Charles Mangwa is a weathered React Native expert who has been working with the framework for the past 7 years. His knowledge spans over, IoT focused projects, mobile DevOps and he also has published several open source libraries. While the whole React Native ecosystem is his tool of choice, whenever the JavaScript fatigue hits, he can be found working with Dart, building apps in Flutter.

Table of Contents

Preface

Part 1: Getting Started with React Native

1

What Is React Native?

Technical requirements

Exploring React

Understanding React basics

Understanding React components

Understanding React props and state

Introducing React Native

React Native basics

The new React Native (2022)

More React Native advantages

Introducing Expo

Summary

2

Understanding the Essentials of JavaScript and TypeScript

Technical requirements

Exploring modern JavaScript

Exploring JavaScript for React Native development

Understanding the assigning and passing of objects

Creating real copies of an object

Working with destructuring in JavaScript

Understanding this in JavaScript

Working with asynchronous JavaScript

Exploring callbacks

Understanding the implementation

What’s better than callbacks? Promises!

Improved syntax with async/await

Patching callback libraries

Using typed JavaScript

Flow

TypeScript

Summary

3

Hello React Native

Technical requirements

Understanding how React Native works on an example app

Understanding the React Native example project

Structuring the example application

Passing properties

Understanding class components, function components, and Hooks

Working with class components and lifecycle methods

Working with function components and Hooks

Connecting different platforms to JavaScript

Introducing the new React Native Architecture

Summary

Part 2: Building World-Class Apps with React Native

4

Styling, Storage, and Navigation in React Native

Technical requirements

Understanding how to style a React Native app

Make styling maintainable

Choosing the right styling solution

Using local storage solutions in React Native

Storing non-sensitive data

Storing sensitive data

Understanding navigation in React Native

Navigating different platforms

Working with React Navigation

Summary

5

Managing States and Connecting Backends

Technical requirements

Managing global application states

Passing properties

Using global state providers/containers

Comparing local component state and global application state

Working with global state management solutions

Working with React Context

Working with Zustand

Working with Redux

Connecting to remote backends

Understanding the general principles of connections in React Native

Working with the built-in Fetch API

Working with other data fetching solutions

Summary

6

Working with Animations

Technical requirements

Understanding the architectural challenge of animations in React Native

Using the internal Animated API of React Native

Starting with a simple example

Using the native driver

Interpolate animated values

Getting to know the advanced options of the Animated API

Understanding the pros and cons of the Animated API

Creating simple animations with react-native-animatable

Starting with a simple example

Using the native driver

Working with custom animations

Understanding the pros and cons of react-native-animatable

Exploring Reanimated 2 – the most complete animation solution for React Native

Getting to know the Reanimated API with a simple example

Understanding the architecture of Reanimated 2

Understanding the pros and cons of Reanimated

Using Lottie animations in React Native

Starting with a simple example

Combining Lottie animations with the React Native Animated API

Finding or creating Lottie animations

Understanding the pros and cons of Reanimated

Summary

7

Handling Gestures in React Native

Technical requirements

Using built-in components to respond to user gestures

Using components to respond to simple taps

Working with ScrollView

Working with the gesture responder system and PanResponder

Becoming a responder

Handling touches

Using PanResponder

Understanding React Native Gesture Handler

Summary

8

JavaScript Engines and Hermes

Technical requirements

Understanding JavaScript engines

Using JavaScriptCore

Using V8

Getting to know the Hermes engine

Comparing key metrics

Understanding important metrics

Comparing JavaScriptCore and Hermes on Android

Comparing JSC and Hermes on iOS

Summary

9

Essential Tools for Improving React Native Development

Technical requirements

Improving code quality with type safety, linters, and code formatters

Ensuring type safety with TypeScript or Flow

Getting rid of the most common bugs with linters

Enforcing a common code style with prettier

Using boilerplate solutions

Using the React Native TypeScript template

Using React Native Boilerplate by thecodingmachine

Using React Native Starter Kit by mcnamee

Working with Ignite CLI

Finding and using high-quality UI libraries

Working with React Native Paper

Working with NativeBase

Using Storybook for React Native

Summary

Part 3: React Native in Large-Scale Projects and Organizations

10

Structuring Large-Scale, Multi-Platform Projects

Technical requirements

Setting up an app architecture that works for large-scale enterprise projects

Adapting our example project structure

Using React Native to deploy to different platforms

Using react-native-web to create a clone for web

Working with .native and .web file endings

Working with multiple packages in a monorepo

Reusing code with your own libraries

Using react-native-builder-bob to write, maintain, and publish our own libraries

Setting access restrictions on libraries

Summary

11

Creating and Automating Workflows

Technical requirements

Understanding integration/delivery workflow automation

Creating a collaborative development workflow

Creating useful CI pipelines for the development process

Understanding workflow automation and CD for build and release

Summary

12

Automated Testing for React Native Apps

Technical requirements

Understanding automated testing

Working with unit and integration tests in React Native

Working with component tests

Understanding end-to-end tests

Understanding the role of end-to-end testing

Writing end-to-end tests with Detox

Understanding Appium and AWS Device Farm

Summary

13

Tips and Outlook

Technical requirements

Understanding the most important things to make your React Native project a success

Tip 1 – Find a process you never have to work around

Tip 2 – Plan to be as flexible as possible with strategies to update without store releases

Tip 3 – Always be aware of what’s happening in your app with stability monitoring tools

Tip 4 – Let the user test with A/B testing

Tip 5 – Use TypeScript as a single language stack

Tip 6 – Keep your code simple and clean

Understanding the bright future of React Native

Reason 1 – The new architecture has finally landed

Reason 2 – React Native Skia

Reason 3 – The community

Reason 4 – TypeScript and React

Summary

Index

Other Books You May Enjoy

Part 1: Getting Started with React Native

This module is mainly for getting you to the needed level of basic knowledge of React and React Native to understand the more advanced modules, 2 and 3. After reading, you will understand how modern client development based on React works as well as the differences between React, React Native, and Expo.

The following chapters are in this section:

Chapter 1, What Is React Native?Chapter 2, Understanding the Essentials of JavaScript and TypeScriptChapter 3, Hello React Native

2

Understanding the Essentials of JavaScript and TypeScript

Since React Native apps are written in JavaScript, it is important to have a very good understanding of this language to build high-quality apps. JavaScript is very easy to learn, but very hard to master, because it allows you to do nearly everything without giving you a hard time. However, just because you can do everything does not mean that you should.

The overall goal of this chapter is to show important underlying concepts for avoiding the most common mistakes, bad patterns, and very expensive don’ts. You will get useful tips, learn best practices, and repeat the most important basics to use JavaScript in your apps.

In this chapter, we will cover the following topics:

Exploring modern JavaScriptJavaScript knowledge for React Native developmentWorking with asynchronous JavaScriptUsing typed JavaScript

Technical requirements

There are no technical requirements except a browser to run the examples of this chapter. Just go to https://jsfiddle.com/ or https://codesandbox.io/ and type and run your code.

To access the code for this chapter, follow this link to the book’s GitHub repository:

This chapter is not a complete tutorial. If you are not familiar with the JavaScript basics, please have a look at https://javascript.info, which is the JavaScript tutorial I would recommend to start.

Exploring modern JavaScript

When we speak of modern JavaScript, this refers to ECMAScript 2015 (which also is known as ES6) or newer. It contains a lot of useful features, which are not included in older JavaScript versions. Since 2015 there has been an update to the specification released every year.

You can have a look at the features that were implemented in previous releases in the TC39 GitHub repository (https://bit.ly/prn-js-proposals). You can also find a lot of information about upcoming features and release plans there.

Let’s start our journey to understand the most important parts of JavaScript by having a look under the hood. To truly understand modern JavaScript and the tooling around it, we have to take a little look at the basics and the history of the language. JavaScript is a script language, which can run nearly everywhere.

The most common use case clearly is building dynamic frontends for the web browser, but it also runs on the server (Node.js), as part of other software, on microcontrollers, or (most importantly for us) in apps.

Every place where JavaScript runs has to have a JavaScript engine, which is responsible for executing the JavaScript code. In older browsers, the engines were only simple interpreters that transformed the code to executable bytecode at runtime without any optimizations.

Today there is a lot of optimization going on inside the different JS engines, depending on which metrics are important for the engine’s use case. The Chromium V8 engine, for example, introduced just-in-time compilation, which resulted in a huge performance boost while executing JavaScript.

To be able to have a common understanding of what JavaScript is on all those platforms and between all those engines, JavaScript has a standardized specification called ES. This specification is constantly evolving as more and more features (such as improved asynchrony or a cleaner syntax) are introduced to JavaScript.

This constantly evolving feature set is awesome for developers but introduced a big problem. To be able to use the new features of the ES language specification, the JavaScript engine in question has to implement the new features and then the new version of the engine has to be rolled out to all users.

This is a big problem especially when it comes to browsers, since a lot of companies rely on very old browsers for their infrastructure. This would make it impossible for developers to use the new features for years.

This is where transcompilers such as Babel (https://babeljs.io) come into play. These transcompilers convert modern JavaScript into a backward-compatible version, which can be executed by older JavaScript engines. This transcompilation is an important step of the build process in modern web applications as well as in React Native apps.

When writing modern JavaScript applications, it works like this:

You write your code in modern JavaScript.A transcompiler converts your code to pre-ES6 JavaScript.A JavaScript engine interprets your code and transforms it into bytecode, which is then executed on the machine.Modern JavaScript engines optimize execution with features such as just-in-time compilation.

When it comes to React Native, you can choose from different JavaScript engines with different strengths and weaknesses. You can read more on this in Chapter 8, JavaScript Engines and Hermes.

In this section, you learned