Hello World!
Portifólio implementado com Create React App no curso de React Router da Alura.
| Hello World! | |
| javascript, html, styled-components, npm, react | |
| https://hello-world-lucassmaniotto.vercel.app/ | |
| https://www.alura.com.br/curso-online-React-desenvolvendo-react-router-javaScript |
Detalhes do projeto
Este projeto é uma Single Page Application (SPA) desenvolvido em ReactJS utilizando React Router durante o curso React: desenvolvendo em React Router com JavaScript da Alura.
⚙️ Configurando o projeto
Para que o projeto funcione corretamente, é necessário instalar as dependências do projeto. Para isso, basta executar o comando abaixo no terminal:
npm install▶️ Executando o projeto
No diretório do projeto, você pode executar:
npm startCom o comando acima, você irá rodar o projeto em modo de desenvolvimento que pode ser acessado em http://localhost:3000 no seu navegador.
📚 Bibliotecas
💡 Funcionalidades
Rotas
Visto que o projeto é uma SPA, o mesmo funciona como uma página só, através de rotas gerenciadas pelo React Router:
As rotas consistem em duas abas, uma de Home Page que possui meus projetos principais desenvolvidos e disponibilizados no Github, e uma página Sobre Mim que conta um pouquinho da minha história com programação, além de coisas que eu gosto bastante.
Renderização de artigos
Para cada página de artigo, o conteúdo é renderizado em uma rota dinâmica projects/:id com o conteúdo de json de cada projeto no qual ocorre iterações sobre o mesmo e transformado em Markdown com o React Markdown:
Tratamento de Rotas
Caso aconteça algum direcionamento de rota de erro, uma página 404 é renderizada com um cachorro salsicha informando possíveis causas e um botão de voltar a página anterior, seja ela Home, Sobre Mim ou de algum Projeto.
Card de sugestões
Ao final de cada artigo de Projeto, a página disponibiliza uma rota diferente para um próximo projeto, através de métodos do JavaScript de filter, sort e slice:
