Twitter Clone full stack app – Parte 2: React tutorial

React tutorial? Deixa comigo! 😀

Nesta parte 2 da nossa aplicação full-stack iremos criar um clone do Twitter de ponta a ponta!

Caso não tenha visto a parte 1, criamos o servidor utilizando Node JS Express. Você também pode acessar o código completo no GitHub, deste e do artigo anterior.

Você também pode fazer apenas a parte 2, clonando a branch server do repositório do Github usando o comando:

git clone –single-branch –branch server

Ao final deste React tutorial, teremos uma aplicação totalmente funcional, seguindo boas práticas de desenvolvimento de software e utilizando os últimos conceitos do React como:

• JSX;
• Props;
• State;
• Hooks.

Teremos uma interface igual a esta:

Qualquer dúvida que possa aparecer durante o desenvolvimento, podem comentar ou enviar diretamente para mim: [email protected]

React tutorial: requisitos

Os requisitos para conseguir acompanhar o desenvolvimento são:

• Conhecimentos em JavaScript;
• Ter uma versão do servidor baixada na máquina local;
• Node v12.x.

Iniciando o monorepo

Por motivos de organização e para facilitar o entendimento desse React tutorial, criaremos a parte do cliente no mesmo repositório que o servidor. Iremos separar cada parte da aplicação em sua única unidade lógica (um diretório). Para isso, precisamos separar as partes relacionadas ao servidor e do cliente.

Atualmente nossa aplicação está da seguinte forma:

Faremos com que a estrutura seja como esta:

Como primeiro passo, criamos um diretório chamado server, onde ficará guardado toda a parte que envolve o servidor. 

Após isso, devemos mover todos os arquivos para esta nova pasta, no entanto, sabemos que nossa aplicação necessita de muitas dependências, e que estas dependências são todas alocadas dentro da pasta node_modules, o que a torna uma pasta muito pesada de ser movida de um lado para o outro.

Podemos utilizar dos benefícios do arquivo package.json – que nos permite instalar todas as dependências necessárias com um único comando – e remover todo o diretório node_modules, para depois baixá-lo já no lugar certo.

Apagamos o diretório e movemos todos os arquivos (menos o diretório .git, caso esteja utilizando o git como versionamento) para dentro da pasta server, de forma que nossa aplicação ficará  apenas com a pasta server na raíz.

Podemos reinstalar as dependências do servidor que excluímos anteriormente, faremos isso acessando o server e utilizando o comando yarn install (npm install). 

Para iniciarmos o servidor, utilizamos o comando yarn start, que fará com que o nosso servidor fique rodando na porta que definimos, no caso a porta padrão: 3333. 

Caso sua aplicação não tenha mais o arquivo .env podemos copiar o .env.example e preencher com as variáveis que havíamos escolhido:

Começando nosso React tutorial

Com as responsabilidades do servidor separadas em um único diretório, podemos então criar o projeto que servirá como a parte do front-end da nossa aplicação. 

Utilizaremos React JS, uma biblioteca de código aberto utilizada para criação de interfaces gráficas criada pelo Facebook.

Podemos criar um projeto com esse React tutorial de várias formas, a mais fácil delas é utilizando uma biblioteca chamada create-react-app, também criada pelo Facebook, que já traz todas as configurações necessárias para rodar uma aplicação.

Ao longo do tutorial estamos utilizando yarn como gerenciador de pacotes, podemos iniciar o create-react-app com o comando:

yarn create react-app client

Onde client é o nome da nossa aplicação.

• Também é possível utilizar o NPM com o comando npx create-react-app client

Após o tempo de instalação e configuração devemos ter uma estrutura de arquivos como a seguinte:

Devemos entender a estrutura de pastas para entender como nosso react tutorial será desenvolvido:

