Why and how you should start using React Native?

I had the idea to write this article while I was developing my first app with React Native. Originally I was going to write a tutorial on starting with react native and provide some code examples. But the fact is there are already a bunch of great articles doing this.
So I changed my mind and thought about giving my reasons for why I’ve chosen React Native and how, in my opinion, you should start if you’re totally unfamiliar with React and React Native.

Before getting to the heart of the subject, let me give you a bit more context. I’m a web developer and I used to work with Angular. I really wanted to learn React after hearing so many positive things about it. A few weeks ago, I had the opportunity to develop a mobile app and thought about giving React a try. It’s definitely not the simplest way to learn React, but with a bit of discipline it’s still possible.

The Legacy of “JavaScript-to-native-app” frameworks

I’m probably not the only one to have been excited a few years ago when the firsts “JavaScript-to-native-app” frameworks came onto the market. This concept which gives the possibility to develop for both Android and iOS with a common language and common code was such a good idea (hint: it wasn’t actually).

I tried Titanium Mobile in 2011, which was the trendy framework at that time. I won’t bother you with the details of the project but to resume, that was me when I started the project:

Same person, a few weeks after when the project was finished (well, not really finished but let’s say published):

After that episode, I’ve decided to never again work with that kind of unicorn. Well, it was till I heard of React Native.

Why will it be different with React Native?

Facebook brought us React Native almost a year ago, during the React Conf 2015. Since then I followed the topic and a few arguments made me think this one could be a game changer.

First of all, it’s made by Facebook. They’ve already proved their capability to create and innovate in the web-industry. React is one of the more trendy JavaScript projects at the moment and Flux architecture has more and more credibility. Also when Christopher Chedeau showed us the potential of React Native during React Conf 2015, it was pretty clear this one had potential.

About React itself, after almost 3 years of existence and 40 releases, we can easily say it’s a mature framework (sorry, library). The community behind React is quite important and it’s always comfortable to know you will find someone to answer your questions on StackOverflow.
Something more surprising though, is the React Native community. There is already a bunch of plugins/tools available and the core is often updated (3 new versions in the last few weeks).

The showcase of apps made with React Native is already quite impressive. Obviously Facebook did use it for a few of their apps but others have too which is definitely a good sign for the future.

Last but not the least, React native is made on top of React. Learn React and you will have already learn a huge part of React Native. I love this feeling of “killing two birds with one stone”.

The tricky thing is to learn “everything at the same time”. Some pieces are from React, some from React Native and some elements are specific to the different platforms. If you are not familiar with all of these, then the best way to learn is step by step.

Approach React Native like a newbie

The important thing is to define milestones in your project to not be overwhelmed. If, like me you are new to React an mobile native worlds, don’t try to bring everything straightaway into your project.

Learn React First…

It might be wiser to start with some basic React components to understand how to split your features, the component lifecycle, JSX, etc. It’s important to understand how React works to be more efficient in your approach and thinking. 
React has its own philosophy (one way data binding, declarative components,…). It’s quite comprehensive but still, it’s more efficient to spend time to learn the basics first rather than mixing everything.
React documentation is very handy: easy to understand and has a lot of examples. However some useful links for learning: React.js Best Practices for 2016 and React lessons on egghead.io.
As soon as you feel comfortable, it’s time to create your first React Native project!

…And then, only then, React Native

Once the environment is implemented, try some basic UI components (View, Text, TextInput, ListView,…). Start with hardcoded data, then dynamically with the Fetch ES6 feature. There is already a lot of components and API available with React Native, you should go through the documentation and play with some of them in order to know precisely what you can achieve and define your project scope.

As I said before, the React Native community is quite active and have a few useful projects raised up to help managing routes, style in Material design way, create awesome Tabs, scan barcode with your camera, and many more. I invite you to check this repo on GitHub to follow up on the latest releases.

There is already a lot of good tutorials to help with your first “hello world” project: React Native Tutorial: Building Apps with JavaScript, Creating a Dictionary App Using React Native for Android. Of course you should have a look at the examples/ folder of the official repo.

At this stage you will probably (at least I hope) feel confident on how to comprehend a React Native project. The next big step is to manage your data and states across your application. And for that, Flux is the way to go!

One-way-data-binding in action

Flux is usually associated to React and vice-versa. Bottom line, Flux is an application architecture created by Facebook along with React to complement this one.

Flux architecture with React

If you want to build a scalable app with React you will definitely need to use it. As the schema above shows, React itself handles only the blue blocks: User Interactions and React Views. Flux is a way to create actions which will be dispatched to Stores and finally modification made within those Stores will be listened to by components.
As usual, best way to learn is to take a look at the documentation and firstly the introduction video.

To handle the Flux architecture on my first React Native project, I chose Reflux.
Reflux is not the most famous/advised/trendy one, which is Redux at the moment. But because I needed something quick to implement, easy to learn and easy to use, Reflux was a good choice.
Redux has definitely a lot of pros and it would probably be a good choice if you want something with more features, scalability and possibilities. But I think Redux is a bit too complex if you want to learn Flux. With Reflux, by following the documentation you will be able to understand the Flux philosophy and implement it into your project very quickly.

The next step for you now is probably to find a way to save your data somewhere. Let me talk to you quickly about Firebase.

Manage your data with Firebase

I discovered Firebase recently when I was looking for a easy way to store and manipulate my data. Some pros made Firebase the obvious choice: it’s compatible with React Native, the JavaScript SDK is very easy to use and there is a free plan (quite limited but still enough to get a clear idea).

Managing data is very easy: saving, retrieving, structuring,… Everything is explained well within their guides.
Besides, Firebase is very powerful solution to manage users as well, the SDK provide you solutions to handle Facebook or Twitter connect or custom email/password login.

The guys behind Firebase have already published a nice beginners guide about how to use it with React Native, you should definitely go for it!

Feeling after a quick first project

Once developing, I found a lot of good ideas: the quick reload when using the iOS simulator, debugging with Chrome, component specific CSS, the impressive number of components and API available,…

Globally, I feel a great potential in this solution. It’s surprisingly already quite mature after just a year, the community is growing up quickly and more and more third-app solutions become compatible with it.

I hope you have enjoyed reading this. I look forward to receiving your feedback or questions :)

Thank’s Luke Stevenson for the final read-through!