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

Table of Content

Introduction
Prerequisites
Setting up your Android Phone
Developing the Todo App with Acode
- Importing the project into Acode
- Building the Todo App
Configuring Git and GitHub
Debugging the Application
Conclusion

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:

Prerequisites

An Android phone (Android version 7.0 or higher)
Basic familiarity with the command line
Basic knowledge of React and Git
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

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

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

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

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

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:

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

Step 2: Tap the Open Folder button

Step 3: Tap 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

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.

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.

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.

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.

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:

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.

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

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;

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

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

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;
}

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;
  }
}

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

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

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

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"

Step 4: Authenticate with GitHub

Run the command below to authenticate your account:



gh auth login

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))
  }

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

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.

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

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

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

The delete button should now work as expected.

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.