This content originally appeared on DEV Community and was authored by gokayburuc.dev

React Development on Termux – Complete Guide

You can develop React applications directly on your Android device using Termux. In this guide, you’ll learn how to set up and configure a complete React development environment step by step on Termux.

1. Initial Termux Setup

First, download and install Termux from F-Droid. After launching the app, grant access to storage by running:

termux-setup-storage

This creates the /storage directory. It’s recommended to keep all your projects directly under this path. Folders like downloads, music, or videos are just symbolic links and may cause issues due to Android’s file access restrictions.

Warning: Avoid creating projects in symlinked directories like downloads or documents.

2. Updating Repositories and System

To access more packages and keep your system up to date, run the following:

pkg install x11-repo
apt update && apt upgrade

The x11-repo provides access to advanced packages.

3. Installing a Text Editor

For serious development, install a more advanced editor. Recommended editors for Termux include:

• Helix
• Neovim
• Vim

Installing Helix

pkg install helix
pkg install helix-grammers

Installing Neovim

pkg install neovim

4. Installing Required Packages Automatically

To streamline the setup, create a requirements.sh script like below:

# requirements.sh

packages=("git" "curl" "wget" "nodejs" "clangd" "lua53" "bash-language-server")

for package in "${packages[@]}"; do
  echo "Now Installing : $package"
  pkg install "$package" -y
done

Run it with:

bash requirements.sh

5. Creating a React Project with Vite

Navigate to the /storage directory and create your first React project using Vite:

npm create vite@latest my-first-react-app -- --template react

Then navigate to the project directory and install dependencies:

cd my-first-react-app
npm install

To start the development server:

npm run dev

6. React Configuration for Helix Editor

For full LSP (Language Server Protocol) support in React projects, install these globally:

npm install -g typescript typescript-language-server eslint

Then configure Helix by adding the following to ~/.config/helix/languages.toml:

[[language]]
name = "javascript"
language-servers = ["typescript-language-server"]
auto-format = true

[[language]]
name = "typescript"
language-servers = ["typescript-language-server"]
auto-format = true

[[language]]
name = "tsx"
language-servers = ["typescript-language-server"]
auto-format = true

[[language]]
name = "jsx"
language-servers = ["typescript-language-server"]
auto-format = true

[language-server.typescript-language-server]
command = "typescript-language-server"
args = ["--stdio"]

[language-server.typescript-language-server.filetypes]
jsx = "javascriptreact"
tsx = "typescriptreact"

Final Notes

You now have a portable and fully functional React development environment on your Android device using Termux. This setup is ideal for lightweight, offline development and quick prototyping.

Tip: Use git to push your projects to GitHub or GitLab for backup and version control.

This content originally appeared on DEV Community and was authored by gokayburuc.dev