Development: How to learn React Native

11 July 2017Development

In a previous article in the development series, we wrote about the choice between hybrid and native apps. This time, we’re zooming in on a native technology with a shared codebase for all mobile platforms: React Native. Should you invest your time in learning how to use this framework? Our developer Paul explains when to learn React Native and when to stick to what you already know.

React Native is a cross-platform framework that allows you to build native mobile apps using JavaScript. The framework was developed by Facebook as an open-source project, available on GitHub. Many apps already use it: Instagram, Tesla and AirBnB are just a few.

But why would you use React Native instead of regular native code?

React Native components

The benefits of React Native

Here are the four most important benefits of using React Native:

  1. React Native lets you build native mobile apps with declarative components from JavaScript and React
    Even though learning different programming languages will always benefit you, it’s best to start simple with just one language. JavaScript is a great language to begin with. It’s now the most used web-programming language and it has support from big companies like Facebook, Microsoft and Google.
  2. React Native apps are just as good as ‘real’ mobile apps
    Apps built with React Native use the same fundamental UI building blocks as regular apps for iOS, Android and Windows 10. The only difference is that you put those components together using JavaScript and React.
  3. React Native lets you reuse your code
    By using one language, style or framework for cross-platform development, you can re-use a lot of code. This way, you won’t have to write code to do the same logic multiple times. This also makes your app consistent for users on a multitude of devices. Our tests show 90 to 95% code reusability across iOS and Android.
  4. React Native is very flexible
    You can combine React Native with native platform code when you need to. This way, you can build just a part of your app in React Native, while leaving the rest in native code. Creating custom native components for each supported platform and binding them together in a React Component will give you a much-appreciated performance boost. The increased speed will please users, while the native code lowers the visible overhead and grants you the ability to use the “latest and greatest” platform APIs.

React Native code

Things you should know before learning React Native

So, React Native seems pretty useful. But should you learn how to use it? First of all: you have to want to learn. This applies to any kind of learning, not just programming. If you’re not motivated, you won’t make it till the end.

If you’re motivated to learn, there are a few things you need to know before you can start using React Native:

  1. Javascript ES6
    First, you’ll need to know low-level JavaScript. Focus on ES6, the most recent version of the language. With ES6, writing JavaScript is way cleaner than it ever was before.
  2. React.js
    Once you’re comfortable with spaghetti-Javascript, it’s time to get started with React.js. Yes, I said React.js. It’s still too early for ReactNative.
  3. Node.js
    Then, take half a step back and dive into Node.js. This is a command-line JavaScript “runner”. You can use it to build and run servers written in pure JavaScript. I consider Node.js a “language” on its own, as it takes a slightly different approach to writing server-side JavaScript. You won’t have to think much about browser incompatibilities and inconsistencies of supported revisions of the JavaScript language.
  4. JavaScript tool ecosystem
    You’ll also have to know the ecosystem of basic tools that are used around modern JavaScript. Pure Node.js (as a language) isn’t super advanced, but because the improved semantics from the ES6 standard aren’t supported everywhere yet, you’ll have to learn some tools around it. React.js already uses a lot of these tools.
    • Babel – A JavaScript compiler, or “transpiler”. It transforms one version of JavaScript to another one. One may say “ WHAAAAAA???”, but it is really useful.
    • Yarn (npm) – A package manager. You’ll need it, because you will want to install some packages. (These packages will, probably, require even more packages, but don’t be afraid. Or be. It’s up to you.)
    • Redux – A predictable state container for JavaScript apps. Throw some states and subscribe to some events.
    • Webpack – A module bundler for modern JavaScript applications. It recursively builds every module your application needs and then packages all of those modules into a small number of bundles.
  5. Mobile platforms
    You will also need to know the mobile platforms that you target. Knowing these systems will allow you to freely use native code when it’s necessary. These are the skills you’ll need:
    • iOS: mainly Swift with legacy Objective-C
    • Android: Java and Android SDK.
    • Windows: Universal Windows Platform and mainly C#

    By now, you should be comfortable determining when it is needed to use native code. For example, you’ll want to rely on native code for platform-specific push-notifications, camera-handlers, disk usage, quick-reply features, Live Tiles, etc.

    What if you skip learning the platform-specifics? Well, you’ll have to handle these things with JavaScript. That will, in my opinion, limit your view of what is better for the user experience. Not knowing the native language of a platform will reduce the number of approaches you can take. It will limit your selection of tools that could increase productivity, speed, visual representation. In short: It. Will. Limit. You.

So, should you learn React Native?

React Native is great because it streamlines cross-platform development. You can find a bunch of existing cross-platform components, tie them together with JavaScript and get a couple of platform-specific native apps. Overall, React Native is great for ‘simple’ applications where cross-platform reusability of code is around 90-95%. Write once, run everywhere.

React Native

If you are an experienced front-end developer and you’ve built a couple of mobile-friendly React.js web apps, learn how to use React Native. It’ll give you three more platforms to conquer.

If that’s not the case, or if you are doing hardcore low-level numbers crunching (complex math functions, bitcoin mining, big data processing, etc.), stick to platform-specific development in your preferred programming language. You’ll be able to use your existing knowledge and you should already know the limitations of the platforms you use.

Your customer interaction can reach new heights with intelligent digital products. Wanna know what apps, chatbots and AI can do for your business? Reach out to us at info@afrogleap.com