Já tava com essa dúvida mas esqueci de perguntar antes: porque algumas imagens foram colocadas em src/assets e outras em public/assets? Qual a diferença entre essas duas pastas?
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!
Já tava com essa dúvida mas esqueci de perguntar antes: porque algumas imagens foram colocadas em src/assets e outras em public/assets? Qual a diferença entre essas duas pastas?
Olá! Excelente pergunta, pois a organização dos arquivos é uma parte crucial do desenvolvimento de um projeto.
No React, a pasta public é usada para arquivos que serão servidos diretamente sem serem processados pelo Webpack, que de forma resumida ela é basicamente a ferramenta de empacotamento usada pelo React. Isso significa que, se você colocar uma imagem na pasta public, poderá acessá-la diretamente pela URL do navegador.
Por outro lado, a pasta src é onde o código-fonte do seu aplicativo React fica. Quando você coloca uma imagem em src/assets, essa imagem passa pelo Webpack e é incluída no pacote final do seu aplicativo. Isso significa que a imagem será carregada somente quando for necessária e renderizada, o que pode melhorar o desempenho do seu aplicativo.
Então, a diferença básica é:
public/assets: imagens colocadas aqui podem ser acessadas diretamente pela URL do navegador. São úteis quando você precisa de um link direto para a imagem, como para compartilhamento em redes sociais, por isso digamos que elas são publicas.src/assets: imagens aqui são processadas pelo Webpack e incluídas no pacote final do seu aplicativo ou seja elas são otimizadas. São úteis quando você quer que a imagem seja carregada somente quando for necessária, o que pode melhorar o desempenho do seu aplicativo.Mas não se preocupe. Isso vai se ajustando com o tempo, coloque imagens em src/assets se precisarem ser processadas durante a construção. Por exemplo, logotipos, ícones personalizados ou imagens dinâmicas. Para imagens estáticas e inalteradas, como imagens de conteúdo geral ou referências externas, use public/assets. Essa escolha depende das necessidades específicas do projeto.
Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!
Sucesso ✨
Um grande abraço e até mais!
muito obrigado pela explicação!