Desenvolvendo um Projeto com ReactJS do Zero ao Deploy — Part. 2

E ai pessoal, como vão vocês?

Dando continuidade ao nosso projeto, hoje vamos focar em estruturar a arquitetura dele, para que receba as novas funcionalidades, bem como, adicionar o Redux e React-Router.

Vou explicar detalhadamente o por que dessa arquitetura.

Vamos lá! Sabemos o quanto o Redux no primeiro momento é algo complicado de entender, mas com essa arquitetura ficará mais simples a compreensão de sua configuração e seu fluxo.

Abra o seu projeto do post anterior e, o vá para o primeiro passo que será criar uma estrutura de pastas.

Hoje temos 2 pastas (public e src) e os arquivos de configuração da aplicação.

Bom, agora vamos começar a criar as pastas dentro da src.

Nessa primeira parte, não precisaremos mudar os arquivos que estão dentro dela, apenas crie essas pastas e rode seu projeto, você verá que continuará funcionando da mesma forma.

Então veja, criamos algumas pastas e a partir de agora vou explicar o que são cada uma delas e uma breve explicação para ficar bem claro mais para frente:

1. actions: será a pasta responsável por toda lógica de requisição http ao backend. Então, quando tivermos por exemplo que fazer uma requisição de login, teremos um arquivo login.js onde nele estarão as requisições http referente as funcionalidade de login.
2. components: é responsável por ter todos os componentes ReactJs que serão globais para aplicação, ou seja, se tiver um componente do tipo botão, teremos uma pasta chamada button e dentro dela, todos arquivos (jsx, test, etc) referente ao componente.
3. containers: arquivos que serão centralizadores das funções e propriedades que vamos disponibilizar para uma página ou um componente. Ex: home.js receberá dados do usuário e a função de atualizar o banner de acordo com estado que o usuário selecionar.
4. pages: são os arquivos que referenciam as rotas da nossa aplicação e, esses arquivos tem uma relação direta com os containers, pois são neles que são realizadas as chamadas das propriedades e funções dessa página.
5. reducers: serão nosso “banco de dados” da aplicação, aqui teremos nossas “entidades”. Por exemplo, se vamos fazer um request http para o backend para pegar os dados de um usuário, a resposta desta requisição ficará armazenada nesse arquivo em uma variável que poderá ser utilizada por qualquer página de aplicação (desde que esteja referenciado).
6. router: será nosso arquivo que irá gerenciar as rotas de navegação da aplicação ,(para esse funcionalidade utilizaremos o react-router) então, teremos um arquivo que, quando o usuário digitar “www.xptop.com/dashboar” ele saberá qual componente(page) deve renderizar no browser.
7. store: é a pasta responsável por conter o arquivo de configuração do Redux. Uma vez configurado e entendido, você não precisará mais mexer nele. É ele que irá criar nosso “banco de dados” e aplicar o conceito de middleware, ou seja, permite a comunicação e o gerenciamento de dados dentro da nossa aplicação.
8. Styles: será composta por todo nosso estilo da aplicação, nele irá conter os arquivos de css, imagens, fontes, etc.

Pronto, já temos um estrutura de pastas para começar a evoluir nossa aplicação de uma forma escalável e modular!

É importante ter essa base dos conceitos e do por que existem essas divisões em pastas, até para entender o fluxo dos dados associado com lifecicle do ReactJs.

Mas e ai, estão prontos para pegar esses arquivos que deixamos soltos e colocar cada um em sua pasta?

Ainda não vamos colocar o redux e react-router, mas vamos deixar nossa aplicação funcionando com nossos arquivos prontos para receber essas bibliotecas.

Primeiro, vamos colocar nosso arquivo “App.js E App.test.js” dentro da pasta “pages” e os arquivos “App.css, index.css e logo.svg” dentro da pasta “styles”. Deixaremos dentro da src apenas o “index.js e serviceWorker.js”.

Agora, se você for no seu terminal e rodar o comando “npm start” você verá que ocorrerão alguns erros, isso vai acontecer por que precisamos ajustar o path dos arquivos que estão relacionados.

Faça assim:

No arquivo “src/index.js” vamos mudar o path dos arquivos “index.css e App.js”.

No arquivo “src/pages/App.js” vamos alterar o logo e o arquivo de estilo da nossa aplicação.

Agora sim, se você não parou o terminal que estava rodando nossa aplicação, você pode ir direto no navegador que ele já atualizou para você, caso contrário, basta rodar “npm start” e ver sua aplicação funcionando com a nova estrutura.

Bom pessoal, essa é uma arquitetura que acho interessante para quem está começando, pois, deixamos bem modular e cada uma com sua responsabilidade, mas com certeza existem outras formas, outras nomenclaturas.

E ai, o que achou desse modelo de projeto de ReactJS com essa arquitetura?Deixe aqui nos cometários suas sugestões ou link de projetos no github, e vamos fazer a comunidade Javascript e ReactJs cada vez mais ativa!

O link desse projeto no github está aqui!

E aí, na sua máquina funciona?