Projeto iniciado durante a imersão react da alura, e tem com objetivo criar uma SPA(Single Page Aplication), utilizando React.
Quer ver como ta ficando? Acessa a DEMO
-
SPA
O projeto foi desenvolvido de forma que os componetes, se comportassem de maneira a aplicação se tornasse uma SPA. Para isso utilizei os recursos da lib react-router-dom. -
Hooks
Hooks, um dos recursos padrões do React, permite a reutilizações de recursos, de uma forma mais simples. Reduzindo a necesssidade de criação de várias classes e métodos. E dentro do projeto, foi utilizado várias vezes, principalmente na criação dos formulários. -
Component styling/Estilização dos componentes
A estilização dos componentes foi feita utilizando a lib styled-components, que permite armazenar "fragmentos" do jsx, dentro de constantes do JavaScript, o que permite dentro de outras coisas, manipular os componentes de uma forma mais simples e mais organizada. -
Visual Components/Componentes Visuais
Durante o projeto foram criadas alguns componentes visuais específicos, que agregam bastante ao layout da página principal.- Carroussel
Esse componente se refere, a parte do layout que exibe a listagem na horizontal, de videos de uma categoria. Para desenvolve-lo foi utilizado a lib react-slick. - Banner
Esse componente se refere, a parte do layout que exibe um plano de fundo com a thumbnail do primeiro video da primeira categoria. Pra isso, o componente acessa a url referente ao video, e extraí essas informações.
- Carroussel
-
Forms/Formulários Como já foi dito, os componentes que formam o formulários, utilizaram muito o recurso Hooks, criando até hooks constumizáveis. Mas além disso do Hooks,foi utilizado a lib PropTypes, essa lib permite com que os elementos de armazenam dados no javascript, possam ser "tipadas", isso porque por padrão o javascript não tem uma tipagem forte, que às vezes é necessária, como no caso do formulário.
-
Repositories/Repositórios Esse componente, é responsável pela ações que tomamos que requisitam do servidor alguma ação. Ele basicamente lida, com as requisições que fazemos ao json server.
-
Pages/Páginas O projeto possui até o momento 4 páginas,home,página de cadastro de video, página de cadastro de categoria e erro 404. Todas essas páginas, também tiveram sua construção "componentizada".
O projeto possui alguns comandos expecíficos, que permitem um controle de como queremos executar a aplicação.
Especificamente nesse projeto npm start irá rodar nosso json server, na porta 8080. Porém não há a necessidade de utilizá-lo, já que hopedei o json server,
na Heroku, e dentro dela esse comando será utilizado automáticamente. Mas caso queira rodar em sua máquina, siga os seguintes passos:
- Vá até a pasta config (src/config), e altere o valor da constante URL_BACKEND, para 'http://localhost:8080';
- Rode o comando npm start, dentro da pasta raíz do projeto.
- Abra http://localhost:8080/categorias para visualizar o arquivo de das categorias;
- Abra http://localhost:8080/videos para visualizar o arquivo dos videos;
Esse comando roda nossa aplicação front end, na porta 3000. Caso queira realizá-lo, siga os seguintes passos:
- Rode o comando npm devFrontEnd, dentro da pasta raíz do projeto;
- Abra http://localhost:3000 para visualizar o projeto;
Esse projeto não possui um sistema de versionamento.
Veja as Releses.