Este repositório foi um desafio realizado pela corporação Rocketseat com intuito de firmar conhecimentos e fundamentos de componentização utilizando ReactJS
A aplicação é um sistema de serviço de streaming de séries e filmes conforme imagem ilustrada abaixo:
Observando o código original, todo código HTML da aplicação estava sendo feita dentro do arquivo App.tsx
. Por mais que no momento o código em questão esteja pequeno, é preciso avaliar a questão de novas features, ficará cada vez mais dificil dar manutenção ao código.
O objetivo desse desafio é identificar o que pode ser componentizado no momento para deixar a aplicação com um código limpo e escalável.
Analisando o código e a aplicação, foi possível detectar os seguintes elementos a serem componentizados:
- Sidebar: conteúdo que lista os botões de gênero de filmes
- Content: conteúdo que lista os filmes de acordo com o gênero selecionado
Foi realizado então a componentização dos elementos, possibilitando assim mais escalabilidade na aplicação e um código limpo.
Antes de rodar a aplicação deverá ter instalado e configurado previamente o NodeJS e Yarn.
Para instalar as dependências do projeto, digite a linha de comando abaixo:
$ yarn
A aplicação possui um Fake API utilizando MirageJS para listar os filmes e gêneros que serão exibidos em tela. Execute o servidor fake para consumir a API Fake:
$yarn server
E logo em seguida, execute em outro terminal o comando para executar o frontent da aplicação:
$ yarn dev
No navegador, abra a rota http://localhost:8080 e será exibido a aplicação com a melhoria dos elementos componentizados.
Peek.18-02-2022.11-02.mp4
Desafio concluído com sucesso! :)