DEV Community

Cover image for How To Create a React Application on an Android Device: A Step-by-Step Guide
Andrew Ezeani
Andrew Ezeani

Posted on • Edited on

How To Create a React Application on an Android Device: A Step-by-Step Guide

#webdev #javascript #react #beginners

Table of Content

Introduction

Getting access to a computer is a huge hurdle that discourages most people from learning how to code. I can relate to this because when I started my journey as a frontend developer, all I had was my smartphone. I started by learning HTML and CSS on SoloLearn where I utilized their in-app text editor. Then I proceeded to learn JavaScript on Freecodecamp, where I made use of their interactive code editor. Fortunately, I was able to get access to a computer while learning React. However, I still use my phone when building small React applications. In this article, you're going to learn how to build a React application using your smartphone by building a Todo application. But before we proceed, here is a glimpse of what you will be building:

A Gif showing the finished application

Prerequisites

  1. An Android phone (Android version 7.0 or higher)
  2. Basic familiarity with the command line
  3. Basic knowledge of React and Git
  4. A GitHub account

Setting up your Android Phone

Follow the below steps to setup your Android device for building React projects:

Step 1: Install Termux

Termux Is a terminal emulator for Android. You can download the application from f-droid

Step 2: Upgrade the Termux packages

When you launch Termux, it will install necessary packages from a remote server. After installation, update the packages to the latest versions by running this command:



apt update && apt upgrade
Enter fullscreen mode Exit fullscreen mode

Accept the maintainer's version for all prompts.

Step 3: Grant access to local storage

Termux requires access to your device storage. Grant this access by running this command:



termux-setup-storage
Enter fullscreen mode Exit fullscreen mode

Tap Allow when prompted to grant Termux access to your device's storage.

Step 4: Install Node.js

Run the below command to install Node.js:



pkg install nodejs

#To check node version
node -v
Enter fullscreen mode Exit fullscreen mode

Step 5: Create a React application using Vite

Run the below command to scaffold a React application using Vite:



npm create vite@latest <your_app_name> -- --template react
Enter fullscreen mode Exit fullscreen mode

You'll be prompted to install Vite. After installation, download the necessary dependencies and start the development server by running these commands:



#To change directory to our application directory
cd <your_app_name>

#To install necessary dependencies
npm install

#To start the development server
npm run dev
Enter fullscreen mode Exit fullscreen mode

Copy the development server URL and open it in your device's browser. You should see a screen like the one below on your phone:

A screenshot showing the app interface.

Step 6: Install Acode

Acode is a popular text editor widely used for coding on Android. You can download it from the Android play store

Developing the Todo App with Acode

To build the Todo application, you first have to import the Project into the Acode editor.

Importing the project into Acode

Launch the Acode application, then follow these steps to import your React application:

Step 1: Tap on the Hamburger menu on the top-left corner of the app

A menu that contains a open Folder button should slide in from the left

A screenshot showing an arrow pointing to the hamburger menu

Step 2: Tap the Open Folder button

A screenshot showing an arrow pointing to the open folder button

Step 3: Tap the Add a storage button

A screenshot showing an arrow pointing to the add a storage button

A popup with two input fields, Select folder and Folder name will appear.

Step 4: Tap on the select folder input field

A screenshot showing an arrow pointing towards the select folder input field
This will open up your device file manager.

Step 5: Tap on the hamburger menu on the top-left corner of your phone

Termux will show up as one of the storage options on the menu that slides in.

A screenshot showing an arrow pointing towards termux storage

Step 6: Tap the Termux storage option

This will display the folders available in the Termux storage directory. Tap your project folder and then tap on the Use this folder button at the bottom of your screen.

A screenshot showing an arrow pointing towards the use this folder button

Tap Allow once prompted to grant Acode permission to access files in your project folder.

Tap OK once you're taken back to step 3 but with both the Select folder and the Folder name input fields filled with the necessary details.

A screenshot showing an arrow pointing towards the ok button

