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

在上一篇文章中，我们创建了第一个应用程序并删除了所有我们不需要的文件，并创建了一些我们将来需要的文件。现在，当我们处于当前情况时，我们面前有一块空白画布，我们必须在其中创建我们的计算器应用程序。

在开始实际开发之前，让我们首先计划一下我们将在本文中介绍的方向。在继续开发背后的逻辑之前，本文将介绍计算器基本结构的开发。

从计算器开始，让我们首先通过在calculator.js中创建一个计算器类来创建计算器组件，在我们导入react之后，我们不需要在这个文件中渲染任何东西，所以我们不会导入react-dom。我们也会将模块导出为默认值。作为成员函数，我们将创建一个虚拟的 render()函数。添加后，代码如下。

// Import React (Mandatory Step).
import React from 'react';
  
// Create a Class Component Calculator.
class Calculator extends React.Component {
    render()
    {
        return "GeeksforGeeks Calculator";
    }
}
  
// Export Calculator.
export default Calculator;

现在我们已经创建了计算器的主干，让我们首先创建小组件，这将使它看起来更接近计算器。让我们从计算器标题组件开始。该组件将仅显示将由其父级使用道具传递的标题。因此，为了简单起见，我们将只导入 react，我们将使用粗箭头方法创建一个功能组件，最后将整个模块导出为默认值。对于标题，我们将使用 div 并传入值。以下将是我们在calculatorTitle.js中编码的内容。

// Import React (Mandatory Step).
import React from 'react';
  
// Create Functional Component.
// Takes title as props.value.
const CalculatorTitle = (props) => {
  return (
    

      { props.value } 
    
  )
}
  
// Export Calculator Title.
export default CalculatorTitle;

接下来我们将开发 OutputScreen 本身。正如我们所讨论的，我们将需要屏幕的两个部分，每个输出和输入一个，我们将需要组件屏幕行。
现在这个屏幕行组件是一个相当简单的组件，它将显示传递给它的任何内容。因此，为简单起见，我们将只导入 react，我们将使用粗箭头方法创建一个功能组件，最后将整个模块导出为默认值。对于屏幕行，我们将使用一个输入字段并将其设为只读，以便用户无法修改该值。以下将是我们在outputScreenRow.js文件中的代码。

// Import React (Mandatory Step).
import React from 'react';
  
// Functional Component.
// Used to show Question/Answer.
const OutputScreenRow = () => {
  return (
    

      
    
  )
}
  
// Export Output Screen Row.
export default OutputScreenRow;

所以我们已经创建了OutputScreenRow 组件，现在我们知道我们的Screen 本身就是一个由两个OutputScreenRow 组成的组件。所以我们将导入 React 和我们刚刚创建的 OutputScreenRow 组件，我们不需要在这个文件中渲染任何东西，因此我们不需要 react-dom。 OutputScreen 本身只是一个简单的组件，用作 OutputScreeRows 的容器，因此我们将使用粗箭头方法将其创建为功能组件，我们将添加一个由两个 OutputScreenRow 组件组成的渲染函数，最后我们将导出它作为默认值。编码完成后，文件outputScreen.js将如下所示。

// Import React (Mandatory Step).
import React from 'react';
// Import Output Screen Row.
import OutputScreenRow from './outputScreenRow.js';
  
// Functional Component.
// Use to hold two Screen Rows.
const OutputScreen = () => {
  return (
    

      
      
    
  )
}
  
// Export Output Screen.
export default OutputScreen;

现在我们已经创建了屏幕部分，剩下的就是键盘。键盘将是一组按钮。现在，每个按钮都是独立的组件，因此现在我们需要开发 Button 组件。与其他组件类似，我们将只导入 react，我们将再次使用粗箭头方法创建一个功能组件，并将创建渲染函数以返回一个 Button 类型的输入，其值与从父级发送的值一样，最后我们将导出它作为默认导出。完成后，文件button.js的内容将如下所示。

// Import React (Mandatory Step).
import React from 'react';
  
// Create our Button component as a functional component.
const Button = (props) => {
  return (
    
  );
}
  
// Export our button component.
export default Button;

现在我们已经完成了更小的组件的开发，预计可以组装和创建应用程序，使其看起来更像一个计算器。我们将回到我们创建的 Calculator.js 文件，并相应地更新渲染函数。首先，我们将添加计算器的标题，然后添加 Screen 组件。现在我们需要设置我们的键盘。对于我们的键盘，我们将使用按钮行，我们将使用 className 按钮行来区分每一行。因此我们需要导入用户自定义组件CalculatorTitle、OutputScreen 和Button。因此更新后，文件calculator.js将如下所示。

// Imports.
import React from 'react';
import CalculatorTitle from './calculatorTitle.js';
import OutputScreen from './outputScreen.js';
import Button from './button.js';
  
class Calculator extends React.Component {
    render()
    {
    return (
    

    
    

    
    

      
      
      
      
    
    

      
      
      
      
    
    

      
      
      
      
    
    

      
      
      
      
    
    

      
      
    
    
    
    );
  }
}
  
// Export Calculator Component.
export default Calculator;

到目前为止，我们已经创建了所有组件并将它们堆叠在一起以创建基本结构。现在我们只需要在index.js文件中导入计算器并在那里渲染。所以我们需要导入 react 和 react-dom ，我们将使用 ReactDOM 的 render 方法来渲染计算器组件。 index.js 文件的内容如下所示。

import React from 'react';
import ReactDOM from 'react-dom';
import Calculator from './components/calculator.js';
  
// Render the Calculator to the Web page.
ReactDOM.render(, document.getElementById('root'));

在每个步骤之后，我们得到的输出如下图所示。

所以现在我们终于可以在浏览器中看到输出了，但是等一下，这与我们在介绍性文章中向您展示的完全不同！是的，它离完成项目还很遥远，它只是一个准系统结构，它所需要的只是我们将在即将发布的一篇文章中提供的 CSS 修饰，但在此之前，我们必须实现工作逻辑至少在我们将这个死板的设计变成一些引人注目的杰作或至少是一个体面的模型之前，它至少可以工作。

反应JS |计算器应用程序（添加功能）