• public: diretório onde ficam os arquivos que são públicos ao browser (index.html, logo.png, favicon.ico);
• src: diretório onde ficarão nossos arquivos .js ou .jsx que são nossos componentes criados nesse React tutorial (veremos mais sobre JSX nos próximos passos);
• package.json: arquivo que contém informações, dependências e scripts da nossa aplicação.

Para descobrirmos como a aplicação funciona podemos ver os scripts que estão disponíveis no arquivo package.json:

• start: script para iniciar a aplicação;
• build: script para criar nosso código pronto para produção, contendo apenas arquivos HTML, CSS e Javascript;
• test: script para rodar a rotina de testes;
• eject: script para extrair os arquivos de configuração que estão abstraídos pelo create-react-app (geralmente não precisamos utilizar esse script).

Iniciamos então a aplicação através do comando yarn start (lembre-se de entrar na pasta client antes de rodar o script).

Arquivos que não serão utilizados nesse react tutorial

Caso você tenha dado uma olhada nos arquivos do projeto deste react tutorial, deve ter percebido que a aplicação já possui alguns arquivos padrão que formam a página inicial que está sendo mostrada no browser.

Como criaremos nossa própria interface, podemos remover os arquivos que não utilizaremos e deixar o projeto pronto para que possamos começar, de uma vez por todas, o desenvolvimento do nosso react tutorial.

Os arquivos que podem ser deletados são:

• src/serviceWorkder.js;
• src/logo.svg;
• src/App.test.js;
• src/App.css.

Devemos também remover as referências feitas a estes arquivos dentro dos outro arquivos.

index.js:

App.js:

Se olharmos no browser veremos uma tela branca com o text “App” escrito no canto superior esquerdo.

Entendendo JSX

Um dos grandes diferenciais desse React tutorial é o fato de lidar com o HTML juntamente com o JavaScript, trazendo todo o dinamismo do JS para a linguagem de marcação. Veremos como é prático integrar conceitos de programação como iteração, condicionais e até mesmo operações lógicas em um único react tutorial.

Ao entrarmos no arquivo App.js, podemos perceber pontos importantes:

• Temos uma função chamada App que não recebe nenhum parâmetro, e que retorna uma tag html com uma propriedade parecida com a que conhecemos do html padrão, className. Isso é JSX! 

É importante sabermos que as semelhanças não são em vão, o atributo className serve para o mesmo propósito que o atributo class em uma tag html padrão.

Porém, tem o nome diferente devido à necessidade do React de ter uma nomenclatura específica para atributos já conhecidos pelo browser e para que não haja conflito entre as propriedades.

Criando nosso primeiro componente

Para darmos início ao nosso react tutorial, começaremos pela parte que toda nossa aplicação depende, o login.

Podemos implementar uma tela de login básica que peça ao usuário seu login e sua senha e dê a opção de se cadastrar, caso o usuário não tenha uma conta.

Nosso componente inicial deve ficar parecido a este belíssimo design:

Se quisermos seguir as boas práticas de uma aplicação React, devemos separar cada componente em um arquivo específico.

Por padrão, os componentes React que são reutilizados em múltiplas páginas ficam dentro do diretório src/components, e os que representam páginas ficam no diretório src/pages.

Ambos em diretório com o nome no componente, neste caso src/pages/Login, em um arquivo index.js.

Criaremos então, dentro da pasta src/pages/Login/index.js, que é referente a página de login, com o seguinte conteúdo:

Se abrirmos o browser, vemos que nada aconteceu, certo? A tela continua apenas com a palavra App, isso porque ainda não estamos utilizando nosso componente.

Para que possamos ver como está a parte visual, precisamos importar no arquivo principal o Login e utilizá-lo como utilizaríamos uma tag HTML.

Agora é possível vermos o feedback visual no browser, no entanto, ainda não está do jeito que gostaríamos. Isso se dá pelo fato de ainda não termos criado nenhuma estilização para nossa aplicação.

Podemos  também criar o componente responsável pela criação de uma conta que seguirá o mesmo padrão do componente de login.

