How to run and make reactJs app on Android phone - World24Hub

It's my believe that having phone is just for normal uses like calling, sms, internet , gaming etc but If you think more about what you can do with mobile then it can blow your mind that besides all the normal uses you can utilize your phone for web development, app development or game development with coding and programming in languages such as Java, Javascript, React, React Native, Flutter etc.

Different platforms uses different programming languages such as Facebook, Youtube, twitter , Linkedin etc are coded in different languages. You can choose the programming language you are good at before start developing and it doesn't matter which programming language you choose.

Today, I have come up with the step by step guide about how you can run popular language on web development ReactJs on mobile phone and start development server. It doesn't matter which device you have, if your dedication for learning is high. It's gonna be fun to learn web development with ReactJs on mobile phone.

Before you jump to the tutorial I have pointed out the things you need before start ReactJs development server on your phone and start web development using ReactJs. Let's check them below and get started.

Requirements: 1). Android Phone
2). Termux terminal
3). Astro Code Editor

It's hard to manage things with phone while you are coding with mobile but it will definitely very fun and enjoy. Let's download the requirements files on your Android phone and start the development on ReactJs.

Astro Code Editor : First thing we need is Astro code editor which is IDE for Android to run ReactJs, NodeJs, VueJs and Python. This is powerful IDE for learn web development on mobile phone. Let's download it first from the link below which is available on Google Play Store.

Download Astro

After successful installation of Astro Code editor, You need to download the Termux terminal to execute commands.

Termux : Termux is an Android application that provides the service to install various of application packages in Android. It is an open source and It is the terminal emulator for Android. You can download it from the play store link below.

Download Termux

If you downloaded the both required app from the link above, Now we are going to install ReactJs on Android before that we need to create the procject on the Astro Code Editor.

Step 1 : Open Astro code editor on your phone just downloaded few minutes ago.

Step 2 : You see the Quick Start menu and we are going to develop the React app so choose ReactJs and Name your project. I have given the project name my-react-app.

Read Also : Blogger Top 10 unique alert message

Now, your project is created but still you can't run or view it untill we install some packages. For package installation we are going to run some command on Termux. Here is the way how you can do that.

Open Terminal emulator Termux on your phone and let it automatically install required packages. If you are in your Termux the app clear the all unnecessary text with command clear.

Run the following command on your Termux.

termux-setup-storage

This command will gives permission to termux on your storage, Just allow it. Now next command is pkg update and upgrade.

pkg update && pkg upgrade

This command will update and upgrade the package automatically, It takes few minutes and wait for successful process. And after this command we need to install nodeJs which is mandatory to install before you start using ReactJs. install it using following command.

pkg install nodejs

This command will install nodeJs on the Termux and it allows us to run development server for ReactJs. Next part is install yarn after you install nodeJs. Following command will install the yarn.

pkg install yarn

Now, you have successfully completed the half of the part and you are few step behind running development server for ReactJs.

To clear your command on Termux use command clear.

Now we need to goto project folder on the Termux. You can go it by using the cd command but we have already created the project on Astro code editor We will copy the path directly on it.

Open Astro.code editor and open terminal termux on it clicking on left bottom terminal icon and copy the second command and paste it to Termux.

cd /storage/emulated/0/Documents/ASTRO/projects/my-react-app

Now, You are inside the project folder and You can start the development server using command npm start or yarn start. I'm starting it using command yarn start.

yarn start

Now you can see the development running message on the Termux Terminal. It ask for the browser permission where you want to view your development progress. Choose the preferred browser app such as Google Chrome.

Now , Go back to your Astro code editor app and open the project we created src folder and inside the source folder open index.js file and remove every code and copy and paste the following code.

  import React from 'react';
  import ReactDOM from 'react-dom';  
  const App = () => {
  return <h1>My First React Website</h1>;
  } 
  ReactDOM.render('<App/>, document.getElementById('root'));
   

Save it and Open your browser and hit the following address and you can see that your react website is ready.

http://localhost:3000

Now, You can see that your ReactJs website is running through localhost. If didn't miss any step above.

I also made react app using Android phone. I made source viewer, Counter app, Interest calculator etc. You can also create your own app. This really could help you to understand about ReactJs. This IDE is powerfull and you can learn python,vueJs, as well as nodeJs simultaneously.

Conclusion : Coding is hard on mobile phone due to multiple files management and This post for those who want to learn coding on phone because everyone can't afford the computer but coding mobile is possible and This post is all about how you can run server environment on your phone.