Book Image

Mastering React Native

Book Image

Mastering React Native

Overview of this book

React Native has completely revolutionized mobile development by empowering JavaScript developers to build world-class mobile apps that run natively on mobile platforms. This book will show you how to apply JavaScript and other front-end skills to build cross-platform React Native applications for iOS and Android using a single codebase. This book will provide you with all the React Native building blocks necessary to become an expert. We’ll give you a brief explanation of the numerous native components and APIs that come bundled with React Native including Images, Views, ListViews, WebViews, and much more. You will learn to utilize form inputs in React Native. You’ll get an overview of Facebook’s Flux data architecture and then apply Redux to manage data with a remote API. You will also learn to animate different parts of your application, as well as routing using React Native’s navigation APIs. By the end of the book, you will be able to build cutting-edge applications using the React Native framework.
Table of Contents (20 chapters)
Mastering React Native
About the Authors
About the Reviewer
Customer Feedback

Wiring up our Redux data flow

Now that we've had a look at what this data will look like, let's start writing some code. From the terminal, navigate to the root directory of RNNYT and run the following:

npm install redux react-redux redux-logger --save

We already discussed redux and react-redux at length in Chapter 5, Flux and Redux. redux-logger is a popular Redux middleware useful for observing changes to your app's Redux state tree from your browser's console. You may find it useful as you work through this chapter or future chapters.

Next, let's reorganize our files and folders to match one of the more conventional project structures seen in Redux applications. Create the following directories within your src directory:

  • actions

  • config

  • containers

  • reducers

  • util

Each folder will house different parts of our application.


We've opted to organize our code by role. That is to say, we'll be grouping all our action creators in the actions folder, containers in the containers folder, and so forth...