Objetivo

Ao trabalhar com tecnologia é comum se deparar com várias palavras que nos fazem ainda mais confusos. Similar ao que escrevi sobre Angular, venho agora escrever sobre React.

Nosso objetivo aqui é bem direto: introduzir as palavras e termos mais populares ao trabalhar com React de forma teórica. Além disso vou mapear links e te incentivar a aprofundar ainda mais nos estudos.

React

Bora começar pelo começo. React é uma biblioteca que nos ajuda a desenvolver interfaces de usuário web e nativas. É um projeto open-source e a empresa por trás é a Meta (vulgo Facebook).

A gente pode utilizar o React para construir interfaces utilizando TypeScript, JavaScript, HTML e CSS. Inclusive, sem querer te confundir ainda mais, ele ainda pode ser também utilizado em outras aplicações além da web, como a mobile por exemplo através do React Native.

É atualmente a tecnologia mais utilizada para construção de interfaces, sendo amplamente aceita no desenvolvimento de pequenos, médios e grandes projetos devido sua capacidade de permitir a criação de interfaces de forma rápida e escalável.

Documentação completa do React

Aprenda o básico e construa seu primeiro projeto

SPA, SSR e SSG

Desculpa, isso é loucura, eu sei. Comecei pesado com esse tanto de siglas. Mas vamos com calma.

SPA

Do inglês Single Page Application e do português Aplicação de Página Única, é uma aplicação que reescreve dinamicamente uma única página ao invés de carregar uma nova página. Essa abordagem evita a interrupção da experiência do usuário promovendo a sensação de um sistema desktop.

SSR

Do inglês Server Side Rendering e do português Renderização do lado do servidor, é uma aplicação (ou parte dela) que renderiza o conteúdo do lado do servidor e envia ao usuário somente o resultado disso. A vantagem aqui é melhorar os resultados obtidos nos motores de busca e é uma outra forma de melhorar a experiência do usuário.

SSG

Do inglês Static Site Generation e do português Geração de sites estáticos, é uma outra estratégia onde também gera o conteúdo ao lado do servidor, porém neste caso é no momento da build da aplicação. A vantagem aqui é minimizar o número de vezes que o servidor é atingido para gerar um conteúdo.

Qual é o melhor? Não existe resposta. Cada sigla dessa pode ser utilizado em um cenário diferente, vai valer da sua análise.

Qual é a diferença entre SPAs, SSGs e SSR?

Componentes

O conceito de componentes permite que projetos React comecem rápido e sejam escaláveis. Na minha opinião o conceito de componentes é basicamente a alma da coisa.

A proposta da componentização é encapsular regras de interface e comportamentos de forma reutilizável.

Olha que direto é a abordagem. Os três componentes são um componente que abstraí uma barra de ferramentas, o formulário de cadastro por fim a tabela. Cada qual pode ter suas próprias regras de interface encapsuladas.

Podemos muito bem criar componentes que supomos que não seria reutilizáveis e fazemos isso justamente para simplificar o código e encapsular funcionalidades.

Existem duas formas de criar componentes no React, uma via funções e outra via classes. A sintaxe é diferente em cada um. No link abaixo explica melhor, a forma mais moderna é via função onde componentes são representados por funções.

Seu primeiro componente

Componentização: o que é, por que usar e exemplo na prática!

Diferença entre Functional Components e Class Components

Props

Props são as propriedades que seu componente aceita. É a forma como que componentes se comunicam entre eles. Uma prop pode ser um número, um texto, um objeto, um array, uma função ou até mesmo um outro componente. As props são atributos que você define no componente pai e que são passados para o componente filho.

Passando props para um componente

Pure components

Pure Components, ou componentes puro, são componentes na qual uma otimização é feita automaticamente pelo React em prol de reduzir o número de renderizações.

O que são componentes puros funcionais no React?

Documentação sobre pure components

Hooks

Os hooks foram introduzidos a partir da versão 16.8 do React para serem trabalhados com componentes funcionais e se tornou um conceito essencial para utilizar em aplicações React.

Construindo seus próprios hooks

Os mais populares:

useState

Permite que componentes tenham um estado. Você o utiliza para criar variáveis que possuem um estado e a cada vez que este estado é atualizado uma nova renderização do componente acontece.

Documentação

useEffect

Possibilita realizar efeitos colaterais em componentes. Esses efeitos podem ser dos mais variados possíveis: requisição a uma API, alterações no DOM, subscrição a um evento, efeitos colaterais na interface de acordo com certas condições etc.

Documentação

useReducer

Uma alternativa ao useState que é usado para gerenciar a lógica da alteração de estado complexa ou que envolve transições de estado baseadas em ações. É útil ao se trabalhar com variáveis as quais sua alteração são avançadas.

Documentação

useMemo

Hook que memoriza valores computados e com isso permite otimizar o desempenho de componentes ao evitar recálculos desnecessários. É útil ao ser utilizado junto a operações computacionais intensas que podem vir a ser caras em termos de tempo de execução.

Documentação

useCallback

Semelhante ao useMemo, porém específicos para funções. É útil para evitar a criação de novas instâncias de funções em cada renderização, especialmente quando essas funções são passadas como props para componentes filho.

Documentação

useRef

Hook que nos permite armazenar valores que não são necessários para renderização. O utilizamos para conter valores e persisti-los entre as renderizações sem causar re-renderização. É útil para interagir com o DOM e manter valores que não impactam a renderização.

Documentação

useContext

Falarei mais adiante no tópico sobre context.

State management

Quando se trata de aplicações React, state management ou gerenciamento de estado refere-se a gestão organizada do estado da aplicação. O estado da aplicação representa dados que podem mudar ao longo do tempo e influenciar no comportamento da interface.

Geralmente sua necessidade vem de acordo com a complexidade que seu aplicativo ganha. Isso passa a ter um peso maior quando muitos componentes compartilham e dependem de um mesmo estado, desta forma buscamos essa alternativa para gerenciar de forma consistente esse estado.

Atualmente existem várias formas de gerenciar o estado de aplicações React e essas várias formas se abstraem em conceitos e modos de gerenciamento.

Embora não seja mais tão popular como no seu auge, Redux com certeza é uma palavra que você lerá, visto que foi um dos grandes propulsores do termo gerenciamento de estado.

Redux

Redux é uma biblioteca que permite gerenciamento de estado para aplicações web. Sua estratégia é centralizar o estado de toda aplicação em um único local onde pode ser acessado e atualizado de qualquer lugar do app de acordo com suas regras.

Foi muito popular para aplicativos com grande volume de estado e grande complexidade devido sua forma estruturada de trabalhar.

Em projetos legados é ainda muito presente, porém em novos projetos tem perdido seu espaço para outras bibliotecas de gerenciamento de estado (Zustand, MobX, Recoil e Unstated por exemplo), ou até mesmo para a Context API, que o React introduziu na versão 16.3.

Documentação do Redux

Como usar Redux e Redux Tookit

Context API

