Recriando a home do Amazon Prime Video com ReactJS #1

Fala, galera!

Eu tava de bobeira esses dias e resolvi tentar recriar a home do Amazon Prime Video usando o ReactJS. O resultado, por enquanto, tá assim, ó:

O clone.

Agora, se liga no que eu me baseei pra fazer:

O original.

E aí, curtiu?

Então, bora ver como é que eu organizei esse negócio. Mas, antes de começar, algumas considerações:

• Você vai precisar do npm ou do yarn instalado, pra instalar os pacotes que nós vamos usar (particularmente, eu prefiro o yarn);
• Eu vou considerar que já exista uma aplicação React configurada pra você desenvolver, dá pra fazer isso rapidinho usando o create-react-app. Dá um saque nesse link aí, se tiver dúvida, manda um salve que eu tento te ajudar;
• Não foi considerado o aspecto responsividade, ok? Foi uma parada na pegada vou tentar replicar o que eu tô vendo e pronto. Mas calma, eu só não pensei nisso AINDA, porque queria focar no React em si, porém… o céu é o limite.

Considerações feitas, bora nessa.

Componentes

O desenvolvimento de aplicações React é baseado na utilização de componentes. O que seriam componentes? Aqui, você encontra o que a documentação do React fala sobre isso. Na minha cabeça, componentes são como peças de Lego, ou de um quebra-cabeça, que juntamos umas as outras pra formar algo maior. Simples assim.

Pra exemplificar, vamos pegar a imagem da página que nós vamos fazer. Como poderíamos dividir aquela página em componentes distintos? Eu pensei em 3 componentes:

• Um Header, que ficaria com a parte da logo, os links, a caixa de busca, etc;
• Um Slider, pra passar aquelas imagens maiores, abaixo do Header;
• E um negócio que eu chamei de MediaSection, onde ficam as imagens dos filmes e séries recomendados (deve ter um nome melhor pra isso, eu sei).

Então, hoje, a nossa página utiliza 3 componentes. Por enquanto, a gente vai focar no Header. Maaaas, antes…

A estilização dos componentes

Antes de começar a falar do Header, bora falar um pouco de estilização. A gente precisa deixar as coisas apresentáveis, né? Pra isso, eu usei o Styled Components. Não sabe o que é? Basicamente, é CSS no Javascript. Eu poderia passar um tempo aqui explicando, mas achei um artigo massa da Aline Bastos, onde ela explica o que é e como usar. Dá um saque aqui.

Tá pronto pra seguir? Então bora!

Bom, antes de aplicar o Styled Components nos componentes em si, eu criei um estilo global, que é aplicado em toda a aplicação (global, né? kkk). Fiz isso usando o createGlobalStyle. O código ficou assim:

./src/styles/global.js

O import da linha 3 é pra usar o Font Awesome, e pra isso ser possível, antes você deve adicionar o pacote font-awesome no projeto usando um

yarn add font-awesome

Agora, só falta usar o estilo na aplicação. Pra fazer isso, é bem fácil, basta importar ele no arquivo App.js.

./src/App.js

Se deu tudo certo, quando você acessar a sua aplicação, verá a belíssima tela abaixo:

Agora sim, bora pro Header.

O componente Header

Sem muita enrolação, por enquanto, o meu Header tá assim:

Header, em linha de código e café.

Em menos de 30 linhas, a gente tem: um componente stateless, utilização de arrow functions, JSX e muito mais!

Se você já manja dessas coisas, ótimo, bora seguir. Se você não sabe nada do que eu tô falando aqui, não se desespera, foca na imagem abaixo e bora seguir também.

“Beleza, Glaubão… eu tô seguindo. Digitei tudo do Header lá, agora eu coloco isso onde?”

Boa pergunta. Se você usou o create-react-app pra criar sua aplicação, deve ter uma pasta src aí, né? Eu costumo criar uma pasta components dentro dela, e dentro da pasta components eu crio uma pasta pra cada componente que eu vou usar. Pra ficar mais fácil, se liga em como tá a minha estrutura de pastas hoje:

Estrutura de pastas.

O código que você copiou vai ficar no arquivo index.js, dentro da pasta Header. Na linha 3 desse arquivo, a gente importa algumas coisas do arquivo styles.js, que fica na mesma pasta. Como o nome do arquivo sugere, neste arquivo estão as estilizações utilizadas no Header.

Upei no github o arquivo que tô usando e você pode conferir aqui. Mas, eu sugiro que, antes de olhar o arquivo, você tente replicar o estilo por conta própria.

Se você estilizar o Header, do jeito que o projeto está, vai ver que não acontecerá absolutamente nada na tela da sua aplicação. E por que isso? Simplesmente, porque, até então, não adicionamos nenhum Header na aplicação. Aí fica difícil, né?

Pra adicionar o tal do Header, bora editar de novo o arquivo App.js.

App.js (agora com Header \o/ )

O que aconteceu ali em cima? Importaçãozinha marota do nosso querido Header na linha 4, depois é só chamar o nosso campeão na linha 10 e pronto. FÁCIL DEMAIS!

Se tudo deu certo, a sua tela deve estar mais ou menos assim:

Finalmente, o Header

Por enquanto, é isso…

Então, galera (3 pessoas kkkk)… atingimos nosso objetivo, nosso Header tá aí.

Eu gostei demais de fazer isso. Se eu tô fazendo da melhor forma, ou da mais performática, aí é outra história kkkk. Mas a melhora faz parte do processo.

Mas me diz aí, o que que você achou? Conseguiu fazer? Tem alguma sugestão de mudança? Teve algum problema no desenvolvimento? Conta aí.

Ah! Agora eu tô com um perfil no instagram só pra falar de programação, segue lá!

Até mais!

EDIT: A parte 2 já tá aqui!