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 Diminuir Contagem: Isso diminuirá a contagem em um.
3. 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:

1. Componentes
   instagram viewer
   : 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 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.
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. 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 use props para executar várias operações no React.
5. ganchos: React Hooks são funções internas que permitem que você gerencie 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 utilizado neste projeto está disponível em um Repositório GitHub e é gratuito para você usar sob a licença do MIT.

Passo 1: Configurando o Projeto

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

npx criar-react-app react-counter-app

Isso vai criar um novo aplicativo de reação, pronto para você começar a construir 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 começar

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 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:

importar Reagir, { useState } de"reagir";
funçãoAplicativo() {
const [count, setCount] = useState(0);
deixar incrementCont = () => {
// Para adicionar mais tarde
 };
deixar decrementContagem = () => {
// Para adicionar mais tarde
 };
deixar resetCont = () => {
// Para adicionar mais tarde
 }
retornar (
<divnome da classe="aplicativo">
<p>Contagem: {contagem}p>
<divnome da classe="botões">
div>
div>
);
}
exportarpadrão Aplicativo;

A primeira declaração importa o useState gancho do reagir módulo. Use-o para criar o contar state e inicialize-o com 0. Você pode alterar o valor do contar usando o setCount função.

Você vai usar o incrementCount, decrementCount, e resetCount funções mais tarde 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 botões div:

<Botãotítulo={"Decrementar"} Ação={decrementCount} />
<Botãotítulo={"Incremento"} Ação={incrementCount} />
<Botãotítulo={"Reiniciar"} Ação={resetCount} />

Ao clicar nesses botões, o decrementCount, incrementCount, e 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:

deixar incrementCont = () => {
 setCount (contagem + 1);
};
deixar decrementContagem = () => {
 setCount (contagem - 1);
};
deixar resetCont = () => {
 setCount (0);
}

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

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.

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

importar Reagir de"reagir";
funçãoBotão(adereços) {
deixar { ação, título } = adereços;
retornar<botãoao clicar={Ação}>{título}botão>;
}
exportarpadrão Botão;

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:

importar Botão de"./components/botton";

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

importar Reagir, { useState } de"reagir";
importar Botão de"./componentes/Botão";
funçãoAplicativo() {
const [count, setCount] = useState(0);
deixar incrementCont = () => {
 setCount (contagem + 1);
 };
deixar decrementContagem = () => {
 setCount (contagem - 1);
 };
deixar resetCont = () => {
 setCount (0);
 }
retornar (
<divnome da classe="aplicativo">
<p>Contagem: {contagem}p>
<divnome da classe="botões">
<Botãotítulo={"Decrementar"} Ação={decrementCount} />
<Botãotítulo={"Incremento"} Ação={incrementCount} />
<Botãotítulo={"Reiniciar"} Ação={resetCount} />
div>
div>
 );
}
exportarpadrão Aplicativo;

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, escrevendo testes para cada componente React, usando desestruturação de objetos para props e seguindo a nomenclatura convenções.