This should take you back to step 1 but with your project folder being displayed.

Step 7: Tap on your project folder

Once in your project folder, click on the checkmark at the bottom-right corner of your screen.

A screenshot showing an arrow pointing towards the checkmark at the bottom right corner of the screen

Tap OK once prompted to confirm if you want Acode to list the files in your project folder.

You should now see the files in your project folder listed in the Acode editor as shown below:

A screenshot showing my project folder structure in Acode

Building the Todo App

Step 1: Create a new components folder

To create a new folder, simply tap on the kebab menu to the right of the src directory.

Arrow pointing towards the kebab menu

Then tap on the NEW FOLDER on the displayed menu. Tap Ok after entering components as the name of the folder. Your new folder should appear under the src directory.

Step 2: Create Three New Components

You are creating three new components: Input, Todos, and TodoItem. To create a new file in the components directory, tap the kebab menu to the right of the components folder and then tap on the NEW FILE option. Click OK after typing the name of the file.

Step 3: Edit the App.jsx file

Open the App.jsx file in the editor, paste the code below in the file, and save it.



import { useState } from "react"
import Input from "./Components/Input"
import Todos from "./Components/Todos"
import './App.css';

const INITIAL_TODO = [
    {
      id: crypto.randomUUID(),
      title: "Type your first todo"
    }
  ]

function App() {
  const [todos, setTodos] = useState(INITIAL_TODO)

  return (
    <div>
      <h1>Todo App</h1>
      <Input setTodos={setTodos} />
      <Todos todos={todos} />
    </div>
  )
}

export default App
Enter fullscreen mode Exit fullscreen mode

Step 4: Edit the Input.jsx File

Open the Input.jsx file in the editor, paste the code below in the file, and save it:



import { useState } from "react"

function Input({setTodos}) {
  const [text, setText] = useState("")

  const handleSubmit = (e) => {
    e.preventDefault()

    setTodos((prevTodos) => ([
     ...prevTodos,
        { id: crypto.randomUUID(), title: text }
      ])
    )

    setText("")
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={text} placeholder="Type your Todo" onChange={(e) => setText(e.target.value)} />
    </form>
  )
}

export default Input;
Enter fullscreen mode Exit fullscreen mode

Step 5: Edit the Todos.jsx File

Open the Todos.jsx file in the editor, paste the code below in the file, and save it.



import TodoItem from "./TodoItem"

function Todos({todos}){

  return (
      <ul>
        {todos.map((todo) => <TodoItem key={todo.id} todo={todo} />)}
      </ul>
    )
}

export default Todos
Enter fullscreen mode Exit fullscreen mode

Step 6: Edit the TodoItem.jsx file

Open the TodoItem.jsx component in the editor, paste the code below, and save it.



function TodoItem({todo}) {

  return (
      <li>
        <p>{todo.title}</p>
       <button>Delete</button>
      </li>
    )
}

export default TodoItem
Enter fullscreen mode Exit fullscreen mode

Step 7: Add CSS styles

You will make minor changes to the default styles that comes with the scaffolded project. Open the App.css file in the code editor, paste the styles below in the file, and save it.



#root {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

ul {
  all: unset;
  width: 100%;
}

li {
  border: 2px solid gray;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  border-radius: 5px;
  max-width: 100%;
  padding: 0 10px;
}

input {
  width: 90%;
  padding: 15px;
  border: none;
  border-radius: 5px;
  margin-bottom: 20px;
}

p {
  display: block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
Enter fullscreen mode Exit fullscreen mode

Open the index.css file and paste the below styles in the file and save it.



:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;
}

body {
  margin: 0;
  display: flex;
  min-width: 320px;
  width: 100vw;
  text-align: center;
  min-height: 100vh;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.2em .6em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  color: red;
  cursor: pointer;
  transition: border-color 0.25s;
}

button:hover {
  border-color: #646cff;
}

button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }

  button {
    background-color: #f9f9f9;
  }
}
Enter fullscreen mode Exit fullscreen mode

