EduardoSBordin
commented
2 months ago Fala meu amigo, muito obrigado pelas dicas. Com certeza vou seguir o que me recomendou!
Inclusive sobre a questão de alterar o create-react-app, eu já meio que estão percebendo isso, como sou novo em react ainda não consegui pegar muita coisa, e o curso que fiz até agora utiliza o "modelo antigo". De qualquer forma, irei me atualizar.
Novamente, muito obrigado e forte abraço !
Fala Eduardo!
Vi seu post no Bluesky sobre o app que você fez, ficou super massa!! Você que criou a interface? Ficou ótimo!! Vim trazer uns feedbacks pra você aprimorar seus conhecimentos com a React e desenvolvimento front-end.
1. Ferramenta
A ferramenta que você usou pra criar o projeto create-react-app caiu em desuso e a comunidade adotou Vite como novo padrão. Não precisa migrar o seu projeto, mas leia sobre elas pra entender as diferenças.
2. Estado no React
Não é boa prática manipular elementos HTML diretamente via JavaScript quando usamos React porque isso pode gerar problemas na interface.
O React oferece algumas funções pra fazer essa manipulação e uma delas é a função
useState. Leia sobre ela e refatore o código que abre o modal para funcionar comuseState.State: A Component's memory - React
https://github.com/EduardoSBordin/freetimeshow/blob/2790640758c2de0323b80e31579bbade83f0ba01/fts/src/components/pages/Navbar.jsx#L6-L9
3. Configuração de rotas React Router
A propriedade
exacté útil para diferenciar rotas com caminhos iguais. Por exemplo, as rotas"/"e"/home"tem o mesmo caminho"/", então quando você acessahttps://freetimeshow/homeo React Router vai tentar renderizar os componentes das rotas de mesmo caminho. Mas não é necessário adicionar a todas as Rotas, no seu caso seria somente na rota"/", pra diferenciar ela das demais.https://github.com/EduardoSBordin/freetimeshow/blob/2790640758c2de0323b80e31579bbade83f0ba01/fts/src/App.js#L24-L29
Tente refatorar a configuração das suas rotas com createBrowserRouter a nível de conhecimento, já que o React Router adicionou novas funcionalidades pra esse novo tipo de roteamento. Vai ser bom pro seu aprendizado.
4. Imports de CSS
Quando você importa CSS dentro de um arquivo, esse CSS não é retirado da página quando o seu componente não está aparecendo na tela.
É bom importar arquivos CSS, como o do slider, no primeiro arquivo que a sua aplicação roda (que no seu caso é o
index.jspra evitar de ter arquivos CSS duplicados. (Note que o arquivoindex.cssfoi importado lá pela ferramenta)Isso vai melhorar o tempo de carregamento das suas páginas, dependendo do tamanho do CSS.
https://github.com/EduardoSBordin/freetimeshow/blob/2790640758c2de0323b80e31579bbade83f0ba01/fts/src/components/pages/MoviesHome.jsx#L8-L9