Table of Content
- Introduction
- Prerequisites
- Setting up your Android Phone
- Developing the Todo App with Acode
- 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.
Top comments (9)
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 :)
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
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.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
Thank you so much for the guide! I'm happy because I can use reactjs on my cellphone now :D
You're welcome. I'm glad you found it helpful
Please how do I use it for a website I'm creating ?
If it's a React application, it'll be by Following the steps outlined in the article
Thank you so much But I use Speck node editor which is very good, you can try it