Na pasta src/components/Register criamos um arquivo index.js como o seguinte:

Agora temos nossos componentes necessários para que o usuário consiga acessar nossa aplicação, assim será possível que o usuário, mesmo sendo novo, consiga entrar na aplicação para criar seus tweets. 

Temos que fazer com que esses componentes sejam utilizados pelo App, porém, se adicionarmos o componente diretamente abaixo do Login acabaremos com 2 forms, um embaixo do outro.

O que realmente queremos que aconteça é que, dependendo da URL que o usuário acesse, nossa aplicação mostre o componente correto. 

Implementando rotas

A implementação de rotas é uma das partes fundamentais de uma aplicação React, com ela podemos criar diferentes páginas, links dinâmicos e sub-rotas da mesma forma que criamos componentes visuais. 

Para implementarmos as rotas da nossa aplicação, utilizaremos uma biblioteca chamada react-router, que é a biblioteca mais utilizada para criação de rotas em aplicações React.

Instalamos no projeto através do comando:

yarn add react-router-dom

Por padrão criamos nossas rotas no arquivo src/Routes/index.js, da seguinte forma:

• Importamos do react-router-dom:
  • BrowserRouter: componente responsável pelo controle dos estados da URL da aplicação;
  • Switch: sistema de match da rota e URL;
  • Route: declara uma rota e qual componente deve ser renderizado quando a rota for ativada.

Na declaração da rota, informamos a URL que deveria ativa-lá e o componente que queremos que seja renderizado. Neste caso, o componente login na URL / que é referente a raíz da aplicação.

* A propriedade exact informa ao Switch que a rota a ser ativada deve ser exatamente igual a que foi atribuída, se não adicionássemos isso a rota /register também ativaria a rota /. 

Devemos então importar este componente no arquivo App.js da seguinte forma:

Estilizando componentes

Você deve estar percebendo que, até agora, nossos componentes são apenas tags html sem estilização nenhuma, apenas as características padrão implementadas pelo browser.

Podemos – e devemos – criar estilos próprios a nossos componentes para que expressem mais nossa identidade.

Para criarmos estilos, podemos usar a abordarem do CSS3, selecionando componentes pela classe, pelo id ou pela própria tag html e atribuindo CSS ao componente escolhido.

No entanto, como estamos criando uma aplicação com esse React tutorial, nada melhor que utilizarmos uma biblioteca que junta o CSS com JS para facilitar o desenvolvimento!

Existem diversas soluções que trazem o conceito de CSS-in-JS e uma biblioteca muito conhecida é a chamada: styled-components, com ela criamos componentes desse React tutorial que são responsáveis pela estilização. 

Baixaremos o styled-components através do comando:

yarn add styled-components

Como nosso primeiro componentes estilizado, criaremos o estilo da página de login. Para isso começamos criando um componente que servirá de estrutura para todas as páginas, chamaremos de Layout. 

Devemos criar um novo componente na pasta src/components/Layout/index.js que ficaria como o seguinte:

Criamos uma função que representa nosso componente Layout.

Essa função recebe como argumento uma propriedade chamada props que é um objeto com diferentes propriedades do nosso componente (ainda não passamos pela explicação desse conceito do React, aprenderemos em uma próxima seção).

Agora, devemos criar a estilização deste componente, na pasta do componente criamos um arquivo chamado src/components/Layout/styles.js e nele colocaremos todas as funções responsáveis pela estilização do componente.

O arquivo fica da seguinte forma:

Nosso componente Layout.js tem que ser alterado para utilizar os estilos que criamos, para isso importamos os componentes que criamos com o styled-components e substituímos as tags html que estávamos usando:

Agora temos que fazer nosso componente ser utilizado, no componente src/pages/Login inserimos o layout:

Podemos notar uma aparência melhor no browser, porém ainda devemos criar a estilização para componente de login:

Seguiremos o mesmo padrão de criação de componentes de estilo para o próprio Login, criamos um arquivo src/pages/Login/styles.js.

E utilizaremos da seguinte forma:

Se acessarmos pelo browser veremos o seguinte feedback visual:

Note que o link para criar conta nos redireciona para a página de registro.

Devemos criar o componente de estilização para a página Register seguindo o mesmo padrão que a página de de login. Utilizaremos o componente Layout dentro da página Register e a mesma estilização do componente login.

Lidando com estados

Até agora, nossa aplicação ainda não possui nenhuma interação com usuário, fora a capacidade de escrever no elemento <input> que é uma interação que o próprio browser implementa.

No entanto, se quisermos que usufruir ao máximo as capacidades desse React tutorial, devemos utilizar as funcionalidades que a biblioteca nos oferece.

Uma das funcionalidades mais populares do React é o chamado state, que representa o estado de nossa aplicação, seja um texto em um input, o estado de um checkbox ou a disponibilidade de um botão. 

Para termos acesso ao estado de um input por exemplo, utilizaremos um dos conceitos mais relevantes do ecossistema React, os chamados hooks.

Hooks são funções com propósitos específicos dentro de uma aplicação que utiliza React, como guardar estados (useState), realizar algum efeito (chamada de API, manuseio de dados – useEffect) e para diversas outras funcionalidades.

Todos os hooks seguem o padrão de ter o prefixo use!

No caso de queremos guardar o texto escrito pelo usuário, devemos utilizar o hook que cuida de estados, tendo em vista que o texto representa como nosso componente se encontra em um determinado momento.

Para isso, importamos do React através de um destruct o hook useState. 

Esse hook funciona como uma função, porém com duas características peculiares:

• Deve ser chamado no início do componente;
• Não pode ser chamado dentro de uma condição ou iteração.

Vejamos na prática como isso funciona, implementamos a interação do usuário com a textarea da seguinte forma:

• Importamos useState do React;
• Chamamos o useState dentro do componente passando como argumento o estado inicial que quisermos;
• Essa função retorna um array contendo o estado atual e uma função que altera este estado;
• Atribuímos o valor do input a essa variável username;
• Imprimimos no console o estado da variável username cada vez que ela é alterada.

Temos agora o estado relativo ao atributo username que representa o texto que o usuário escreveu no input. Agora, ao escrevermos algum texto na input de nome de usuário será possível ver no console o novo estado a cada alteração:

* Podemos excluir o console.log do nosso componente agora, para não ficarmos expondo nosso estado ao usuário.

Com essa implementação, podemos ter acesso ao conteúdo que o usuário escreve no componente de input. Devemos fazer a mesma implementação para o input de senha, para que seja possível que façamos a interação de login e de registro.

Lembre-se que os hooks podem ser utilizados inúmeras vezes dentro de um componente, precisamos apenas declarar um novo useState para o conteúdo da senha.

Se formos preenchendo os campos, podemos ver a feedback no console dos dados que escrevemos. Devemos agora remover o console.log para que não seja possível ver os dados do usuário enquanto é digitado. 

Replique este comportamento no componente Register.

Criação de um novo usuário

Agora que temos nossas rotas definidas, os estilos já implementados e já lidamos com os estados da aplicação, podemos começar a fazer as interações da parte do cliente – com esse React tutorial –  com a parte do back-end – NodeJS.

Para que essa comunicação possa ser feita com sucesso, devemos fazer com que o servidor esteja rodando juntamente com a aplicação do front.

Abra um novo terminal, entre na pasta server  na raíz do projeto e execute o comando yarn start. Se tudo ocorreu corretamente, devemos receber a seguinte mensagem no console:

Caso não tenha conseguido ver esta mensagem, algo deve ter saído do planejado. Os possíveis problemas podem ser: a ausência do arquivo de variáveis de ambiente do projeto (.env) ou a falta de instalação das dependências – que pode ser resolvido rodando o comando yarn install ou npm install.

As interações com o back-end são feitas via HTTP, para isso utilizaremos uma library chamada axios. Com ela, podemos realizar todos os métodos HTTP (GET, POST, UPDATE, DELETE) para uma URL específica.

Devemos baixar o axios no projeto com o comando:

yarn add axios

No botão de entrar, devemos criar uma função que será chamada toda vez que o usuário clicar no botão. Para isso utilizaremos a propriedade onClick do botão que recebe uma função de callback.

Perceba que todas vez que clicamos no botão a página é recarregada e não vemos nada no console.

Isso acontece por um comportamento padrão do browser, como queremos controlar isso, utilizamos o método preventDefault do argumento event para que o browser não faça nenhuma ação padrão.

Agora, se preenchermos os campos e apertarmos entrar, veremos o conteúdo sendo impresso no console sem a página recarregar. Porém, não queremos que o usuário possa entrar sem digitar nenhum nome de usuário ou senha, tratamos isso adicionando a propriedade required a cada input do componente. 

Se ativarmos a função de entrar agora, sem nenhum campo preenchido, veremos um feedback do próprio browser falando que o campo é obrigatório.

Para implementarmos a interação do client com o servidor, devemos chamar o axios na função de callback do botão de entrar, utilizando o método POST na rota de login do servidor, SERVER_URL/login.

O código fica assim:

• Importamos o axios;
• Fazemos nossa função de tratamento de login como uma função assíncrona;
• Envolvemos a chamada em um try/catch para tratar possíveis erros;
• Chamamos o método POST do axios que serve para mandar uma request POST para o servidor passando como argumento:
  • A URL do servidor com o rota de login;
  • Um objeto contendo o nome do usuário e a senha.

Se olharmos no console, veremos um erro como este:

Isso acontece pois o nome de usuário que criamos não foi encontrado pelo servidor. Para conseguirmos acessar a aplicação precisamos ter um usuário criado, devemos então implementar a parte de registro de usuário e depois voltaremos para a parte de login.

Na página de cadastro criaremos a mesma estrutura para comunicar um novo usuário sendo criado no servidor. Nosso componente ficaria como este:

• Importamos useState do React;
• Importamos useHistory que é um custom hook do react-router para lidar com histórico do browser;
• Declaramos uma variável history usando o useHistory;
• Criamos a função que trata o registro de um novo usuário;
• Caso tudo ocorra bem redirecionamos o usuário para tela de login usando o método push do objeto history.

Caso tudo ocorra bem, podemos criar um usuário novo preenchendo o nome do usuário e senha,  e recebendo como feedback do servidor um objeto como este:

No entanto, caso o username já exista, devemos retornar um feedback ao usuário informando o erro. Faremos isso utilizando um outro useState específico para o erro.

Agora podemos voltar ao componente de login, se tentarmos logar com a conta que criamos anteriormente devemos receber este feedback no console.

Perceba que recebemos do servidor um token de autenticação que usaremos para saber se o usuário está logado ou não. Para isso, devemos guardar este token em algum lugar para que possamos utilizá-lo nas próximas requisições que fizermos.

A forma mais fácil de fazer isso é guardar o token no localStorage, um espaço no browser feito especificamente para guardar informações não tão grandes que devem ser mantidas mesmo se página for atualizada.

Para implementarmos essa função, devemos alterar nosso método de tratamento de login para que fique da seguinte forma:

Para termos acesso às informações do usuário em nossa aplicação, devemos conseguir extrair do JWT quem é o usuário logado.O decode do token é feito através da mesma lib que usamos para cria-lo, jsonwebtoken.

yarn add jsonwebtoken

Os dados do usuários são acessados fazendo o decode do token que o autentica, no caso no código ficaria como o seguinte:

Antes de avançarmos para próxima etapa do desenvolvimento desse react tutorial, devemos fazer com que a URL do servidor seja uma variável de ambiente para que possamos alterá-la para um URL real caso formos dar deploy na aplicação.

