如何在 Android 设备上创建 React 应用程序：分步指南

介绍

获得电脑是阻碍大多数人学习编程的巨大障碍。我对此深有体会，因为当我开始我的前端开发之旅时，我只有一部智能手机。我最初在 SoloLearn 上学习 HTML 和 CSS，并使用了他们的应用内文本编辑器。然后，我继续在 Freecodecamp 上学习 JavaScript，并使用了他们的交互式代码编辑器。幸运的是，我在学习 React 期间能够使用电脑。然而，我仍然会在构建小型 React 应用程序时使用手机。在本文中，你将学习如何使用智能手机构建一个 Todo 应用程序来构建 React 应用程序。但在继续之前，让我们先来看一下你将要构建的内容：

先决条件

Android 手机（Android 版本 7.0 或更高版本）
熟悉命令行
React 和 Git 的基础知识
GitHub 帐户

设置你的Android手机

按照以下步骤设置您的 Android 设备以构建 React 项目：

步骤1：安装Termux

Termux 是一款适用于 Android 的终端模拟器。您可以从f-droid下载该应用程序。

步骤 2：升级 Termux 软件包

启动 Termux 时，它会从远程服务器安装必要的软件包。安装完成后，运行以下命令将软件包更新到最新版本：



apt update && apt upgrade

对于所有提示，接受维护者的版本。

步骤 3：授予对本地存储的访问权限

Termux 需要访问您的设备存储空间。请运行以下命令授予此访问权限：



termux-setup-storage

Allow当系统提示授予 Termux 访问您设备存储的权限时点击。

步骤4：安装Node.js

运行以下命令安装 Node.js：



pkg install nodejs

#To check node version
node -v

步骤 5：使用 Vite 创建 React 应用程序

运行以下命令使用 Vite 搭建 React 应用程序：



npm create vite@latest <your_app_name> -- --template react

系统将提示您安装 Vite。安装完成后，请下载必要的依赖项并通过运行以下命令启动开发服务器：



#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

复制开发服务器的 URL 并在设备的浏览器中打开它。你应该会在手机上看到类似下面的屏幕：

步骤6：安装Acode

Acode 是一款流行的文本编辑器，广泛用于 Android 上的编程。您可以从 Android Play 商店下载它。

使用 Acode 开发 Todo 应用程序

要构建 Todo 应用程序，首先必须将项目导入 Acode 编辑器。

将项目导入Acode

启动 Acode 应用程序，然后按照以下步骤导入您的 React 应用程序：

步骤 1：点击应用程序左上角的汉堡菜单

包含按钮的菜单open Folder应从左侧滑入

第 2 步：点击Open Folder按钮

第 3 步：点击Add a storage按钮

Select folder将会Folder name出现一个带有两个输入字段的弹出窗口。

步骤 4：点击select folder输入字段

这将打开您的设备文件管理器。

第五步：点击手机左上角的汉堡菜单

Termux 将作为滑入菜单上的存储选项之一出现。

步骤 6：点击 Termux 存储选项

这将显示 Termux 存储目录中可用的文件夹。点击您的项目文件夹，然后点击Use this folder屏幕底部的按钮。

点击Allow提示授予 Acode 访问项目文件夹中文件的权限。

点击OK后您将返回，step 3但和输入字段均已Select folder填写Folder name必要的详细信息。

这应该会带您回到step 1并显示您的项目文件夹。

步骤 7：点击您的项目文件夹

进入项目文件夹后，单击屏幕右下角的复选标记。

点击OK提示确认是否希望 Acode 列出项目文件夹中的文件。

现在您应该看到 Acode 编辑器中列出的项目文件夹中的文件，如下所示：

构建 Todo 应用

步骤 1：创建一个新的组件文件夹

要创建新文件夹，只需点击目录右侧的烤肉串菜单src。

然后点击NEW FOLDER显示的菜单上的。输入文件夹名称Ok后点击。您的新文件夹应该会出现在目录下。componentssrc

步骤2：创建三个新组件

您正在创建三个新组件：Input、Todos和TodoItem。要在目录中创建新文件components，请点击文件夹右侧的 kebab 菜单components，然后点击选项。输入文件名后NEW FILE点击。OK

步骤 3：编辑App.jsx文件

在编辑器中打开该App.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

步骤4：编辑Input.jsx文件

在编辑器中打开该Input.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;

