Como construir um aplicativo de contador simples em React

React é uma das bibliotecas JavaScript front-end mais populares. Muitas empresas usam o React para desenvolver suas interfaces de usuário e ganhou grande popularidade entre os desenvolvedores.

É fácil criar um programa simples com o React, como este aplicativo básico de contador. Começar com um tutorial direto ajudará você a entender alguns dos conceitos básicos, mas importantes, do React.

Funcionalidades do aplicativo Contador

Neste projeto, você desenvolverá um aplicativo contador com as seguintes características:

1. Botão Aumentar Contagem : Isso aumentará a contagem em um.
2. Botão de diminuir a contagem: isso diminuirá a contagem em um.
3. Botão Redefinir : Isso definirá a contagem para zero.

Conceitos Básicos de Reação

Antes de prosseguir, você precisa entender alguns desses conceitos básicos no React que você usará neste projeto:

1. Componentes : os componentes são os principais blocos de construção dos aplicativos React. Eles contêm código independente e reutilizável. Usando componentes, você pode dividir a interface do usuário em partes separadas. Você pode reutilizar essas peças e trabalhar com elas de forma independente.
2. Estado : No React, você pode usar um objeto para armazenar dados que representam o estado de um componente. Isso permite que os componentes gerenciem e atualizem seus próprios dados. O estado de um componente determina como ele é renderizado e se comporta.
3. Componentes funcionais : o componente funcional do React é simplesmente uma função JavaScript que aceita props como um argumento e retorna um elemento React (JSX).
4. Props : você pode usar props – abreviação de “propriedades” – para passar dados de um componente pai para um componente filho. Props são uma das partes integrantes do React e você pode usar props para realizar várias operações no React.
5. Hooks : React Hooks são funções integradas que permitem gerenciar o estado e outros recursos do React, como métodos de ciclo de vida dentro de componentes funcionais. Eles também podem ajudá-lo a escrever um código conciso e claro. Em breve você verá como pode gerenciar o estado com o hook useState() .

Passo 1: Configurando o Projeto

Abra seu terminal e execute o seguinte comando para começar:

npx create-react-app react-counter-app

Isso criará um novo aplicativo de reação, pronto para você começar a criar seu projeto. Ele irá gerar uma estrutura de sistema de arquivos com vários arquivos e pastas.

Execute o seguinte comando no terminal para iniciar o servidor de desenvolvimento:

npm start

Esse comando deve abrir uma nova guia em seu navegador, apontando para http://localhost:3000. Todas as alterações que você fizer no projeto serão atualizadas automaticamente aqui.

Etapa 2: Criando o esqueleto do aplicativo contador

Abra o arquivo src/App.js e exclua todo o código padrão que está presente lá. Agora, crie um esqueleto do aplicativo usando o seguinte 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;

A primeira instrução importa o hook useState do módulo react . Use-o para criar o estado de contagem e inicializá-lo como 0. Você pode alterar o valor da contagem usando a função setCount .

Você usará as funções incrementCount , decrementCount e resetCount posteriormente para aumentar, diminuir e redefinir o valor do contador.

Você pode observar as chaves { } usadas em torno da variável de contagem na marcação. Isso essencialmente permite que o analisador JSX saiba que deve tratar o conteúdo dentro dessas chaves como JavaScript.

Etapa 3: Adicionando a Funcionalidade ao Aplicativo de Contador

Você precisa criar três botões para implementar a funcionalidade do aplicativo contador: o botão de contagem decrescente, o botão de contagem de incremento e o botão de reinicialização. Adicione o seguinte código dentro do div dos botões :

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

Ao clicar nesses botões, as funções decrementCount , incrementCount e resetCount serão executadas. Observe que você está passando as props title e action do componente App pai para o componente Button filho .

Atualize essas funções no arquivo App.js com o seguinte código:

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


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

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

A função setCount atualizará o estado da contagem .

Observe que você ainda não criou o componente Button. Crie uma nova pasta de componentes no diretório src e crie um novo arquivo chamado Button.js . É uma boa prática manter todos os componentes na mesma pasta.

Adicione o seguinte código no arquivo components/Button.js :

import React from "react";


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

export default Button;

O componente Button recebe dados por meio de props. A função então estrutura essas props em variáveis ​​separadas, usando-as para preencher a marcação que ela retorna.

O código reutiliza esse componente três vezes para criar os botões de incremento, decremento e redefinição.

Por fim, importe o componente Button na parte superior da página App.js usando o seguinte código:

import Button from "./components/Botton";

É assim que o código final ficará no arquivo App.js :

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


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

export default App;

Siga as melhores práticas de reação

Você pode escrever o código React de diferentes maneiras, mas é importante estruturá-lo da forma mais limpa possível. Isso garantirá que você possa mantê-lo facilmente e pode ajudar a melhorar o desempenho geral do seu aplicativo.

Você pode seguir várias práticas React recomendadas pela comunidade React, como evitar código repetitivo, escrever testes para cada componente React, usar desestruturação de objeto para props e seguir convenções de nomenclatura.