ReactJS |计算器应用程序（结构）-yiteyi-C++库

在我们以前的在这篇文章中，我们讨论了我们将要开发的一个计算器应用程序，并对我们的最终项目进行了简要介绍。在本文中，我们将着手开始开发我们的第一个应用程序。

null

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

计算器标题 ：这是我们应用程序顶部的标题“Geeksforgeks Calculator”。
输出屏幕 ：这将是我们的输出屏幕，其中显示所有文本。类似于用户将键入的输入和根据用户输入计算的答案。因此，我们可以再次将其分解为两个较小的部分，如下所示：
- 问题输出 ：这将是用户提供的输入。
- 应答输出 ：这将是根据用户输入计算的结果。
按钮：正如您在我们的计算器应用程序的图像中所看到的，我们使用了许多按钮来输入来自“0-9”的数字、操作员、清除屏幕、退格等。

图片[1]-ReactJS |计算器应用程序（结构）-yiteyi-C++库

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

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

create-react-app firstapp

在这里 firstapp ，是我们的react应用程序的名称。你可以为你的申请选择任何你想要的名字，但要确保你的申请名称只能用小写字母。成功执行上述命令后，React将创建一个名为“firstapp”的目录。这个目录将包含我们应用程序的所有文件。下图显示了React为我们的应用程序创建的默认文件 firstapp . 图片[2]-ReactJS |计算器应用程序（结构）-yiteyi-C++库

如上图所示，React为我们创建了许多文件。但我们实际上并不需要所有这些。我们将创建并使用自己的文件。所以，打开 src 目录并删除所有文件，然后用名称索引创建两个新文件。js’和’索引。css’。此外，请转到公共目录，并从中删除所有预先编写的代码 指数html 文件并添加以下代码。

下面是我们的 /公共/索引。html 文件：

                       <!DOCTYPE html>                     
                       <                                  html                                  lang                                  =                                  "en"                                  >                     
                                             <                                  head                                  >                     
                                             <                                  meta                                  charset                                  =                                  "utf-8"                                  >                     
                                             <                                  meta                                  name                                  =                                  "viewport"                                  content="                                  width                                  =                                  device                                  -width,                     
                                             initial-scale                                  =                                  1                                  ,                                  shrink-to-fit                                  =                                  no                                  ">                     
                                             <                                  title                                  >GeeksforGeeks Calculator</                                  title                                  >                     
                                             </                                  head                                  >                     
                                             <                                  body                                  >                     
                                
                                             <!-- This is the element where our entire                     
                                             app will be rendered -->                     
                                             <                                  div                                  id                                  =                                  "root"                                  ></                                  div                                  >                     
                                
                                             </                                  body                                  >                     
                       </                                  html                                  >                     

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

计算器 ：这将是父组件，代表整个计算器应用程序。
计算器 ：此组件将用于呈现应用程序顶部的标题“Geeksforgeks Calculator”。
输出屏幕 ：此组件将用于屏幕上显示的所有文本。
OutputScreenRow ：该组件将用于输出类型，即输入文本和计算结果。
按钮：此组件将用于应用程序中的所有按钮。

现在让我们创建一个名为组件在我们的 src 文件夹，并在此文件夹中为上述组件创建四个文件。这些文件的名称将与组件名称相同，第一个字母为小写。创建所有文件后，我们的项目目录将如下图所示：图片[3]-ReactJS |计算器应用程序（结构）-yiteyi-C++库

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

ReactJS |计算器应用程序（建筑用户界面）

文章版权归作者所有，未经允许请勿转载。

THE END

技术文章