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.
Table of Contents (13 chapters)

React Component Patterns

Developing Android and iOS has never been easier than it is now. React Native has changed how fast we develop new apps and deliver value to the end user. Knowing this technology will give you a great edge in the market. I'm Matt and I'm happy to show you the best practices I have learned while working in a React Native ecosystem. Through this book, we will explore design patterns by example. In just this first chapter, we will create over 10 small applications. Later on in this book, we will create more complex applications, using the patterns that I will gradually introduce to you.

In this chapter, we will explore React patterns that also apply to the React Native world. The most crucial patterns you need to understand are stateless and stateful components. Understanding how to use these will make you a much better React Native developer and empower you with standard patterns in every React Native application.

When it comes to components, it is crucial to make them as reusable as possible and follow the well-known programmer principle—Don't Repeat Yourself (DRY). Presentational components and container components are meant to do just that. We will dive into them with a couple of examples to learn how to split features into reusable pieces.

To be more precise, in this first chapter, we will look at the following topics:

  • Stateless and stateful components, using short and then more complex examples
  • How to create reusable and easily configurable presentational components
  • Container components and their role in the encapsulation of features
  • When to compose components and how to create Higher Order Components (HOCs)

It's time to act on your side. Prepare your environment for React Native development right now if you want to follow along and play with the examples. Most of the code samples that you will see in this book can be run and displayed either on a simulator or on a real mobile device. Now, make sure that you can launch the Hello World example on your mobile or simulator.

Code examples are checked into a Git repository on GitHub, which can be found at https://github.com/Ajdija/hands-on-design-patterns-with-react-native.
Please follow the readme.md instructions to set up your machine and launch our first example. The Hello World example can be found in the following directory src/Chapter_1_React_component_patterns/Example_1_Hello_World.