CHOOSING REACT NATIVE FOR YOUR MOBILE TECH STACK The all-in-one guide for CEOs and Product Owners When Facebook developers first introduced ReactJS to the world at the 2013 ​ ​ JSConf event, they could hardly predict how this announcement would impact web app development. Two years later, inspired by the library’s impressive growth, the company made another in-house project, React Native, available to the public by ​ ​ releasing it on GitHub. 26th March, the day when React Native joined the ​ ​ open-source domain, set a milestone for the development of mobile applications. 1 Today, with nearly 1,800 contributors and more than 15K commits in 89 branches, React Native (RN) is one of the most popular GitHub repositories. What exactly is React Native? Who can benefit from it? How to develop your first mobile app with RN? These are just some of the questions we will answer in this all-in-one guide to ​ the React Native framework. ​ Why did we create Who should read our this page? guide? Are you considering React Native Blog posts, YouTube tutorials, for your next project? Would you development forums, workshops, code like to learn RN? repositories… If you’re a startup, product owner, There are so many resources to go C-level professional or a marketer, through when you are looking for a this guide will help you get the comprehensive and reliable hang of React Native without information about React Native. reaching the bottom of Google. Who has the time to browse them all? It also aids developers who want to learn to code in React Native. This is your single reliable resource Finally, it is simply meant for that gathers all RN knowledge in one anyone interested in mobile app place. No more searching. development. 2 TABLE OF CONTENTS: 1. What Is React Native? 2. React Native vs. Native Apps 3. React Native vs. Other Cross-Platform Solutions 4. Pros and Cons of React Native 5. When to Use React Native? 6. React Native Performance 7. React Native App Development Process 8. The Economy of React Native 9. Mastering React Native 10. Examples of React Native In a Wild 11. React Native Today - the Current State of React Native 12. The Future of React Native 13. Summary — To React or Not to React? 3 1. WHAT IS REACT NATIVE? React Native definitions can get cryptic. To help you understand if it is the right technology for you, we will start by decoding one of them: React Native is a JavaScript framework for building mobile applications with native look and feel in iOS and Android. Now, how about getting to grips with that statement? THE NAME – REACT NATIVE The name of the framework is a combo of React + native. 4 Why ‘React’? React, an open source JavaScript library for ​ ​ ​ building interactive user interfaces (UI) on the web, was first created in 2011 by Jordan Walke, and deployed at Facebook a year later, it quickly gained popularity thanks to its adaptability, ease of use, and high performance. React Native is a JavaScript framework used for building native ​ ​ mobile applications for iOS, Android, and UWP. Facebook ​ ​ introduced RN two years after the official React release to enable the cross-platform functionality in mobile development. React Native uses React (also called ReactJS) to build app components. It also follows the same design principles, allowing for the creation of rich mobile UI Both, React Native and ReactJS are maintained by Facebook. [Source: ​https://facebook.github.io/react-native/] 5 Why ‘native’? According to Facebook: “With React Native, you don't build a "mobile web app", an "HTML5 app", or a "hybrid app". You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.” [Source: https://facebook.github.io/react-native/] ​ In mobile application development, a native app is a software created for a specific platform or device. Native applications are developed in a programming language dedicated to a particular operating system, for example, Swift/Objective-C for iOS, or Java/Kotlin for Android. They provide a 6 high level of reliability and performance and deliver a superior user experience. However, there are some downsides to their use, too. Since each OS must be supported by a discrete version of an app, written in a dedicated language, companies need at least twice the time and resources to launch their products on all mobile devices. And developers have to be proficient in multiple programming languages, frameworks, and tools. Is React Native ‘native’? While React Native is NOT purely native, it uses the same building blocks as iOS and Android apps, offering an equivalent user experience and almost as good a performance. What’s more, with RN, developers only have to write their code once to create software that is practically indistinguishable from the one built specifically for a given system. React Native allows you to develop *a cross-platform mobile app with native ​ ​ look and feel, hence the second part of its name, ‘native’. Also, with RN, you can build hybrid apps, which combine native and RN code. To explore the topic of mobile native applications in greater detail, go to section REACT NATIVE VS. NATIVE APPS. * Cross-platform mobile development refers to the development of ​ mobile applications that are supported by multiple mobile operating systems. Despite some limitations, this approach has many advantages over native development, where a separate app must be built for every single mobile platform, which requires a broader programming skill set and takes more time. 7 “With React Native, you don't build a "mobile web app", an "HTML5 app", or a "hybrid app". You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.” WHAT DOES JAVASCRIPT HAVE TO DO WITH THAT? React Native is a JavaScript framework. In order to build apps with RN, you ​ ​ need to know this language and have a good understanding of React programming. As RN is based on JavaScript, it does not use HTML or CSS for the UI. However, it implements the JSX syntax, so it’s good to become familiar with it as well. WHAT EXACTLY IS A FRAMEWORK? In software programming, a framework is a piece of code that delivers a ​ ​ standardized frame for the developed applications. It dictates the architecture for a software project by providing such functions, modules, APIs, and libraries. 8 Developers use frameworks to simplify app development and decrease the number of manual tasks as they program. React Native is a framework for the creation of mobile applications utilizing ​ JavaScript language and React libraries. ​ ​ ​ Who uses React Native? React Native is an extremely popular and ​ ​ influential framework, and it has multiple uses: B2B applications, apps that contain forms and dynamic images, software used internally by companies, education platforms, etc. The number of household businesses using RN for the development of their apps is remarkable. The framework is used, among others, by Facebook, Instagram, Google, Microsoft, Uber, LinkedIn, and Walmart. See also section WHEN ​ TO USE REACT NATIVE? To learn more about React Native’s benefits (and drawbacks), go to ​ section PROS AND CONS OF REACT NATIVE. ​ ​ Key Takeaways 9 ● React Native is a JavaScript framework used by developers to build cross-platform mobile applications. ● Its name is a compound of two crucial elements; React, as RN builds on React libraries, and native, as a reference to the native look & feel that RN produces. ● React Native is immensely popular among developers who value it for its code clarity, efficiency, and superb user experience. See Also 1. The official React page: https://reactjs.org/ ​ 2. The official React Native page: https://facebook.github.io/react-native/ ​ 3. RN GitHub project: https://github.com/facebook/react-native ​ 4. ‘What is React Native?’: https://www.quora.com/What-is-React-Native ​ 5. ‘8 Amazing Examples of React Web Development’: https://ideamotive.co/blog/8-amazing-examples-of-react-web-develop ment/ 6. ‘What are the main differences between ReactJS and React-Native?’: https://medium.com/@alexmngn/from-reactjs-to-react-native-what-ar e-the-main-differences-between-both-d6e8e88ebf24 10 2. REACT NATIVE VS. NATIVE APPS As we explained in the previous section, React Native is a JavaScript ​ ​ ​ framework based on React libraries that enables development of cross-platform mobile applications which look and feel native. If RN feels ‘almost’ native, how exactly is it different from platform-specific tools? Let’s dive into that subject by defining native apps first. 11 Why Invest in Mobile Applications? As of 2018, Android controls over 85% of the world’s mobile devices, ​ ​ with more than 2 billion active users of the system. Apple, on the other hand, claims to have passed the milestone of 1.3 billion active ​ installed base of devices early this year. ​ “Over one-fifth of millennials (21%) say they open any app more than 50 times a day” [Source: Mobile App Usage Statistics 2018] ​ ​ These numbers denote a massive market and enormous revenue potential for companies who reach out to their customers on mobile. What Are Native Apps? The most common way of delivering mobile applications is through native platforms. A native app uses a platform-specific code in the language dedicated to ​ a given mobile OS. Typically, these are Java and Kotlin for Android or Swift and Objective-C for iOS.