DEV Community: Guilherme Selair

Interceptando Requisições com DevTools

Guilherme Selair — Thu, 24 Oct 2024 12:00:00 +0000

Salve Salve! 🖖

Como mencionei no primeiro artigo da série, a ferramenta que usamos todos os dias como dev frontend é o navegador. Esta série de artigos tem como objetivo revelar explicações e funcionalidades escondidas dentro dele.

Muitas vezes, precisamos desenvolver o frontend de uma aplicação enquanto o backend ainda está em construção. Para esses casos, a funcionalidade de sobrescrita de respostas e headers HTTP pode ser uma grande aliada.

Este post não é uma documentação oficial nem pretende cobrir tudo. Ele traz a minha visão sobre a funcionalidade e como ela pode facilitar o nosso dia a dia como devs.

Introdução

Essa ferramenta do DevTools permite interceptar requisições HTTP e modificar seu conteúdo e cabeçalhos. Com ela, você consegue testar diferentes cenários e desenvolver sua aplicação frontend mesmo que a API ainda não esteja pronta, desde que o contrato de comunicação entre as pontas esteja definido.

Como usar?

Aqui vai um guia básico para ativar e aproveitar essa funcionalidade:

Abra o Chrome DevTools
- Pressione F12 ou clique com o botão direito no site e selecione “Inspecionar”.
No painel Network
- Selecione a requisição que você deseja modificar, clique com o botão direito e escolha a opção “Substituir conteúdo” ou “Substituir cabeçalho”.
- Na primeira vez que você fizer isso, será necessário escolher uma pasta no seu sistema para armazenar os arquivos com os conteúdos fictícios.
No painel Sources
- Caso tenha selecionado “Substituir conteúdo”, insira o conteúdo que será retornado na resposta da requisição.
Pronto! Agora é só utilizar.

Obs: Vale ressaltar que, enquanto houver alguma substituição ativa, o cache local é desativado.

Show me the code!

Para exemplificar como essa ferramenta funciona, vou interceptar um endpoint que ainda não está pronto e fazer com que ele retorne uma resposta fictícia para testar o preenchimento dos campos de um formulário no frontend.

Abaixo, vemos que esse endpoint ainda não existe, e por isso a API está retornando um 404:

O endpoint em questão busca os detalhes de uma despesa específica e preenche os campos do formulário de edição na tela.

Selecionando a requisição que queremos modificar e clicando em “Substituir conteúdo”, colamos um conteúdo fictício de uma despesa, respeitando o contrato da API. Pronto!

Nem preciso dizer que há muitas outras possibilidades de uso para essa ferramenta, como testar diferentes tipos de erros, onde cada um exibe uma mensagem diferente na tela, entre outros cenários.

Obs: Vale um lembrete rápido: sempre que o DevTools estiver fechado, as requisições funcionam normalmente. Elas só serão afetadas quando o DevTools estiver aberto.

Top demais!! 😻

E aí, curtiu? Espero que essa funcionalidade de sobrescrita ajude a simplificar seus testes e simulações no dia a dia. Se ficou alguma dúvida ou quiser trocar ideias, manda aí nos comentários que a gente continua a conversa!

See you soon!

Referências

Documentação oficial: Chrome DevTools Overrides

Automatizando Formulários com DevTools

Guilherme Selair — Fri, 18 Oct 2024 12:40:00 +0000

Salve Salve! 🖖

Uma das ferramentas mais utilizadas no dia a dia do dev frontend é o navegador. Por isso, é importante conhecê-lo bem e conseguir extrair o máximo de seu potencial. Este é o primeiro artigo da série Explorando seu navegador.

Meu objetivo aqui é compartilhar com vocês um pouquinho do que sei sobre a funcionalidade de gravação do DevTools e como ela pode nos ajudar a automatizar processos repetitivos.

⚠️ Este post não serve como documentação oficial e não tem o objetivo de ser o mais completo possível. Ele representa apenas a minha visão sobre a funcionalidade.

Introdução

O DevTools, ou ferramentas de desenvolvimento, está presente em todos os principais navegadores, como Firefox, Edge e Safari, mas hoje vamos focar no Chrome DevTools. Isso porque o Google Chrome é o navegador mais utilizado no mundo, responsável por cerca de 63% do tráfego global da internet. Ele permite aos desenvolvedores inspecionar, editar e depurar o código de suas aplicações web em tempo real.

Você já deve ter se cansado de preencher os mesmos formulários repetidamente durante o desenvolvimento de uma aplicação web, e é aí que entra a funcionalidade de “Gravador”. Ela permite capturar as interações com o seu site, como cliques, preenchimento de formulários e navegações. Depois, você pode reproduzir essas interações em uma simulação real, ideal para testes repetitivos ou demonstrações.

Como Usar?

Aqui vai um passo a passo rapidinho para começar a automação dos seus formulários:

Abra o Chrome DevTools
- Aperte F12 ou clique com o botão direito no site e escolha “Inspecionar”.
Acesse a aba Gravador
- Com o DevTools aberto, vá para a aba Gravador (Recorder). Se não estiver vendo, clique nos três pontinhos à direita das abas e ative-a!
Inicie uma nova gravação
- Clique em Nova Gravação. Nomeie como quiser e pronto, já pode começar a registrar!
Preencha o Formulário
- Faça suas interações normalmente. A cada clique, o DevTools estará capturando seus passos, desde o preenchimento de campos de texto até o clique em botões de envio.
Finalizou? Pare e Reproduza!
- Quando terminar, clique em Parar. Agora você pode ver o passo a passo do que gravou e reproduzi-lo quantas vezes quiser.

Show me the code!

Vou exemplificar como funciona na prática no formulário de criação de despesas da aplicação finance-app. Primeiro, seguindo os passos acima, iniciamos a gravação e preenchemos o formulário manualmente.

Após terminar de preencher o formulário, basta clicar no botão “Encerrar gravação” para que a automação do formulário esteja pronta. Agora, toda vez que você precisar testar esse formulário, é só clicar na gravação realizada e dar play.

Show! Claro, este formulário é pequeno, mas para formulários grandes isso é uma mão na roda! Há outras opções que também podem ser exploradas, como adicionar alguma limitação de rede durante a reprodução da gravação.

👉🏻 Todas as opções disponíveis você pode conferir na documentação oficial da funcionalidade (link)

Nem preciso falar das outras possibilidades de uso que essa funcionalidade oferece, né? Utilizei o preenchimento de formulários como exemplo real, mas ela se encaixa muito bem para automações em geral dentro da aplicação, até mesmo em testes E2E.

