En el artículo anterior , creamos nuestra primera aplicación y eliminamos todos los archivos que no necesitábamos y creamos algunos de los archivos que necesitaremos en el futuro. Ahora que estamos en nuestra situación actual, tenemos un lienzo en blanco ante nosotros donde tendremos que crear nuestra aplicación de calculadora.
Antes de pasar a desarrollar algo, planeemos primero la dirección que cubriremos en este artículo. El artículo cubrirá el desarrollo de la estructura básica de la calculadora antes de pasar al desarrollo de la lógica subyacente.
Para comenzar con la Calculadora, primero creemos el componente de la Calculadora creando una clase de calculadora en la calculadora.js después de importar la reacción, no necesitamos renderizar nada en este archivo, por lo que no importaremos react-dom. También exportaremos el módulo como predeterminado. Como función miembro, crearemos una función render() ficticia. Después de la adición, el código será el siguiente.
// 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;
Ahora que hemos creado la columna vertebral de nuestra Calculadora, primero creemos los componentes pequeños que harán que se vea un poco más cerca de ser una calculadora. Comencemos con el componente Título de la calculadora. Este componente solo mostrará el título que pasará por su elemento principal mediante accesorios. Entonces, en aras de la simplicidad, importaremos solo reaccionar, crearemos un componente funcional usando el método de flecha gruesa y finalmente exportaremos todo el módulo como predeterminado. Para el título, usaremos un div y pasaremos el valor. Lo siguiente será lo que codifiquemos en la calculadoraTitle.js .
// Import React (Mandatory Step).
import React from 'react';
// Create Functional Component.
// Takes title as props.value.
const CalculatorTitle = (props) => {
return (
<div className="calculator-title">
{ props.value }
</div>
)
}
// Export Calculator Title.
export default CalculatorTitle;
A continuación, desarrollaremos el propio OutputScreen. Como hemos discutido, necesitaremos dos segmentos de la pantalla, uno para cada salida y entrada, necesitaremos la fila de la pantalla del componente.
Ahora bien, este componente de fila de pantalla es un componente bastante sencillo que mostrará todo lo que se le pase. Entonces, para simplificar, importaremos solo reaccionar, crearemos un componente funcional utilizando el método de flecha gruesa y finalmente exportaremos todo el módulo como predeterminado. Para la fila de la pantalla, usaremos un campo de entrada y lo haremos de solo lectura para que el usuario no pueda modificar el valor. Lo siguiente será lo que codificaremos en el archivo outputScreenRow.js .
// Import React (Mandatory Step).
import React from 'react';
// Functional Component.
// Used to show Question/Answer.
const OutputScreenRow = () => {
return (
<div className="screen-row">
<input type="text" readOnly/>
</div>
)
}
// Export Output Screen Row.
export default OutputScreenRow;
Así que hemos creado el componente OutputScreenRow, ahora sabemos que nuestra pantalla será un componente en sí mismo que constará de dos OutputScreenRows. Por lo tanto, importaremos React y el componente OutputScreenRow que acabamos de crear, no necesitamos renderizar nada en este archivo, por lo que no necesitaremos react-dom. El OutputScreen en sí mismo es solo un componente simple que se utilizará como contenedor de OutputScreeRows, por lo tanto, lo crearemos como un componente funcional utilizando el método de flecha gruesa y agregaremos una función de representación que constará de dos componentes OutputScreenRow y finalmente exportaremos por defecto. Una vez completada la codificación, el archivo outputScreen.js se verá así.
// 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 (
<div className="screen">
<OutputScreenRow/>
<OutputScreenRow/>
</div>
)
}
// Export Output Screen.
export default OutputScreen;
Ahora que hemos creado la parte de la pantalla, lo que queda es el teclado. El teclado será un conjunto de botones. Ahora, cada uno de estos Botones serán componentes independientes, por lo que ahora necesitamos desarrollar el componente Botón. De manera similar a los otros componentes, solo importaremos reaccionar, nuevamente crearemos un componente funcional usando el método de flecha gruesa y crearemos la función de renderizado para devolver una entrada de tipo Botón con el valor enviado desde el padre, y finalmente exportaremos como exportación predeterminada. Una vez finalizado, el contenido del archivo button.js tendrá el siguiente aspecto.
// Import React (Mandatory Step).
import React from 'react';
// Create our Button component as a functional component.
const Button = (props) => {
return (
<input
type="button"
value={props.label}
/>
);
}
// Export our button component.
export default Button;
Ahora que hemos completado el desarrollo de los componentes más pequeños, se espera ensamblar y crear la aplicación para que se parezca más a una calculadora. Volveremos al archivo Calculator.js que creamos y actualizaremos la función de representación en consecuencia. En primer lugar, agregaremos el título de la calculadora seguido del componente Pantalla. Ahora tenemos que configurar nuestro teclado. Para nuestro teclado, usaremos filas de botones y usaremos la fila de botones className para distinguir cada fila de la otra. Por lo tanto, necesitamos importar los componentes definidos por el usuario CalculatorTitle, OutputScreen y Button. Por lo tanto, después de la actualización, el archivo calculadora.js tendrá el siguiente aspecto.
// 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 (
<div className="frame">
<CalculatorTitle value="GeeksforGeeks Calculator"/>
<div class="mainCalc">
<OutputScreen/>
<div className="button-row">
<Button label={'Clear'}/>
<Button label={'Delete'}/>
<Button label={'.'}/>
<Button label={'/'}/>
</div>
<div className="button-row">
<Button label={'7'}/>
<Button label={'8'}/>
<Button label={'9'}/>
<Button label={'*'}/>
</div>
<div className="button-row">
<Button label={'4'}/>
<Button label={'5'}/>
<Button label={'6'}/>
<Button label={'-'}/>
</div>
<div className="button-row">
<Button label={'1'}/>
<Button label={'2'}/>
<Button label={'3'}/>
<Button label={'+'}/>
</div>
<div className="button-row">
<Button label={'0'}/>
<Button label={'='}/>
</div>
</div>
</div>
);
}
}
// Export Calculator Component.
export default Calculator;
Hasta ahora hemos creado todos los componentes y los hemos apilado para crear la estructura básica. Ahora solo necesitamos importar la calculadora en el archivo index.js y renderizar allí. Entonces necesitaremos importar react y react-dom y usaremos el método render de ReactDOM para renderizar el componente de la calculadora. El contenido del archivo index.js se muestra a continuación.
import React from 'react';
import ReactDOM from 'react-dom';
import Calculator from './components/calculator.js';
// Render the Calculator to the Web page.
ReactDOM.render(<Calculator />, document.getElementById('root'));
Siguiendo cada uno de los pasos, el resultado que obtenemos se muestra en la siguiente figura.
Así que ahora finalmente podemos ver el resultado en nuestro navegador, pero espera, ¡esto no se parece en nada a lo que te mostramos en el artículo introductorio! Sí, no está ni cerca de ser el proyecto terminado, es más bien una estructura básica y todo lo que necesita son los retoques de CSS que proporcionaremos en uno de los próximos artículos, pero antes de eso, tenemos que implementar la lógica de trabajo. de esta calculadora para que al menos funcione antes de que transformemos este diseño rígido en alguna obra maestra llamativa o al menos en un modelo decente.