Importação usando @/

Oii, Caio. Tudo bem?

O uso de @/ como um alias na importação de módulos no React é uma forma conveniente de evitar caminhos relativos complicados, como ../../../, ao referenciar arquivos em diferentes diretórios do projeto. Isso é configurado na ferramenta de bundling, como Vite, que você está utilizando.

1. Configuração no vite.config.js: No código da aula, há uma configuração de alias definida no arquivo vite.config.js:

   resolve: {
     alias: [{ find: "@", replacement: "/src" }],
   },
   

   Essa linha tá dizendo pro Vite que sempre que encontrar @/ em uma importação, ele deve substituir isso pelo caminho absoluto da pasta src na raiz do seu projeto.

Há algumas vantagens:

• Legibilidade: Facilita a leitura do código, especialmente em projetos grandes onde os arquivos podem estar profundamente aninhados em várias pastas.
• Consistência: Garante que as importações sempre sigam um padrão consistente.

Um abraço e bons estudos.