If you have followed the instructions correctly, you should be seeing the image below in your browser.

A screenshot of the Todo app interface

Configuring Git and GitHub

GitHub is the most popular web-based hosting platform for git repositories. You need to install and configure git before you can push your repositories to GitHub from Termux. Follow the steps below to configure git, and connect to GitHub:

Step 1: Install git and gh

GIT is a widely-used version control system commonly used for software development and other collaborative projects.
While gh helps us to access GitHub features such as pull requests, issues, and other GitHub concepts from the termux terminal.

Stop the development server by pressing ctrl + c on your keyboard. Then run the command below to install git and gh:



pkg install git gh
Enter fullscreen mode Exit fullscreen mode

Step 2: Adding Git user Credentials

To use git, you first have to tell git who you are by adding your user credentials to git. Run the following command to add your username and email address to git: 



#To setup git username
git config --global user.name <your_username>

#To confirm
git config --global user.name

#To setup git email
#It must be the same as the email 
#associated with your github account
git config --global user.email <your_email>

#To confirm
git config --global user.email
Enter fullscreen mode Exit fullscreen mode

Step 3: Initialize git

Run the following commands to initialize and commit your files to git



#Initialize git
git init

#To add your files to git
git add .

#To commit all changes to git
git commit -m "initial commit"
Enter fullscreen mode Exit fullscreen mode

Step 4: Authenticate with GitHub

Run the command below to authenticate your account:



gh auth login
Enter fullscreen mode Exit fullscreen mode

Follow the prompts to authenticate your account with GitHub.

Step 5: Push your local repository to GitHub

To add your local repository to GitHub, simply follow the instructions here.

If you followed the instructions correctly, your project should show up on your GitHub repository once you refresh your browser.

Debugging the Application

Let's learn how to debug a React application on an Android device by making the the delete button functional.

Open the TodoItem.jsx file, paste the below code into it, and save the file.



const handleDeleteTodo = (id) => {
    setTodos((prevTodos) => prevTodos.filter(todo => id !== todo.id))
  }
Enter fullscreen mode Exit fullscreen mode

The TodoItem.jsx file should now contain the below code:



function TodoItem({todo}) {

  const handleDeleteTodo = (id) => {
    setTodos((prevTodos) => prevTodos.filter(todo => id !== todo.id))
  }

  return (
      <li key={todo.id}>
        <p>{todo.title}</p>
        <button onClick={() => handleDeleteTodo(todo.id)}>Delete</button>
      </li>
    )
}

export default TodoItem
Enter fullscreen mode Exit fullscreen mode

If you click on the delete button, you will notice that the todo doesn't get deleted as expected because of an error in our code. Typically, when you encounter a bug when building a web application on a computer, you will open up your browser DevTools to find error messages logged to the console that will help you in fixing the bug. However, since you are developing on an Android Phone without access to the traditional browser DevTools, how do you debug the issue?. You can debug your React application using your Android phone by following the below steps:

Step 1: Download Eruda

Eruda is a browser-like application that gives you access to traditional browser DevTools found on computers through your Android phone. You can download the application from the google play store

Step 2: Open the development url in the Eruda browser

Simply copy the development url from your device browser and open it in the Eruda browser application.

Step 3: Click on the delete button

When you click on the delete button, you will notice that a devtool opens up in the Eruda browser with an error message logged to the Eruda console. The Eruda browser devtool contains the essential tools you will need to help debug your application on Android.

A gif showing the Eruda devtool opening when I clicked on the delete button

Step 4: Fixing the bug

According to the error message in the console, the delete button is not functioning as expected because the setTodos function used in the handleDeleteTodo is not defined. To fix the error, you simply have to pass the the setTodos function as a prop from the App component to the Todo component



import { useState } from "react"
import Input from "./Components/Input"
import Todos from "./Components/Todos"
import './App.css';

const INITIAL_TODO = [
    {
      id: crypto.randomUUID(),
      title: "Type your first todo"
    }
  ]

