10 posts tagged with "reactjs"

Este é um tutorial pra quem, assim como eu, adora trabalhar com o Docusaurus e quer utilizar todos os recursos do Tailwind CSS.

Bom, não da pra ficar criando CSS na mão toda vez que foi alinhar uma div, gerar bordas arredondas e várias outras coisas que são repetitivas. Sem contar no tempo que isso leva e que poderíamos estar focando no que realmente importa, realizando alguma entrega, criando algo, no meu caso escrevendo escrevendo este conteúdo para vocês =D.

No dia 15/02/24 rolou uma atualização no blog react.dev com novos conteúdo e novidades do React que devem ser lançadas no final de 2024.

Trago aqui um resumo do que foi publicado:

React Compiler​

Atualmente, para realizar memoização e evitar que o React realize muitos re-renders desnecessários é preciso aplicar algumas técnicas de memoização de forma manual, utilizando hooks como useMemo, useCallback e a api memo.

Essa abordagem funciona mas pode levar a vários erros, esquecimento, aplicação incorreta e até mesmo a perda de performance. É uma abordagem manual e que exige um conhecimento a mais de como cada etapa do React funciona.

Sendo assim, o time Core acredita que é possível que o React realize o re-render somente em partes que realmente precisam ser atualizadas, sem a necessidade de utilizar hooks de memoização. Por isso o time Core está desenvolvimento um novo compilador para o React.

O compilador React vai ser capaz de compilar código seguramente levando em consideração duas regras, as regras do JavaScript e do React.

Um exemplo disto é que um componente React precisa ser idempotente, ou seja, dado um input com mesmo valor ele deve ter uma saída igual e não pode sofrer mutações de estado ou propriedades.

Caso queira saber mais como o compilador funciona, acesse este vídeo.

Actions​

Uma solução para envio de dados do cliente para o servidor são os Server Actions, dessa maneira é possível executar alterações no banco de dados através dos dados de um formulário. Durante o desenvolvimento de Server Actions o time Core do React está extendendo esse suporte de APIs para que seja possível realizar manipulações de dados em aplicações client-only.

Essa abordagem é referida apenas como Actions. Que permite passar funções para um elemento DOM, como um formulário <form />

<form action={search}>
  <input name="query" />
  <button type="submit">Search</button>
</form>

A função action pode trabalhar assíncronamente ou sincronamente. Quando utilizar uma action, o React vai gerenciar o ciclo de vida e envio dos dados através de hooks como useFormStatus, e useFormState, que permitem acessar o estado de uma ação de um formulário.

Por padrão, as Actions são enviandos utilizando transation, mantendo a UI responsiva e sem bloqueios.

Como Actions suportam eventos async o React vai ser capaz de validar se a requisição está pendente isPending, permitindo controle pelo desenvolvedor(a) de como a UI deve se comportar.

Também está sendo adicionado uma feature chamada useOptimisticpara gerenciamento de estados otimistas, que permite que a UI seja atualizada antes mesmo da requisição ser completada.

Isso permite que seja inserido um estado final aos dados do cliente, assumindo que o envio dos dados foram realizados com sucesso, e reverter para o valor do dado recebido pelo servidor. Essa abordagem funciona utilizando async/await, da mesma forma que já realizado um fetch do lado do cliente ou através de um Server Action do lado do servidor.

React Canary​

Features como esta podem ser testadas através do React Canary, que é uma versão do React que permite testar novas features antes mesmo delas serem lançadas oficialmente.

React Server Components, Asset Loading, Document Metadata e Actions estão disponíveis para testes no React Canary.

Conclusão​

As atualizações do React são promissoras e trazem grandes benefícios para o desenvolvimento de aplicações web. É importante se manter atualizado e testar as novas features para aproveitar ao máximo todo o potencial do React.

As atualizações prometem simplificar o desenvolvimento de aplicações React, tornando-o mais eficiente e performante, além de evitar erros humanos e perda de performance.

As features ainda em desenvolvimento podem sofrer alterações antes do lançamento oficial. É importante avaliar a necessidade de cada feature antes de implementá-la em um projeto.

Referência​

• React Blog

ReactJS Hooks use [Experimental]

Olá jovens gafanhotos, seguindo a trilha de artigos a respeito dos Hooks, neste artigo irei falar sobre o use. Um Hook que está em fase experimental e deve estar disponível em breve no React.

Esse hook pode ajudar bastante o nosso dia-a-dia porque atualmente a quantidade de código escrito para resolver uma promise é bem grande. Mas não apenas isso.

E para demonstrar como o hook funciona realizando uma comparação com o estado atual eu criei um projeto simples demonstrando algunas cartas do jogo Hearthstone.

ReactJS Hooks

Olá jovens gafanhotos, seguindo a trilha de artigos a respeito dos Hooks, neste artigo irei falar sobre o useEffect.

O useEffect (hook de efeito) é um Hook para ficar ouvindo as alterações que são realizadas no componente. Com ele podemos interagir com algumas funções do ciclo de vida do React, bem como era feito utilizando classes.

ReactJS Hooks

Olá jovens gafanhotos, hoje vou falar um pouco sobre os HOOKs, como funcionam e quando utilizá-los.

A funcionalidade de Hooks foi adiciona no React na versão 16.8, onde foi criado a possibilidade de utilizar o estado da aplicação e outras features do React sem a necessidade de criar um escopo de classe. Um breve exemplo de componente com escopo de classe:

Hello =D

Bom, neste post vou falar um pouco sobre como utilizar CSS com React.

Neste exemplo, vou utilizar a lib create-react-app para construir a base inicial do projeto.