Why React-Native is Awesome

Sep 22 2016

Why React-Native is Awesome

What is React Native?

Basically it’s just React but for mobile. That’s it.

There are some minor differences in element tags: 

you’ll use a View (or UIView for iOS) component rather than a div

an Image rather than img and there are no CSS files. The developer experience remains the same. 

If you have some knowledge with Objective-C or Java, you’ll have an easier time developing for mobile.

Example:

Basic HTML Code

<div class=”container”>
   <img src=”http://facebook.github.io/react/img/logo_og.png” />
</div>

React Native

<View className={style.container} />
   <Image source={{ uri: ‘http://facebook.github.io/react/img/logo_og.png’ }}>
<View>

It’s Really Writing Native


The real catch about React-Native is that it’s actually native unlike other “Javascript for mobile” approaches which wrap your Javascript code in a fancy web view. They sometimes implement a native UI behavior, like animations but you still writing a web app and the “wrapper” does the work for you.

In React, components have their own appearance which means that React handles the rendering for you. The compiler is built with an additional clean abstraction layer which separates these two functions. In order to render these components for the web, React uses standard HTML tags. This same abstraction layer, known as the "bridge", enables React Native to invoke the actual rendering APIs on iOS and Android. On iOS, that means that your React Native components render to real UI Views, while on Android, they'll render to native Views.

In React-Native, you write the same old Javascript, CSS and HTML you used to before, But now instead for compiling down to native code, React Native takes your application and runs it using the host platform’s Javascript Engine, without blocking the main UI thread. You get the best of both worlds - native performance, animations and behavior, without writing actually native code with Objective-C or Java, something you can never quite match with other cross-platform methods like Cordova or Titanium.

Vibrant Ecosystem


Since the majority of  React-Native is just plain Javascript, it reaps the benefits of all the advancements in the language and it’s ecosystem. Why wait for the framework developers to implement a simple function like iterating and object and manipulating it, if you can use lodash or Ramda? Or some other fancy libraries. 
Thanks to the declarative views, certain libraries are perfectly suitable for usage in React-Native, such as Redux. Redux is great library for manipulating your application’s state. It’s highly testable, encourages you to write small functions that are explicit about what and how the data would change. Once you use these features of redux, your app can take all the advantages of powerful features, like global undo/redo and hot reloading.

Example:

Using Ramda or Lodash as extension library in React Native:

class DemoComponent extends Component {
   render () {
     const friends = [
       {first: ‘John’, last: ‘Doe’, is_online: true },
       {first: ‘Jane’, last: ‘Doe’, is_online: false },
       {first: ‘Foo’, last: ‘Bar’, is_online: true },
     ];

     return ( 
        <View>
           { R.filter(f => f.is_online, friends).map(f => <View> { f.last }, {f.first} </View> ) }
        </View>
     );
   }
}

Result:

<View>
    <View> Doe, John </View>
    <View> Bar, Foo </View>
</View>
Noam B.
Software Developer
Back to Blog