Desenvolvendo um Projeto com ReactJS do Zero ao Deploy — Part.3 (adicionando react-router)
E ai pessoal, tudo bem?
Estão prontos para evoluir nosso projeto e começar a navegar entre páginas?
Vamos adicionar ao nosso projeto, o React-Router, que hoje é a biblioteca mais popular para ReactJS. Uma poderosa ferramenta para realizar o gerenciamento de rotas, principalmente quando falamos de SPA.
Mas o que seria o SPA?
Do inglês “single page aplication”, significa que uma aplicação web tem como objetivo fornecer uma experiência do usuário similar à de um aplicativo desktop. Seu principal benefício é de não termos o efeito de reload da página ao trocar de rotas, mantendo a estrutura principal da página e alterando apenas o conteúdo.
Então, que tal começarmos a colocar a mão no código e mostrar na prática o react-router na nossa aplicação?
Primeiro passo:
npm install react-router-dom --save
Como é a primeira biblioteca que estamos adicionando no nosso projeto, sugiro abrir o arquivo “package.json” .
Repare que agora já temos a biblioteca referenciada como dependência do nosso projeto, ou seja, estamos dizendo que o react-router é uma ferramenta obrigatória para que nosso projeto funcione e, principalmente estará mapeada para ser instalada quando necessário.
Bom, vamos lá então: com nossa biblioteca devidamente instalada, vamos começar a configurar e codificar as nossas rotas.
Lembra do post anterior que modulamos nosso projeto em diversas pastas?
Vamos criar então, um arquivo que irá gerenciar as rotas. Na pasta router, crie um arquivo chamado “index.js”.
Agora precisamos importar o React, React-Router (Router, Route). Repare que estou usando BrowserRouter as Router, isso significa que irei utilizar a tag Router como a tag BrowserRouter que usa a API do histórico HTML5.
Por fim, vamos importar o componente da página inicial “App.js”.
Pronto dependências importadas, vamos criar um componente ReactJS, exatamente como o create-react-app criou o nosso “App.js”. Sem mistérios, não é?
Dentro do nosso “return”, vou utilizar a tag Router e com o conceito de “children” (componente dentro de outro componente), vou usar a tag Route.
Nesta vamos especificar qual a url e componente do ReactJS deve ser renderizado quando o usuário acessar pela url do navegador ou por alguma funcionalidade do sistema.
Nesse caso, decidi referenciar na propriedade “path” a rota “/” assim, quando usuário digitar “www.xpto.com" ou no contexto de desenvolvimento do projeto “localhost:3000” o componente a ser renderizado é o nosso App.js que criamos nos posts anteriores.
Obs: a propriedade exact significa que a rota tem que ser exatamente essa para renderizar o componente. É uma propriedade do tipo boolean (verdadeiro ou falso).
Pronto! Já temos nosso arquivo de rotas configurados.
Agora, precisamos configurar o projeto para utilizar esse mesmo arquivo.
Mas por quê? Lembra que quando criamos o projeto, foi criado um arquivo “src/index.js”? Então, se abrirmos esse arquivos vamos ver que ele está referenciando o “App.js” para ser o componente renderizado no browser pelo meio do ido root.
O que temos que fazer agora é, referenciar para nosso arquivo “src/index.js” o arquivo de configuração da nossa rota.
Já que no arquivo de gerenciamento de rotas referenciamos o componente do tipo página “App.js”, basta abrir seu terminal na pasta do projeto e executar o comando “npm start”.
Que tal codificarmos um pouco mais para ver se realmente nosso arquivo de rota esta funcionando?
Vamos criar mais uma página, que iremos chamar de Sobre (about). Pode usar o componente “App.js” nesse primeiro momento como base, até fixar o conceito.
E, depois vamos referenciar essa página no nosso arquivo de gerenciamento de rotas.
Bom, agora temos duas rotas mapeadas no nosso projeto “/” e “/sobre”. Vamos lá na url do navegador e digite “http://localhost:3000/sobre" e “http://localhost:3000/".
Repare que agora nosso gerenciador consegue identificar qual rota o usuário esta acessando e qual componente está sendo renderizado.
Quer que fique mais claro ainda?
Abra o depurador do seu navegador e veja o elemento html que esta sendo renderizado o componente App na rota “/”componente About na rota “/sobre”.
É agora que sua criatividade entra em ação!
Aproveite para pensar no seu projeto, na sua idéia e começar a criar suas rotas e componentes.
No próximo post vamos implementar o Redux e como compartilhar dados entre as rotas.
O link desse projeto no github está aqui!
Espero que estejam gostando, o seu feedback é extremamente importante para mim! Diz aí o como estou indo.
Por hoje é só e nos vemos em breve.
Mas e aí, na sua máquina funciona
