image

Acesse bootcamps ilimitados e +650 cursos

50
%OFF
Article image

TS

Thiago Souza20/07/2024 00:33
Compartilhe

Desvendando os Hooks do React: Introdução e Primeiros Passos

  • #React

🌟 Introdução

Se você está começando com React ou já está no meio do caminho, provavelmente já ouviu falar dos Hooks. Mas o que exatamente são eles e por que todo mundo fala sobre isso? Vamos explorar juntos de maneira simples e divertida!

image

Hooks são como superpoderes que você pode dar aos seus componentes no React. Eles permitem que você use estado e outras funcionalidades do React sem precisar escrever classes. É como dar habilidades especiais ao seu código para que ele possa fazer mais coisas de forma mais simples e eficiente!

image

Hooks servem para várias coisas legais, como gerenciar o estado do seu componente, lidar com efeitos colaterais , e até mesmo criar seus próprios Hooks personalizados. Eles fazem seu código ficar mais limpo e fácil de entender, porque você pode usar essas funcionalidades diretamente nos componentes funcionais.

📚 Cite exemplos

🗂️ useState

O Hook `useState` é como uma caixinha que guarda informações. Você pode colocar coisas nela e pegar essas coisas depois.

javascript

import React, { useState } from 'react';

function Contador() {   const [contagem, setContagem] = useState(0);

  return (    

     

Você clicou {contagem} vezes

      <button onClick={() => setContagem(contagem + 1)}>Clique aqui    
  ); }


useEffect

O Hook `useEffect` é como um ajudante que faz coisas quando o componente aparece na tela ou muda. Pense nele como alguém que coloca a mesa para o jantar e depois limpa tudo.

javascript

import React, { useState, useEffect } from 'react';

function Relogio() {   const [hora, setHora] = useState(new Date().toLocaleTimeString());

  useEffect(() => {     const timer = setInterval(() => {       setHora(new Date().toLocaleTimeString());     }, 1000);     return () => clearInterval(timer); // Limpa o intervalo quando o componente é desmontado   }, []);

  return

Hora atual: {hora}

; }


🌐 useContext

O Hook `useContext` é como um grande baú de tesouros onde você pode guardar e acessar dados de qualquer lugar do seu app.

javascript

import React, { useContext, createContext } from 'react';

const TemaContext = createContext('claro');

function TemaBotao() {   const tema = useContext(TemaContext);   return <button style={{ background: tema === 'claro' ? '#fff' : '#333', color: tema === 'claro' ? '#000' : '#fff' }}>Tema {tema}; }

function App() {   return (     <TemaContext.Provider value="escuro">           </TemaContext.Provider>   ); }


🔑 Hooks Essenciais

Aqui estão alguns Hooks essenciais que você deve conhecer:

  • useState: para gerenciar estado.
  • useEffect: para lidar com efeitos colaterais.
  • useContext: para acessar contextos.
  • useReducer: para gerenciar estado complexo.
  • useRef: para acessar e manipular elementos DOM diretamente.

image

Gostou de aprender sobre Hooks? Então me siga no Linkedin para mais dicas e truques sobre React e outras tecnologias incríveis!

🔥 Ferramentas de produção:

Imagens geradas por: I.A. lexica.art

Editor de imagem: Power Point

Conteúdo gerado por: ChatGPT 

Revisões Humanas: Thiago Souza

#ReactHooks #DesenvolvimentoWeb #AprendizadoTecnológico

Compartilhe
Comentários (0)