How to Install React.js on Android

In today's tech-savvy world, React.js, the versatile JavaScript framework, stands out as a popular choice among web developers due to its simplicity, efficiency, and its ability to empower developers to create captivating user interfaces. React's component-based architecture, virtual DOM, and declarative syntax have streamlined the development process, making it easier to build user-friendly and dynamic web applications. What's even more exciting is the possibility of using React.js on your Android device, thanks to Termux, a versatile terminal emulator. In this article, I'll guide you through the steps of installing Node.js and React, and show you how to copy and modify your React app's code directly from your Termux storage. Additionally, I'll provide valuable tips to enhance your experience. So, without further ado, let's dive in.

The Essential Apps You'll Need

Before we get started, make sure you have the following apps installed:

Application	Purpose
Termux	A Linux-based Terminal Emulator for running and installing npm scripts and packages, including React.js.
Total Commander and Material Files (optional)	For copying files from the Termux root directory, offering a simpler alternative to the command line.
Acode	A code editor for editing your project's source code, with the capability to access Termux's data directory.
Hackers Keyboard (Optional)	A virtual PC keyboard for Android, making shortcut keys easier to use.

Step 1: Installing and Setting Up Termux and Node.js

1. Launch the Termux app on your Android device.
2. Run the following commands to update and upgrade Termux packages:

   apt update && apt upgrade
   

3. Install Termux API:

   apt install termux-api
   

4. Install Node.js:

   apt install nodejs
   

5. After Node.js installation, verify the versions:

   npm -v 
   

   node -v
   

6. Installing Yarn (Note: This is an alternative in case you encounter errors during React installation with npm):

   npm install --global yarn
   

7. Verify the Yarn version:

   yarn --version
   

Step 2: Installing and Creating a React.js App

1. Grant Termux storage permission to access and modify files stored on the sdcard directory by executing:

   termux-setup-storage
   

2. Install and create your React.js app using the following commands:

   npm install create-react-app
   

   npx create-react-app my-app
   

   Note: Instead of using "my-app," you can specify any name you prefer for your React app (e.g., npx create-react-app facebook).
3. Navigate to your React app directory:

   cd my-app
   

4. Run your app:

   npm start
   

Now, patiently wait for the React.js development server to start. Once it's up and running, your React app will automatically open in your default browser, with the expected server URL usually set to http://localhost:3000. If port 3000 is occupied, you'll receive a prompt asking you to run your app on a different port; you can choose "y" or "n" to accept or reject.

Possible Reasons for Installation or Running Issues

If you encounter issues, ensure you don't install React.js or Node.js on the sdcard directory, as they may lack sufficient permissions to run or install due to Android security restrictions. It's recommended to install them in the Termux default root storage.

If you're interested in editing your React.js code directly from the Termux root directory and managing your files more conveniently, here are the steps:

Step 1: Using Acode Text Editor

1. Launch Acode and tap the menu bar.
2. Tap "Open folder" and select the / button to view all available paths.
3. Tap the plus icon at the top right and select "Add path," then tap "Select folder."
4. Choose "Termux," navigate to your app directory, tap "Select," and then tap "OK." Termux (home) will appear in the list of available paths/directories.
5. Now tap "home," and you should be able to access and edit your React.js app's source code.

Step 2: Copying Files From Termux Directory to Sdcard

1. If you wish to copy your React app's source code to your sdcard directory using Termux, use the following command:

   cp -rL my-app /sdcard/codelab
   

   Note: "codelab" is where I store my codes, but you can choose any folder you prefer.

For a detailed guide on using Total Commander and Material Files for copying and managing files in your Termux root directory, please refer to the video below.

If you encounter any issues or have questions, please don't hesitate to ask in the comments. I'm here to assist you and ensure you have a smooth experience.

---