A partir da versão 16.3, o React introduziu uma nova maneira de compartilhar dados entre componentes sem a necessidade de passar props manualmente por todos os níveis da cadeia de componentes.

Essa nova maneira é chamada de Context API e ele permite criar contextos que podem ser acessados por qualquer componente filho dentro do contexto.

Inclusive pode substituir uma biblioteca de gerenciamento de estado quando criado um contexto global. Devemos apenas tomar cuidado para evitar a criação de um estado excessivamente complexo.

Agora sim, useContext

O useContext é o hook que nos possibilita a utilização da Context API, uma vez que via entre este hook a gente consegue acessar os valores armazenados naquele contexto a qual queremos acessar.

Documentação do createContext

Documentação do useContext

O guia completo

Prop Drilling: o que é?

HOC

Higher-Order Compoenent, ou Componente de Ordem Superior, é um padrão de design que envolve a criação de componentes reutilizáveis e lógica compartilhada.

Um HOC é uma função que aceita um componente como entrada e retorna um novo componente com funcionalidades adicionadas ou modificadas.

São utilizados para abstrair comportamentos comuns de componentes. Embora uma técnica poderosa, caiu em desuso com os hooks, que fornece uma abordagem alternativa para compartilhamento de lógica entre componentes. Porém, obviamente, ainda é visto e alguns cenários pode ser válido.

Como usar Componentes de Ordem Superior em React

React hooks substituem HOCs?

Next

Agora é o queridinho do momento — o Next.

Next é um framework para React que tem por objetivo simplificar o desenvolvimento de aplicações web já oferecendo uma série de recursos e convenções que facilitam a criação de aplicações modernas e escaláveis.

É frequentemente usado para construir projetos React eficientes, otimizados para SEO e com suporte a renderização do lado do servidor (SSR e SSG).

Alguns dos principais conceitos que o Next traz consigo:

1. SSR e SSG — Suporta ambas renderizações proporcionando benefícios como melhor SEO, desempenho e experiência.
2. Roteamento — Oferece um sistema de roteamento automático baseado na estrutura de diretórios do projeto. Ao criar arquivos na pasta pages, o Next automaticamente cria rotas correspondentes para esses arquivos. Next também permite criar rotas de API facilmente e isso é útil para separar a lógica da API da lógica do frontend.
3. Otimizações automáticas — Inclui otimizações automáticas, como divisão de código (code splitting) e pré-busca (prefetching), para melhorar o desempenho da aplicação.
4. Componentes especiais — Next traz alguns componentes nativos que possuem otimizações e melhorias, como por exemplo o componente Image que possuiu uma série de melhorias para se trabalhar com imagens.

A combinação dessas características torna o Next uma escolha poderosa para o desenvolvimento de aplicações React, especialmente quando é necessário suporte a SSR, SEO e uma estrutura organizada e fácil de usar.

Comece com Next.js

Documentação do Next

UI Kits

Geralmente quando vamos desenvolver um app React, nós utilizamos uma UI Kit que nos disponibiliza um kit de componentes, temas, layout etc. para facilitar nosso trabalho.

Esse tópico está aqui justamente para te apresentar algumas:

• Tailwind
• React Boostrap
• Material UI
• Ant
• Chakra

Fim

Se você chegou até aqui e te ajudou em algo, eu fico super feliz. Muito obrigado!

Bê-á-bá do React was originally published in React Brasil on Medium, where people are continuing the conversation by highlighting and responding to this story.

Aproveitando o hype imenso que esse assunto tem levantado para trazer uma reflexão minha de que não, o ChatGPT ou qual que seja a IA que seja, não vai roubar seu emprego.

Provavelmente já tenha visto, lido ou escutado diversas opiniões sobre esse mesmo assunto que se espalhou em alta velocidade após a OpenIA ter lançado como uma bomba o seu produto: ChatGPT.

Eu também. Alguns expressando opiniões conservadores e já outros opiniões agressivas. A minha é uma das conservadoras e te digo o por que.

Todas essas IAs são bem legais e interessantes, porém não autossuficientes — e estão bem longe de ser.

Consigo gastar um bom tempo conversando com o ChatGPT e perguntando coisas aleatórias. Não somente isso! Tem sido bastante útil durante meu dia a dia de trabalho para perguntar alguma dúvida sobre alguma tecnologia ou sobre algum erro que tenho enfrentado.

Mas para ser honesto não consigo ver muito além disso. AIs ainda cometem muitos erros e não conseguem ir muito além de algo pontual. Tem dificuldade, eu diria que até mesmo não são capazes, de lidar com grandes requisitos de produto, análises complexas e grande esforços de codificação.

“Mas, pô! É só treinar mais! É só aumentar o número de parâmetros…” — pode ser um bom questionamento. Será mesmo?

Talvez a gente esteja esbarrando no maior desafio de fato somente agora, que é: a curva da “inteligência” da IA não acompanha a curva de crescimento do número de parâmetros.

Isso significa que, um modelo com 5 trilhões de parâmetros não necessariamente é 5 vezes mais inteligente do que um treinado com 1 trilhão de parâmetros.

Sam Altman, CEO da OpenAI, disse recentemente que o GPT-5 não está em treinamento e “não estará por algum tempo” dado vários motivos, incluindo um muito especial. Ele afirma que vê “fim de uma era” para corrida para aumentar o número de parâmetros em modelos e não vê mais o número de parâmetros como um bom indicador de desempenho. “Acho que estamos no fim da era em que serão esses modelos gigantes, e vamos torná-los melhores de outras maneiras”.

Lendo isso acredito que o próximo desafio, e na minha opinião o maior para um salto ainda maior, será encontrar soluções para um treinamento ainda mais eficiente que com que lide melhor com grandes requisitos, grandes contextos de projeto e análises complexas e subjetivas.

Quando isso chegar, ai sim acredito que seja plausível te substituir como um programador completo. Mas isso não deve acontecer a curto ou médio prazo.

Por enquanto aproveite o que a ferramenta te fornece para se tornar ainda melhor. Pois a curto prazo vejo bons profissionais utilizando de forma produtiva a ferramenta e esses sim te dando um pé na bunda.

Ser um bom programador não é somente programar. É também ser analítico, especialista no produto e negócio. Existe um grande trabalho mental antes de digitar um if else que precisa ser feito com maestria.

Não só isso, acredito que com esses modelos sendo integrados com Excel, PowerBI etc. e com o surgimento de diversos plugins faça com que grandes potenciais projetos não sejam necessários diminuindo a demanda.

Então pode acontecer é que a régua suba para você como programador — e talvez muito com esses super modelos surgindo e evoluindo a curto prazo.

Dito isso, evite desesperar ou desanimar. Só não dorme no ponto para os próximos anos. Acredito que nós programadores encontraremos mais exigências no futuro e agora estou dizendo a curto prazo.

Antes de encerrar eu ainda gostaria de compartilhar mais uma previsão. A longo prazo ainda acho difícil o programador ser extinto. O que acredito que pode acontecer é que a linguagem de programação fique ainda mais de alto nível.

