How to create a react app on android device

ReactJS is an open-source JavaScript library that is used for building user interfaces (UI) for single-page applications.

ReactJS is becoming widely popular due to it’s easy syntax and components based architecture.

I tried to set react localhost environment on android device and it went well, So here I am going to describe how I did that.

Gather resources to get started

First of all you need an android device Ofcourse.

Your android device should be android OS of version 7.0 as minimum.

I used these 4 applications excluding a browser (Chrome) to run localhost.

1. Termux ◼
2. Material files app Ⓜ️
3. Acode editor 💻
4. Hacker’s Keyboard ⌨

You can find all of them at Play Store but I would recommend to get termux from F-droid

Here is How to get Termux

Open your android browser (Chrome) and go to this link

https://f-droid.org/en/packages/com.termux/

Now you have two options..

1. Download F-droid App and then download Termux via it ( This will help you to keep up with updates)
2. Directly download Termux apk from the F-droid website.

After downloading and installing Termux ◼

Install Material Files app Ⓜ️ from Play Store here

Install Acode Editor app 💻 from Play Store here

and Hacker’s Keyboard ⌨ as well

Set your default keyboard to Hacker’s Keyboard

How to setup termux storage

Now we will setup Termux ◼ to access our device’s storage. so that we can store and edit our react project files.

Open Termux and type the following code 👇

termux-setup-storage

Press Enter.

It will ask you to access storage permission, so allow acess to storage and grant storage permission.

Now you’re able to run common commands like cd, ls, pwd, rm, rmdir, mkdir etc.

If you wanna learn basic commands used in termux here you can learn with this blog post.

Now your termux is ready to install packages.

Installing Node JS and npm

To install React, We have to install nodejs and npm first but before that let’s update all available packages in our system.

Now clear the termux screen with clear command or create a new session.

Update all the packages and dependencies installed on the system with this command.

apt update && apt upgrade

Now we are going to install nodejs with this command

pkg install nodejs

This will install both nodejs and npm.

You can test installation of nodejs with checking version of nodejs and npm with following commands

node -v

To check npm version, type

npm -v

Checking node and npm installation with version check

Installing react into the system

After installing nodejs successfully, run the following command to install react

npm i -g create-react-app

This will install ReactJS globally in your system.
Now let’s create a sample app project.

Go into storage folder

Use these commands to go into storage folder

Make projects directory with this command

mkdir projects

Use these commands to create projects directory

Now we will move into projects directory, type

cd projects/

cd projects/

Go into projects folder using cd command

Let’s create react app

We will create a react app here.

To do this type the command below and hit enter

npx create-react-app my-app

I have named this projects as my-app, you can name your project aanything.

It will start installing dependencies and will create a new folder ‘my-app’ into projects directory.

It Installs react dependencies and creates a folder my-app

Ensure a good intetnet connection to install it without fail.

If you fail somehow, you can try again with above command.

Once you finish installation, it will show you this.

This is how it looks when you finish creating your projects

Now follow these last commands to see magic of termux in localhost

cd my-app

It will take you into ‘my-app’ folder.

Now type following command and hit enter

npm start

This will take you to your browser and it will open a tab with localhost:3000.

If it’s not showing this, you can open it manually

localhost:3000

Where you’ll find something like this.

React localhost environment running in android browser

Now give yourself a treat, you have installed and run ReactJS in android successfully.

How to access react files in android

Everything went well till now, but here’s a catch.

⚠️ You won’t find projects directory in your device file manager because these folders are located in root directory of your device and you can’t access or edit react code files until you root your device.

But we have a solution here.

That’s where Material Files App Ⓜ️ helps you. It is a root explorer who let’s you access root files without rooting the device.

It makes you to acess Termux storage folder easily.

Let’s see how.

Open Material Files App

Allow storage access permission.

Open Sidebar and click on ‘Add storage…’

Add storage option in sidebar of material files app

Select ‘External Storage’ Option

Choosing external storage option

This will take you to termux storage where you need to allow it to access termux storage.

Allowing access to termux in material files app

After that you will see another storage in sidebar of material files app Ⓜ️ named home

termux storage access through home directory

This home direcrory is storage access to termux which will take you to storage folder.

Here you can access projects folder and within it lies our my-app folder.

In my-app directory, you will find all react code files you need.

Edit your files with Acode editor

Now you can edit them with Acode Editor 💻

Acode editor is perfect for editing react codes on android device.

Acode editor editing App.js

For easy access to my-app folder, you can make a shortcut of this folder at your home screen.

Creating a shortcut of my-app folder on home screen

That is how you can create react app on android device.

If you want to get started into react then go through React official Documentation and this blog post by Tania Rascia.

That is all mates! Let me know if you’re having any kind of problems in this tutorial.

Comment and share.

Thanks for reading this far. Hope you liked it

You can join my newsletter for informative and interactive content about programming, design, art and doodles.

Original Article : theankitnet.com