React is a well-known JavaScript framework for developing front-end applications. It became popular through the use of intuitive programming paradigms that tie JavaScript to an HTML-like system known as JSX. This allows developers to create their applications in a shorter time.
Initially, setting up a new React project used to involve complex multi-stage processes such as setting a build system, converting the code transpiler to a code readable by all browsers and the basic directory structure. Now, the creation of React Apps has become simple with the Create React App CLI tool that includes all JavaScript packages, code transpilers, and the testing and building systems, that you need to run a React project. For a better understanding of React, visit usereducer in React.
React Native is a framework that creates a JavaScript code hierarchy of UI components. It has a set of components to build a mobile app with an authentic look and feel for both iOS and Android platforms. ReactJS, by contrast, is a JavaScript open-source library for user interfaces. While they may have different interfaces, Facebook developed React Native and ReactJS using the same design principles. If you are excited about the prospect of developing a mobile app using React Native, then I will teach you how to install React Native on Ubuntu. For more information, check out Full Stack Web Developer course online.
Why is React Native Important?
- You can create UI for both iOS and Android platforms with React Native Framework.
- As React Native components have counterpart rights, both Android and iOS apps can be reused for these components.
- You can either integrate REACT Native components into the existing application's code or you can use the Cordova-based code using the plugin. However, Cordova and Ionic code have to be built for your current app.
- React Native development is relatively easy, fast, and efficient.
We will learn how to install and setup React Native on Ubuntu in this article. For successful installation, all of the steps below must be followed one after the other.
Prerequisites to Install React Native on Ubuntu
A. Hardware Requirements
To download and successfully install React Native to your pc, you need to consider the minimum hardware specifications required to support the app and run it smoothly.
- Windows 11 for all applications, Windows 10 (version 1709 or higher) for Windows apps.
- Mac: 10.14 or later macOS.
- Linux: Any contemporary distribution that is LTS compatible.
- Processor: 64-bit processor capable of supporting virtualization
- Memory: 8 GB RAM (up to 16 GB suggested).
- Storage: Free disk space of 20 GB
B. Software requirements
To efficiently install and set up React-Native on Ubuntu device, you will need to install the following:
- Android SDK
- Install JDK
- NPM
- React native cli
- Node.js: One should use the LTS version of Node.js while performing React Native install Ubuntu.
- Watchman: The watchman is a Facebook tool for monitoring file system changes. For larger projects, Watchman should be fixed. It can be implemented through a package manager like Homebrew on Mac and Chocolatey for Windows.
- Xcode: To write an iOS application, download Xcode from the Mac App Store.
- Android Studio: You should also have installed Android Studio for building Android applications. Ensure you include all required SDKs using the SDK Manager tool on Android Studio.
Additional Requirements:
- Java Development Kit (JDK): The Java Development Kit is needed by React Native. You may get this from Oracle’s official site.
- React Native Command Line Interface (CLI): I’ll explain in the later sections how you can install the React Native Command Line Interface.
How to Install and React Native on Ubuntu? Step-by-Step
To install react native on Ubuntu, I suggest you download some essential software packages. Below are the steps you need to follow if you’re starting from scratch. Here’s how I do it:
Step 1: Install Node.js and npm
Follow these steps to install Node.js which is a popular JavaScript implementation.
1. First update the apt package manager:
$ sudo apt-get install -y build-essential
2. Now, run the following command:
$ curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash
$ sudo apt-get install -y nodejs
Following Node.js installation, proceed with NPM or Node Package Manager installation.
3. These commands will help you know if it has been already installed or not:
$ which npm
4. If NPM is already installed, it will return:
/home/ijs/.nvm/versions/node/v12.18.3/bin/npm
5. To NPM, run the command in terminal:
$ curl http://npmjs.org/install.sh | sh
Step 2: Install JDK
Java is used to build native Android apps. This means that Java Development Kit (JDK) is required for working with projects in React Native.
Install the JDK with the following commands:
$ sudo add-apt-repository ppa:openjdk-r/ppa
$ sudo apt-get update
$ sudo apt-get install openjdk-8-jdk
Step 3: Install Android Studio
To work with React Native development, Android studio must be installed. From the website listed below we can easily download it.
For More details on the installation process of Android SDK please click here.
Step 4: Install Android SDK
The most recent Android SDK comes by default with Android Studio. But it's the Android 6.0 (Marshmallow) SDK that is required to build a React Native app with native code. You can install additional Android SDKs in Android Studio via the SDK Manager.
You can access the SDK Manager from the Android Studio Welcome screen. Click on Configure and choose SDK Manager.
SDK manager -> SDK platforms
Then check the box in the bottom right corner of the "Show Package Details" box. Find and expand the Android 6.0(Marshmallow) entry, and then make sure you check the following items:
- Google APIs
- Android SDK Platform 23
- Intel x86 Atom_64 System Image
- Google APIs Intel x86 Atom_64 System Image
1. Run the command:
$ sudo nano $HOME/.bash_profile
In order to build apps with native code, the React Native tools need some environmental variables.
2. Copy the lines below and paste them into the terminal:
export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools
Save and exit the file using below commands:
Press Ctrl + O (Write out)
Then press Enter
And press Ctrl + x (exit)
Step 5: Install Autotools-dev
You first need to install Autotools-dev which is a package with several other tools, i.e. aclocal automaker, before going ahead and installing Watchman. Copy and paste in the terminal to install it:
nbsp;sudo apt-get install aclocal
$ sudo apt-get install automake
In order to continue the installation, you will be asked to choose a Y/N option. Please enter Y, then press Enter. To kick start your career, enroll in Web Development class.
Step 6: Install Watchman
Once the Autotools-dev is installed, proceed and install Watchman, a Facebook tool for file system surveying. If you want the best results, you must install the tool.
Run these commands to install Watchman:
$ git clone https://github.com/facebook/watchman.git
$ cd watchman
$ git checkout v4.9.0 # the latest stable release
$ ./autogen.sh
$ ./configure
$ make
$ sudo make install
Step 7: Install Flow
Flow allows you to easily add JavaScript to the static type check. It also helps to prevent bugs and makes documentation of code easier. In fact, it is already used by many React Native Documents and source code and must be installed.
Use the following command to install flow:
$ wget https://github.com/facebook/flow/releases/download/v0.62.0/flow-linux64-v0.62.0.zip
$ unzip flow-linux64-v0.62.0.zip
$ cd flow
$ sudo mv flow /usr/local/bin/flow
Step 8: Install React Native
1. The next step is to install React Native in Ubuntu. It should be noted that you need to use sudo to have React Native installed as root, since we will be installing it globally. This is the code you must use:
$ sudo npm install -g react-native-cli
2. Users who installed NPM with another method can install React Native as a normal user using this code:
$ npm install -g react-native-cli
You can go ahead and start creating your own app(s) when you're done by installing all the necessary packages!
Master the art of programming with our online courses in programming! Unlock your potential and dive into the world of coding. Join us today and become a programming pro. Enroll now!
Check out the detailed article on React Native Interview Questions to prepare and ace your interviews on React Native.
How to Create a React Native New Project?
1. Start with the following command to create an app project
$ react-native init DemoApp
2. Setting Up an Android Device
Only apps downloaded by the Google Play can be set up and run by default on most Android devices. To install your app during development, you need to enable USB Debugging on your device.
You will first need to activate the Developers options menu by going to Settings — About phone —Software Information — and then tap the Build number row at the bottom seven times to activate your device's USB debugging system.
You can then return to Developer Settings to enable "USB debugging."
Let's start on an Android device now to run our React Native projects. Go forward to your development machine and plug in your device using USB.
$ lsusb
Output will be like: Bus 002 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub
Bus 001 Device 004: ID 174f:241a Syntek
Bus 001 Device 003: ID 0cf3:e300 Atheros Communications, Inc.
Bus 001 Device 002: ID 06cb:0081 Synaptics, Inc.
Bus 001 Device 010: ID 2717:ff48
Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
How To Test If React Native Installation in Ubuntu is Properly Done?
A simple way of verifying whether installing react native on Ubuntu has been successful would be to create a new React Native project and then open it in an emulator or a physical device to determine whether it will run.
I followed the below steps to check the installation:
Step 1: Create A New Project
Click a terminal, go to the directory, and name your project. Then run the following command:
npx react-native init TestProject
Instead of “TestProject,” put in the name of your preferred project. The new React Native project is going to be created using this command.
Step 2: Navigate to the Project Directory
Change into the project directory:
cd TestProject
Step 3: An emulator android for running the project
To check the React native setup in Ubuntu, ensure that you have set up Android Studio according to what was outlined in the installation manual. First, start an Android emulator (for example, Android Studio or command line).
Run the following command to build and run the React Native project on the Android emulator:
npx react-native run-android
It will build the project and run it inside the Android emulator.
Step 4: Execution of the project on Emulator (iOS)
- To develop iOS, you need a macOS computer with installed Xcode.
- Run the following command to build and run the React Native project on the iOS simulator:
npx react-native run-ios
This command will build and run the project in the iOS simulator.
Step 5: Verify the Installation:
In case the installation succeeds, the default react native app should be running in an emulator or simulator. A welcome message should be displayed on the app with a React Native logo.
Additional Tips:
- When installing or using the project, ensure that you read and find hints to solve errors in the messages that appear.
- Ensure everything follows the installation steps, particularly in establishing the necessary environment variables.
How to Uninstall React Native from Ubuntu?
If you want to uninstall react native from your system, below are the steps you need to follow:
Step 1: Remove React Native Project Files:
Go to the folder that contains your React Native project.
Delete the entire project folder. You can use the rm command to remove the project directory:
rm -rf YourReactNativeProject
Use the actual name of your project instead of “YourReactNativeProject.”
Step 2: Uninstall React Native globally.
If you installed the React Native CLI globally, you should uninstall it:
npm uninstall -g react-native-cli
Step 3: Clean Up npm Packages:
Navigate to your home directory and remove the npm cache for React Native:
rm -rf ~/.npm
Step 4: Verify
You can verify that React Native is uninstalled by running the following command:
react-native -v
How To Use React Native?
I have now explained how to set up a React native environment and build your first project. However, there are certain things to consider when using react native. If you’re a beginner in react native, enrolling in a Web Development complete course may boost your learning and help you build some great apps. Below are essential tips when using react native:
You can create a massive application on React Native. It requires that you use the modularity approach. I think dividing your application into different modules, which could also be individually maintained, reduces the complexity of building and maintaining your code.
React Native Debugger: It’s a self-contained app derived from React and Redux Developer Tools. It allows you to debug JavaScript code directly within the application.
Reactotron: Inspect Redux, MobX-State-Tree applications, API requests, and response, etc.
Hot Reloading: Hot reload lets you instantly check out your changes without restarting your app. On the Android emulator, press Ctrl + M and “Enable Hot Reloading” or “Enable Fast Refresh,” or on the iOS simulator, Cmd + D, and “Enable Hot Reloading” or “Enable Fast Refresh.”
Conclusion
React Native has been a great help to developers in building scalable applications using a single codebase. It is one of the most popular frameworks that powers globally recognized apps such as Instagram and Facebook.
In this guide, it is explained how you can easily install React Native on Ubuntu to build applications. With other things in mind, remember to have strong react fundamentals. That will help you to build applications of your choice. The best way is to enroll in any top-reputed course, such as the KnowledgeHut React certification course, that will help you learn React hands-on.