function App() {
  const [todos, setTodos] = useState(INITIAL_TODO)

  return (
    <div>
      <h1>Todo App</h1>
      <Input setTodos={setTodos} />
      {/*Passed the setTodos function as a 
      prop to the Todos component*/}
      <Todos todos={todos} setTodos={setTodos} />
    </div>
  )
}

export default App
Enter fullscreen mode Exit fullscreen mode

And then you also pass the setTodos function as a prop to the TodoItem component as well:



import TodoItem from "./TodoItem"

function Todos({todos, setTodos}){

  return (
      <ul>
      {/*Passed the setTodos function to the 
      TodoItem Component*/}
        {todos.map((todo) => <TodoItem key={todo.id} todo={todo} setTodos={setTodos} />)}
      </ul>
    )
}

export default Todos
Enter fullscreen mode Exit fullscreen mode

The TodoItem component should now look like this:



function TodoItem({todo, setTodos}) {

  const handleDeleteTodo = (id) => {
    setTodos((prevTodos) => prevTodos.filter(todo => id !== todo.id))
  }

  return (
      <li key={todo.id}>
        <p>{todo.title}</p>
        <button onClick={() => handleDeleteTodo(todo.id)}>Delete</button>
      </li>
    )
}

export default TodoItem
Enter fullscreen mode Exit fullscreen mode

The delete button should now work as expected.

A Gif showing a functioning delete button

Conclusion

Building web applications on an Android phone is not an easy task. Depending on your chosen Android code editor, you might miss the auto-completion, IntelliSense, and other powerful features typically found in desktop code editors. However, I hope that the knowledge you've gained in this article – from building React applications to sharing them on GitHub and debugging your React applications on an Android phone – has made it a little bit easier.

Top comments (9)

Collapse
 
mgtv_s profile image
Dmitrii •

Thanks for article, very great! I recently read article about how much it would cost to develop on react native, i think it may be useful :)

Collapse
 
lui2mi profile image
Luis Miguel Meza Mendoza •

Great guide! and I have a question. Idk if is only happening to me.
after "pkg install nodejs" gives me an error "CANNOT LINK EXECUTABLE "node": library "libicui18n.so.73" not found" on a fresh install

Collapse
 
andrewezeani profile image
Andrew Ezeani •

It seems like a dependency issue. You can try uninstalling your termux if it's installed from the Google playstore and download one from fdroid. If that doesn't solve the issue, try running pkg update && pkg upgrade to upgrade your termux to the latest version. Then try running the command again. If it doesn't work, then it probably has something to do with the version of your device.

Collapse
 
lui2mi profile image
Luis Miguel Meza Mendoza •

Thanks for reply, indeed I had to update and upgrade, but also install git, openssl-tool, build-essential, python and proot, to make it work

Collapse
 
lqdm12 profile image
Leonard Mendonça •

Thank you so much for the guide! I'm happy because I can use reactjs on my cellphone now :D

Collapse
 
andrewezeani profile image
Andrew Ezeani •

You're welcome. I'm glad you found it helpful

Collapse
 
apolizy profile image
Emmanuel precious omonigho •

Please how do I use it for a website I'm creating ?

Collapse
 
andrewezeani profile image
Andrew Ezeani •

If it's a React application, it'll be by Following the steps outlined in the article

Collapse
 
royal_gamer_6014f452b95b0 profile image
Royal gamer •

Thank you so much But I use Speck node editor which is very good, you can try it

Read next

techpulse55 profile image

Unlocking Quickpix AI's Potential: Features, Pricing, and Performance Review

Techpulse -

it_vturbo profile image

Why Atomic Design Is Not for Frontend: A Deep Dive

Valentin Turbins -

easyvipin profile image

Next.js Tutorial : Adding Navbar with active Styling in a Server Component Layout

Vipin Chandra -

itamartati profile image

A Beginner’s Guide to Angular Signals 🌟

Itamar Tati -