Como construir um aplicativo de contador simples em React

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:

  • Botão Aumentar Contagem: Isso aumentará a contagem em um.
  • Botão Diminuir Contagem: Isso diminuirá a contagem em um.
  • Botão de reset: Isso definirá a contagem como 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:

  • 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.
  • Estado: No React você pode usar um objeto para armazenar dados representando 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.
  • Componentes Funcionais: o componente Funcional do React é simplesmente uma função JavaScript que aceita props como um argumento e retorna um elemento React (JSX).
  • Adereços: 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.
  • ganchos: 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 useState() gancho.

O código usado neste projeto está disponível em um repositório GitHub e é gratuito para você usar sob a licença MIT.

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 Todas as alterações que você fizer no projeto serão atualizadas automaticamente aqui.

Etapa 2: Criando o esqueleto do aplicativo contador

Abra o src/App.js arquivo 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 = () => {

  };
  let decrementCount = () => {

  };
  let resetCount = () => {
  
  }

return (
  <div className=”app”>
    <p>Count: {count}</p>
    <div className=”buttons”>
    </div>
  </div>
);
}

export default App;

A primeira declaração importa o useState gancho do reagir módulo. Use-o para criar o contar estado e inicializá-lo como 0.

Contudo você pode alterar o valor do contar usando o setCount função.

Você vai usar o incrementCount, decrementCounte resetCount funções mais tarde para aumentar, diminuir e redefinir o valor do contador.

Entretanto 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 botões div:

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

Ao clicar nesses botões, o decrementCount, incrementCounte resetCount as funções serão executadas. Note que você está passando o título e Ação adereços do pai Aplicativo componente para a criança Botão componente.

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

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

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

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

O setCount função irá atualizar o estado do contar.

Entretanto observe que você ainda não criou o componente Button. Crie um novo componentes pasta no origem diretório e, em seguida, crie um novo arquivo chamado Button.js. É uma boa prática manter todos os componentes na mesma pasta.

Contudo adicione o seguinte código no componentes/Button.js arquivo:

import React from "react";

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

export default Button;

De fato o Botão componente recebe dados via 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 do App.js página usando o seguinte código:

import Button from "./components/Botton";

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

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

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

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

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

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

  return (
    <div className=”app”>
        <p>Count: {count}</p>
        <div className=”buttons”>
          <Button title={“Decrement”} action={decrementCount} />
          <Button title={“Increment”} action={incrementCount} />
          <Button title={“Reset”} action={resetCount} />
        </div>
      </div>
  );
}

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.

Assim isso garantirá que você possa mantê-lo facilmente e pode ajudar a melhorar o desempenho geral do seu aplicativo.

De fato 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.

Similar Posts