Cómo construir una aplicación de contador simple en React

React es una de las bibliotecas JavaScript front-end más populares. Muchas empresas utilizan React para desarrollar sus interfaces de usuario y ha ganado gran popularidad entre los desarrolladores.

Es fácil crear un programa simple con React, como esta aplicación de contador básica. Comenzar con un tutorial sencillo lo ayudará a comprender algunos de los conceptos básicos pero importantes de React.

Características de la aplicación Counter

En este proyecto, va a desarrollar una aplicación de contador con las siguientes características:

1. Botón Aumentar conteo : Esto aumentará el conteo en uno.
2. Botón de disminución de conteo : Esto disminuirá el conteo en uno.
3. Botón de reinicio : Esto pondrá el conteo a cero.

Conceptos básicos de React

Antes de continuar, debe comprender algunos de estos conceptos básicos en React que usará en este proyecto:

1. Componentes : los componentes son los componentes básicos de las aplicaciones React. Contienen código independiente y reutilizable. Usando componentes, puede dividir la interfaz de usuario en partes separadas. Luego puede reutilizar esas partes y trabajar con ellas de forma independiente.
2. Estado : en React puede usar un objeto para almacenar datos que representan el estado de un componente. Esto permite que los componentes administren y actualicen sus propios datos. El estado de un componente determina cómo se representa y se comporta.
3. Componentes funcionales : el componente funcional de React es simplemente una función de JavaScript que acepta accesorios como argumento y devuelve un elemento React (JSX).
4. Accesorios : puede usar accesorios, abreviatura de «propiedades», para pasar datos de un componente principal a un componente secundario. Los accesorios son una de las partes integrales de React y puede usarlos para realizar varias operaciones en React.
5. Hooks : los Hooks de React son funciones integradas que le permiten administrar el estado y otras funciones de React, como los métodos del ciclo de vida dentro de los componentes funcionales. También pueden ayudarlo a escribir código claro y conciso. Pronto verá cómo puede administrar el estado con el gancho useState() .

Paso 1: Configuración del proyecto

Abra su terminal y ejecute el siguiente comando para comenzar:

npx create-react-app react-counter-app

Esto creará una nueva aplicación de reacción, lista para que comiences a construir tu proyecto. Generará una estructura de sistema de archivos con varios archivos y carpetas.

Ejecute el siguiente comando en la terminal para iniciar el servidor de desarrollo:

npm start

Ese comando debería abrir una nueva pestaña en su navegador, apuntando a http://localhost:3000. Todos los cambios que realice en el proyecto se actualizarán automáticamente aquí.

Paso 2: Creando el Esqueleto de la Aplicación de Contador

Abra el archivo src/App.js y elimine todo el código predeterminado que está presente allí. Ahora, crea un esqueleto de la aplicación usando el siguiente código:

import React, { useState } from "react";


function App() {
  const [count, setCount] = useState(0);
  let incrementCount = () => {
 // To add later
  };
  let decrementCount = () => {
 // To add later
  };
  let resetCount = () => {
  // To add later
  }

export default App;

La primera instrucción importa el enlace useState del módulo de reacción . Úselo para crear el estado de conteo e inicialícelo a 0. Puede cambiar el valor del conteo usando la función setCount .

Más adelante utilizará las funciones incrementCount , decrementCount y resetCount para aumentar, disminuir y restablecer el valor del contador.

Puede notar los corchetes { } usados ​​alrededor de la variable de conteo en el marcado. Básicamente, esto le permite al analizador JSX saber que debe tratar el contenido dentro de esas llaves como JavaScript.

Paso 3: agregar la funcionalidad a la aplicación de contador

Debe crear tres botones para implementar la funcionalidad de la aplicación de contador: el botón de conteo decreciente, el botón de conteo de incremento y el botón de reinicio. Agregue el siguiente código dentro de los botones div:

<Button title={"Decrement"} action={decrementCount} />
<Button title={"Increment"} action={incrementCount} />
<Button title={"Reset"} action={resetCount} />

Al hacer clic en estos botones, se ejecutarán las funciones decrementCount , incrementCount y resetCount . Tenga en cuenta que está pasando el título y los accesorios de acción del componente principal de la aplicación al componente secundario del botón .

Actualice estas funciones en el archivo App.js con el siguiente código:

let incrementCount = () => {
  setCount(count + 1);
};


let decrementCount = () => {
  setCount(count - 1);
};

let resetCount = () => {
  setCount(0);
}

La función setCount actualizará el estado del conteo .

Tenga en cuenta que aún no ha creado el componente Botón. Cree una nueva carpeta de componentes en el directorio src y luego cree un nuevo archivo llamado Button.js . Es una buena práctica mantener todos los componentes en la misma carpeta.

Agregue el siguiente código en el archivo components/Button.js :

import React from "react";


function Button(props) {
    let { action, title } = props;
    return <button onClick={action}>{title}</button>;
}

export default Button;

El componente Button recibe datos a través de props. Luego, la función desestructura estos accesorios en variables separadas, usándolos para completar el marcado que devuelve.

El código reutiliza este componente tres veces para crear los botones de incremento, disminución y reinicio.

Finalmente, importe el componente Botón en la parte superior de la página App.js usando el siguiente código:

import Button from "./components/Botton";

Así es como se verá el código final en el archivo App.js :

import React, { useState } from "react";
import Button from "./components/Button";


function App() {
  const [count, setCount] = useState(0);

export default App;

Siga las mejores prácticas de reacción

Puede escribir código React de diferentes maneras, pero es importante estructurarlo de la manera más limpia posible. Esto asegurará que pueda mantenerlo fácilmente y puede ayudar a mejorar el rendimiento general de su aplicación.

Puede seguir varias prácticas de React recomendadas por la comunidad de React, como evitar el código repetitivo, escribir pruebas para cada componente de React, usar la desestructuración de objetos para accesorios y seguir las convenciones de nomenclatura.