Tivemos C e Assembly que são exemplos de linguagens de baixo nível. Hoje temos Python e JavaScript que são exemplos de linguagens alto nível. Talvez o que possa acontecer no futuro é que iremos usar linguagem natural para programar — e tá tudo bem.

Ou talvez encontraremos frameworks inteligentes que faça um trabalho excepcional e você terá que somente desenvolver o valor do negócio — e tá tudo bem.

Você ainda será necessário. De novo, só não dorme no ponto.

Enfim, essas são minhas previsões. E obviamente por ser previsões podem estar todas erradas.

Obrigado por ler!

Relaxa, ChatGPT não roubar seu emprego de programador was originally published in React Brasil on Medium, where people are continuing the conversation by highlighting and responding to this story.

O que é?

React Query é uma biblioteca de gerenciamento de estados e de requisições de dados, voltado para o React. É uma lib com uma performance muito boa para casos como:

- buscar, fazer armazenamento em cache
- sincronizar async data no aplicativo

Na prática:

Digamos que temos o seguinte problema: Estamos desenvolvendo um app que gerencia algumas tarefas, o famoso todo, como poderemos editar, pegar, escrever ou deletar, teremos uma gama de endpoints que farão essas operações:

get 
post
put
delete

Fazendo isso funcionar:

Para começarmos a utilizar o react-query precisamos instalar ele usando o comando no nosso terminal: (escolha o seu gerenciador de pacote preferido)

yarn add react-query 
npm install react-query
pnpm install react-query

Bom, como falei anteriormente, o react-query é um gerenciador de estados, então teremos que utilizar um Provider para que a children (nosso app) seja capaz de receber informações e lidar com elas conforme necessidade. Uma vez instalado e importado, ficará assim:

import { QueryClient, QueryClientProvider } from "react-query"
import Todo from './components/Todo'

const queryClient = new QueryClient()

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Todo />
    </QueryClientProvider>
  )
}

Uma vez que tenhamos feito isso, vamos ter a nossa disposição o hook useQuery, ele vai ser responsável por armazenar em cache a nossa listinha de todo, belê?

Criando nossa lista:

Eu criei um arquivo simples chamado Todo.jsx contendo o seguinte conteúdo:

import React from 'react'

export default function Todo() {
  return (
    <h1>Todo</h1>
  )
}

Bom, agora vamos utilizar o hook que mencionei antes para buscar e guardar no cache a nossa lista de todo.

(Mas mateus, cadê a api fake pra fazer o exemplo?) Tá aqui ó:

{
  "todos": [
    {
      "id": 1,
      "title": "Fazer compras",
      "completed": false
    },
    {
      "id": 2,
      "title": "Estudar para o exame de matemática",
      "completed": false
    },
    {
      "id": 3,
      "title": "Fazer exercícios",
      "completed": true
    },
    {
      "id": 4,
      "title": "Ler um livro",
      "completed": false
    }
  ]
}

Instale os pacotes:

yarn add axios
yarn add json-server --dev

Axios para lidar com as reqs e o json-srever para simular uma fake api. Chequem a documentação de como usar o json-server, mas é simples.. No meu caso eu fiz o seguinte:

Dentro de api.js eu tenho o seguinte:

import axios from 'axios'

const api = axios.create({
  baseURL: 'http://localhost:3333'
})

export {api}

Para rodar a api fake abra o seu terminal e digite:

yarn json-server --watch db.json -p 3333

Como resultado:

Segue o baile:

Uma vez que temos nossa api rodando é hora de fazer isso funcionar, voltemos ao nosso Todo.jsx, tudo acontece lá.

import React from 'react'
import { useQuery } from 'react-query'
import { api } from '../services/api'

export default function Todo() {
  const { isLoading, error, data } = useQuery('todos', async () => {
    const response = await api.get('/todos')
    return response.data.todos
  })

  if (isLoading) {
    return <div>Carregando...</div>
  }

  if (error) {
    return <div>Erro ao carregar todos</div>
  }

  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>
          {todo.title} - {todo.completed ? 'concluído' : 'pendente'}
        </li>
      ))}
    </ul>
  )
}

O que tá rolando nesse código?

1. Estamos utilizando o hook useQuery para trazer para nós os dados que exisitrem dentro da nossa API REST. Uma coisa importante de saber é: Temos uma chave única para o useQuery, no caso, ‘todos’, ela é usada como um identificador para essa consulta a API.
2. Logo após isso, nós estamos verificando se o nosso dado está carregando, utilizando o isLoading, error, caso carregado com sucesso, renderiza os dados na ul.

Plus:

Isso é um exemplo básico do básico, em partes mais complexas podemos fazer muitas coisas, por exemplo:

Com o R.Query podemos definir limte de cache, configurar do zero toda uma estrutura de atualização.

Entendendo como o React Query olha para o cache:

O cache é uma memória local, ela tem como responsabilidade armazenar os resultados de qualquer consulta anteriormente feita.

Quando realizamos uma consulta, o query fica observando se tal consulta não foi realizada anteriormente e se algum dado está pelo cache. Isso é o natural, mas assim, caso exista algum registro dentro do cache, o React Query vai retornar o que tiver lá, ao invés de fazer todo fluxo de chamada a uma api, por exemplo do jeito clássico:

const myComponent = () => {
const [data, setData] = useState([])
  async function handleData() {
   const response = await api.get('data')
   setData(response.data)
  }
}

useEffect(() => {
 handleData()
}, [])

Essa jogada do react query melhora um horror o desempenho da aplicação, evita req atrás de req. (Claro, não estou dizendo pra nunca mais usar o effect, até pq isso não faria sentido, cada cenário, atores diferentes)

Ainda sobre o cache:

O React Query gerencia em modo automático o cache, claro, podemos configurar algumas opções, limite de tempo de cache, uma quantidade de itens para ficar em cache, tudo isso é possível também.

Claro, tenha precauções:

É crucial que se trate o cache de forma responsável, qualquer configuração errada vai resultar umas treta chata, principalmente dados desatualizados.

Considerações finais

É uma lib poderosa de fato. Pq melhora de forma significativa o desempenho da nossa aplicação, isso é um fato. Mas é aquela coisa, tenha responsabilidade na hora de usar, e mais do que isso, saiba que não serve pra tudo, no que antecede a chegada dele, sempre existiu outras formas de lidar com cache, vale destacar. Mas em boa parte de cases, sim, ele funciona muito bem.

até mais, pessoal! para quem estiver lendo isso na Sexta (17 de março), bom final de semana.

React Query (Um pouco de teoria e um pouco de prática) was originally published in React Brasil on Medium, where people are continuing the conversation by highlighting and responding to this story.

1. Axios

Quase todos projetos requerem que você faça requisições HTTP. Isso é geralmente necessário ao ter que consumir endpoints do backend ou algum outro serviço.

Axios, na minha opinião, é a melhor escolha para esse tipo de atividade. Realizar uma requisição é extremamente simples e intuitivo com esse pacote, se liga:

const response = await axios.get('/seu-endpoint');

Esse simples código acima através de uma única chamada de função te retorna uma Promise com o resultado da requisição.