Felizmente o create-react-app faz com que o uso de variáveis de ambiente nesse React tutorial sejam muito simples de serem usadas!

Basta que criemos um arquivo .env na raíz do projeto e criemos as variáveis iniciando por REACT_APP_. Nesse caso nossa variavél será REACT_APP_SERVER_URL=http://localhost:3333.

Com isso, terminamos a parte de autenticação do usuário, podemos então começar a implementar a parte de criação de tweets.

Componente de criação de tweets

O primeiro passo para criar a página, que será a Home do usuário, é criar na pasta src/pages, uma pasta específica para o componente e adicionar essa nova rota ao arquivo de rotas.

Ao entrarmos na aplicação, somos redirecionados para esta página. Como estamos fazendo deste react tutorial um clone do Twitter, precisaremos dos componentes principais que formam a interface do Twitter.

Um destes componentes é a caixa de texto onde são escritos os tweets. 

Após juntar todas minhas habilidades de UX/UI, cheguei a esta interface que criaremos como nosso componente de criação de tweets.

Chamaremos esse componente de TweetForm,  devemos criá-lo na pasta src/components/TweetForm/index.js:

A estilização ficaria como a seguinte: (src/components/TweetForm/styles.js)

Em nosso componente TweetForm importamos este componente Container, e subsitituímos a tag html <div> pelo Container da seguinte forma:

Devemos então importar na página Home este novo componente.

Se acessarmos localhost:3000/home devemos ver esta interface.

Devemos implementar o estado desse componente, juntamente com a função que criará o tweet no servidor. Faremos da seguinte forma:

• Importamos useState do React;
• Criamos um estado referente ao texto escrito na textarea;
• Criamos uma função que será chamada quando o botão de enviar for ativado;
  • Nessa função começamos buscando o token que estava guardado no LocalStorage;
  • Criamos uma requisição do tipo POST no endpoint de criaçõa de tweet, passando o conteúdo do tweet e o token de autorização;
• Limpamos o conteúdo da textarea.

Se tudo ocorreu como esperado, devemos ter um feedback como este no console:

Rotas privadas

Tudo parece estar funcionando corretamente, porém nossa aplicação tem um problema que ainda não tratamos . Abra uma janela anônima e acesse a url localhost:3000/home, o que acontece? Conseguiu descobrir?

O problema que estamos tendo é a falta de autenticação para as rotas, um usuário que acesse diretamente a página de home terá acesso às funcionalidades de criar um tweet mesmo sem estar logado.

Não devemos permitir que isso aconteça, para isso devemos criar rotas que exijam que o usuário esteja logado para que possa acessar.

Na pasta Routes devemos criar um componente chamada AuthRoute, o qual servirá como barreira para rotas que necessitam de autenticação. O componente ficaria como o seguinte:

• Importamos a Route e useHistory do react-router-dom;
• Criamos um componente que checa se há o SESSION_TOKEN no localStorage;
  • Caso não haja, o usuário é redirecionado para a página de login;
  • Caso haja o componente é renderizado normalmente.

 Agora, todas as rotas, que devem ser restritas ao usuário que não está logado, devem utilizar o componente AuthRoute ao invés do Route do react-router-dom.

Listagem de tweets

Os últimos componentes que estão faltando para nossa aplicação ficar completa são: o card de um tweet e a listagem de tweets.

Para implementarmos a listagem devemos criar o arquivo src/components/TweetList/index.jse implementá-lo como o seguinte:

• Criamos um componente TweetList seguindo o padrão dos demais componentes;
• Esse componente, recebe como um parâmetro um argumento chamado props;
• Imprimimos o objeto props.

Entendendo props

O conceito de props é muito importante nesse react tutorial, inclusive, é um conceito importante para o React no geral, com ele é possível reutilizarmos componentes com dados diferentes. Na prática, os props são os atributos que o nosso elemento recebe, no caso do TweetList uma lista de tweets que será renderizada.

