React Native in Plain English

Note: This post was originally published on the Quick Left blog on 3/14/16.

What’s a React Native?

React Native is a library that allows you to build native iOS and Android apps with your favorite JavaScript faction, React. The project was introduced by Facebook in March of 2015. Less than a year later, there have been over 20 releases, so that should tell you something about its community’s fervor.

Why React Native?

1. It’s well-supported by Facebook (and the open-source community) and is here to stay.
2. You can continue to use React and your favorite architecture pattern, which is responsible for all that developer productivity and happiness in your office.
3. Congratulations, your web developers are now mobile developers!

What about Cordova?

“Doesn’t Cordova already let me build native apps in JavaScript?”

Yes and no. Apps built with the Cordova framework do compile to native Android and iOS apps (as well as others), but your JavaScript application is compiled and displayed via a WebView. The native app renders a full-screen web browser to display your HTML, CSS and JavaScript.

React Native, in contrast, compiles your app into the actual native components within the iOS and Android ecosystems. The primary benefit of this is an authentic mobile app experience. According to co-creator of React Native, Christopher Chedeau, “the biggest principle behind React Native is that you shouldn’t be able to tell that it is not a native app.” Unlike Cordova, native components and animations are at your disposal.

Is it ready for production?

The Facebook team certainly thinks so. See their Ad Manager (iOS /Android) and Groups (iOS / Android) apps already in app stores. Ultimately your team must reach its own conclusion though. The project is still young and development is moving at breakneck speeds, but you’ll find support for the latest APIs, including 3dTouch on iOS.

React Native supported iOS out of the gate and added support for Android six months later. Android support is quickly catching up, but its definitely possible that your cutting edge use case (particularly on Android) isn’t yet supported. Take the time for a research spike on whether the obscure part of your application is going to be a headache before jumping into the deep end.

How do I React Native?

Unsurprisingly, Facebook’s Getting Started docs are a good place to start. At a minimum, you’ll want to update Xcode, update Node.js to at least 4.0, and install Facebook’s watchman library via Homebrew. Next, globally install the React Native CLI with npm: npm install -g react-native-cli. If that all goes swimmingly, we’re ready to kick off a new React Native app via command line: react-native init MyProjectName.

When React Native finishes its install magic, it’ll spit out some feedback on how to run your brand new mobile app on each platform. Getting running on an Android simulator takes a few quick steps documented here. Running the iOS app is even simpler: open MyProjectName.xcodeproj from within theios directory, then hit the play button in Xcode. A terminal window will open to run the React Native packager, then the iOS simulator will open and launch the application.

On the iOS splash screen, we find some helpful tips: Cmd+R will reload the simulator to view changes made. Cmd+D opens up a development menu with some really handy tools. For example, enabling live reload will refresh the simulator every time we save changes in our editor. More impressive, the React Native team did some nifty work with source maps to allow Chrome debugging tools to work in tandem with the simulator. We can set breakpoints, watches and the whole deal; No need to learn an entire new workflow or set of tools.

So how does development differ from React for the web?

To address a common question: you can’t port your React web app over to React Native and call it a day. Read on to learn why.

There are some relatively minor paradigm shifts to be aware of when developing React Native apps. We’re still using JSX, but instead of divs and spans we’ll need to think in terms of native components: View, Text, Image and so on. Instead of click events on buttons, we’ll wrap a component in a TouchableHighlight that has an onPress callback, for example. These and other changes in pattern are not a far stretch from what web developers are already familiar with.

CSS is also off the table. Instead of assigning a className to style with CSS, all styling will be done inline. Keep the lid on your nerd rage though, its not that bad. The construct StyleSheet was introduced to promote a sane pattern and keep styles organized in one place. You can read more about StyleSheet and the Facebook team’s rationale here.

Now what?

Initialize an app and poke around! The React Native repo has a few example projects that you can launch locally. The UIExplorer app is especially cool, in that it is a living version of the docs. The app is a catalog of implemented components and is a great resource. The Movies app is the same one you’ll build if you walk through Facebook’s brief tutorial.

Are you interested in using Redux in your new React Native app? Hang tight. A follow up post will step through setting that up. It will assume you already know a thing or two about Redux, so catch up on my last post if you need to get up to speed.

If you’re not very familiar with React, pause to learn or brush up on those skills. I suspect you’re not going to have the best time if you try to learn :all-the-things: at once. If you’re familiar with Ruby and Rails, my favorite recommendation for how to learn React is through the react-rails gem. You can skip all the confusing JavaScript tooling setup and get straight to understanding how React handles state and data.

Welcome to mobile development!