Com esse pacote é possível realizar requisições com todos os verbos (GET, POST, PUT, DELETE e PATCH) alterando somente o nome da função chamada pelo correspondente.

Além disso, tem outras diversas funcionalidades para trabalhar com headers, capturar erros, parâmetros, interceptar requisições e outras coisas que você pode conferir através da documentação.

2. Luxon

Geralmente trabalhar com datas e horas no JavaScript é o pesadelo de qualquer desenvolvedor. A API nativa fornecida convenhamos que não é a melhor.

Portanto, para trabalhar com datas e horas, o Luxon é um pacote essencial que irá de fornecer uma API completíssima e uma documentação legal para fazer a bagunça toda que deseja com data, horas, timezone etc.

A maioria dos desenvolvedores conhecem o moment, porém poucos sabem que o moment é um pacote que ele próprio se considera legado. Portanto tenha em mente o Luxon para seu projeto.

Uma outra alternativa bem famosa e completa que vale a pena ser mencionada é o o pacote date-fns.

3. Lodash

Sendo bem sincero, Lodash é um pacote de explicar de forma sucinta o que ele faz.

Lodash é um pacote que te fornece uma série de funções utilitárias para trabalhar com arrays, funções, objetos, números, textos e uma infinidade de outras coisas. Sério, é muita coisa!

Você pode conferir melhor na documentação, vai por mim, vai se surpreender com a quantidade de funções utilitárias ao seu dispor.

4. Big.js

Pode parecer que não, mas algumas vezes trabalhar com números no JavaScript pode te trazer dor de cabeça, principalmente por conta da precisão.

Um ótimo exemplo é trabalhar com moeda. Algumas vezes é chato que dói. Para isso temos esse belo pacote que te fornece uma API fácil para trabalhar com números com precisão.

Basicamente você irá criar instancias Big que representam números e você consegue realizar diversos cálculos matemáticos com precisão a partir delas.

A documentação é bem tranquilinha.

5. Jest

Qualquer bom projeto que se preze necessita de ter bons testes que asseguram a confiabilidade do código. Devemos ter em mente que isso é importantíssimo em um projeto.

Jest é um pacote que te fornece um framework delicinha para que você possa implementar testes JavaScript de forma simples e rápida. Você não precisará configurar de engenhoso, super fácil de iniciar.

Além de ser um framework construído para te servir de forma simples e redonda, a documentação é bem completa e didática.

6. Cron

Esse pacote é tão simples e útil… Cron é basicamente uma ferramenta que permite executar um trecho de código, uma rotina ou algo de acordo com um certo cronograma.

Exemplo simples: Todo dia, a uma hora da manhã você quer executar uma rotina que envia um e-mail a todos usuários que ainda não confirmaram sua conta — para fazer isso você usará o Cron.

Os exemplos são inúmeros e as possibilidades infinitas, tudo que você precisa de um cronograma para executar você utilizará o Cron para disparar o processo.

A documentação está no próprio NPM.

Para definir os parâmetros como periodicidade, dia, horário etc. será necessário passar uma expressão que no início pode parecer estranha, para tal, recomendo o uso de uma ferramenta. Existem muitas na internet, ao pesquisar por “cron expression generator” no Google irá achar diversas. eu recomendo a Free Formatter.

7. Validator

Sendo curto e grosso: um pacote que te fornece uma biblioteca com diversos validadores e sanitizadores para textos.

Precisa validar um e-mail?

validator.isEmail('seu-email@email.com'); //=> Verdadeiro
validator.isEmail('isso-nao-eh-um-email.com'); //=> Falso

Não existe nada mais simples que isso. Validar um e-mail foi só um exemplo. Você pode conferir todas as funções disponibilizadas na documentação no próprio NPM.

Para você, brasileirinho, segue a dica de conhecer o pacote js-brasil que contém várias funções úteis para o Brasil.

8. Yup

Yup é um pacote que te fornece um jeito de criar esquemas JavaScript para validação e parsing.

A API fornecida pelo pacote é bem completa e te permite criar formas (shapes) de dados na medida, complexos (caso necessário) e expressivos de acordo com o que precisar.

A documentação está disponível no próprio NPM de forma explicativa e com bons exemplos.

O Yup é um pouco mais voltado para clientes, uma alternativa é o joi que tem o mesmo propósito. Inclusive, o Yup é inspirado no joi, conforme mencionado na própria descrição do pacote.

9. Faker

Como o próprio nome já induz, é um pacote que te permite criar dados falsos — ou melhor, fakes — porém realísticos.

Isso é extremamente útil nos testes e desenvolvimento. Imagine que está criando testes de ponta a ponta automatizados e precisa preencher um cadastro de um novo usuário com dados que simulam a vida real.

const usuario = faker.internet.userName()
const email = faker.internet.email()
const senha = faker.internet.password()

Pronto, você já tem dados realísticos para utilizar no seu teste.

E é um absurdo a quantidade imensa de dados fakes disponíveis que podem ser conferidos e utilizados seguindo a documentação. Na lista tem contextos de endereço, finanças, músicas, animais, substantivos, imagens, veículos etc. Não da nem para listar todos aqui.

Além disso, o pacote fornece suporte ao português do Brasil, importando da seguinte forma:

import { faker } from '@faker-js/faker/locale/pt_BR';

Curiosidade sobre este pacote: Inicialmente o autor dessa biblioteca sabotou, em 2022, o pacote inicial e o repositório (não existe mais) em forma de protesto. Em seguida foi restaurado e a comunidade vem o mantendo.

Fonte: https://tecnoblog.net/noticias/2022/01/10/desenvolvedor-sabota-modulos-de-codigo-aberto-e-afeta-milhares-de-sistemas/

10. Socket IO & Socket IO Client

Nesse último pacote em específico são dois pacotes que completam um propósito.

Socket IO é uma ferramenta maravilhosa que te permite construir uma verdadeira comunicação baseada em eventos. E o melhor, tudo em tempo real.

Para isso, serão necessários dois pacotes. O Socket IO será utilizado no server, responsável por controlar toda a comunicação — algo como a central de comunicação. Já o Socket IO Client será necessário no cliente para receber e enviar eventos — seguindo o mesmo paralelo, o dispositivo que troca eventos com a central.

Esses pacotes te permitirão construir recursos para chats, jogos, notificações, atualizações ao vivo, enfim, tudo que necessita de uma comunicação ativa e em tempo real.

É lindo e as possibilidades são infinitas.

Gostou? Vai fundo e olhe mais na documentação.

Fim

Espero que pelo menos um pacote listado tenha sido novo para você. Use da melhor forma possível.

Tamo junto!

10 pacotes ESSENCIAIS para Javascript was originally published in React Brasil on Medium, where people are continuing the conversation by highlighting and responding to this story.

OBS: agora tenho um blog que estou publicando meus artigos, se quiser conhecer basta clicar nesse link.

