2
respostas

[Sugestão] Melhoria na importação das imagens

Para que não fique uma lista imensa de imports no início do código optei por criar um arquivo chamado 'index.js' no diretório de ícones com as seguintes linhas de exportação:

export { default as home } from './home.png';
export { default as maisCurtidas } from './mais-curtidas.png';
export { default as maisVistas } from './mais-vistas.png';
export { default as novas } from './novas.png';
export { default as surpreendaMe } from './surpreenda-me.png';
E depois importar no 'index.jsx' da pasta do Menu desta forma:
import { home, maisCurtidas, maisVistas, novas, surpreendaMe } from '../../assets/icones'
Creio que desta forma fica mais compreensível e o código fica mais limpo!
2 respostas

Olá, Samira! Tudo bem?

Achei perfeita a sua organização e a solução encontrada para evitar vários imports em um componentes. Geralmente fazemos isso para os componentes também. Quando sua aplicação tem muitos componentes e você precisa importar vários deles em um arquivo, exportamos por padrão estes componentes em um arquivo index e importamos eles de forma mais enxuta no arquivo em que iremos usá-los.

Eu escrevi um artigo com várias outras práticas recomendadas quando escrevemos código em React e vou deixar o link abaixo caso você queira saber mais!

Abraços!

Vou aderir a essa ideia, achei genial