Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

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