O Gatsby é um framework muito interessante, tenho contato com alguns devs que já fizeram coisas bem legais e eu só tinha dado um start e olhado a estruta de pastas e o seu funcionamento, mas resolvi por a mão na massa e mudar meu website que era feito em Nextjs para Gatsby e realmente testar as funcionalidades, rotas, GraphQl e afins (ainda não terminei o refactor) mudou bastante, entre a versão 2 (quando eu fiz o teste) e a 4 que é a atual.

Mas que diabo é essa tal de Gatsby ?

Gatsby é a estrutura rápida e flexível que torna a criação de sites com qualquer CMS, API ou banco de dados divertido novamente. Crie e implante sites sem cabeça que geram mais tráfego, convertem melhor e geram mais receita!

Essa é a descrição que você pode achar no site do Gatsby. Ele também é baseado em ReactJs então para quem já tem uma familiaridade vai se sentir em casa, além de parecer ser bem rápido, um dos motivos dessa velocidade é o prefetch de informações de uma nova página (como assim ? Não entendi nada 😕) quando criamos um link para uma página quando fazemos o hover sobre o link ele já baixa um json da página seguinte, fazendo com que o seu carregamento seja quase que instantâneo, isso é fantástico, mas se você quiser ler um pouco mais sobre esse framework vou deixar o link da documentação aqui.

Get started

Vamos iniciar um projeto usando o Gatsby, basta você rodar o seguinte comando:

npm init gatsby

Ele vai lhe fazer algumas perguntas:

- Nome do projeto ?
- Onde vai ser instalado ?
- Se você quer usar JavaScript ou TypeScript ?
- Qual cms vai querer usar ?
- Qual lib de style vamos usar ?
- E alguns plugins que podemos instalar !!

Ou seja, escolhi o nome do projeto, deixei dentro da pasta documents escolhi TypeScript, Netlify como cms, styled-components e adicionei plugin de imagem responsiva e suporte ao markdown

Essa é a estrutura inicial do nosso projeto:

Para subir o projeto basta rodar yarn develop ou yarn start se estiver usando o npm npm run develop ou npm run start irá subir em duas portas:

http://localhost:8000/
e
http://localhost:8000/___graphql

Podemos fazer consultas no nosso GraphiQl que já está incluso dentro do Gatsby, isso é incrível, temos uma interface bem legal:

Ele nos oferece muitas consultas ao lado esquerdo de forma simples, basta alguns clicks de mouse e você consegue montar suas querys de forma fácil, se você ainda não sabe o que é GraphQl leia essa doc.

E por último mas não menos importante, temos o arquivo gatsby-config.ts (no meu caso escolhi TS, mas se escolher JavaScript vai ser gatsby-config.js)

Nesse arquivo configuramos nossos plugins novos, para que toda aplicação possa enxergar. Obs: Sempre que mudar algo nesse arquivo é necessário baixar o servidor e subir de novo para o Gatsby entender as mudanças.

SiteMetadata é a chave para dados do nosso projeto, titulo, url, autor, descrição etc…

GraphqlTypage é alto explicativo e o próprio Gatsby da uma descrição do que ele faz.

Plugins é um array, com todos os nossos plugins e novos plugins que podemos instalar.

Bom é isso, espero que tenham gostado, se ainda não conhecia Gatsby acho que esse pode ser um ponta pé inicial, logo mais, vou falar um pouco mais sobre esse framework, mas eu ainda preciso estressar mais ele 😃.

Se você está pensando em criar o seu blog eu experimentar algo diferente, recomendo bastante fazer uma experiência com Gatsby, você vai se surpreender igual eu, pode acreditar.

Bem é isso, espero que tenham gostado, lembrem que qualquer informação que deixei passar, ou se quiserem adicionar qualquer coisa postem nos comentários. Se esse artigo foi útil e puder me pagar um café ficarei feliz. Abraços quentinhos para vocês !!

Iniciando um projeto em Gatsby was originally published in React Brasil on Medium, where people are continuing the conversation by highlighting and responding to this story.

Você acessa um site e aguarda o carregar… agora, aceita os cookies padrões, fecha a chata janela solicitando que se inscreva na newsletter, procura o conteúdo em meios as propagandas e o que estava procurando mesmo? Você já nem se lembra mais.

Seu erro foi querer navegar na internet, igual fazia e em 2012.

Agora são novos tempos: cookies, newsletters, sites pesados, propagandas e assinaturas. Quando resolver abrir um site lembre-se de saber muito bem o por que está abrindo, caso contrario perderá seu tempo.

A internet de hoje was originally published in React Brasil on Medium, where people are continuing the conversation by highlighting and responding to this story.

OBS: agora tenho um blog que estou publicando meus artigos, se quiser conhecer basta clicar nesse link.

Galera no dia-a-dia estamos acostumados a trabalhar muito com objetos e arrays, mas as vezes eles podem complicar nossa vida se não soubermos estruturar bem um objeto ou se não soubermos manipular um array, em ambos os casos temos diversos caminhos e fazer diversas coisas diferentes, mas nesse post resolvi trazer uma coisa mais de base do JavaScript que nada mais é do que esvaziar um array, ou seja, vamos preencher um array de várias formas e vamos ver como deixar ele vazio.

Mas o que é um array ?

Na faculdade é bem comum, os professores falaram que precisamos criar uma lista e iterar sobre ela, e se você é novo em tecnologia e começou aprender HTML e CSS agora, não estou falando da tag, <ul>, <li> e <ol> e sim criar um array 😃.

Arrays são objetos ( sim arrays são objetos, confuso não ? 😕 ) que na verdade são listas e eles tem vários métodos que nos ajudam a manipularmos de várias formas diferentes, não vou falar sobre todos eles, pois são muitos, mas escrevi três artigos explicando os principais, vou deixar os links aqui ( parte 1, parte 2, parte 3 ). Um array não tem tamanho nem tipo fixo, então o array é dinâmico e podemos colocar, strings, number, objetos etc…

Agora vamos brincar um pouco com nossos arrays, primeiro vamos de fato conferir se arrays são ou não objetos:

var arr = [1, 2, 3]

console.log(typeof arr) // object

Vamos ver o tamanho no nosso array:

var arr = [1, 2, 3]

console.log(arr.length) // 3

Obs: um array é iniciado na posição zero, então as posições do array acima serão:

elementos [1, 2, 3]

posições [0, 1, 2]

Agora o motivo desse artigo, vamos aprender algumas formas de zerar um array, podemos simplesmente redeclarar um array:

var arr = [1, 2, 3]
arr = []

console.log(arr) // []
console.log(arr.length) // 0

ou

var arr = [1, 2, 3]
arr = 0

console.log(arr) // 0
console.log(arr.length) // undefined

No segundo caso temos undefined pois transformamos nosso array em um number e esse tipo de dado em JavaScript não possui a propriedade length, podemos falar sobre tipos de dados em outro post 😃.

Podemos mudar o length dele na força bruta 👊:

var arr = [1, 2, 3]
arr.length = 0

Também podemos usar da maneira mais moderna:

let arr = [1, 2, 3] // usando let
arr = []

