Book Image

Hands-On Design Patterns with React Native

By : Mateusz Grzesiukiewicz
Book Image

Hands-On Design Patterns with React Native

By: Mateusz Grzesiukiewicz

Overview of this book

React Native helps developers reuse code across different mobile platforms like iOS and Android. This book will show you effective design patterns in the React Native world and will make you ready for professional development in big teams. The book will focus only on the patterns that are relevant to JavaScript, ECMAScript, React and React Native. However, you can successfully transfer a lot of the skills and techniques to other languages. I call them “Idea patterns”. This book will start with the most standard development patterns in React like component building patterns, styling patterns in React Native and then extend these patterns to your mobile application using real world practical examples. Each chapter comes with full, separate source code of applications that you can build and run on your phone. The book is also diving into architectural patterns. Especially how to adapt MVC to React environment. You will learn Flux architecture and how Redux is implementing it. Each approach will be presented with its pros and cons. You will learn how to work with external data sources using libraries like Redux thunk and Redux Saga. The end goal is the ability to recognize the best solution for a given problem for your next mobile application.

Related Content you might be interested in

Current Title:

Small book image
Hands-On Design Patterns with React Native
Mateusz Grzesiukiewicz
Sep, 2018 | 302 pages
Small book image
React Native - Building Mobile Apps with JavaScript
Vladimir Novick
Aug, 2017 | 434 pages
Small book image
Simplifying State Management in React Native
Aleksandra DesmursLinczewska
Jan, 2023 | 202 pages
Small book image
React 16 Tooling
Adam Boduch
Apr, 2018 | 298 pages
Table of Contents (13 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
Free Chapter
1
React Component Patterns
React Component Patterns
Stateless and stateful components
Testing components on high-level patterns
Presentational components
Container component
Summary
2
View Patterns
View Patterns
Technical requirements
Introduction to JSX
Built-in components you need to know about
Building forms
Introduction to error boundaries
Why Mixins are anti-patterns
Linters and code style guide
Summary
3
Styling Patterns
Styling Patterns
Technical requirements
How React Native styles work
Using the Flexible Box pattern
React Native animated
Summary
4
Flux Architecture
Flux Architecture
One-direction dataflow pattern
Introduction to Flux
Flux by example
Detailed Flux diagram
What are side effects?
Summary
Questions
Further reading
5
Store Patterns
Store Patterns
Using Redux stores
Redux as a pattern
Creating an alternative with MobX
Comparing Redux and MobX
Using system storage in React Native
Effect patterns
Summary
Further reading
6
Data Transfer Patterns
Data Transfer Patterns
Preparation
Fetching data with the built-in function
The Thunk pattern and Redux Thunk
The saga pattern and Redux Saga
Summary
Further reading
7
Navigation Patterns
Navigation Patterns
React Native navigation alternatives
React Navigation
React Native Navigation
Summary
Further reading
8
JavaScript and ECMAScript Patterns
JavaScript and ECMAScript Patterns
JavaScript and functional programming
ES6 map, filter, and reduce
The iterator pattern
Selectors
Learning functions from the Ramda library
Summary
Further reading
9
Elements of Functional Programming Patterns
Elements of Functional Programming Patterns
Mutable and immutable objects
Pure functions
Everything but monads
Higher-order functions
Functional languages aside
Summary
Further reading
10
Managing Dependencies
Managing Dependencies
The singleton pattern
ES6 modules and beyond
DI with React context
Managing the code base
Summary
Further reading
11
Type Checking Patterns
Type Checking Patterns
Introduction to types
Understanding TypeScript
Immutability with TypeScript
Summary
Further reading
12
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Summary

In this chapter, you learned how to style React Native applications. We introduced many different ways of positioning elements and you learned how our designs translate to real devices. In the end, we made a few animations and measured them in terms of FPS.

So far, we know how to create reusable code using React components and how to style them. We worked with limited data stored in the local JSON file. It's time to make our application more complex and talk about different scenarios that impact big applications. In the next chapter, you will learn about Flux, which is an architectural pattern.

Previous Section
End of Chapter 3
Next Chapter