Why React-Native is Awesome

By Noam B.

Sep 22, 2016

What is React Native?

Basically, it’s just React but for mobile applications. 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. Plus, there are no CSS files. The developer experience essentially remains the same. 

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

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 up your Javascript code in a fancy web view. They sometimes implement a native UI behavior, like animations, but you are 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 of 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. In other words, 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 tools 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 simple functions like iterating an 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 and 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 gets all the advantages of powerful features, like global undo/redo and hot reloading.

For Example: 

Using Ramda or Lodash as an 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>

Leave a Reply

Your email address will not be published.