Usando Root Import no React

Aposto que você já se perdeu nos caminhos relativos na hora de importar algo em sua aplicação certo?

Então, hoje seus problemas acabaram! 🤩

Vou te mostrar como resolvi esse problema nas minhas aplicações e nunca mais precisei perder tempo descobrindo quantas pastas precisava subir até chegar onde eu queria.

Mas se você não está entendendo do que eu estou falando, vou te mostrar um exemplo:

import { TextField } from "../../../../componentes/TextField";

Então, viu só quantas pastas eu tive que voltar até chegar no meu componente? — Chato né?! Fora que fica uma bagunça no código quando você precisa fazer vários imports de lugares diferentes.

O que acha de utilizar algo como components para chegar até o TextField? Se liga no exemplo:

import { TextField } from "components";

Muito melhor né?!

Então bora fazer isso funcionar!

Vamos criar um projeto utilizando o create-react-app, vou chamar ele de root-import:

Nesse exemplo eu utilizei TypeScript mas também funciona com JavaScript, deixei um exemplo mais embaixo!

O create-react-app gera para nós um boilerplate básico, contendo na raiz arquivos como .gitinore, package.json, README.md, e também gera as pastas public e src, onde manteremos o código da aplicação. Então caso você tenha alguma dúvida, recomendo dar uma lida na documentação acessando aqui.

Vamos configurar o Root Import com TypeScript

Esse é bem simples e rápido, o que vamos precisar fazer é adicionar algumas coisas no arquivo tsconfig.json

Basicamente o que vamos precisar fazer é adicionar dentro de compilerOptions essa linha:

"baseUrl": "src"

E depois para finalizar, vamos adicionar mais duas propriedades que são:

"include": ["src/**/*"],
"exclude": ["node_modules"]

E pronto, finalizamos a configuração no arquivo tsconfig.json, o resultado final fica assim:

Vamos configurar o Root Import com JavaScript

É bem simples também, vamos criar um arquivo na raiz do nosso projeto chamado jsconfig.json que vai ter o seguinte código:

E pronto, é só isso!

Agora todas as pastas que estiverem dentro da src/ podem ser acessadas sem precisar colocar os caminhos relativos, segue um exemplo:

import { TextField } from "components"

Viu como é simples?! 🤩

Vou deixar o repositório com os projeto que criei para esse post no GitHub, é só clicar aqui.

⚠️ Ah, e um ponto bem importante, toda essa configuração funciona com Next.js também! Então se você tem uma aplicação rodando com Next.js e quer utilizar o root import, é só seguir os passos anteriores!

Bom, é isso, espero que tenha gostado!

Se gostou, dê 50 claps 👏

Obrigado pela leitura!

Me acompanhe por ai! 😜

- Portfólio: vinniciusgomes.dev
- GitHub: @vinniciusgomes
- LinkedIn: @vinniciusgomes