Creating the First IOS Application with React Native

Introduction

React Native is a javascript framework developed by Facebook and allows us to create Android or iOS mobile applications using web technology. As we know now there are also many javascript frameworks that we can use to create Android or iOS applications, but for Reac Native this is different from other javascript frameworks. With this React Native we don't make Hybrid applications where this application runs in javascript runtime but we will make Real Applications where for android it will be compiled in java and for iOS it will be compiled in Objective-C.

React Native Feature

In this Native React there are several components that make it we can use to create cross-platform mobile applications. Following are some of the features of this React Native:

ReactJS

Before reacting native released by Facebook the first to introduce was ReactJS, a javascript framework that could be used to create web applications with java script. If you have already used ReactJS then you will be easy to understand React Native and for those of you who have never tried ReactJS it also doesn't matter because I myself have never tried ReactJS before.

Native

On Android and IOS have a different architecture, well here this Native is used to handle components from each platform. In this native later we will learn some components for our needs to learn to make applications with React Native.

Platform

For now integrated platforms are Android and IOS. Maybe in the future more than two of these platforms can be integrated with this native react, we'll wait.

Advantages of Reactative

Before we go deeper into coding we need to know first what the advantages of React Native are and why we should try to make an application with this React Native. Now the following are our strengths to use React Native.

JavaSript

As we have seen some time ago in the JavaScript stackoverflow survey is one of the most widely used programming languages ​​by developers in the world. That way it means we as developers will be very easy to learn JavaScript because the community is already large and also we have many places to ask if we are confused. And for those of you who are experienced with web development, of course you are already familiar with this javascript and you already have a basis to start creating applications with this native react.

Code Sharing

Some of the codebases that you write can be used for different platforms where you can use them for Android and iOS. That way for the basic things if we have general functions that are not in direct contact with the different components of this platform we can use the codebase. For example, if we have a function to convert currency, then we can use it for Android or iOS.

Comunity

React Native is quite attractive to developers in the world below is a screenshot of the native react repository.

The weakness of React Native

React Native itself also has the following disadvantages are some of the weaknesses of react native

Components

To develop mobile applications with react native we have to understand a lot of the Components of each platform. Because android and ios have different architectures so the Native Components of each platform are still limited. For this reason, if we want to use components that do not yet exist, we must make them ourselves. Where this way still can not be done by beginners. But don't worry until now the contributors to react native have reached 1,231 people, meaning that the development of react native day after day will be better. Or if you have enough experience for javascript and mobile development then please contribute to react natively.

JavaScript

Now this java script is also one of the weaknesses of react native, because this java script is developing so fast that it causes some things that can't be done with changes so fast. For that we have to be smart to adapt to this JavaScript.

Framework

The Native React Framework is also a weakness because of changes that are so fast that results when you update react natively to the new version for an older version some of which you cannot use. So that way you have to be very clever to do your codebase management so that it doesn't have much effect when there is an update of this native react framework.

Platform

Well for those of you who want to develop a native react for iOS then you need to have a Macbook so indeed, because of the ecosystem of iOS, all of these must use products from Apple. For Android, you also need java and gradle, where these two things become an issue among developers because of the minimum device requirements with 4GB of memory to be able to work optimally. So it is indeed one of the challenges if you decide to engage in the development of mobile applications, you must have adequate devices.

Perfomance

For performance is also still a debate among developers some say it is good and some say it is also good. But for me to react native, the permofance itself is quite better compared to us using another javascript framework because basically by using react native, we make a mobile application with native performance, but in some conditions react native is not as good as we use pure native.

Preparation

Now we forget about the advantages and disadvantages of react native and let's start to learn how we create mobile applications with react native. In this tutorial we will learn to create an iOS application and the following things we need to prepare to start creating an IOS application using react native.

MacBook and OSX

Make sure you already use macbook and osx because here we will practice making applications for IOS, for now I have never tried to use hackintos. However, for those of you who don't have a Macbook, maybe you can try to install your laptop or PC hackintos operating system. and don't forget to install Xcode because later we need iOS emulator to run the application that we made.

NPM and NodeJS

Because we use the javascript programming language, we need nodejs and npm for the installation needs of this native react.

Installation Preparation

Now, let's proceed with the installation process for some of the needs of developing apps with this native Reac.

Instal Homebew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Instal Watchman
brew install watchman

Instal React Native
npm install -g react-native-cli

Don't forget to make sure you also have XCode installed.

Create Your First Application
Now let's make your first IOS application by following the steps below.

Create Application Project
react-native init IOSReactTutorial

run React Native Compiler

First we enter the directory of the project that we have created.
cd IOSReactTutorial




Then run react native packeger, in development do not turn off this command, keep it running as long as we are in the development process.
react-native start




Application Path in Emulator
Now we run the application that we made in the emulator.



react-native run-ios

If you succeed then the display will appear as follows.



Let's Make Hello Word
By default the following are some biolderplate code generated by default by react native.

Advertiser