Top demais!! 😻

Chegamos ao fim de mais um post e então, gostou?

Espero ter conseguido te apresentar algo novo e interessante para usar em seus projetos no dia a dia. Achou que eu falei algo errado? Ficou com dúvidas? Vamos discutir melhor nos comentários.

See you soon!

Referências

Documentação oficial: https://developer.chrome.com/docs/devtools/recorder/overview?hl=pt-br

Propriedade as em componentes React com Typescript

Guilherme Selair — Tue, 13 Dec 2022 00:17:37 +0000

Salve Salve! 🖖

Vou compartilhar com vocês o pouquinho que eu sei sobre tipagens condicionais e espero conseguir fazer você entender mais sobre isso.

Nota

Este post não serve de documentação e não tem como objetivo ser o mais completo possível. Ele representa apenas a minha visão sobre a utilização de conditional types que obtive ao longo do tempo.

Introdução

Não é de hoje que o Typescript vem se tornando cada vez mais utilizado no cenário do frontend, muitos devs já começam seus projetos já com o Typescript habilitado (eu sou assim).

Dando uma breve contextualizada. Typescript é um linguagem de programação fortemente tipada construída encima do Javascript. Tipar variáveis, objetos, funções, etc facilita demais no descobrimento de propriedades durante o desenvolvimento.

Tipagens condicionais não são comumente utilizadas porém há casos de uso que elas se encaixam muito bem. Como o proprio nome já diz tudo, se trata de uma tipagem baseada em uma condição. Vou te mostrar um caso de uso que eu acho muito legal em um contexto react, é um pouquinho mais avançado mas espero conseguir explicar direitinho 😀

Show me the code!

Sem mais enrolação vamos desenvolver durante este post a tipagem da propriedade as do componente Button em react. Você já deve ter se deparado com algum componente de uma biblioteca de componentes como ChakraUI e MaterialUI a utilização dessa propriedade.

Não pretendo implementar exatamente igual a essas bibliotecas mas vou exemplificar aqui como fazer uma tipagem condicional básica para satisfazer o componente. Basicamente o componente Button poderá receber o nome de um elemento HTML que será o utilizado como wrapper dentro do componente.

Abaixo temos o código do componente sem tipagens:

const Button = (({ as, children, ...restProps }) => {
  const Element = as || "button";
  return (
        <Element {...restProps}>{children}</Element>
    );
})

export const App = () => {
    return (
        <Button type="button">Abrir</Button>
    );
}

A partir desse código criaremos nossas tipagens. Vamos começar criando a tipagem do componente Button como queremos utiliza-lo.

interface IButton {
    as: ??;
    icon?: React.Element;
}

Acima temos a interface básica do nosso componente, a gente espera receber a propriedade as com valor do elemento HTML que envolverá nosso botão. Além disso adicionei uma outra propriedade que será opcional mas sem mistérios nela, é só pra exemplificar com outras propriedades.

Desafio

Aqui nos deparamos com nosso desafio. Queremos que quando o código abaixo for chamado:

<Button as="button">Enviar</Button>

No autocomplete das propriedades que este componente pode receber, deverá aparecer as propriedades do elemento HTML que passamos na propriedade as, ou seja, no exemplo, button. Além das outras problemas que colocamos na interface IButton .

Typescript Generics

Precisamos entender mais algumas coisas a mais sobre Typescript. Generics é uma forma de enviar tipos dinâmicos para dentro de alguma interface. Você já deve ter utilizado ele se você já trabalhou com axios. Olha o código abaixo:

await axios.get<IResponseData>('https://github.com/guiselair')

Neste exemplo, foi passado um generic informando qual será a tipagem do retorno da requisição get. Utilizaremos desse principio para construir nossas tipagens condicionais.

Além disso é possível fazer com generics condições, mais ou menos assim, “Se for tal tipo, pega tal tipagem, senao, pega outra” ou até “Se o tipo foi este, pega este tipo”. Não se preocupe que abaixo vou explicar melhor.

Tipando propriedade `as`

Vamos atualizar a interface do IButton:

interface IButton<E extends React.ElementType = React.ElementType> {
    as: E;
    icon?: React.ElementType;
}

Com o tipo acima, agora garantimos que o que for escrito dentro da propriedade as será um elemento HTML válido, caso não for um erro semelhante a este será exibido:

🔥 Type '"div1"' is not assignable to type 'ElementType | undefined’

A primeira parte do nosso desafio esta pronta, tipar a propriedade as . Agora temos que definir as tipagens das propriedade deste componente levando em consideração o valor recebido pelo as .

Tipando `props` do componente Button

Para pegar todas as propriedades do elemento HTML recebido precisamos utilizar um código meio complicadinho de entender mas vamos com calma. O código abaixo, faz uma condicional em formato de generics e caso seja uma das opções (keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>) retorna uma tipagem do tipo JSX.LibraryManagedAttributes .

Segunda a documentação da tipagem, este tipo JSX.LibraryManagedAttributes define uma transformação nas props do componente. Então basicamente, este tipo vai unir outros tipos e retornar uma união entre eles.

type PropsOf<
  E extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>
> = JSX.LibraryManagedAttributes<E, React.ComponentPropsWithRef<E>>;

Obs: Estou simplificando aqui a explicação por dois motivos, este código você não precisara decorar e este é o conhecimento que eu tenho até então sobre isso 😄

Agora que já conseguimos pegar todos os tipos do elemento HTML precisamos mesclar o tipo IButton com as as propriedades do elemento. Para isso vamos criar um novo type:

export type IButtonProps<E extends React.ElementType> = IButton<E> &
  Omit<PropsOf<E>, keyof IButton>;

O código acima extende a interface IButton com o resultado da expressão (Omit<PropsOf<E>, keyof IButton> ). O auxiliar Omit remove da tipagem PropsOf<E> as chaves do tipo IButton para não haver conflitos de nomes de propriedades, isso poderia geral erros no Typescript.

Com este trecho pronto agora basta a gente adicionar este novo tipo como retorno do nosso componente. Isso é feito no trecho de código abaixo:

export const Button = <E extends React.ElementType = "button">({
  as,
  ...restProps
}: IButtonProps<E>) => {
  const Element = as || "button";
  return <Element {...restProps}>{children}</Element>
};

E pronto!! Agora nosso componente já deve aceitar elemento HTML recebidos pela propriedade as e adicionar todas as propriedades deste elemento no nosso componente Button além das nossas propriedades personalizadas.

Abaixo esta o código completo do componente:

import React from "react";

type PropsOf<
  E extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>