console.log(arr) // []
console.log(arr.length) // 0

ou

let arr = [1, 2, 3]
arr = 0

console.log(arr) // 0
console.log(typeof arr) // number
console.log(arr.length) // undefined

Também podemos tentar dessa forma:

const arr = [1, 2, 3] // usando const
arr = []

console.log(arr)

Isso gera um erro, pois não podemos reatribuir uma const e também podemos usar o método splice() para fazer esse serviço para nós:

let arr = [1, 2, 3]

arr.splice(0, arr.length)
console.log(arr) // []

Bem é isso, espero que tenham gostado, lembrem que qualquer informação que deixei passar, ou se quiserem adicionar qualquer coisa postem nos comentários. Se esse artigo foi útil e puder me pagar um café ficarei feliz. Abraços quentinhos para vocês !!

Fontes:

MDN: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array

Delfstack: https://www.delftstack.com/howto/javascript/how-to-empty-an-array-in-javascript/

JS tutorials: https://www.javascripttutorial.net/array/4-ways-empty-javascript-array/

Como esvaziar arrays em JavaScript was originally published in React Brasil on Medium, where people are continuing the conversation by highlighting and responding to this story.

OBS: agora tenho um blog que estou publicando meus artigos, se quiser conhecer basta clicar nesse link.

Há algum tempo escrevi um artigo de como instalar a nvm no windows se você não leu ele ainda, pode clicar aqui.

Mas como voltei a trabalhar com linux (ainda bem que isso aconteceu) não tenho nada contra windows, até me surpreendi positivamente em um ano de trabalho com esse SO, mas acho que ele ainda está muito longe do MacOS e qualquer versão de linux. Chega de choro e bora para o artigo.

Hoje em dia é bom comum você trabalhar em mais de um projeto ao mesmo tempo com uma máquina só, as vezes no trabalho e as vezes em alguns projetos pessoais, eu acabo fazendo bastante isso, e isso pode causar um pequeno problema para rodar os seus projetos, pois package.json pode não aceitar a versão mais atual do node e isso pode causar uma certa dor de cabeça, por isso no lugar de instalar direto a última versão do node ou uma versão especifica você pode instalar o nvm (gerenciador de versões do node) para que você consiga controlar a versão do node que cada projeto seu necessita.

Dito isso bora instalar no nosso ubuntu, primeiro vamos baixar na máquina:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

ou

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Ele vai ser baixado em uma pasta oculta nesse caminho ~/.nvm e você precisa adicionar um snippet no perfil do seu terminal, se você usa zsh igual eu precisa adicionar dentro do ~/.zshrc se usa bash adicione no ~/.bashrc com snippet assim que abrir o terminal ele vai conseguir ler o source de onde foi instalado o nvm:

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

Pronto. Feche o terminal e abra novamente, para verificar se está tudo certinho basta rodar esse comando:

command -v nvm

O terminal mostrará o seguinte:

Significa que foi instalado com sucesso, e agora vamos para parte mais legal, instalar uma versão de node na máquina, é só rodar um comando:

nvm install node

Dessa forma vai instalar a última versão do node válida, se quiser instalar uma versão especifica basta rodar o comando:

nvm install 14.15.0

Para trocar sua versão de node atual, imaginando que você instalou as duas versões acima a lasted e a versão 14.15.0 e está usando a lasted em um terminal, você pode abrir outro terminal e rodar o comando:

nvm use node 14.15.0

Você também pode listar todas as versões do node que tem instalado no seu terminal e as versão que podem ser instaladas:

nvm ls

E se você estiver tendo algum problema com a sua nvm, para desinstalar basta executar:

rm -rf "$NVM_DIR"

Bom é bem simples, fazia um tempo que não escrevia, pois estava em uma transição de emprego e estava de férias então por isso estou há mais de um mês sem escrever, se quiser ver essa explicação direto no github da galera está aqui: https://github.com/nvm-sh/nvm#installing-and-updating da uma força para os caras e dá um estrelinha para eles.

Bem é isso, espero que tenham gostado, lembrem que qualquer informação que deixei passar, ou se quiserem adicionar qualquer coisa postem nos comentários. Se esse artigo foi útil e puder me pagar um café ficarei feliz. Abraços quentinhos para vocês !!

Como usar nvm no ubuntu was originally published in React Brasil on Medium, where people are continuing the conversation by highlighting and responding to this story.

OBS: agora tenho um blog que estou publicando meus artigos, se quiser conhecer basta clicar nesse link.

O nosso tão querido (e muitas vezes odiado) css está em uma evolução bem bacana, hoje em dia conseguimos fazer coisas bem legais com, se você quiser acompanhar algumas dessas novas features só clicar aqui. Mas eu vim falar um pouco sobre background antigamente por falta de recursos mais avançado no css, para fazer um background de uma landpage, site mais descolado e afins, alguns desenvolvedores usavam imagens e manipulavam essas imagens e conseguiam (por um milagre 😃) efeitos bem legais.

Pensando nisso eu vim mostrar como fazer um background diferente, eu acho bem legal usar gradientes, mas a minha esposa acha cafona (não a culpo) pois tem algumas coisas um pouco exageradas, tem uma galera que quer fazer gradiente em tudo e isso pode levar um resultado não tão legal, mas bora parar de falar e por a mão na massa.

Para fazermos um gradient simples, usamos o atributo background junto com a função linear-gradient() que cria uma imagem que consiste em uma transição progressiva entre duas ou mais cores.

