novembro 14, 2016 11:00 am Publicado por major Deixe um comentário
Com isso, surgem diversas dúvidas: como arquitetar aplicações com React de forma escalável, fácil e que seja possível fazer alterações sem quebrar o projeto?
Nesse artigo vou mostrar uma dessas formas, falando sobre:
$("#button").bind("click", function() {
padding: '5px 10px'
Está reunida em apenas um arquivo toda a lógica referente ao botão que é clicado, inclusive seu layout.
Se precisarmos deletar essa feature, deletaremos tudo de uma vez de forma fácil sem deixar código legado;
Bugs são mais fáceis de rastrear e consertar, porque tudo que pode afetar o componente está reunido em apenas um lugar;
É importante o entendimento desse argumento, de deixar as lógicas que interagem entre si no mesmo arquivo (ou bem próximas), porque toda a arquitetura que veremos nesse artigo será baseada nisso.
Para maximizar a escalabilidade da aplicação, vamos usar uma abordagem de organização de pastas por features. Sendo que essas features vão ficar dentro da pasta components.
Com isso, se um bug for reportado, devemos procurar a pasta da feature na qual o mesmo está ocorrendo.
Vale lembrar que dentro da pasta assets ficam as fontes e imagens. Já na pasta services ficam serviços comuns ao projeto, que também pode ser chamada de utilsou shared.
Uma das partes mais interessantes dessa abordagem é a organização das pastas internas das features:
Lembrando do argumento que levantei anteriormente, se precisarmos deletar essa feature, deletaremos tudo de uma vez sem deixar código legado. Além disso, é importante deixar claro que se mudarmos algo no componente deveremos observar também o arquivo de testes.
E se precisarmos alterar algo no layout do componente, devemos apenas olhar o arquivo styles.css dentro da pasta e mais nenhum outro, porque o único arquivo de estilos que vai estar impactando o componente é esse.
Se você entende de CSS, sabe que os estilos são globais. Então, como podemos fazer com que os estilos possam valer apenas para um componente, ou seja, tenham escopo local?
Essa característica do CSS ter seletores globais, pode ter algumas vantagens, mas, em geral, é bem danosa para a sua aplicação. Principalmente com o crescimento dela. E é nesse ponto que o CSS Modules é extremamente útil.
A ideia é ter o escopo dos estilos locais funcionando apenas para um determinado componente. Como se fossem módulos. Por isso o nome: CSS Modules.
Portanto, temos duas principais vantagens:
Escrever CSS da forma que já estamos acostumados e com todo o seu poder;
Em resumo, temos uma aplicação em que os componentes e as partes que interagem com ele ou estão no mesmo arquivo ou estão próximos de serem encontrados. Além disso, temos um CSS com todas as suas vantagens mas sem ser global. Ficou alguma dúvida ou tem alguma contribuição? Aproveite os campos abaixo!
Artigo publicado originalmente em: http://www.concretesolutions.com.br/2016/11/03/organizando-aplicacao-react/