步骤5：编辑Todos.jsx文件

在编辑器中打开该Todos.jsx文件，将下面的代码粘贴到文件中，然后保存。



import TodoItem from "./TodoItem"

function Todos({todos}){

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

export default Todos

步骤 6：编辑TodoItem.jsx文件

在编辑器中打开TodoItem.jsx组件，粘贴下面的代码，然后保存。



function TodoItem({todo}) {

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

export default TodoItem

步骤 7：添加 CSS 样式

您将对脚手架项目自带的默认样式进行细微更改。App.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;
}

打开index.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;
  }
}

如果您正确地遵循了说明，您应该会在浏览器中看到下面的图像。

配置 Git 和 GitHub

GitHub 是最受欢迎的基于 Web 的仓库托管平台git。您需要先安装并配置 GitHub，git然后才能从 Termux 将仓库推送到 GitHub。请按照以下步骤配置git并连接到 GitHub：

步骤 1：安装git并gh

GIT 是一个广泛使用的版本控制系统，常用于软件开发和其他协作项目。
它gh帮助我们从 termux 终端访问 GitHub 功能，例如拉取请求、问题和其他 GitHub 概念。

按下键盘上的停止开发服务器ctrl + c。然后运行以下命令进行git安装gh：



pkg install git gh

第 2 步：添加 Git 用户凭证

要使用git，您首先必须git通过向中添加用户凭据来表明您的身份git。运行以下命令将您的用户名和电子邮件地址添加到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

步骤3：初始化git

运行以下命令来初始化并将文件提交到git



#Initialize git
git init

#To add your files to git
git add .

#To commit all changes to git
git commit -m "initial commit"

步骤 4：使用 GitHub 进行身份验证

运行以下命令来验证您的帐户：



gh auth login

按照提示通过 GitHub 验证您的帐户。

步骤 5：将本地存储库推送到 GitHub

要将本地存储库添加到 GitHub，只需按照此处的说明操作即可。

如果您正确地遵循说明，则刷新浏览器后，您的项目就会出现在您的 GitHub 存储库中。

调试应用程序

让我们学习如何通过使按钮delete发挥作用来在 Android 设备上调试 React 应用程序。

打开TodoItem.jsx文件，将以下代码粘贴到其中，然后保存文件。



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

该TodoItem.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

如果您点击该delete按钮，您会注意到todo由于代码错误，它并未按预期被删除。通常，当您在计算机上构建 Web 应用程序时遇到错误时，您会打开浏览器的 DevTools 来查看控制台中记录的错误消息，这将有助于您修复错误。但是，由于您是在 Android 手机上进行开发，无法访问传统的浏览器 DevTools，您该如何调试这个问题呢？您可以按照以下步骤使用 Android 手机调试您的 React 应用程序：

步骤1：下载Eruda

Eruda 是一款类似浏览器的应用程序，可让您通过 Android 手机访问计算机上的传统浏览器 DevTools。您可以从Google Play 商店下载该应用程序。

第二步：在Eruda浏览器中打开开发URL

只需从设备浏览器复制开发 URL 并在 Eruda 浏览器应用程序中打开它。

步骤 3：点击delete按钮

点击delete按钮后，您会注意到 Eruda 浏览器中会打开一个开发者工具，并在 Eruda 控制台中记录一条错误消息。Eruda 浏览器开发者工具包含您在 Android 上调试应用程序所需的基本工具。

步骤 4：修复错误

根据控制台中的错误消息，该delete按钮未按预期运行，因为未定义setTodos所使用的函数handleDeleteTodo。要修复此错误，只需将函数setTodos作为 prop 从App组件传递到Todo组件即可。



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

然后，您还可以将该setTodos函数作为 prop 传递给TodoItem组件：



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

该TodoItem组件现在应如下所示：



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

该delete按钮现在应该可以按预期工作。

结论

在 Android 手机上构建 Web 应用程序并非易事。根据您选择的 Android 代码编辑器，您可能会错过自动完成、IntelliSense 以及其他通常在桌面代码编辑器中提供的强大功能。但是，我希望您从本文中获得的知识（从构建 React 应用程序到在 GitHub 上共享它们以及在 Android 手机上调试 React 应用程序）能够让这一切变得更容易一些。

链接：https://dev.to/andrewezeani/how-to-build-react-applications-using-an-android-phone-a-step-by-step-guide-4amh