Com a linear-gradient() você pode escolher de qual lado começa e termina sua cor linear-gradient(to left, #cor) ou se ela começa de cima para baixo e vice-versa linear-gradient(to top, #cor).

O gradient linear é definido por um eixo então também podemos trabalhar com graus dentro da função, para ficar mais explicito e claro o eixo da função é calculado dessa forma:

Então também podemos declarar nosso background desse jeito background: linear-gradient(0deg, #cor) eles funcionam da seguinte forma equivalente as posições, top, right, bottom e left, isso em graus 0, 90, 180 e 270 respectivamente, lembrando que se for usar alguma posição, você precisa do prefixo to dessa forma to left. Lembrando que é baseado em um circulo então você pode considerar qualquer ângulo de até 360 graus então declarando com graus você tem mais liberdade para fazer coisas legais com o gradiente.

Só uma observação que o linear-gradient por default ele começa na posição top ou 0 graus.

Agora vamos alguns exemplos, que eu vou deixar aqui nesse link que eu fiz direto no codesandbox para facilitar e não encher de código aqui no artigo e poluir muito a leitura de vocês.

https://codesandbox.io/embed/sad-mclean-3knyv7?fontsize=14&hidenavigation=1&theme=dark

Bem é isso, espero que tenham gostado, lembrem que qualquer informação que deixei passar, ou se quiserem adicionar qualquer coisa postem nos comentários. Se esse artigo foi útil e puder me pagar um café ficarei feliz. Abraços quentinhos para vocês !!

Como fazer background gradiente com css was originally published in React Brasil on Medium, where people are continuing the conversation by highlighting and responding to this story.

Este artigo oferece uma visão geral para implementar uma aplicação de chat utilizando React-Native e Firebase, bem como algumas bibliotecas para auxiliarem na manipulação dos dados no Firebase. Seja você um desenvolvedor React iniciante ou experiente, este artigo tem o que muitos buscam para entender como funciona uma estrutura básica de uma aplicação de chat.

Como já sabem eu sempre prezo pela legibilidade e a simplicidade do código para manter o conteúdo bem acessível e simples de seguir então vou privar esse tutorial de qualquer biblioteca ou conceito o qual eu entenda que pode deixar a compreensão deste conteúdo mais dificil, salvo o caso da biblioteca do firebase que é estritamente necessária para o serviço que estou utilizando (Firebase).

Um chat de ínicio parece algo bem complexo, no geral eu acreditava que teria grande dificuldade em tratar as mensagens real-time, não vou dizer que é uma tarefa simples, até porque é trabalhosa, mas não é uma tarefa que precisei pensar muito na lógica, no fim foi apenas usar o que o próprio firebase já disponibiliza, agora chega de conversa e vamos para o post.

Como de costume deixo aqui o que acredito ser os requisitos necessários para que você consiga compreender bem esse artigo e replicá-lo com certa facilidade.

Pré-requisitos e conhecimentos prévios desejáveis:

Estou considerando aqui que você já sabe o básico sobre layout (CSS) e também criar um projeto em React-Native, dito isto, vou ignorar toda a parte de criação e configuração do projeto, os conhecimentos que você vai precisar são:

• React Native;
• Layout com FlexBox;
• React Navigation;
• Conta Google para utilizar o Firebase.

Como sempre também vou tentar ser o mais sucinto possível, objetivando a simplicidade do código em poucas linhas.

Criando o projeto no firebase:

Acesse o console do firebase e crie um novo projeto, esse passo é muito simples, é basicamente clicar próximo, próximo e finalizar, tão simples quanto instalar um programa no Windows.

Com o projeto criado vamos agora criar um banco de dados realtime, um banco de dados realtime permite que você armazene e sincronize dados com um banco de dados na nuvem NoSQL (tipo MongoDB). Eles são sincronizados em todos os clientes, em tempo real, e permanecem disponíveis quando o app está off-line.

Como o projeto é apenas de teste eu vou utilizar um banco no modo teste.

Com o banco criado, eu já posso organizar as chaves do meu banco, eu por exemplo gosto de utilizar uma chave chamada chats, essa chave será como um Array que irá reunir todos os chats da minha aplicação, você pode entender chats aqui sendo como as conversas do WhatsApp.

Cada chat tem como chave um id único e o conteúdo será uma chave messages que será como um Array contendo cada mensagem daquela conversa.

Agora que já configurei o firebase como precisamos, podemos seguir para o código.

O primeiro passo com o código será de construir o layout, acho importante começar por essa parte para para ter algo visual para trabalhar depois, você pode utilizar de templates ou bibliotecas para essa parte de layout, caso queira pular essa parte de layout e partir para a lógica do chat é só clicar aqui.

Construindo o layout da tela de conversas

Aqui estou utilizando React-Native então vou criar o layout com base na tela pequena de um celular.

vamos criar inicialmente um Array para termos um mock com o mesmo formato de dados que vamos consumir do firebase mais tarde.

const chats = [
  {
    id: 1,
    users: [
      {
        id: 32,
        phone: '+5511999882323',
      },
      {
        id: 99,
        phone: '+5521991234321',
      },
    ],
    messages: [
      {
        id: '-MLjvqRCEhOCF2MAFjng',
        content: 'Oi, tudo bem?',
        sent: '2020-11-09T22:16:40-04:00',
        sentBy: 99,
      },
      {
        id: '-MLjvqRCEhOCF2MAFjng',
        content: 'Tudo sim e contigo?',
        sent: '2020-11-09T22:16:40-04:00',
        sentBy: 32,
      },
    ],
  },
  {
    id: 2,
    users: [
      {
        id: 32,
        phone: '+5511999882323',
      },
      {
        id: 99,
        phone: '+5532988882222',
      },
    ],
    messages: [
      {
        id: '-MLjvqRCEhOCF2MAFjng',
        content: 'E aquele conteúdo sobre como criar um chat?',
        sent: '2020-11-09T22:16:40-04:00',
        sentBy: '+5511999990000',
      },
    ],
  },
];

A tela inicial dessa aplicação irá listar os chats/conversas, vamos construi-la com o seguinte código.

import React from 'react'
import {SafeAreaView, StyleSheet, Text} from 'react-native'
import ChatItem from './ChatItem'

const currentUser = 32

const chatsMock = [
  {
    id: 1,
    users: [
      {
        id: 32,
        phone: '+5511999882323',
      },
      {
        id: 99,
        phone: '+5521991234321',
      },
    ],
    messages: [
      {
        id: '-MLjvqRCEhOCF2MAFjng',
        content: 'Oi, tudo bem?',
        sent: '2020-11-09T22:16:40-04:00',
        sentBy: '+5511999990000',
      },
    ],
  },
  {
    id: 2,
    users: [
      {
        id: 32,
        phone: '+5511999882323',
      },
      {
        id: 99,
        phone: '+5532988882222',
      },
    ],
    messages: [
      {
        id: '-MLjvqRCEhOCF2MAFjng',
        content: 'E aquele conteúdo sobre como criar um chat?',
        sent: '2020-11-09T22:16:40-04:00',
        sentBy: '+5511999990000',
      },
    ],
  },
]

const styles = StyleSheet.create({
  container: {
    marginTop: 16,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
    fontWeight: '800',
    marginTop: 32,
  },
})

const Chats = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>Chats</Text>
      {chatsMock.map((chat) => (
        <ChatItem chat={chat} currentUser={currentUser} />
      ))}
    </SafeAreaView>
  )
}

export default Chats

O código é bem simples, basicamente um map do Array de chats, é importante que os componentes de chat recebam algum tipo de informação sobre o usuário atual, assim conseguiremos facilmente diferenciar um usário do outro na hora de mostrar os balões de chat por exemplo.

Aqui nesse componente eu utilizei um valor fixo currentUser cujo valor é o id do usuário atual, perceba que esse valor é passado via prop para o component ChatItem, o qual usa essa informação para definir quem está enviando e quem está recebendo a mensagem.

import React from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
import UserDefaultImage from './user.png';

const styles = StyleSheet.create({
  chatItemContainer: {
    flexDirection: 'row',
    marginVertical: 16,
  },
  userPairImage: {
    width: 38,
    height: 38,
    marginRight: 12,
  },
  userPairPhone: {
    fontWeight: '500',
    marginBottom: 6,
  },
  chatLastMessage: {
    fontWeight: '300',
    color: '#999',
  },
  container: {
    marginTop: 16,
    marginHorizontal: 16,
  },
});

