Mindset para aplicações baseadas em componentes no Front-End — Parte 2: react-router

3 min readSep 27, 2017

Agora que aprendermos alguns termos e princípios durante o primeiro artigo da série, temos uma base para construir nosso primeiro exemplo com códigos, vamos lá!

Motivação

Nada como um amor em nossas vidas para nos tornar produtivos! Seguindo essa máxima, vou continuar hoje a série para ajudar minha namorada descolada (Simone Amorim) com suas dúvidas.

Não posso deixar de comentar sobre os tantos feedbacks positivos que recebi no primeiro artigo, isso me motivou ainda mais a continuar escrevendo, ou seja, além do amor verdadeiro, também sou movido pelos feedbacks de vocês.

Roteiro

Hoje iremos cobrir alguns pontos importantes na construção de uma aplicação baseada em componentes, passo a passo vamos:

Escolher as ferramentas para criar componentes.
Configurar o ambiente e criar componentes básicos.
Definir e criar a APP Shell.
Criar os componentes das views separadamente.
Injetar views e definir rotas.
Criar links para navegar entre views através das rotas como uma SPA.

Todos os códigos criados aqui estão disponíveis no Github ❤

Escolhendo as ferramentas

Antes de tudo, precisamos de uma forma prática e fácil de criar componentes no Front-End, o que escolher? A resposta veio durante um passeio no mercado central em Belo Horizonte/MG, onde um item à venda nos chamou a atenção, e essas mensagens sublimares não podem ser ignoradas.

Vamos continuar a partir daqui com a biblioteca de componentes mais famosa da história, React!

Não se preocupem, essa não é uma série sobre React, utilizaremos ele para nossos exemplos por ser simples e popular (o que aumenta a chance de você, caro leitor, conhecê-lo), mas não se apeguem, possivelmente iremos utilizar outras soluções para componentes em artigos futuros.

Configurando ambiente e criando componentes básicos

Começando do zero, precisamos de um ambiente mínimo para rodar nossos códigos, nada muito complexo, basta ter nodeJS instalado em seu computador, saber utilizar NPM e não ter medo do terminal.

Vamos criar nosso projeto com o create-react-app, que faz o scaffolding de um projeto React com tudo o que precisamos para rodar um projeto sem nos preocupar em configurar o que não tem haver com o conteúdo da série, ou seja, perfeito.

A partir daqui, vamos quebrar o protocolo, vou inserir videos para explanar as partes práticas e continuar com texto para partes teóricas, assim ganhamos tempo e construimos um conteúdo mais dinâmico.

Definindo e criando a APP Shell

Com nosso ambiente funcionando e o poder de criar e compor componentes, podemos pensar na melhor forma de estruturar nossa aplicação.

Como trabalhamos com componentes e não páginas, temos uma única página HTML que renderiza um único componente, esse componente será toda a nossa aplicação que por sua vez é composta por outros componentes internos.

O componente “pai” será nossa APP Shell e os componentes “filhos” serão nossas views.

Criando as views

Cada view será um componente que representa um estado da aplicação, ou seja, cada componente interno será o “pedacinho que muda em uma SPA”.

Injetando as views e definindo rotas

Agora que temos nossos componentes devidamente criados, vamos adicionar todas as views dentro da shell e vincular uma rota especifica para cada uma delas.

Criando links para navegar entre views através das rotas

Com tudo criado, basta criarmos alguns links dentro da shell que apontem para as rotas previamente vinculadas aos componentes. Inclusive já podemos definir qual componente será vinculado a rota inicial, ou seja, qual componente será o nosso “index.html”.

Conclusão

Através das abstrações fornecidas pelo react-router, conseguimos compor nossa aplicação de forma realmente simples, temos todas as funcionalidades relacionadas a SPA que abordamos no primeiro artigo da série e já estamos aptos para pensar em criar uma PWA em nosso próximo artigo.

Relembrando, temos todo o código utilizado aqui disponível no Github.

Fiquem a vontade para para comentar abaixo, quanto mais feedbacks melhor :), vejo vocês na próxima.

Meus links:

Bye bye.