Como organizar projetos React com pasta src e importações com arroba
Guia definitivo para organizar sua aplicação React ou Node separando código de configuração e utilizando alias com arroba para um desenvolvimento mais produtivo.
Por que isso é importante
Na prática, organizar seu projeto em torno da pasta src e usar importações com arroba transforma o caos de arquivos em clareza: menos bugs, importações mais limpas e seu projeto pronto para crescer rápido. Menos tempo perdido com caminhos, mais foco no que interessa—o código.
Pasta src: sua base contra a bagunça
Separar todo o seu código da bagunça da raiz é a jogada: crie uma pasta chamada src na raiz do projeto. Tudo que for “seu código mesmo”, do App às páginas e componentes, entra lá.
⚠️Atenção
Evite misturar arquivos de código com configs, logs ou setup de ambiente: manter a estrutura limpa é o primeiro passo para um projeto fácil de manter.
Proteja sua produtividade usando importação com arroba
Um dos grandes truques dos projetos modernos é usar alias, geralmente a @, nas importações. Assim, nada de paths imensos cheios de ../: você aponta para arquivos e pastas da src direto usando @/.
ℹ️Dica técnica
Com alias, importar um componente de qualquer lugar fica simples e padronizado. Esqueça os “../../componentes/MeuBotao”, aposte em “@/componentes/MeuBotao”.
Configurando o tsconfig para buscar arquivos na src
No arquivo tsconfig.json (ou jsconfig.json), ajuste os paths para usar o alias arroba apontando sempre para a pasta src. Isso faz seu editor e o build reconhecerem os atalhos automaticamente. Exemplo rápido:
"baseUrl": "src", "paths": {"@/*": ["*"]}
⚠️Atenção
Alterar o tsconfig sem entender pode causar problemas de build. Faça commit antes de mudanças.
Por dentro do fluxo prático
A partir do momento que tudo está dentro da src, todo novo componente, hook ou página segue o padrão. E toda importação com arroba aponta para o local exato, sem dor de cabeça para mover arquivos depois.
Separando código de configuração: por que faz diferença
Deixar configs na raiz e código na src evita erro bobo. Você nunca vai abrir um arquivo sem querer ou apagar um config sem querer. O risco de desastre cai.
O que evitar ao migrar para src
Não misture: mova tudo que é código pra src, mas mantenha configs (como package.json, README.md, tsconfig) na raiz. Se mover errado, seu projeto pode parar de funcionar.
❌Erro comum
Mover arquivos de configuração para src pode quebrar o deploy e scripts. Deixe configs sempre na raiz.
Como testar se está tudo funcionando
Depois das mudanças, rode o projeto. Teste importações, rode builds, execute scripts. Se algo falhar, revise os caminhos e as configurações de alias.
Benefícios na escala do projeto
Um projeto com pasta src e alias bem configurados é fácil de crescer, mais simples de manter, colegas entendem mais rápido e o onboarding de novos devs é quase plug and play.
✅Sucesso garantido
Projetos em times profissionais quase sempre usam essa estrutura. Experimente e sinta a diferença no seu fluxo.
Cases do dia a dia
Projetos sólidos, de bootcamps a startups, mantêm essa divisão e ganham velocidade no refactor e escalabilidade. Fluxo seguro e padrão claro.
Por que aprender e seguir esse padrão agora
Projetos modernos exigem organização prévia. Quanto antes você aprender e adotar src e alias, menos vai sofrer quando precisar escalar ou entregar rápido.
Adoção em outros frameworks e stacks
Vale também para projetos em Node, Next, Vue e outros frameworks: crie uma src, configure o alias, e repita o padrão.
Referências e inspiração
Acompanhe exemplos e tutoriais de projetos no canal Dev Doido no YouTube: dicas visuais, códigos práticos e resolução de dúvidas ao vivo.
ℹ️Atenção
Siga o canal para dicas práticas: https://www.youtube.com/@DevDoido
Resumindo tudo: sua próxima estrutura, seu próximo projeto
Crie a src na raiz e organize todo código lá. Atualize o tsconfig para importar com @/. Separe configs na raiz. Essa é sua base para projetos estáveis, escaláveis e profissionais.
O próximo passo: acelere sua carreira
Projetos que usam boas práticas saem na frente no mercado. Deixe o básico no passado, construa a base agora mesmo e colha o resultado nos seus próximos deploys.