ADMET

Complete News World in United States

How to Install and Setup React Native on Ubuntu

React is a widely known JavaScript framework for creating front-end purposes. It grew to become standard via the usage of intuitive programming paradigms that tie JavaScript to an HTML-like system referred to as JSX. This permits builders to create their purposes in a shorter time.

Initially, establishing a brand new React undertaking used to contain complicated multi-stage course ofes similar to setting a construct system, changing the code transpiler to a code readable by all browsers and the primary listing construction. Now, the creation of React Apps has develop into easy with the Create React App CLI software that contains all JavaScript packages, code transpilersand the testing and constructing programs, that it is advisable run a React undertaking.

React Native is a framework that creates a JavaScript code hierarchy of UI parts. It has a set of parts to construct a cell app with an genuine feel and look for each iOS and Android platforms. ReactJS, against this, is a JavaScript open-source library for consumer interfaces. Whereas they could have completely different interfaces, Fb developed React Native and ReactJS utilizing the identical design rules. 

Why is REACT Native Essential? 

  • You can create UI for each iOS and Android platforms with React Native Framework. 
  • As React Native parts have counterpart rights, each Android and iOS apps might be reused for these parts. 
  • You’ll be able to both combine REACT Native parts into the current utility’s code or you need to use the Cordova-based code utilizing the plugin. Nonetheless, Cordova and Ionic code should be constructed to your present app. 
  • React Native growth is comparatively straightforward, quick, and environment friendly. 

We are going to learn to set up and setup React Native on Ubuntu on this article. For profitable set up, all of the steps under should be adopted one after the opposite. 

Stipulations

Necessities:

To obtain and efficiently set up React-Native to your laptop, it is advisable take into account the minimal specs required to help the app and run it easily. 

Software program necessities:

Software program necessities:  -h3 

To effectively set up and arrange React-Native in your Ubuntu machine, you will want to put in the next:  

  • Android Studio  
  • Android SDK  
  • Set up JDK 
  • Node Js  
  • NPM  
  • React native cli 

Set up Process

Step 1: Set up Node.js and npm

Observe these steps to put in Node.js which is a well-liked JavaScript implementation. 

1. First replace the apt package deal supervisor: 

sudo apt-get set up -y build-important 

2. Now, run the next command: 

$ curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash 
sudo apt-get set up -y nodejs 

Following Node.js set up, proceed with NPM or Node Bundle Supervisor set up. 

three. These instructions will assist you understand if it has been already put in or not: 

$ which npm 

Four. If NPM is already put in, it’s going to return: 

/house/ijs/.nvm/variations/node/v12.18.three/bin/npm 

5. To NPM, run the command in time periodinal: 

$ curl http://npmjs.org/set up.sh | sh 

Step 2: Set up JDK

Java is used to construct native Android apps. Which means that Java Improvement Equipment (JDK) is required for working with tasks in React Native. 

Set up the JDK with the next instructions: 

sudo add-apt-repository ppa:openjdk-r/ppa 
sudo apt-get replace 
sudo apt-get set up openjdk-Eight-jdk 

Step three: Set up Android Studio

To work with React Native growth, Android studio should be put in. From the web site listed under we will simply obtain it. 

For Extra particulars on the set up strategy of Android SDK please click here. 

Step Four: Set up Android SDK 

The latest Android SDK comes by default with Android Studio. However it is the Android 6.zero (Marshmallow) SDK that’s required to construct a React Native app with native code. You’ll be able to set up further Android SDKs in Android Studio by way of the SDK Supervisor.   

You’ll be able to entry the SDK Supervisor from the Android Studio Welcome display. Click on on Configure and select SDK Supervisor.  

SDK supervisor -> SDK platforms 

Then test the field within the backside proper nook of the “Present Bundle Particulars” field. Discover and expand the Android 6.zero(Marshmallow) entry, after which be sure to test the next objects: 

  • Google APIs 
  • Android SDK Platform 23 
  • Intel x86 Atom_64 System Picture 
  • Google APIs Intel x86 Atom_64 System Picture 

1. Run the command: 

sudo nano $HOME/.bash_profile 

To be able to construct apps with native code, the React Native instruments want some environmental variables. 

2. Copy the strains under and paste them into the terminal: 

export ANDROID_HOME=$HOME/Android/Sdk 
export PATH=$PATH:$ANDROID_HOME/instruments 
export PATH=$PATH:$ANDROID_HOME/platform-tools 

Save and exit the file utilizing under instructions: 

Press Ctrl + O (Write out) 

Then press Enter 

And press Ctrl + x (exit) 

Step 5: Set up Autotools-dev

