O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Hands-On Design Patterns with React Native

Book Description

Learn how to write cross platform React Native code by using effective design patterns in the JavaScript world. Get to know industry standard patterns as well as situational patterns. Decouple your application with these set of ?Idea patterns?.

Key Features

  • Mobile development in React Native should be done in a reusable way.
  • Learn how to build scalable applications using JavaScript patterns that are battle tested.
  • Try effective techniques on your own using over 80 standalone examples.

Book Description

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.

What you will learn

  • Explore the design Patterns in React Native
  • Learn the best practices for React Native development
  • Explore common React patterns that are highly used within React Native development
  • Learn to decouple components and use dependency injection in your applications
  • Explore the best ways of fetching data from the backend systems
  • Learn the styling patterns and how to implement custom mobile designs
  • Explore the best ways to organize your application code in big codebases

Who this book is for

The ideal target audience for this book are people eager to learn React Native design patterns who already know the basics of JavaScript. We can assume that the target audience already knows how to write Hello World in JavaScript and know what are the functions, recursive functions, JavaScript types and loops.

Table of Contents

  1. Title Page
  2. Copyright and Credits
    1. Hands-On Design Patterns with React Native
  3. Dedication
  4. Packt.com
    1. Why subscribe?
    2. Packt.com
  5. Contributors
    1. About the author
    2. About the reviewer
    3. Packt is searching for authors like you
  6. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the example code files
      2. Download the color images
      3. Conventions used
    4. Get in touch
      1. Reviews
  7. React Component Patterns
    1. Stateless and stateful components
      1. What are the advantages of stateless components?
      2. Component composition
        1. Composing the application layout
      3. What about component inheritance?
    2. Testing components on high-level patterns
      1. Snapshot testing expandable components
      2. Test-driven development approach
    3. Presentational components
      1. Decoupling styles
    4. Container component
      1. HOC
      2. HOC composition
      3. Examples of useful HOCs
    5. Summary
  8. View Patterns
    1. Technical requirements
    2. Introduction to JSX
      1. JSX standard tricks
      2. A beginner's guide to naming
      3. Type checking with PropTypes
    3. Built-in components you need to know about
      1. The ScrollView component
      2. The Image component
      3. The TextInput component
      4. The Button component
      5. Touchable opacity
    4. Building forms
      1. Controlled inputs
      2. Uncontrolled input
    5. Introduction to error boundaries
      1. How error boundaries catch errors
      2. Understanding error boundaries
      3. When to use error boundaries
    6. Why Mixins are anti-patterns
      1. Mixin example
      2. Using HOCs instead
    7. Linters and code style guide
      1. Adding a linter to create a React Native app
      2. Airbnb React style guide rules
      3. Fixing errors
    8. Summary
  9. Styling Patterns
    1. Technical requirements
    2. How React Native styles work
      1. Surprising styles inheritance
      2. Workaround for limited inheritance
      3. Learning unitless dimensions
      4. Absolute and relative positioning
    3. Using the Flexible Box pattern
      1. Positioning items with Flexbox
      2. Styling flex items
      3. Styling content
      4. Solving the text overflow problem
        1. Scaling the font down
        2. Truncating text
        3. Using the Kilo social media notation
    4. React Native animated
      1. What are animations?
      2. Changing attributes over time
      3. The easing function
      4. Scheduling events
      5. Measuring FPS
        1. How to measure FPS
    5. Summary
  10. Flux Architecture
    1. One-direction dataflow pattern
      1. React's one-way data binding
      2. Event problems
      3. Further issues with binding
    2. Introduction to Flux
      1. Replacing MVC
    3. Flux by example
    4. Detailed Flux diagram
    5. What are side effects?
      1. Why recognize side effects?
      2. Working with side effects in MVC
      3. Working with side effects in Flux
    6. Summary
    7. Questions
    8. Further reading
  11. Store Patterns
    1. Using Redux stores
      1. Minimal Redux application example
      2. How Redux fits into Flux
      3. Moving to Redux
    2. Redux as a pattern
      1. Core principles of Redux
      2. Moving to a single source of truth
    3. Creating an alternative with MobX
      1. Moving to MobX
        1. Using PropTypes with annotations
    4. Comparing Redux and MobX
    5. Using system storage in React Native
    6. Effect patterns
      1. Handling side effects
    7. Summary
    8. Further reading
  12. Data Transfer Patterns
    1. Preparation
    2. Fetching data with the built-in function
      1. Refactoring to activity indicator
      2. Handling error scenarios
      3. Naive stateful component fetching
    3. The Thunk pattern and Redux Thunk
      1. Lifting the state to Redux
      2. Benefits of refactoring to Redux
      3. Using Redux Thunk
      4. Understanding the Thunk pattern
    4. The saga pattern and Redux Saga
      1. Introduction to the iterator pattern
      2. The generator pattern
      3. Redux Saga
      4. Redux Saga benefits
    5. Summary
    6. Further reading
  13. Navigation Patterns
    1. React Native navigation alternatives
      1. Designers navigation patterns
        1. Navigation to top-level screens
        2. Navigating between different levels of the graph
        3. Navigating on the same level of the graph
      2. Developers' navigation patterns
        1. Restructuring your application
    2. React Navigation
      1. Using React Navigation
      2. Multiple screens with React Navigation
      3. Tab navigation
      4. Drawer navigation
      5. Issues with duplicated data
    3. React Native Navigation
      1. A few words on the setup
      2. Basics of React Native Navigation
      3. Further investigation
    4. Summary
    5. Further reading
  14. JavaScript and ECMAScript Patterns
    1. JavaScript and functional programming
    2. ES6 map, filter, and reduce
      1. Using reduce to reimplement filter and map
      2. Counting items in an array
    3. The iterator pattern
      1. Defining a custom iterator
      2. Using generators as a factory for iterators
      3. Making an API call to fetch task details with a generator
      4. Alternatives to generators
    4. Selectors
      1. Selecting from the Redux store
      2. Caching the selectors
    5. Learning functions from the Ramda library
      1. Composing functions
      2. Fighting the confusing code
      3. Currying functions
      4. Flipping
    6. Summary
    7. Further reading
  15. Elements of Functional Programming Patterns
    1. Mutable and immutable objects
      1. Immutable primitives in JavaScript
      2. Immutability cost explained
      3. Benchmark on read/write operations
    2. Pure functions
      1. Pure functions in Redux
      2. Caching pure functions
      3. Referential transparency
    3. Everything but monads
      1. Call me Maybe
      2. Monad interface requirements
    4. Higher-order functions
      1. Examples of higher-order functions
    5. Functional languages aside
      1. Terminology
      2. Building abstractions
      3. React is not obsessed with pure functions
    6. Summary
    7. Further reading
  16. Managing Dependencies
    1. The singleton pattern
      1. Implementing the singleton pattern in ECMAScript
      2. Why using the singleton pattern is discouraged
      3. The many singleton flavors in JavaScript
    2. ES6 modules and beyond
      1. The DI pattern
      2. Using the DI pattern with storybooks
      3. Nested stories with DI
    3. DI with React context
      1. Using the React Context API
      2. React Redux aside
    4. Managing the code base
      1. Quick wins
      2. Establishing conventions
    5. Summary
    6. Further reading
  17. Type Checking Patterns
    1. Introduction to types
      1. Introduction to TypeScript
      2. Configuring TypeScript
      3. Learning the basic types
      4. enums and constants patterns
      5. Creating union types and intersections
      6. Generic types
    2. Understanding TypeScript
      1. Type inference
      2. Structural typing
    3. Immutability with TypeScript
      1. readonly
      2. Using linter to enforce immutability
    4. Summary
    5. Further reading
  18. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think