Para que o nosso componente tenha acesso a prop tweets, devemos fazer com que o componente passe esta propriedade a ele. Na página Home, ao renderizar o TweetList, adicionamos ao componente um atributo chamado tweets e vemos como o componente se comporta.

Home:

No console devemos ter o seguinte feedback:

O atributo tweets que passamos ao nosso componente está sendo impresso no console, isso significa que agora temos acesso aos tweets dentro do componente TweetList.

Para renderizarmos uma lista, devemos percorrer o array retornando o elemento de nossa escolha. A renderização ficaria como a seguinte:

• Criamos uma lista não ordenada (ul);
• Percorremos o array de tweets utilizando um map, pegando o elemento e o index para renderizar um item da lista.

* A propriedade key é obrigatória nesse react tutorial e deve ser única para cada elemento, para que o React saiba em qual elemento está sendo feita a interação.

No browser, devemos ter uma interface assim:

Para que possamos pegar os tweets a partir do nosso servidor, precisaremos implementar um novo hook do React, o useEffect.

Com ele podemos fazer interações com diferentes fontes e em diferentes estágios do nosso componente.

A sintaxe do useEffect é um pouco diferente do useState, ele recebe uma função como argumento que será rodada em determinado momento. A utilização seria como a seguinte:

• Importamos useState e useEffect do React;
• Criamos um estado para guardar os tweets (array vazio como estado inicial);
• Criamos um efeito que tem a função de buscar os tweets no servidor e guardar no estado do componente;
• Buscamos cada usuário a partir do owner do tweet para termos acesso ao username.

* Perceba que a função async foi declarada e chamada dentro do useEffect devido ao fato do useEffect já ser uma função assíncrona, devemos fazer a chamada de API desta maneira.

Nosso componente visual deve estar parecido com este:

A falta de estilização se dá pelo fato de não termos criado o arquivo styles.js para a listagem, e ainda não termos implementado o componente que representará cada tweet.

Criando o componente do tweet

Criaremos um componente específico para mostrar os tweets na tela, na pasta src/components/Tweet criamos um novo arquivo index.js com o seguinte conteúdo:

Renderizamos o componente a partir dos atributos que vieram via props, porém se nenhuma estilização. Criaremos então, na pasta src/components/Tweet, o arquivo styles.js como o seguinte código:

E susbituiremos as tags html pelos componentes estilizados:

No componente TweetList devemos substituir a tag <li> pelo componente Tweet:

Se verificarmos nosso browser, pereceberemos que o atributo referente ao dono do tweet está como um ID. Se quisermos mostrar o nome de quem fez o tweet, devemos buscar no servidor o usuário e salvar no estado o nome do usuário. 

Para isto, dentro do componente Tweet criaremos uma requisição ao banco da seguinte forma:

Curtindo um tweet

O usuário deve poder curtir os tweets que estão na lista de tweets, para isso devemos ter uma função que altera o objeto do tweet no componente Home.

Por convenção, chamamos essa função de onLike e passaremos via props do componente TweetList e depois para o Tweet.

Home.js

• Tiramos ou retiramos o tweet de acordo com a ação:
  • Caso já esteja curtido, removemos;
  • Caso não esteja curtido, adicionamos;
• Passamos a função de onLike para o tweetList.

O que acharam desse React tutorial?

Com isso terminamos as funcionalidades da nossa aplicação, implementamos:

• Login;
• Registro;
• Criação de tweets;
• Listagem de tweets;
• Likes.

Espero que tenha conseguido passar um pouco do meu conhecimento com essas tecnologias, o código tem bastante partes que pode ser melhorado e otimizado ainda para que seja uma aplicação possível de ir para produção.

Fico à disposição para tirar qualquer dúvida e segue o repositório github usado no desenvolvimento.

Até mais! 😉