A implementação do princípio de separação de conceitos no React foi durante muito tempo objeto de discussão. Algumas pessoas diziam que o React violava esse princípio, mas outras diziam que na verdade oferecia uma abordagem contemporânea e eficaz. Só que antes de relembrar essa antiga polêmica, vale falar um pouco sobre esse tal princípio da separação de conceitos.

De uma forma mais tradicional, no desenvolvimento web a separação de conceitos era aplicada na prática dividindo o código em vários arquivos separados (arquivos de HTML de CSS e JavaScript), cada um com uma função específica, a fim de facilitar a compreensão e manutenção do código. No entanto, esse princípio também evoluiu com o desenvolvimento das aplicações web, pois começamos a perceber que nem sempre a melhor solução seria necessariamente colocar cada parte em arquivos totalmente distintos.

O React, por exemplo, usa uma abordagem diferente, pois é baseado em componentes reutilizáveis em vez de apenas separar HTML, CSS e JavaScript em arquivos distintos. Um componente React é composto de dados, lógica e estilo em um só lugar e é daqui que surgiu a polêmica com alguns dizendo que isso caracterizava uma violação do princípio tradicional da separação de conceitos, em que cada tecnologia tinha seu próprio arquivo, mas se você olhar bem, isso é na verdade apenas uma mudança de paradigma!

O que acontece é que no ReactJS a co-localização de elementos relacionados é enfatizada, ou seja, os elementos de um componente devem estar o mais próximo possível um do outro. Embora o HTML, o CSS e o JavaScript estejam mesclados em um mesmo componente React, isso não significa que não haja separação de conceitos. Pense no seguinte: cada componente é responsável por uma seção específica da interface do usuário; e é por isso que essa abordagem representa apenas uma forma diferente de aplicar o princípio que estamos analisando. Afinal, mesmo com essa abordagem moderna, ainda conseguimos verificar os resultados práticos que o princípio da separação de conceitos busca atingir, isto é, a facilitação na manutenção, no teste e na compreensão do código, além de possibilitar a reutilização e evitar duplicidade.