Use Importações Absolutas no React

[tayhsn]

Um dos principais objetivos ao criar a estrutura de uma aplicação deve ser fazê-la fácil de manter e de mudar.

A maioria de nós usa caminhos relativos ao importar algo, mas eles não são ideais em projetos maiores por que se você precisar mover arquivos ou reorganizar um módulo, você vai precisar modificar também muitas importações.

import Input from '../../../modules/common/components/Input'

Outro problema é que com caminhos relativos é mais difícil entender de onde as coisas estão vindo.
No exemplo acima ainda é claro que você está importando algo de outro módulo, mas e se quisermos referenciar um hook desse mesmo módulo?

import { useAnalytics } from '../../../hooks'

Isso não é necessariamente uma má prática, mas deixa certa ambiguidade. Você conseguiria dizer se esse hook é específico de um componente ou se ele está na raiz do módulo?

Mesmo que você consiga presumir isso pelo contexto ou que não tenha pretenção de mudar a estrutura futuramente, eu sempre prezo pela clareza.

import Input from ‘@modules/common/components/Input'

Caminhos absolutos garantem que alterações serão fáceis e que todos conseguirão saber de onde os componentes estão vindo ao olhar rapidamente a sessão de importações.

Para que tenha isso funcionando, você deve apenas modificar as configurações do seu Webpack para que ela saiba onde procurar pelos seus arquivos. Você pode, por exemplo, definir um prefixo @modules e informar ao Webpack para procurar tais caminhos em um diretório chamado “modules”. E essa é toda a mudança.

O padrão que sigo é colocar o prefixo @ porque é o mais próximo das convenções usuais de nomeação de pacotes, mas já vi pessoas usando ~ para garantir que imports internos sejam facilmente perceptíveis. Contanto que você use caminhos absolutos, utilize qualquer convenção que faça mais sentido para você.

Implementar caminhos absolutos não é algo complexo de se fazer, mas pode variar muito dependendo da sua configuração. O mais importante a se fazer é dizer ao seu module bundler onde ele deve procurar pelos seus imports a começar pelo prefixo que você escolheu. Se você estiver usando o Webpack, você pode olhar a parte de resolve alias na documentação. A sintaxe pode variar dependendo da versão que estiver usando.

Mas há outras ferramentas que precisamos colocar a par de nossa decisão de usar caminhos absolutos. Precisamos garantir que nosso editor de código também esteja ciente da mudança ou ele interpretará um erro. Ferramentas como ESlint e Jest também devem ser configuradas.

A configuração em si não é complexa. Ela se resume a adicionar algumas linhas nos arquivos de configuração JSON, mas a sintaxe depende das ferramentas que você estiver usando.

Esse artigo é uma tradução livre de princípios do livro Tao of React de Alexander Kondov

---

• Sessão de links:
  • Como configurar caminhos absolutos em sua aplicação JS ou TS
  • Importação absoluta com Create React App