反应JS |计算器应用程序（结构）

在我们之前的文章中，我们谈到了我们将要开发的计算器应用程序，并且还看到了我们最终项目的一瞥。在本文中，我们将准备好开始开发我们的第一个应用程序。

我们之前也说过，我们将在 React 中开发的每个应用程序都将由称为组件的部分组成。我们可以看到一个 UI 被分解为多个单独的部分，称为组件，并独立处理它们并将它们全部合并到一个父组件中，这将是您的最终 UI。所以现在让我们尝试将计算器 App 的 UI 分解成更小的部分。将 UI 分解成小块后，我们会得到以下元素：

• 计算器标题：这是我们应用程序顶部的标题，“GeeksforGeeks 计算器”。
• 输出屏幕：这将是我们的输出屏幕，将显示所有文本。就像用户将键入的输入和从用户输入计算的答案一样。因此，我们可以再次将其分解为两个较小的部分，如下所示：
  • 问题输出：这将是用户给出的输入。
  • 答案输出：这将是根据用户输入计算的结果。
• 按钮：正如您在我们的计算器应用程序的图像中看到的那样，我们使用了很多按钮来输入“0-9”、运算符、清除屏幕、退格等。

因此，上面显示的元素是我们可以破坏完整计算器应用程序的最小元素。所以我们将为这些元素中的每一个创建组件。因此，正如我们已经看到了我们的应用程序的结构，让我们迈出开发它的第一步。我们将从一开始就在这个项目中做一些事情，即通过创建一个反应应用程序，构建单个组件等。

现在让我们使用 create-react-app 命令创建我们的应用程序。打开终端并输入以下命令：

create-react-app firstapp

这里firstapp是我们的 react 应用程序的名称。您可以为您的应用程序选择任何您想要的名称，但请确保您的应用程序的名称只能是小写字母。成功执行上述命令后，React 将创建一个名为“firstapp”的目录。该目录将包含我们应用程序的所有文件。下图显示了 React 为我们的应用程序firstapp创建的默认文件。

现在，如上图所示，React 为我们创建了许多文件。但我们实际上并不需要所有这些。我们将创建和使用我们自己的文件。因此，打开src目录并删除所有文件并创建两个名为“index.js”和“index.css”的新文件。此外，转到公共目录并从index.html文件中删除所有预先编写的代码，并将以下代码添加到其中。

下面是我们的/public/index.html文件：

所以，我们已经完成了我们的应用程序的设置，现在让我们开始创建我们的组件。正如我们上面所讨论的。我们总共需要四个组件，如下所示：

1. Calculator ：这将是父组件，并将代表整个 Calculator 应用程序作为一个整体。
2. CalculatorTitle ：该组件将用于在我们的应用程序顶部呈现标题，“GeeksforGeeks Calculator”。
3. OutputScreen ：此组件将用于屏幕上显示的所有文本。
4. OutputScreenRow ：该组件将用于输出类型，即输入文本和计算结果。
5. Button ：该组件将用于我们应用程序中的所有按钮。

现在让我们在src文件夹中创建一个名为components的新文件夹，并在该文件夹中为上述组件创建四个文件。这些文件的名称将与组件名称相同，第一个字母为小写。创建所有文件后，我们的项目目录将如下图所示：

因此，到目前为止，我们已经创建了我们的计算器应用程序的基本结构。但到目前为止，我们还没有编写任何代码，也没有设计任何东西。在我们的下一篇文章中，我们将开始为我们的组件编写代码，并将创建我们的计算器应用程序的设计。

反应JS |计算器应用程序（构建 UI）