Módulo 4 PROJETO

Atividade 17: O Contador Interativo

Todo Desenvolvedor React começa construindo um Contador. Vamos colocar o State num nível numérico!

🎯 Objetivos desta aula

✓ Manipular Estados contendo Números Inteiros
✓ Fazer Cálculos matemáticos Dinâmicos: Valor Atual + 1
✓ Trabalhar layout de múltiplos botões em linha

🔢 Matemática e Estados

A beleza de criar uma variável mágica chamando useState(0) é que passamos um zero (sem aspas!) para dizer que o valor será puramente Numérico. Isso abre as portas para cálculos de adição, subtração e multiplicação através do click do usuário.

Qual a Cobaia Genética do Teste?

Se nossa var for const [numero, setNumero] = useState(0), ao chamarmos o botão de SOMAR o que devemos pedir para ele executar?

✖ setNumero( 1 ): Errado! Pois se apertarmos o botão de novo... vai ser cravado em '1' de novo e nunca saírá do 1.
✖ setNumero( numero++ ): Errado! É proíbido tentar autointar (++) a variável de Estado em React! Quebra proteção de leitura!
✅ setNumero( numero + 1 ): Perfeito! Lemos a variável velha, somamos um Math, e empurramos o RESULTADO disso fresco como valor inteiro novo para ela usar nas próximas vidas dela.

💻 Construindo o Contador

Abra o seu Snack/AppJS e analise a estrutura do aplicativo perfeito de Contador:

App.js

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

export default function Contador() {
  // Estado inicializado como 0 (Zero numérico)
  const [contador, setContador] = useState(0);

  // Criamos as funções de inteligência fora do HTML Base!
  function aumentar() {
    setContador(contador + 1);
  }

  function diminuir() {
    setContador(contador - 1);
  }

  function zerar() {
    setContador(0); // Apenas sobrepõe com 0 fixamente
  }

  return (
    <View style={styles.container}>
       <Text style={styles.titulo}>Meu Contador</Text>
       
       {/* Aqui enfiamos O VALOR BIGODES na Tela */}
       <Text style={styles.numeroDisplay}> {contador} </Text>
       
       {/* Caixa para segurar e alinhar os Botões lado a lado */}
       <View style={styles.linhaDeBotoes}>
       
           <TouchableOpacity style={styles.botaoAumentar} onPress={aumentar}>
             <Text style={styles.textoBotao}>+1</Text>
           </TouchableOpacity>
           
           <TouchableOpacity style={styles.botaoDiminuir} onPress={diminuir}>
             <Text style={styles.textoBotao}>-1</Text>
           </TouchableOpacity>
           
       </View>

       {/* Botão Reset isolado embaixo */}
       <TouchableOpacity style={styles.botaoReset} onPress={zerar}>
          <Text style={styles.textoBotao}>Zerar Sistema</Text>
       </TouchableOpacity>
       
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#1e293b', alignItems: 'center', justifyContent: 'center' },
  titulo: { color: 'white', fontSize: 24, fontWeight: 'bold' },
  numeroDisplay: { fontSize: 80, fontWeight: '900', color: '#38bdf8', marginVertical: 40 },
  
  linhaDeBotoes: { flexDirection: 'row', gap: 20, marginBottom: 40 }, // ROW para alinhá-los lado o Lado
  
  botaoAumentar: { backgroundColor: '#10b981', padding: 20, borderRadius: 10, minWidth: 80, alignItems: 'center' },
  botaoDiminuir: { backgroundColor: '#ef4444', padding: 20, borderRadius: 10, minWidth: 80, alignItems: 'center' },
  botaoReset:    { backgroundColor: '#64748b', padding: 15, borderRadius: 10, paddingHorizontal: 40 },
  
  textoBotao: { color: 'white', fontWeight: 'bold', fontSize: 24 }
});

🎮 Desafios Práticos

Mão na massa!

DESAFIO 1

Modificar Pulos 🛠️

O botão "Aumentar" hoje pula de 1 em 1. Altere a função aumentar para que ele some `+10` toda vez que você o clicar.
Teste e veja a magia da matematica instantânea ocorrendo na tela!

DESAFIO 2

Trava de Valores 🚀

Adicionando lógica IFs dentro do Controle React.

Um contador não deveria ter números negativos de estoque.
Vá na função `diminuir()`. Adicione um `if(contador > 0) { ... set ... }`.
Tente clicar no -1 no celular. Ao chegar em 0 ele não vai deixar diminuir mais! Muito bem, criamos um guarda!

📝 Quiz - Lógica de Contadores

Anterior ← Atividade 16 Próxima Atividade 18: Input de Teclado →