You first want to put in Autotools-dev which is a package deal with a number of different instruments, i.e. aclocal automaker, earlier than going forward and putting in Watchman. Copy and paste within the terminal to put in it:

 sudo apt-get set up aclocal  

sudo apt-get set up automake  

To be able to proceed the set up, you may be requested to decide on a Y/N choice. Please enter Y, then press Enter. 

Step 6: Set up Watchman

As soon as the Autotools-dev is put in, proceed and set up Watchman, a Fb software for file system surveying. If you would like the very best outcomes, you should set up the software. 

Run these instructions to put in Watchman: 

git clone https://github.com/fb/watchman.git 
$ cd watchman 
$ git checkout v4.9.zero  # the newest steady launch 
./autogen.sh 
$ ./configure 
$ make 
sudo make set up 

Step 7: Set up Circulation

Circulation lets you simply add JavaScript to the static kind test. It additionally helps to forestall bugs and makes documentation of code simpler. Actually, it’s already utilized by many React Native Paperwork and supply code and should be put in. 

Use the next command to put in move: 

wget https://github.com/fb/move/releases/obtain/v0.62.zero/flow-linux64-v0.62.zero.zip 
$ unzip flow-linux64-v0.62.zero.zip 

$ cd move 
sudo mv move /usr/native/bin/move

Step Eight: Set up React Native 

1. The subsequent step is to instal React Native. It must be famous that it is advisable use sudo to have React Native put in as root, since we might be putting in it globally. That is the code you should use: 

sudo npm set up -g react-native-cli 

2. Customers who put in NPM with one other technique can set up React Native as a traditional consumer utilizing this code: 

npm set up -g react-native-cli 

You’ll be able to go forward and begin creating your individual app(s) when you are carried out by putting in all the required packages! 

Create a New Venture 

1. Begin with the next command to create an app undertaking:

react-native init DemoApp 

2. Setting Up an Android Gadget 

Solely apps downloaded by the Google Play might be arrange and run by default on most Android units. To put in your app throughout growth, it is advisable allow USB Debugging in your machine. 

You will first must activate the Builders choices menu by going to Settings — About telephone —Software program Data — after which faucet the Construct quantity row on the backside seven instances to activate your machine’s USB debugging system.  

You’ll be able to then return to Developer Settings to allow “USB debugging.” 

Let’s begin on an Android machine now to run our React Native tasks. Go ahead to your growth machine and plug in your machine utilizing USB. 

  • Verify the producer code with lsusb: 

lsusb 

Output might be like: 

Bus 002 Gadget 001: ID 1d6b:zero003 Linux Basis three.zero root hub 
Bus 001 Gadget 004: ID 174f:241a Syntek  
Bus 001 Gadget 003: ID 0cfthree:e300 Atheros Communications, Inc.  
Bus 001 Gadget 002: ID 06cb:0081 Synaptics, Inc.  
Bus 001 Device 010: ID 2717:ff48   
Bus 001 Gadget 001: ID 1d6b:zero002 Linux Basis 2.zero root hub
  • A number of units have been linked to the USB machine. Our Android machine is: 

Bus 001 Gadget 010: ID 2717:ff48   
  • These Four digits, which kind a part of the machine ID, might be required from this line of code: 

Gadget ID: 2717:ff48   
first Four-digit ID: 2717 
  • Subsequent, the next code within the terminal must be copied and pasted: 

adb units 
  • Begin the DemoApp undertaking by executing the under code: 

The code on a terminal is as follows: 

$ cd DemoApp 
$ react-native run-android 
  • A failed code reveals that different companies within the system use the default React Native port. The next code can then be examined: 

adb reverse tcp:8081 tcp:8081 

Uninstall React Native on Ubuntu:

1. Uninstall React Native: 

npm uninstall -g react-native-cli

2. Uninstall NPM modules

Removing of npm modules / third-party libraries is almost similar to npm modules set up. The next command permits you to uninstall the third-party libraries in React Native. Substitute the package deal title with <title>. 

npm uninstall <title> –save 

This command removes the package deal from each node modules folder and package deal.json. You should utilize the next command if you wish to delete the dependency within the international scale: 

npm -g uninstall <title> –save 

three. Uninstalling international packages

Use the uninstall command with -g flag to uninstall international package deal within the command line. 

npm uninstall -g <package_name> 

For instance:  

npm uninstall -g jshint 

Be taught the core ideas of React Native Elements, API, and Navigation with React Native Coaching 
Conclusion: 

Though the REACT Native Framework has some loopholesit remains to be the quantity one alternative for builders in the React Native growth business. We’ve efficiently put in React Native on Ubuntu 18.04 server and created our first React App. 

See also  From the Editor's Desk: Never a dull moment with Apple