It's been far too long that I've been saying to myself: "Brooks you really should give React Native a try". So I've whipped up a quick 'how-to' article from my first foray into React Native. In this tutorial, we will create a new React Native project, integrate Redux and deploy on Android and iOS. To keep this first project simple we'll be remaking the Redux counter example.

Getting Started

You will have to install and configure React Native. You can find that documentation here: http://facebook.github.io/react-native/docs/getting-started.html

I recommend setting up both Android and iOS if you want to see the final product on both platforms.

We will call our project 'ReactNativeCounter'. To create a new project use this command:

~$ react-native init ReactNativeCounter

Integrating Redux

We will need Redux and React Redux. Redux integrates smoothly with React Native so you can pull these in via npm.

~$ cd ReactNativeCounter
~$ npm install redux
~$ npm install react-redux

Design

We will cover 5 basic React/Redux concepts. In three sections:

• Actions
• Stores/Reducers
• Containers and Components

Actions

An action is sent when something has happened that will change our applications state. In this example, we will have 3 actions: 'INCREMENT', 'DEINCREMENT' and 'RESET'.

Stores and Reducers

A store is an object that represents the state of your application. In our case, the store for our application is simple a Number. This is the current counter value shown in the application.

Reducers handle actions. They are responsible for updating the applications state based on the action being handled. Reducer functions must be pure functions.

Containers and Components

To increase testability and ensure we properly separate concerns, I recommend using containers and components when creating renderable parts of a React application.

Containers

Containers are responsible for fetching data and rendering their components.

Components

Components are responsible for rendering data to the screen.

While our application is simple this is a React best practice so I've included it anyways.

App Layout

We'll add all our app related code in a new folder called 'App' in the root of our newly created project. Create theses folders as you follow along with the code below.

The code!

First, we will look at our reducer and the store it creates:

The reducer handles 3 simple actions. We should also write some tests for our reducing function.

Our reducer isn't that useful unless something generates actions. We will bind our actions and app state to our components via their containers.

Now our component only needs to render its view and bind the action generating functions we passed into it.

Now that we have all the moving pieces, we can wire them together. In App.js we connect our application to the Redux store and render a CounterContainer.

Now all that remains is configuring React Native to render this application for iOS and Android. There are two index files representing what each operating system will render. In our case we want both to render the application we designed above. This will be the code for BOTH index.ios.js and index.android.js.

If you have already configured Xcode and Android Studio you can see the resulting by running:

~$ react-native run-ios      #Launch iOS
~$ react-native run-android  #Launch Android

Clicking the up and down buttons will change the counter, clicking the counter will reset it to zero.

If you want to check out the code it's here on GitHub: https://github.com/brookslyrette/ReactNativeCounter

Happy Coding!