M2#A31 - Assets, o raw-loader, style-loader e WebPack

[alexandre1202]

Fala Fernando. tudo bem velho?

Parceiro, eu quero entender melhor sobre a utilização do raw loader para o css.

Primeiramente nós utilizamos o style.css no index.html e agora nesse vídeo você explica uma forma de trabalharmos com ele no WebPack.

Minha dúvida é:

Nós já estávamos utilizando o WebPack antes quando fizemos a aplicação que consome os endpoints do GitHub então porque temos que mudar? Qual é a diferença entre as duas abordagens?

@fdaciuk

[fdaciuk]

Oi @Alexandre1202! Tudo certo, e você? =)

Só pra contextualizar: você está comparando a aula M2#A31 com o que fizemos no primeiro módulo? Se não for isso, então eu acredito que não entendi sua dúvida xD

Se foi, então é o seguinte: no primeiro módulo nós fizemos uma configuração básica do webpack, apenas para conseguir aprender o que precisávamos sobre React. Todo o CSS escrito foi importado manualmente no arquivo index.html.

Já nessa aula 31 do módulo 2, eu mostro como seria possível a gente automatizar o processo: ao invés de, a cada arquivo CSS criado, a gente precisar importar manualmente lá no index.html, nós importamos o CSS direto no arquivo JS onde ele será usado, e deixamos o trabalho de importar todos os CSS para o webpack =)

Basicamente a diferença é a possibilidade de automação do processo de importação, além de outros benefícios, como o uso do CSS Modules (que você deve ver mais pra frente) =)

[alexandre1202]

A dúvida era essa mesma

Mas pensando em modularização eu automaticamente penso em reutilização. Se colocarmos os arquivos CSS específicos para o componente search, button etc, não vejo como reaproveitar um estilo para outro componente

Mas não sei a melhor forma de se usar CSS.

Vou aguardar o próximo módulo para entender melhor CSS modules

Obrigado

On Sat, 19 Jun 2021 at 11:43 Fernando Daciuk @.***> wrote:

Oi @Alexandre1202 https://github.com/Alexandre1202! Tudo certo, e você? =)

Só pra contextualizar: você está comparando a aula M2#A31 com o que fizemos no primeiro módulo? Se não for isso, então eu acredito que não entendi sua dúvida xD

Se foi, então é o seguinte: no primeiro módulo nós fizemos uma configuração básica do webpack, apenas para conseguir aprender o que precisávamos sobre React. Todo o CSS escrito foi importado manualmente no arquivo index.html.

Já nessa aula 31 do módulo 2, eu mostro como seria possível a gente automatizar o processo: ao invés de, a cada arquivo CSS criado, a gente precisar importar manualmente lá no index.html, nós importamos o CSS direto no arquivo JS onde ele será usado, e deixamos o trabalho de importar todos os CSS para o webpack =)

Basicamente a diferença é a possibilidade de automação do processo de importação, além de outros benefícios, como o uso do CSS Modules (que você deve ver mais pra frente) =)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/da2k/curso-reactjs-ninja/issues/550#issuecomment-864415400, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB5CMVOATK5QLVFTNQCF5WDTTSUKZANCNFSM464RRJQQ .

-- ------------------------- Alexandre Barbosa 11-99169-3870 (Claro)

[fdaciuk]

Então @Alexandre1202, aí que está o ponto: você não precisa mais reutilizar classes CSS: seus componentes estão escritos em JS, você pode reutilizar os componentes que já contém os estilos :D

Antes do React, nós teríamos que criar uma classe .button e adicionar em todas as tags que queríamos que tivesem o estilo de botão.

Com o React, você cria um componente de botão, aplica o estilo para esse botão, mas pode deixar o botão genérico o suficiente para ser reutilizado como você bem entender =)

Deu pra entender a ideia? =)

[alexandre1202]

Ahhhhhhhh

Agora caiu a ficha. Agente consegue fazer o CSS virar um componente! Sensacional!

Perfeito vou seguir sem dúvidas então.

Muito obrigado

On Sat, 19 Jun 2021 at 15:24 Fernando Daciuk @.***> wrote:

Então @Alexandre1202 https://github.com/Alexandre1202, aí que está o ponto: você não precisa mais reutilizar classes CSS: seus componentes estão escritos em JS, você pode reutilizar os componentes que já contém os estilos :D

Antes do React, nós teríamos que criar uma classe .button e adicionar em todas as tags que queríamos que tivesem o estilo de botão.

Com o React, você cria um componente de botão, aplica o estilo para esse botão, mas pode deixar o botão genérico o suficiente para ser reutilizado como você bem entender =)

Deu pra entender a ideia? =)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/da2k/curso-reactjs-ninja/issues/550#issuecomment-864445909, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB5CMVPNQOOXG6Q7YSGOOOLTTTOHNANCNFSM464RRJQQ .

-- ------------------------- Alexandre Barbosa 11-99169-3870 (Claro)

[fdaciuk]

Isso, o CSS fica embutido no componente :D

Show, que bom que ficou claro! Qualquer dúvida, só avisar :D