Postagens

Criar Componente no React js

Imagem
REACT JS · TUTORIAL PARA INICIANTES Como Criar Componentes no React JS: Guia Passo a Passo com Exemplos Você já percebeu que vários sites possuem botões, cartões, menus e formulários parecidos? O React permite criar essas partes separadamente e reutilizá-las em diferentes lugares. Neste tutorial, você vai aprender o que são componentes no React, como criá-los, como enviar informações para eles e como organizar seu código. 1. O que é um componente no React? Um componente é uma pequena parte da interface de um site. Ele pode representar um botão, um cartão de produto, um menu de navegação ou até uma página inteira. Imagine que você está construindo uma casa com blocos de montar. Em vez de fabricar cada parede do zero, você cria blocos e os utiliza várias vezes. No React, os componentes funcionam de maneira parecida. Exemplo do cotidiano: imagine uma loja virtual com 20 produtos. Todos precisam mo...
Postar um comentário
Leia mais

useLayoutEffect do react js

Imagem
  REACT JS · HOOKS Como funciona o useLayoutEffect do React JS? Guia completo com exemplos Você já precisou descobrir o tamanho de um elemento HTML antes de mostrar a tela ao usuário? Ou quis posicionar um menu exatamente ao lado de um botão, sem que ele aparecesse primeiro no lugar errado? É nesse tipo de situação que o useLayoutEffect do React pode ajudar. Neste artigo, você vai aprender o que ele faz, como funciona por trás dos panos, quando utilizá-lo e qual é a diferença entre ele e o useEffect . O que você vai aprender: O que é o useLayoutEffect e para que serve. Como medir elementos HTML usando React. Como evitar que um elemento apareça momentaneamente no lugar errado. Qual é a diferença entre useLayoutEffect e useEffect . Quais erros evitar ao utilizar esse Hook. 1. O que é o useLayoutEffect? O useLayoutEffect é um Hook do React que permite execu...
Postar um comentário
Leia mais

useTransition do react js

Imagem
  React.js · Hooks · Performance Como funciona o useTransition do React? Aprenda com exemplos práticos Você já clicou em um botão de um site e percebeu que a página ficou lenta enquanto o React tentava atualizar a tela? O hook useTransition ajuda a organizar esse trabalho para que as atualizações menos urgentes não atrapalhem as interações mais importantes. Neste tutorial, você vai aprender o que é o useTransition, como ele funciona por trás dos panos, quando utilizá-lo e como evitar os erros mais comuns. Tudo com exemplos de código em React e JavaScript. Neste artigo O que é o useTransition? Qual problema ele resolve? Como funciona por trás dos panos? Sintaxe do useTransition Exemplo 1: atualizar uma lista Exemplo 2: alternar entre telas Para que serve o isPending? O que faz o startTransition? Erros comuns Boas práticas Exercício prático...
Postar um comentário
Leia mais