> = JSX.LibraryManagedAttributes<E, React.ComponentPropsWithRef<E>>;

export interface IButton<E extends React.ElementType = React.ElementType> {
  as?: E;
  icon?: React.Element;
}

export type IButtonProps<E extends React.ElementType> = IButton<E> &
  Omit<PropsOf<E>, keyof IButton>;

export const Button = <E extends React.ElementType = "button">({
  as,
  ...restProps
}: IButtonProps<E>) => {
  const Element = as || "button";
  return <Element {...restProps} />;
};

Exemplo em execução

Top demais!! 😻

Chegamos ao fim de mais um post e então, gostou?

Espero que eu tenho conseguido ajudar um pouquinho você a compreender melhor o Typescript e tirar sua curiosidade de como pode ser feito a propriedade as que aparece em algumas bibliotecas. Achou que eu falei algo errado? Ficou com dúvidas? Vamos discutir melhor sobre nos comentários.

See you soon!

Referências

Hook useCallback - Entenda quando utiliza-lo?

Guilherme Selair — Tue, 18 Oct 2022 01:18:44 +0000

Salve Salve! 🖖🏻 Voltei depois de muitoooo tempo 😅.

Dessa vez vim falar um pouco sobre um dos famosos hooks do React, useCallback. Percebo que ele gera muita dúvida em quem esta iniciando em React e até mesmo desenvolvedores que já atuam com ele.

A ideia deste post é apresentar um pouco sobre a minha visão deste hook para quem não conhece e esclarecer onde ele pode ser aplicado assim como aplica-lo na pratica.

Este é o começo de uma série de posts falando um pouco mais sobre a minha visão sobre os hooks disponibilizados pelo React.

Nota
Este post não serve de documentação e não tem como objetivo ser o mais completo possível. Ele representa apenas a minha visão sobre a utilização do useCallback que obtive ao longo do tempo.

Introdução

A partir do React 16 foram disponibilizados uma série de hooks nativos que buscam facilitar o desenvolvimento de componentes funcionais. Desses hooks falaremos neste post sobre useCallback.

useCallback

Este hook recebe dois parâmetros, uma função callback e um array de dependências. O seu retorno é uma versão memoizada da função callback recebida como primeiro parâmetro. De forma básica quando me refiro em uma versão memoizada podemos nos referir a uma versão memorizada ou “cacheada” da função.

⛳ Obs: Aqui vale ressaltar um ponto bem importante, o retorno deste hook é uma versão memoizada da função e não do resultado da função. Isso quer dizer que a função só vai ser executada quando você utiliza-la desta maneira: minhaFuncao()

Como este callback é uma versão memoizada é preciso informar quando essa função deve ser recalculada para que valores atualizados sejam utilizados. É por isso que existe o array de dependências passado como segundo parâmetro para hook. Os valores passado dentro deste array são o que fazem a função callback ser recalculada. Normalmente variáveis externas a função de callback que são utilizadas dentro da função, estarão neste array. Caso você não informe as variáveis que são utilizadas dentro da função, a grandes chances delas estarem com seus valores desatualizados quando a função for disparada.

Abaixo temos um exemplo da sintaxe deste hook:

import { useCallback } from 'react';

const handleClick = useCallback(async () => {
    await sendMail(address)
}, [address]);

...

return <button ... onClick={handleSubmit}>Enviar email</button>

Beleza, mas quando utilizar?

Essa é uma pergunta super interessante e importante, porque o uso em excesso ou da maneira incorreta ao utilizar o useCallback pode ser pior que utilizar uma simples função comum.

Este hook vem pra nos ajudar a melhorar a performance de nossas aplicações mas ao mesmo tempo se utilizarmos de maneira incorreta, estaremos adicionando mais passos/lógicas em nossas funções. Isso porque antes de retornar uma versão memoizada da função, o hook faz uma comparação para saber se ele deve ou não recalcular aquela versão para então retornar a versão atualizada do callback.

⛳ Obs: O React já é uma biblioteca muito rápida e eficiente, então em grande parte dos casos, nem iremos notar essas adições de lógicas em nossa aplicação.

Então voltamos a pergunta, quando devo utilizar este hook? A resposta é apenas uma: Quando você precisar manter a igualdade referencial.

Você já deve ter escutado bastante sobre renderizações no universo do React. Quando essas renderizações ocorrem sejam por conta que o componente pai alterou, uma propriedade alterou ou algum estado foi alterado, em todos esses casos os componentes em questão entram em processo de renderização. Isso quer dizer que pelo menos uma comparação entre o componente anterior a renderização e o mesmo componente com os dados alterados é realizada.

Nesse processo novos blocos de memória (referências) são utilizados para atualizar variáveis/funções. E aqui entra um grande ponto se você já testou comparações no Javascript. Pois ao fazer a seguinte comparação:

let a = function(){}
let b = function(){}

a === b // false

Isso retornará false . Essa comparação apenas será true se a referência das funções forem a mesma. Como a gente pode ver abaixo:

Podemos notar que apenas quando atribuímos a variável a a variável b que a comparação entre as duas funções deu true. Ou seja, elas utilizam a mesma referência.

Ter noção disso é muito importante porque pode evitar que algumas renderizações desnecessárias ocorram. E isso não vale somente para funções mas também para objetos e arrays.

Show me the code! 🤖

Vamos parar de papo e mostrar realmente como você deve utilizar este hook. Imagine o seguinte cenário, você tem um hook de autenticação e através dele você disponibiliza duas funções signIn e signOut. Essas funções podem ser envolvidas pelo useCallback, isso porque são funções que serão utilizadas em diversos componentes da aplicação e com isso manter a igualdade referencial dessas funções é importante para que se o nosso hook de autenticação for alterado, todos os componentes que o utilizam também serão re-renderizados.

Abaixo tem um exemplo do cenário ilustrado:

Agora pense em outro cenário: Resolvemos refatorar nosso código e criamos um novo componente para segmentar melhor a lógica. Porém este novo componente terá que atualizar um estado que vai estar em seu componente pai. Para fazer essa atualização, podemos enviar a função que faz essa atualização do pai para o filho e dentro do filho executaríamos esta função passando como parâmetro o valor desejado.
Este é um uso importante do useCallback também. *Funções que são passadas do pai pro filho devem estar envolvidas pelo *hook.
**
Novamente aqui a principal motivação para seu uso é manter a igualdade referencial da função. Para notarmos 100% isso funcionando na prática, vamos ter que utilizar também outro hook do React, o memo.

Obs: Falaremos mais sobre este hook em outro post 😀