const ChatItem = ({chat, currentUser}) => {
  const [userPair] = chat.users.filter((u) => u.id !== currentUser);
  return (
    <View key={chat.id} style={styles.chatItemContainer}>
      <Image source={UserDefaultImage} style={styles.userPairImage} />
      <View>
        <Text style={styles.userPairPhone}>{userPair.phone}</Text>
        <Text style={styles.chatLastMessage}>
          {chat.messages[chat.messages.length - 1]?.content}
        </Text>
      </View>
    </View>
  );
};

export default ChatItem;

Ali na linha 30 fazemos um filtro dos usuários do chat, buscando todos usuários com id diferente do usuário atual, como neste projeto o número de pessoas em um mesmo chat é sempre dois, o valor retornado pelo filter será sempre um Array com um item, logo destruturamos esse item para a variável userPair.

Caso não entenda como a destruturação na linha 30 está acontecendo sugiro ler a documentação dessa técnica na MDN:

Atribuição via desestruturação (destructuring assignment) - JavaScript | MDN

Com isso já temos a tela de chats mockada (isto é com dados fixos), agora vamos passar para a próxima tela que irá mostrar as mensagens do chat ou melhor dizendo a tela do chat em si.

Construindo o layout da tela de chat

É importante deixar claro que por motivos didáticos estou ignorando aqui os passos de configuração da navegação deste projeto, mas é um passo que será necessário em qualquer projeto, independente da tecnologia, sugiro que primeiro domine o assunto de navegação entre telas, já que muitos parâmetros são passados pela navegação.

Vou deixar o mínimo de configuração no código final, mas não entrarei nos detalhes sobre navegação neste post.

A tela de chat terá o seguinte código:

import React, {Fragment, useState} from 'react';
import {
  KeyboardAvoidingView,
  Platform,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import Balloon from './Balloon';

const KEYBOARD_AVOIDING_BEHAVIOR = Platform.select({
  ios: 'padding',
  android: 'height',
});

const styles = StyleSheet.create({
  container: {
    marginTop: 16,
    marginHorizontal: 16,
  },
  scrollViewContainer: {
    paddingHorizontal: 10,
    paddingVertical: 10,
    top: 10,
  },
  sendButton: {
    backgroundColor: Colors.primary,
    color: Colors.white,
    height: 40,
    width: 70,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 20,
    marginRight: 5,
  },
  messageTextInputContainer: {
    justifyContent: 'flex-end',
    paddingHorizontal: 5,
    paddingVertical: 5,
    borderColor: 'transparent',
    borderTopColor: Colors.light,
    alignItems: 'center',
    flexDirection: 'row',
  },
  messageTextInput: {
    flex: 1,
    minHeight: 40,
    maxHeight: 90,
    paddingHorizontal: 12,
    fontSize: 17,
    paddingTop: 8,
    marginHorizontal: 5,
    borderColor: Colors.light,
    borderWidth: 1,
    backgroundColor: Colors.white,
    borderRadius: 20,
  },
});

const Chat = ({route}) => {
  const [message, setMessage] = useState('')
  const {chat, currentUser} = route.params
  return (
    <Fragment>
      <ScrollView contentContainerStyle={styles.scrollViewContainer}>
        {chat &&
          chat.messages.map((message) => (
            <Balloon message={message} currentUser={currentUser} />
          ))}
      </ScrollView>
      <KeyboardAvoidingView
        behavior={KEYBOARD_AVOIDING_BEHAVIOR}
        keyboardVerticalOffset={76}>
        <SafeAreaView>
          <View style={styles.messageTextInputContainer}>
            <TextInput
              style={styles.messageTextInput}
              placeholder="Digite sua mensagem..."
              placeholderTextColor={Colors.light}
              multiline
              value={message}
            />
            <TouchableOpacity
              style={styles.sendButton}
              disabled={!message}
              onPress={() => null}>
              <Text>Enviar</Text>
            </TouchableOpacity>
          </View>
        </SafeAreaView>
      </KeyboardAvoidingView>
    </Fragment>
  );
};

export default Chat;

O código é basicamente composto em sua maioria por tudo que você já conhece do React e React-Native, mas observe que utilizei alguns componentes como KeyboardAvoidingView e SafeAreaView para não termos problema com as interações, e também que extraio o currentUser e o chat dos params da navigation.

O component Balloon precisa de alguns tratamentos no posicionamento e cor para sabermos quando é uma mensagem enviada e quando é uma recebida:

import React from 'react'
import {StyleSheet, Text, View} from 'react-native'
import {Colors} from 'react-native/Libraries/NewAppScreen'

const styles = StyleSheet.create({
  bubbleWrapper: {
    flexDirection: 'column',
  },
  bubbleWrapperSent: {
    alignSelf: 'flex-end',
    marginLeft: 40,
  },
  bubbleWrapperReceived: {
    alignSelf: 'flex-start',
    marginRight: 40,
  },
  balloon: {
    paddingHorizontal: 8,
    paddingVertical: 8,
    borderRadius: 16,
  },
  balloonSent: {
    backgroundColor: Colors.white,
  },
  balloonReceived: {
    backgroundColor: Colors.primary,
  },
  balloonText: {
    fontSize: 18,
  },
  balloonTextSent: {
    color: Colors.black,
  },
  balloonTextReceived: {
    color: Colors.white,
  },
})

const Balloon = ({message, currentUser}) => {
  const sent = currentUser === message.sentBy;
  const balloonColor = sent ? styles.balloonSent : styles.balloonReceived;
  const balloonTextColor = sent
    ? styles.balloonTextSent
    : styles.balloonTextReceived;
  const bubbleWrapper = sent
    ? styles.bubbleWrapperSent
    : styles.bubbleWrapperReceived;
  return (
    <View>
      <View style={{...styles.bubbleWrapper, ...bubbleWrapper}}>
        <View style={{...styles.balloon, ...balloonColor}}>
          <Text style={{...styles.balloonText, ...balloonTextColor}}>
            {message.content}
          </Text>
        </View>
      </View>
    </View>
  )
}

export default Balloon

Perceba que da linha 41 até a 47 é basicamente um tratamento nos estilos para exibirmos as mensagens da forma correta, alinhando as mensagens recebidas usando display flex com align-self nos balões de chat.

Perceba que também mudamos a cor de acordo com a mensagem, mensagens enviadas possuem a cor branca, recebidas a cor primária no caso ciano.

E galera para manter que este conteúdo não ficar massivo e longo vou continuar este conteúdo em uma parte 2 que estará disponível em breve, assim que eu finalizar eu vou substituir essa seção com o link.

De qualquer forma vou deixar aqui a primeira parte do código para que vocês já consigam replicar ao menos o layout.

Obrigado! Te vejo na parte 2!

GitHub - digital-heroes/firebase-chat

Agradeço que tenha chegado até aqui, siga me aqui no medium para mais dicas React e também algumas ideias de desafios que enfrentamos hoje em dia como desenvolvedores.

Deseja se conectar?
https://www.linkedin.com/in/wesleyguirra

Construindo um chat usando React-Native e Firebase. Parte 1 was originally published in React Brasil on Medium, where people are continuing the conversation by highlighting and responding to this story.