04.Hooks(useState).md

Hooks e Eventos em React 🪝✨

O que são Hooks? 🤔

Podemos entender os Hooks do React como funcionalidades que permitem a manipulação mais fácilmente diversos recursos do React em componentes de função. Permitindo que você use-os de uma maneira mais direta e menos complicada do que seria possível em componentes de classe.

Introdução aos Hooks em React 🚀

Introduzidos no React 16.8 (lançado em fevereiro de 2019), os Hooks representaram uma verdadeira revolução na criação de componentes. Antes dos Hooks, os componentes de função eram muito limitados, sem acesso a recursos básicos como estado e ciclo de vida. Com os Hooks, agora é possível usar diversas funcionalidades nos componentes de função, que facilitam muito a implementação das lógicas de seu código.

O Hook useState 🪝

No React, o estado (ou state) é um valor ou propriedade de um componente que pode ser alterado durante seu ciclo de vida. O estado é usado para armazenar dados que são interativos e reativos a ações do usuário podendo mudar ao longo do tempo, como o número de itens em uma lista, a posição de um elemento na tela, inserções de texto, incrementação de valores, entre outros...💡

👉 Por exemplo, se você tem um aplicativo com um contador que aumenta a cada clique em um botão, o número sendo contado é armazenado no estado. Cada clique atualiza o estado e o componente é renderizado novamente para mostrar o novo número.

Diferente de variáveis comuns em JavaScript (var, let, const) que não as usamos em React, o estado em React é gerenciado pelo hook useState(), que retorna um array com dois elementos: o valor atual do estado e uma função para atualizar esse valor.

Exemplo de useState em React 👨‍💻

const [valor, setMudancaValor] = useState(0); // Isso é um estado (variável) em React

Eventos em React 🎉

Antes de colocarmos o useState em prática devemos conhecer os eventos, que são fundamentais para interagir com o usuário. Eles são semelhantes aos eventos do DOM (Document Object Model) em JavaScript puro, mas com algumas diferenças na sintaxe e funcionamento.

Evento onClick 👆

Um dos eventos mais comuns é o onClick, usado para acionar funções no momento dos cliques do usuário em alguma tag. Vamos entender como ele funciona:

export default function App() {

const handleClick = () => {
    console.log("Botão clicado!"); // irá mostrar no console a mensagem: 'Botão clicado'
  };

  return <button onClick={() => handleClick()}>Clique em mim</button>;
}

Neste exemplo acima, quando o botão é clicado, a função handleClick é chamada, imprimindo uma mensagem no console. No React, o nome dos eventos é escrito no padrão camelCase, diferente do JavaScript puro onde são em letras minúsculas (por exemplo, onclick).

Retomando o useState com Eventos em React 🔄

Agora que entendemos o que são eventos, podemos voltar para o useState.

Como estávamos falando, o useState permite que um valor seja atualizado e modificado no momento da interação do usuário. Para tornar essa atualização de valor mais dinâmica, utilizamos eventos.

Eventos e useState 🤹‍♂️

Eventos são frequentemente usados em conjunto com o estado. Por exemplo, você pode atualizar o estado do componente em resposta a um evento de clique:

Neste exemplo, cada vez que o botão é clicado, o estado contagem é atualizado, e o componente é renderizado novamente com o novo valor.

import { useState } from "react";
//Devemos sempre importar o Hook do React para conseguirmos utiliza-lo

function Contador() {

  // Aqui estamos criando um estado(variável) chamada 'contagem' e o método 'setContagem' será responsável por atualizar esse estado, que começa com o valor 0
  const [contagem, setContagem] = useState(0);

  // Essa função será a responsável
  const add = () => setContagem(contagem + 1);

  return (
    <div>
      <p>Você clicou {contagem} vezes</p>
      {/*Aqui no botão está sendo passado o evento que chamará a função*/}
      <button onClick={() => add()}>Clique aqui</button>
    </div>
  );
}

Neste exemplo acima, cada vez que o botão é clicado, o estado contagem é atualizado, e o componente é renderizado novamente com o novo valor. Esta interação demonstra a poderosa combinação entre eventos e o gerenciamento de estado no React.

Mais exemplos com useState e Eventos:

Mudança de Texto🌟

import { useState } from "react";

function MudarTexto() {

  // Estado para armazenar um texto
  const [texto, setTexto] = useState("Olá");

  // Função para mudar o texto
  const alterarTexto = () => setTexto("Mundo");

  return (
    <div>
      <p>Texto: {texto}</p>
      {/* Botão para alterar o texto */}
      <button onClick={alterarTexto}>Mudar Texto</button>
    </div>
  );
}

Alteração de Cor🎨

import React, { useState } from "react";

function MudarCor() {

  // Estado para armazenar a cor
  const [cor, setCor] = useState("Vermelho");

  // Função para mudar a cor
  const mudarParaAzul = () => setCor("Azul");

  return (
    <div>
      <p>Cor: {cor}</p>
      {/* Botão para mudar a cor para Azul */}
      <button onClick={mudarParaAzul}>Mudar para Azul</button>
    </div>
  );
}

---

Conclusão 🏁

A combinação de useState com eventos em React é fundamental para criar interfaces interativas e reativas. Essa técnica não só capacita os componentes para responderem dinamicamente às ações dos usuários, mas também ajuda a manter o código organizado e eficiente.

À medida que você pratica, verá que se torna cada vez mais confortável utilizando Hooks em seus projetos React. Isso abre um leque de possibilidades para explorar suas capacidades, permitindo a criação de componentes funcionais robustos, eficientes e, acima de tudo, elegantes. Lembre-se, a prática leva à perfeição!

🚀 Bons códigos e vamos para os exercícios! 📚👨‍💻

Exercícios - Clique aqui!

Próxima matéria - Clique aqui!