Abaixo tem um exemplo do cenário ilustrado:

O código acima tem como retorno os seguintes consoles ao clicar no botão de counter:

Aqui da pra perceber que o “FILHO” só renderizou porque um estado do componente “PAI” foi alterado porém o “FILHO” não recebe o estado que foi alterado. Então você concorda comigo que ele não precisava ser re-renderizado.
Agora se ajustarmos o cenário acima com os hooks useCallback e memo, temos o seguinte resultado ao clicar no botão:

Agora o componente “FILHO” só renderizará novamente quando a versão memoizada da função for atualizada, ou seja, somente quando realmente alguma de suas propriedades alterem. O código com a altera ficou deste jeito:

Top demais! 😍

Eu espero ter ajudado você a entender um pouquinho mais sobre este hook, o que é e quando utilizar. Já passei por essas dúvidas e essas foram as minhas conclusões sobre elas.

Em breve voltarei com outros posts sobre os demais hooks que o React nos dispõem.

Valeeeeu demais pela leitura! Gostou? Ficou com dúvida? Falei alguma coisa errada? Vamos conversar melhor nos comentários

See you soon! 🖖🏻

Referências

Como implementar Dynamic Link com Firebase e React Native

Guilherme Selair — Fri, 27 Aug 2021 02:00:00 +0000

Fala, clã 😎.

Garanto que você já se perguntou como ao clicar em um anúncio em redes sociais você era redirecionado para o aplicativo do anunciante. É exatamente isso que vamos implementar no post de hoje!

Nessa funcionalidade existe, pelo menos, dois casos de uso: Quando o usuário já tens o aplicativo instalado em seu dispositivo e será preciso apenas redireciona-lo para dentro do app. Ou quando o usuário não tens o aplicativos instalado e então será preciso redireciona-lo para a página na loja do aplicativo a ser instalado.

Este comportamento pode ser construído utilizando o Dynamic Links disponibilizado pelo Firebase e serve tanto para dispositivos IOS, Android e WEB.

Neste post abordaremos com mais foco a configuração dessa funcionalidade em dispositivos Android.

Vou mostrar para vocês como é simples e rápido configura-lo! 🔥 Vamos então definir o escopo de nosso exemplo.

Escopo

Teremos duas situações:

Redirecionar para o aplicativo: Quando o app estiver instalado, devemos abri-lo.
Redirecionar para a Play Store: Sem o app instalado, devemos abrir a Play Store. Como nosso app não esta disponível nela, abriremos a página do app da Netflix.

Criando o aplicativo de exemplo 📳

Utilizaremos o aplicativo padrão quando iniciamos um projeto com react-native-cli apenas para não tomarmos muito tempo deste post. O app será semelhante a este:

Configurações no Firebase Console

Com o app criado, agora é preciso entrar no Firebase console e criar um novo projeto.

Logo após o projeto ser criado, vamos adicionar o aplicativo Android que irá ser utilizado nesta prática.

Adicionando um app Android no Firebase

Não se preocupe com esse monte de informações! Vamos ver ponto a ponto. Então bora lá!

Etapa 1

"Nome do pacote do Android": Este é o nome do seu app android, como o próprio nome diz. Este nome esta disponível dentro do arquivo /android/app/build.gradle.

Você vai encontrar o nome da sua aplicação em applicationId.

"Apelido do app": É o nome que você pode dar para seu app dentro do firebase e servirá para identicação dele.

"Certificação de assinatura de depuração SHA-1": Apesar de ser um campo opcional você precisará preenche-lo mais tarde. Neste campo precisamos inserir a chave SHA-1 de certificação do projeto. Para gerarmos a chave acesse a pasta "android" dentro de seu projeto no terminal e execute o seguinte comando.

./gradlew signingReport

A saída deste comando deve ser semelhante a isto:

> Task :app:signingReport
Variant: debug
Config: debug
Store: ~/.android/debug.keystore
Alias: AndroidDebugKey
MD5: A5:88:41:04:8D:06:71:6D:FE:33:76:87:AC:AD:19:23
SHA1: A7:89:E5:05:C8:17:A1:22:EA:90:6E:A6:EA:A3:D4:8B:3A:30:AB:18
SHA-256: 05:A2:2C:35:EE:F2:51:23:72:4D:72:67:A5:6C:8C:58:22:2A:00:D6:DB:F6:45:D5:C1:82:D2:80:A4:69:A8:FE
Valid until: Wednesday, August 10, 2044

Copie a chave SHA-1 gerada e adicione no campo. Logo após você pode processar para a próxima etapa.

Etapa 2

Nessa etapa faça o download do arquivo "google-servces.json" e adicione-o na pasta "/android/app" de seu projeto.

Etapa 3

Nesta etapa siga as instruções apresentadas inserindo os itens em em seus lugares e logo após tudo feito basta avançar para a quarta etapa.

Etapa 4

Esta é a etapa de conclusão. Já podemos voltar para o console e criarmos o link dinâmico.

Configurando o domínio do link dinâmico

Indo até a sessão "Engajamento", selecionamos a opção "Dynamic Links".

A primeira tela será destinada a preencher o domínio que o link ficará registrado. Caso você não tenha um domínio, não se preocupe, basta escrever um domínio de testes único que o firebase disponibilizará. Semelhante ao que esta abaixo:

Logo após concluirmos a seleção de domínio a próxima tela será semelhante a esta:

Será nesta página que realizaremos grande parte das configurações necessárias e também onde ficará todas as estatísticas sobre seus links dinâmicos.

Criando um link dinâmico

Clicando no botão "Novo link dinâmico" será aberto um modal com algumas configurações:

Etapa 1

A primeira etapa para a criação é definir um link "curto" a fim de identificar mais facilmente o link que acabamos de criar.

Etapa 2

Na segunda etapa, vamos definir qual URL deverá ser aberta caso o link seja acessado através de um computador. Devemos adicionar uma URL e um nome identificador para esta URL para posteriormente conseguirmos mensurar a quantidade de cliques nela.

Aqui, como exemplo, vou adicionar a URL da Netflix.

Etapa 3

Na terceira etapa, vamos definir o comportamento do nosso link dinâmico em dispositivos IOS. Temos duas opções, abrir o link em um navegador ou abrir o link em um app IOS. Caso a seleção "abrir no navegador" for marcada, quando um dispositivo IOS acessar o link dinâmico será aberto a URL definida anteriormente no navegador do dispositivo.

Para selecionar a opção abrir no app IOS será preciso cadastrar um aplicativo IOS. Nesse exemplo vamos selecionar a opção do navegador.

