Image
Getting Started on React Native

Getting Started on React Native

Dhanjay Bhardwaj
July 7, 2021

Overview:

We all know how mobile applications changed our world and how fast we move towards the Digital World—these days, having a business application has become critical. As the competition grows, more companies are trying to build their mobile presence with apps. If you want to make a successful app, then the base of your app is essential.

In this blog, we explain how to develop mobile applications easily and fast.

Introduction :

React Native is a JavaScript-based mobile application framework for developing applications for various platforms. A single codebase is used for running mobile applications on Android and iOS.

React Native is built based on React - Facebook's JavaScript library for building User Interface (UI) for mobile platforms. Under the hood, React Native invokes native rendering APIs in Objective-C for iOS or Java for Android. Thus, applications render fundamental UI components, not web views. React Native is UI-focused, which makes the applications load faster and smoother.

Why use React Native?

With React Native, code is written for a single platform and run on multiple platforms. In other words, the same building block is used for running applications on different platforms. It saves time for building a single application instead of building the same application for two different platforms, and it also costs less to maintain. The live reload feature in React Native refreshes the application immediately when a change is made to the code. This saves time in debugging the application on any change to the code.

Benefits of React Native :

There are several benefits of React Native for mobile development:

  1. Saves Time and Money: React Native provides cross-platform; a single application is built and runs on two different platforms. This prevents time and money from being spent on developing separate applications.
  2. Great Performance and Flexibility: Easy for developers to jump when someone has left and can continue the building. Performs exactly like a native application that was built on specific iOS and Android.
  3. Immediate View Changes: There is a feature in React Native called 'live reloading' or 'hot reloading, which enables developers to view changes made immediately. This provides tremendous advantages for real-time feedback.
  4. Ready-made Solutions: One of the major benefits of using React Native is code-reusability. Also, there are many ready-made solutions available written beforehand by other developers so, if one needs them, they can be implemented directly according to the application requirements.
  5. Publish updates for Applications faster: Publishing updates for an application usually takes a longer time. With React Native, the whole process becomes simpler and faster. Developers implement OTA (over the air) updates, even implemented as users use the application. The next time the application is opened, the update will be ready for the user.

Other Mobile Application Frameworks Comparison:

Category React-Native Flutter Ionic
Language JavaScript (React) Dart HTML5, CSS, JavaScript
Developed By Facebook Community Google Drifty
Nature of application Cross-Platform Hybrid Cross-Platform Cross-Platform
Support Strong Community Support Lack of Community Support Strong Community Support
Performance Faster and Native look High Performance and graphically enhanced Faster and Interactive
Popularity Greater than Ionic and Flutter Very low as compared to Ionic and React-Native Greater than Flutter
Code Reusability Maximum Less than Ionic Less than React-Native

Setting up the environment:

There are two ways for setting up the development environment for building mobile applications:

  1. Expo CLI
  2. React Native CLI – for this, you need to have Android Studio or Xcode on your machine.

Before installing, you need to have Node 12 or greater.

Expo CLI: Expo is the easiest way to start building applications in React Native. It comes with pre-built tools and forms another layer of abstraction on top of React Native. Jade Global provides an efficient User Interface to users with more and easy functionalities in less time. Applications for both platforms, i.e., Android and iOS, are built with the same code that runs on two different platforms. Setting up Expo CLI :

  • For installing Expo CLI type - npm install -g expo-cli
  • After installing Expo CLI run the following command: expo init projectName
  • To run the development server type: npm start or expo start
  • To run the application on a virtual device or simulator: npm run Android or npm run iOS(macOS only)
  • To run the application on a Real Device, USB Debugging must be enabled on mobile, and Expo Client from the App store needs to be installed. After setting up all the prerequisites for running Expo project on mobile type
  • npm start --localhost --Android
    or
    expo start --localhost –Android.

This starts the development server. You have the alternative of scanning the QR code from the server to run the expo project.

Basic Program in React Native :

The basic program of Hello World using bottom bar navigation in React Native Expo CLI is written below with output:

Sample Input: React-Native React-Native Sample Output: React-Native

Conclusion:

Expo CLI or React Native CLI are both excellent ways to create mobile applications. Besides, both have a downside also.

In Expo CLI, you cannot create native modules (for Android or iOS) written in Objective – C or Java-like in plain React Native. Expo CLI also takes more memory space for a simple “Hello World” program as it comes with all Expo SDK solutions. But if you have a small team or want to go for faster mobile application development, you can opt for Expo CLI.

On the other hand, if a different feature needs to display on Android or iOS, plain React Native will be the best choice. However, it has a downside; for developing applications for iOS, you need macOS and XCode. The same goes for Android, i.e., you need Android Studio. Also, setting up the project takes a long time in plain to React Native. You can migrate your project from Expo and continue building your application, but you need to install some alternative dependency that you used in the expo, and/or you might have to refactor your code.

About the Author

Dhanjay Bhardwaj, Associate Engineer, Cloud ADM – Microsoft

Dhanjay Bhardwaj is a software developer who works as a full-stack JavaScript developer and has 1.5 years of experience. His expertise in React-Native, React, Python, C/C++, Java, and Microsoft Technologies.

Add New Comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.