How To Create a React Application on an Android Device: A Step-by-Step Guide
Tags: webdev, javascript, react, beginners
Published: 2023-09-24 13:08:50

##Table of Content
- [Introduction](#introduction)
- [Prerequisites](#prerequisites)
- [Setting up your Android Phone](#setting-up-your-android-phone)
- [Developing the Todo App with Acode](#developing-the-todo-app-with-acode)
  - [Importing the project into Acode](#importing-the-project-into-acode)
  - [Building the Todo App](#building-the-todo-app)
- [Configuring Git and GitHub](#configuring-git-and-github)
- [Debugging the Application](#debugging-the-application)
- [Conclusion](#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: 

![A Gif showing the finished application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ksixunfqd5hko632fotq.gif)

##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
5. 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](https://f-droid.org/en/packages/com.termux/)

**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:

```shell
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:

```shell
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:

```shell
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:

```shell
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:

```shell
#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:

![A screenshot showing the app interface.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sik6ulzxkeccr3zrqaef.jpg)

**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](https://play.google.com/store/apps/details?id=com.foxdebug.acodefree)

##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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a17h1tyt30eaor0uypq8.jpg)

**Step 2: Tap the `Open Folder` button** 

![A screenshot showing an arrow pointing to the open folder button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5l4dkschfrkawx2rk3sm.jpg)

**Step 3: Tap the `Add a storage` button** 

![A screenshot showing an arrow pointing to the add a storage button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/quzm8c9edgdwa9djguya.jpg)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/59lrz7lvulujwm6yng4r.jpg)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wwtlg1ib6kwmqr535b3c.jpg)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v07ylcapoet9zxbv7om1.jpg)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z714o3bkx6i3xtyu07j6.jpg)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6y7u1vc6xeun6xdugi8.jpg)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nuo6qi4gdi8yokbwiede.jpg)

###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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mh22x9zu90qzu5q166nj.jpg)

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.

```jsx
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:

```jsx
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.

```jsx
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.

```jsx
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.

```css
#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.

```css
: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.

![A screenshot of the Todo app interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pllbhtiybfcz5koqlpr1.jpg)

##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`:

```shell
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`: 

```shell
#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`

```shell
#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:

```shell
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](https://docs.github.com/en/migrations/importing-source-code/using-the-command-line-to-import-source-code/adding-locally-hosted-code-to-github#adding-a-local-repository-to-github-using-git).

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.

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

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

```jsx
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](https://play.google.com/store/apps/details?id=com.eruda)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/veiwf5ou20h5w22ml4p8.gif)

**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
```jsx
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:
```jsx
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:
```jsx
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.

![A Gif showing a functioning delete button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ksixunfqd5hko632fotq.gif)

##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.