Etapa 4

A quarta etapa é bem semelhante a anterior porém para dispositivos Android. Nessa etapa vamos selecionar a opção para abrir no app Android e selecionarmos o aplicativo que criamos no inicio do post.

Como o aplicativo que criamos não está na Play Store, vamos adicionar uma URL personalizada para ser aberta caso no dispositivo não tenha instalado nosso app. Para este exemplo adicionei o link do aplicativo da Netflix no Play Store.

Etapa 5

Vamos pular esta etapa porque ela se destina apenas para rastreamento de campanhas e marketing.

Com isso já podemos concluir a criação de nosso link dinâmico! 🎉🎊 Este é o fluxo de navegação do link.

Etapa 6

Depois de finalizada a configuração no Firebase console, precisamos adicionar o domínio do link dinâmico que acabamos de configurar. Dentro de seu app vamos editar o seguinte arquivo: android/app/src/main/AndroidManifest.xml, nele dentro das tag <intent-filter> adicionamos as seguintes linhas:

<data android:host="DOMINIO_LINK_DINAMICO" android:scheme="http"/>
<data android:host="DOMINIO_LINK_DINAMICO" android:scheme="https"/>

Você deve adicionar o dominio de seu link dinamico sem o protocolo. Você deve inseri-lo da seguinte maneira: seudominio.page.link

Resultado 🚀

Após feito todas as configurações necessárias, basta esperar alguns minutinhos e já testar seu link dinâmico. Para te mostrar como tudo isso que a gente fez funciona, fica abaixo os resultados.

APP DESINSTALADO

Vale ressaltar que o aplicativo que deve ser aberto na loja, pode ser alterado pelo Firebase console.

APP INSTALADO

FICOU MUITO SHOW!!! 😎😍

Espero ter ajudado você a entender melhor como funcionar essa funcionalidade do Firebase e a utilizar ela na prática. Esta é uma alternativa simples, rápida e que precisa de muito pouco código para funcionar, o que a torna incrível!

See you soon! 🤠

REFERÊNCIAS

Criando um Layout Persistente em NextJS

Guilherme Selair — Sat, 22 May 2021 23:44:33 +0000

Como da pra notar pelo outros posts, sempre que tenho que implementar algo novo para mim, eu tento postar aqui para ajudar o máximo de pessoas possível e hoje não é diferente!

Então pega um ☕ e curte o post.

# Introdução

Podemos dizer que temos um layout persistente quando um componente é compartilhado em diversas telas de nossa aplicação sem sofrer re-renderizações pela troca de páginas. De maneira mais clara é quando declaramos apenas uma vez o componente para ser utilizado em parte ou em toda a aplicação. Um exemplo disso é o cabeçalho e o rodapé de um projeto que são normalmente compartilhados em diversas páginas porém declarados um vez.

# Explicando o exemplo 🤯

No exemplo que vamos construir aqui, quero além de exibir o cabeçalho em todas as páginas, quero também só que apenas nas páginas que estão dentro da pasta /pages/minha-conta/* exibam um menu de navegação lateral.

Abaixo há uma imagem para explicar melhor o que será desenvolvido.

# Ao código! 👨‍💻

## Adicionando cabeçalho e entendendo o uso de App

Como estamos usando o nextjs para este exemplo, nosso arquivo _app.js deve ser parecido com esse:

export default function App({ Component, pageProps }) {
  return (
      <Component {...pageProps} />
  );
}

Como você deve saber, toda página que temos em nossa aplicação na hora de sua execução ela será executada como o Component acima.

Por exemplo: temos a página meus-dados.js quando o usuário acessar esta página em seu navegador, o nextjs "enviará" o componente exportado pela página de meus-dados.js para o arquivo _app.js . Neste arquivo obtemos o componente a ser executado e suas propriedades (caso tenha), e em seguida o executamos utilizando <Component /> .

Entendido isso então percebemos que conseguimos envolver este Component com um Fragment Operator para possibilitar a renderização de qualquer outro componente junto com a página em execução.

Portanto conseguimos adicionar um componente que será exibido em todas as páginas de nossa aplicação dessa maneira:

export default function App({ Component, pageProps}) {
  return (
    <> 
          <Header />
        <Component {...pageProps} />
    </> 
  );
}

Show! Cabeçalho adicionado ✅ 👏

## Adicionando menu lateral

Para adicionar o menu lateral somente para as páginas que fazem parte da pasta minha-conta precisamos realizar mais algumas alterações.

A ideia que eu quero aqui é: Declarar apenas uma vez o componente do menu lateral e fazer ele parecer em todas as páginas da pasta minha-conta .

Usarei aqui como exemplo as páginas /pages/minha-conta/meus-dados e /pages/minha-conta/alterar-senha .

Abaixo fica mais claro o nosso objetivo:

Precisamos de um filtro para selecionar em qual tela devemos exibir o menu. Não podemos apenas adicionar o componente junto ao cabeçalho como fizemos acima pois senão o menu seria renderizado em todas as telas.

Vamos então construir um novo componente que envolverá todas as páginas que precisamos e nele adicionarmos o componente de menu. Vou chamar de MyAccountLayout esse componente que criaremos.

import SideMenu from '../_components/SideMenu';

const MyAccountLayout = ({ children }) => (
  <>
    <SideMenu />
    { children }
  </>
);

export default MyAccountLayout;

Como o componente acima servirá como um wrapper precisamos que ele aceite os children que são todos os componentes envolvidos por ele.

Agora em todas as páginas que o menu deve aparecer, devemos adicionar uma propriedade no componente a ser exportado. O nome dessa propriedade pode ser qualquer um, eu vou chamar de layout. É nessa propriedade layout que vamos adicionar o componente MyAccountLayout que criamos acima.

//Página de meus-dados

import MyAccountLayout from '../_layout';

const UserData = () => (
  {...}
);

UserData.layout = MyAccountLayout;

export default UserData;

Para finalizar, no arquivo _app.js vamos criar um componente para receber o conteúdo da propriedade layout caso exista, caso não exista vamos adicionar um Fragment Operator. Além disso vamos envolver o Component pelo componente criado.

export default function App({ Component, pageProps}) {
    const CustomLayout = Component.layout ? Component.layout : React.Fragment;
  return (
    <> 
          <Header />
        <CustomLayout>
        <Component {...pageProps} />
      </CustomLayout>
    </> 
  );
}

Com isso já temos o que queríamos! Menu lateral adicionado apenas nas páginas da pasta minha-conta .

E o melhor, você consegue fazer qualquer outro layout persistente usando esta mesma técnica, basta criar o componente de seu layout e atribui-lo a propriedade layout do componente da página. Show né!

# Conclusão 😻

Chegamos ao fim de mais um post e então, gostou?

Sempre busco explicar o máximo que consigo para que todos que leiam entendam o que estamos fazendo e consigam aplicar em seus projetos.

Sobre a maneira que fizemos o layout persistente, vale salientar que existem inúmeras maneiras de fazer isso, este foi o jeito que mais gostei seguinte as dicas do link nas referências.

See you soon!

# Referências

Persistent Layout Patterns in Next.js

Implementando um scroll infinito em ReactJS

Guilherme Selair — Sat, 08 May 2021 00:00:09 +0000

Salve clã! 😁

Ultimamente tive que adicionar um scroll infinito em uma aplicação e a primeira coisa que veio a cabeça foi procurar uma biblioteca que já tenha implementado isso. Porém me perguntei: Porque não? Porque não implementar esta funcionalidade? e aqui estou 😁.

Introdução

Infinite scroll é uma funcionalidade que ajuda a melhorar a experiência do usuário quando há muitos itens a serem exibidos. Quando o scroll se aproxima ou chega ao final da lista ou página, automaticamente a função que faz a requisição para buscar mais posts é acionada passando a próxima pagina para a rota, sem nem o usuário ter que seleciona-la. Assim que os novos elementos forem recebidos do backend, eles serão concatenados com os que já existiam na lista.

Apesar de substituir a paginação no frontend ainda é preciso dela em seu backend pois a procura por mais posts ocorre pelo incremento das páginas.

Nós conseguimos ver o uso desta estratégia em sites agrupadores de promoção como Promobit e Opa!Ganhei. Além de ser muito utilizada também em redes sociais.

IntersectionObserver API

Para realizar esta funcionalidade utilizaremos uma API nativa do browser para nos auxiliar a monitorar o scroll na tela, chamada IntersectionObserver. Esta API é uma ótima alternativa para gerenciar elementos que vão entrar e sair de outro elemento ou da janela de exibição (viewport) e para quando isto acontecer disparar uma função de callback.
Esta é ferramenta muito vasta, caso queira dar uma lida mais aprofundada deixarei o link da MDN nas referências.

Ao código. 👨‍💻🚀

Utilizarei o projeto desenvolvido durante a NLW 05, para realizar esta funcionalidade.

Para não perdemos tempo com código que não esta relacionado a este post, abaixo estará parte do código desenvolvido no projeto.

export default function Home({ allEpisodes, latestEpisodes }: IHome) {

  return (
    <div className={styles.homepage}>
      <section className={styles.allEpisodes} >
            {...}
          <tbody>
            {allEpisodes.map(episode => (
              <tr key={episode.id}>
                <td style={{width: 72}}>
                  <Image width={120} height={120} src={episode.thumbnail} alt={episode.title} objectFit="cover"/>
                </td>
                <td>
                  <Link href={`/episodes/${episode.id}`}>
                    <a>{episode.title}</a>
                  </Link>
                </td>
                <td>{episode.members}</td>
                <td style={{width: 100}}>{episode.publishedAt}</td>
                <td>{episode.durationAsString}</td>
                <td>
                  <button type="button">
                    <img src="/play-green.svg" alt="Tocar episódio"/>
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>
    </div>
  )
}

export const getStaticProps: GetStaticProps = async () => {
  const { data } = await api.get('episodes', {
    params: {
      _limit: 3,
      _sort:"published_at",
      _order: "desc"
    }
  });
    {...}
    return {
        props: {
            allEpisodes,
            latestEpisodes, 
        }
    }
};

Como estamos em um projeto NextJS, é comum buscar os todos os episódios pelo getStaticProps e o resultado enviarmos para o componente da página. Porém como iremos implementar o infinite scroll, precisamos no inicio buscar somente a primeira página de episódios.

Portanto precisamos adicionar o query param _page=1 para buscarmos a primeira página de episódios.

const { data } = await api.get('episodes', {
    params: {
      _page: 1,
      _limit: 3,
      _sort:"published_at",
      _order: "desc"
    }
  });

Agora dentro do componente da página, precisamos armazenar a variável allEpisodes em um estado, para posteriormente adicionarmos novos episódios a medida com o usuário for descendo a página. Além disso também será necessário criar um estado para armazenar o valor da página atual.

export default function Home({ allEpisodes, latestEpisodes }: IHome) {
const [episodes, setEpisodes] = useState(allEpisodes);
const [currentPage, setCurrentPage] = useState(2);
{...}
}

O IntersectionObserver precisa monitorar um ou mais elementos para detectar se ele está ou não dentro do campo de visão da viewport. Para isso então vamos adicionar ao final da lista de podcasts um elemento HTML para ser observado e nele adicionamos uma referência.

const loadMoreRef = useRef(null);

//NO FINAL DA LISTA DE PODCASTS
<p ref={loadMoreRef}>Carregando mais episodios...</p>

A ideia então é: Sempre que o elemento com a referência loadMoreRef estiver visível precisamos buscar mais episódios, quando não estiver, o usuário não chegou ao final da listagem, portanto nada será feito.

Sintaxe do IntersectionObserver

A sintaxe do IntersectionObserver é a seguinte:

let observer = new IntersectionObserver(callback, options);

Para declararmos nosso observer (observador) será necessário passar ao construtor uma função callback e alguns parâmetros de configuração.

Declarando o observador

Sobre os parâmetros de configuração, você pode ver a descrição completa na MDN da API mas falarei um pouco sobre o threshold que a porcentagem de exibição do elemento observado. Isso quer dizer que, nosso exemplo, somente quando o nosso elemento HTML p for exibido 100% é que será disparada a função callback.

Com o observer declarado será necessário passar nosso elemento que será observado a ele através do método observe.

useEffect(() => {
    const options = {
      root: null,
      rootMargin: "20px",
      threshold: 1.0
    };

    const observer = new IntersectionObserver((entities) => {
      const target = entities[0];

      if (target.isIntersecting){
        setCurrentPage(old => old + 1);
      }
    }, options);

    if (loaderRef.current){
      observer.observe(loaderRef.current);
    }
  }, []);

Função callback

Na função callback recebemos como parâmetro todos os elementos observados em formato de array mas como nós só estamos observando um elemento atribuímos o primeiro campo do array ao target.

Dentro do target temos a propriedade chamada isIntersecting que indica se o elemento observado fez a transição para um estado de interseção ou fora de um estado de interseção. Com isso conseguimos garantir que o elemento entrou na área visível da tela e precisamos buscar mais episódios.

Nessa parte, eu achei melhor fazer a requisição em outro useEffects sempre que o valor da página sofrer alteração.

useEffect(() => {
    const handleResquest = async () => {
      const { data } = await api.get('episodes', {
        params: {
          _page: currentPage,
          _limit: 3,
          _sort:"published_at",
          _order: "desc"
        }
      });

      if (!data.length){
        console.log("Os episodios acabaram");
        return;
      }

      setEpisodes([...episodes, ...data]);
    }

    handleResquest();
  }, [currentPage]);

O useEffect acima é bem parecido com nosso getStaticProps que busca por novos episódios, a diferença é que concatenamos os novos episódios aos já existentes.

Com isso temos um scroll infinito funcionando 🚀! Vou deixar o código completo abaixo para você dar uma olhada em caso de dúvidas.


export default function Home({ allEpisodes, latestEpisodes }: IHome) {
  const [episodes, setEpisodes] = useState(allEpisodes);
  const [currentPage, setCurrentPage] = useState(2);
  const [hasEndingPosts, setHasEndingPosts] = useState(false);
  const loaderRef = useRef(null);

  useEffect(() => {
    const options = {
      root: null,
      rootMargin: "20px",
      threshold: 1.0
    };

    const observer = new IntersectionObserver((entities) => {
      const target = entities[0];

      if (target.isIntersecting){
        setCurrentPage(old => old + 1);
      }
    }, options);

    if (loaderRef.current){
      observer.observe(loaderRef.current);
    }
  }, []);

  useEffect(() =>
    const handleResquest = async () => {
      const { data } = await api.get('episodes', {
        params: {
          _page: currentPage,
          _limit: 3,
          _sort:"published_at",
          _order: "desc"
        }
      });

      if (!data.length){
        setHasEndingPosts(true);
        return;
      }

      setEpisodes([...episodes, ...data]);
    }
    handleResquest();
  }, [currentPage]);

  return (
    <div className={styles.homepage}>
      <section className={styles.allEpisodes} >
              {...}
          <tbody>
            {episodes.map(episode => (
              <tr key={episode.id}>
                <td style={{width: 72}}>
                  <Image width={120} height={120} src={episode.thumbnail} alt={episode.title} objectFit="cover"/>
                </td>
                <td>
                  <Link href={`/episodes/${episode.id}`}>
                    <a>{episode.title}</a>
                  </Link>
                </td>
                <td>{episode.members}</td>
                <td style={{width: 100}}>{episode.publishedAt}</td>
                <td>{episode.durationAsString}</td>
                <td>
                  <button type="button">
                    <img src="/play-green.svg" alt="Tocar episódio"/>
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        <p ref={loaderRef}>Carregando mais episodios...</p>
      </section>
    </div>
  )
}

É isso ae! 😁 Vimos como implementar um scroll infinito simples que quase sempre optamos por utilizar uma lib que já implemente isso para a gente 😂😂.

Espero ter ajudado você a compreender a construção dessa funcionalidade e fico muito feliz por você ter chegado até aqui 🖖🤘. Vale salientar que o aprendizado é constante e sempre haverá o que melhorar. Caso tenha alguma dúvida ou dicas de melhorias, fique a vontade para entrar em contato comigo.

See you soon!

Referências!

Utilizando variáveis de ambiente no ReactJS

Guilherme Selair — Sun, 13 Dec 2020 20:53:24 +0000

Fala clã! Tudo tranquilo? Depois de um tempo sem dar as caras, eu voltei mas sem enrolação vamos ao tema de hoje!

Hoje pretendo falar um pouco sobre variáveis de ambiente e como elas me ajudaram muito durante esta semana.

Porque utilizar variáveis de ambiente em um projeto?

Basicamente, estas variáveis podem guardar informações que não podem serem vazadas para o mundo externo, por exemplo, chaves e senhas de APIs ou banco de dados, como também configurações mais especificas deles também.

Mas ao meu ver, o mais legal é poder definir diferentes conteúdos das variáveis dependendo do ambiente em que você se encontra, por exemplo, ambientes de desenvolvimento, testes e produção.

Para exemplificar melhor, digamos que temos o seguinte cenário:

//REQUISIÇÃO PARA ALGUMA COISA
const response = await fetch(LINK);
const data = await response.json();

Neste cenário estamos requisitando a alguma API local certos dados e esperamos seu retorno. Caso tenhamos diferentes ambientes que executam este trecho de código, o LINK ali usado pode ser diferentes entre eles e como corrigimos isso?

Assim?

//REQUISIÇÃO PARA ALGUMA COISA
//const response = await fetch(LINK_PARA_TESTE);
//const response = await fetch(LINK_PARA_DESENVOLVIMENTO);
const response = await fetch(LINK_PARA_PRODUCAO);
const data = await response.json();

A resposta é NÃO. Ao invés de ficarmos comentando linhas que não devem serem usadas podemos adicionar uma variável de ambiente para nos ajudar nessa ocasião e não ter mais que comentar as linhas incorretas. Nesta variável irá conter o link correto para o ambiente em execução. O processo todo ficará automático dependendo assim do ambiente em execução. O ambiente correto ficaria semelhante a este:

//REQUISIÇÃO PARA ALGUMA COISA
const response = await fetch(VARIAVEL_DE_AMBIENTE_PARA_O_AMBIENTE_EM_EXECUCAO);
const data = await response.json();

Utilizando variáveis de ambiente no ReactJS

Para esta demonstração vamos utilizar um projeto ReactJS criado com o create-react-app, então todas as configurações abaixo são aplicadas para este cenário.

Antes de começarmos tenho uma coisinha a comentar que é muito importante:

É recomendado que TODA variável de ambiente declarada comece com REACT_APP_.

Definindo variáveis

Para definir nossas variáveis de ambiente precisamos criar um arquivo para agrupar todas elas. Este arquivo deve ser criado na raiz de seu projeto react e deve se chamar .env .

Você vai declarar suas variáveis da seguinte maneira:

REACT_APP_NOME_DA_VARIAVEL=conteudo da variavel

A tipagem de todas as variáveis declaradas são strings. Caso você declare uma variável que tenha o valor false (boolean) quando a sua aplicação precisar dela o valor passado será "false" (string).

Utilizando variáveis de ambiente

Para acessar suas variáveis de ambiente utilizamos process.env.NOME_DA_VARIAVEL. Por padrão sempre terá definida uma variável interna NODE_ENV, está variável é quem diz em que ambiente você está trabalhando e ela não pode ser alterada.

Em process.env.NODE_ENV podemos ter os valores: test | production | development. Estes valores estão ligados aos comandos de execução da aplicação:

yarn start → development
yarn test → test
yarn build → production

Esta variável é utilizada para tomar decisões dependendo o ambiente em execução. Por exemplo, desabilitar o uso do analytics em ambiente de testes ou desenvolvimento.

Portanto podemos voltar ao exemplo passado e modifica-lo. Digamos que declaramos uma variável ambiente chamada REACT_APP_LINK_API contendo a URL da API. Utilizaremos ela da seguinte maneira:

//REQUISIÇÃO PARA ALGUMA COISA
const response = await fetch(process.env.REACT_APP_LINK_API);
const data = await response.json();

Neste ponto pode surgir a dúvida: Mas eu tenho apenas um arquivo .env com a variável REACT_APP_LINK_API que contem apenas um valor, como adiciono as outras URLs?

É nesse ponto que teremos que diferenciar os ambientes com arquivos .env diferentes

Diferenciando ambientes

Digamos que temos dois ambientes: desenvolvimento e produção. Ambos utilizam a mesma variável porém com valores diferentes. Teremos então que ter dois arquivos:

.env.production: Irá conter valores das variaveis para produção
.env: Irá conter valores das variaveis para desenvolvimento

É recomendado que ambos tenham as mesmas variáveis para evitar futuros erros. Ou seja, teremos:

//.env
REACT_APP_LINK_API=http://localhost:3333

//.env.production
REACT_APP_LINK_API=https://minha-api.com.br

Show né? 🤔🤔🤔

Agora para ver tudo funcionando temos que instalar um carinha chamado env-cmd como dependência de desenvolvimento e adicionar a seguinte configuração para cada script de execução do package.json.

"scripts": {
    "start": "env-cmd -f ./.env react-scripts start",
    "build": "env-cmd -f ./.env.production react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
  },

A partir deste momento, quando executado yarn start as variaveis ambiente de desenvolvimento serão carregadas e quando executado yarn build as variaveis de produção serão carregadas.

TOOOOP! 😍

Agora esta tudo automatico, não precisamos mais comentar aquela linha de requisição para a API com a URL de produção quando estamos em desenvolvimento!!!

Curtiu esse post? Ficaria muito feliz em receber o feedback de vocês! Pode deixar um comentario se curtiu ou não curtiu. Dicas construitivas são super bem-vindas! Espero que eu tenha conseguido ajudar alguem. Até o próximo!! 🥰

REFERENCIAS:

https://create-react-app.dev/docs/adding-custom-environment-variables/

Deploy ReactJS em Servidor Apache

Guilherme Selair — Sun, 02 Aug 2020 00:01:08 +0000

Salve clã! 😁

Este post é como resolvi um problema que tive essa semanal quando tive que fazer o deploy de um projeto ReactJS em um servidor Apache. Acho interessante compartilhar com vocês.

Sem mais enrolação! 🚀

Todo o processo de criação e produção de seu projeto continua o mesmo. Entretanto temos alguns pontos pra ressaltar.

Devemos adicionar no arquivo .htaccess, que deve ficar no diretório que contem o arquivo index.html, o seguinte:

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Outro ponto importante, e foi onde eu empaquei é 🤔, caso seu projeto fique como um subdominio do site como: https://myapp.com/the-app, você deve especificar isso no seu Router dentro do seu projeto.
Esta informação deverá estar presente no BrowserRouter na opção basename="/the-app", caso contrario o React interpretará que seu projeto estará na raiz do domínio.

Abaixo temos um exemplo:

import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";

import Home from "./pages/home";
import Support from "./pages/support";

export default function Routes(){
    return(
        <BrowserRouter basename="/the-app">
            <Switch>
                <Route path="/" exact component={Home} />               
                <Route path="/support" component={Support} />
            </Switch>
        </BrowserRouter>
    );
}

Além disso devemos também adicionar no arquivo package.json a tag homepage com a url completa que seu projeto estará hospedado. Ex: https://myapp.com/the-app

Não mencionei porém todos já devem estar cientes que depois de todas as alterações feitas, devemos executar o script build para a criação de uma versão otimizada pronta para ser posta em produção. Devemos mover apenas os arquivos que estarão dentro da pasta build para o servidor Apache, não se esqueça disso! 😅

Este pequeno detalhe de adicionar o basename no BrowserRouter me custou algumas horas de pesquisa, espero que eu tenha te ajudado. 🥰

Para mais veja meu Github. 😎

DEV Community: Guilherme Selair

Interceptando Requisições com DevTools

Introdução

Como usar?

Show me the code!

Top demais!! 😻

Referências

Automatizando Formulários com DevTools

Introdução

Como Usar?

Show me the code!

Top demais!! 😻

Referências

Propriedade as em componentes React com Typescript

Nota

Introdução

Show me the code!

Desafio

Typescript Generics

Tipando propriedade as

Tipando props do componente Button

Exemplo em execução

Top demais!! 😻

Referências

Hook useCallback - Entenda quando utiliza-lo?

Introdução

useCallback

Beleza, mas quando utilizar?

Show me the code! 🤖

Top demais! 😍

Referências

Como implementar Dynamic Link com Firebase e React Native

Escopo

Criando o aplicativo de exemplo 📳

Configurações no Firebase Console

Adicionando um app Android no Firebase

Etapa 1

Etapa 2

Etapa 3

Etapa 4

Configurando o domínio do link dinâmico

Criando um link dinâmico

Etapa 1

Etapa 2

Etapa 3

Etapa 4

Etapa 5

Etapa 6

Resultado 🚀

APP DESINSTALADO

APP INSTALADO

FICOU MUITO SHOW!!! 😎😍

REFERÊNCIAS

Criando um Layout Persistente em NextJS

# Introdução

# Explicando o exemplo 🤯

# Ao código! 👨‍💻

## Adicionando cabeçalho e entendendo o uso de App

## Adicionando menu lateral

# Conclusão 😻

# Referências

Implementando um scroll infinito em ReactJS

Introdução

IntersectionObserver API

Ao código. 👨‍💻🚀

Sintaxe do IntersectionObserver

Declarando o observador

Função callback

Referências!

Utilizando variáveis de ambiente no ReactJS

Porque utilizar variáveis de ambiente em um projeto?

Utilizando variáveis de ambiente no ReactJS

Definindo variáveis

Utilizando variáveis de ambiente

Diferenciando ambientes

REFERENCIAS:

Deploy ReactJS em Servidor Apache

Tipando propriedade `as`

Tipando `props` do componente Button