Curso de React: Inserindo CSS no React (CSS modules) - #06
HTML-код
- Опубликовано: 8 фев 2025
- 🔴 CURSO COMPLETO DE REACT: www.udemy.com/...
📘 Ebook gratuito de React: www.horadecoda...
★ Nossos Cursos: www.horadecoda...
Neste vídeo vamos colocar #CSS no nosso projeto em #React
Para isso vamos utilizar um recurso bem interessante chamado CSS Modules, que facilita a inserção de CS por componentes, deixando nosso projeto mais organizado
Repositório: github.com/mat...
★ Livros recomendados: www.horadecoda...
▶ Instagram: @horadecodar
▶ GitHub: github.com/mat... 🔷 Telegram: t.me/horadecodar .
🟣 Discord Hora de Codar: / discord
![Felix "Unfair" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/Oswujxm2Ag0/mqdefault.jpg)
Só para complementar, CSS modules também são úteis para evitar conflitos de nomes de classes entre arquivos CSS diferentes.
Por exemplo, vc pode ter classes com o mesmo nome em arquivos CSS diferentes e está tudo bem já que cada módulo tem meio que um escopo local não global.
Eu sou dev de angular, e esse foi o único professor que me fez entender o react .
que bom que te ajudei Fabiano!
Angular é a mesma curva de aprendizado? Ou é mais complicado?
@@RobertoJuniorNet mais complicado
@@Lukeluke987 Caraca.
@@RobertoJuniorNet Angular tem praticamente o msm conceito do react, só q acho o Angular bem mais estruturado e organizado
Percebi algumas dúvidas e espero que esse comentário ajude alguém. Sim tem diferença e não é apenas uma questão de nomenclatura. Acabei de fazer o teste no meu projeto e vi que se você tiver arquivos CSS Tradicionais para cada componente, e dentro de cada um desses arquivos tiver uma classe com o mesmo nome, quando você chamar esses componentes no Componente App, apenas uma das classes irá surtir efeito nos componentes, ou seja, uma irá ficar inutilizada e ambos os componentes irão usar uma mesma classe de apenas um dos arquivos CSS. Com os modules eles irão ser estilizados apenas por seus respectivos arquivos css sem sobrescrever um ao outro. Façam os testes vocês mesmos, com modules e sem modules.
obrigado pela dica man
Finalmente eu achei um curso com excelente didática. Estou fazendo ele e simplesmente tudo está entrando na minha cabeça. E nem sei tanto assim de Javascript (fiz Somente o curso Basico do curso em video) esta tudo muito fácil até aqui
Cara, você é simplesmente fora de série. tem uma didática maravilhosa, nasceu pra ensinar e o que mais me espanta é vc disponilizar todo seu conhecimento gratuitamente para todos. Que Deus te abençoe sempre pq vc é uma pessoa iluminada. Estava tendo muita dificuldade com React e vc faz parecer simples. Vou estar adquirindo seus cursos o mais breve possível e indicando seu conteúdo para todos os meus amigos.
Boa noite
Nesta aula 06, sobre o nome dos seletores CSS do componente, é possível utilizar .frase-container
A forma de acessar essa estilização do CSS na div fica um pouco diferente, mas funciona. Seria da seguinte forma:
Como o seletor tem o hífen(-), o acesso é feito utilizando o seletor como string dentro de colchetes.
🙂
Muito bem apontado. Fiquei pensando na dificuldade em se usar classes de algum framework que usa o hífen. Obrigado!
O melhor do curso são vídeos objetivos, claros, uma didática muito boa e principalmente videos curtos. Estava fazendo um que os videos todos tem mais de 1:30 muito cansativo.
Sobre Udemy, o curso é atualizado para 2024, pois React mudou bastante.
Eu estava apanhando do React a valer.... cada vez numa etapa diferente 🤕 Quase desistindo.... quase.... até que encontrei esse profê e até aqui tá dando bom 🙏🏻 . Bora seguir junto.... quero ver na hora do deployer. Dessa vez vai!!! 🚀
Já pesquisei vários conteúdos sobre react mas só você me fez entender, parabéns pela didática.
Cara, tinha muita difilculdade em compreender a estrutura do React, após as suas aulas ficou tudo bem mais claro para mim que iniciais no front com Angular.
2 dias aqui no canal e já desenvolvendo em React kkkkk! Top de mais
o cara é bom mesmo , ajudando nas duvidas do react e preact.
React é outro nível, professor o senhor é Top, Brigado viu
valeu João!
Simples como coisa de Einstein! Explica muito bem! Maratonei Laravel e agora to nessa seara! Bora concluir mais um!!!
Caramba, vim procurar por "CSS em ReactJS" e saí daqui sabendo coisas simples que eu não tinha entendido com outros professores... Valeu demais! Muito boa didática 🥰
ahhaha valeu Alexandre!
Parabéns! Excelente didática como sempre, sou muito fã do seu canal e sempre retorno aqui para aprender coisas novas, esperando por novos vídeos, forte abraço virtual (a pandemia não acabou!!!!) e muito obrigado.
fala Claudio, obrigado pelo retorno! =) E sim, vamos nos cuidar, abração
Valeu mesmo Matheus, estamos conseguindo te acompanhar, esses primeiros passos são essenciais pra podermos construir essa base necessária pra gente poder avançar....show!
de nada Chrislan!
Que curso massa, muito fácil de entender com a sua didática
Matheus vc é INCRIVEL, que playlist boa. vlw : )
valeu Arthur, tamo junto!
Assistir só mais 2 vídeos por hoje, tá muito bom o curso
valeuu brother!
se quiser se especializar em desenvolvimento web, se liga aí: horadecodar.com.br/comunidade-hora-de-codar/
Matheus muito obrigado pelo curso, tá salvando a vida!!!!!!!!!!!!!!
de nada Luciano!
terminando esse curso já vou para o seu curso de react avançado
Cada vez melhor! Ensino muito objetivo!
valeu Caio!
Uma aula muito top, de fácil entendimento, assim como todos os cursos do Matheus na Udemy, tmj 👊🏻
opa, aí sim Marcelo, segunda tem mais =))
Sou fã demais desse Professor!
valeuuu Erick, tamo junto!
Excelente curso, Matheus obrigado por compartilhar.
valeuuu Everaldo!
Explicação e didática incrível
Ansioso pela proxima aula
opa Enzo, segunda chega a próxima xD
Matheus tudo joia? Parabens pelo conteudo! Da para criar um estilo no css assim .meu-botão com css modules é só usar ele da seguinte maneira className={style.['meu-botao']}
vlw pela dica mano, agregando mais conhecimento, show!
up
Ótima explicação, obrigado por compartilhar o conhecimento, parabéns pelo seu trabalho.
O meu eu apenas digitei
cd meu-projeto
ele carregou a pasta!
digitei: npm start
só de imaginar que perdi 2 dias passando raiva instalando e tentando colocar pra rodar o site mas enfim deu bom. iniciei e hoje já estou nessa aula e só avançando.
E aí professor. Muito bom.
Eu tenho no meu cunho JAVASCRIPT. Lá no udemy. Kkkkk .
Mas aqui tá bom de ➕
Aula top....Obrigado parabens pela boa didática!
valeu Edilenio!
Aula excelente!
valeu Charles!
Visto
muito bom
Desmistificado 🎉 ❤
Show Parabéns!!
uso o pc da xuxa no preact so usar: className="css" depois vou testar react quase o mesmo .
ei drx vc e foda meu parceiro
Show!!
Muito Show !!! valeu mesmo!!!
Olá Matheus muito boa sua forma de explicar sobre o React parabéns, gostaria de saber a versão utilizada no curso da Udemy pois fiz um curso de outro professor onde entendi os conceitos mas nas aulas utilizava a versão 15 o que deixou a desejar na prática
show!
Por padrão, os desenvolvedores React costumam deixar os componentes CSS junto com os componentes JS/JSX ou criam uma pasta separada apenas para componentes de estilo?
Olá Matheus! Muito boas as aulas!! O que sobrou para ver na Udemy?? Qual o diferencial do curso completo em relação a sua playlist aqui no RUclips? Abraço.
Usar o CSS Modules é diferente de criar um arquivo CSS para cada componente? porque pelo que eu entendi, isso só é uma sintaxe diferente ja que teria que fazer um nomeDoComponente.modules.css pra cada componente.
Não é uma crítica e sim uma dúvida. Eu costumava criar componentes.jsx e um arquivo .css normal para cada um e gostaria de entender a vantagem de usar o CSS Modules.
Exelente curso. Obrigado, Matheus!
Descobriu a diferença? Tenho a mesma dúvida ...
Sim tem diferença e não é apenas uma questão de nomenclatura. Acabei de fazer o teste no meu projeto e vi que se você tiver arquivos CSS Tradicionais para cada componente, e dentro de cada um desses arquivos tiver uma classe com o mesmo nome, quando você chamar esses componentes no Componente App, apenas uma das classes irá surtir efeito nos componentes, ou seja, uma irá ficar inutilizada e ambos os componentes irão usar uma mesma classe de apenas um dos arquivos CSS. Com os modules eles irão ser estilizados apenas por seus respectivos arquivos css sem sobrescrever um ao outro. Faça o teste vocês mesmos, com modules e sem modules.
Fala Matheus, beleza? Excelente curso! Gostaria de saber se posso unir os conhecimentos de Tailwind CSS do seu curso junto ao React.
opa Lucas, boa ideia, quem sabe num próximo curso fazemos deste jeito =)
O e-book não está mas disponível?
Então, eu sei que essa aula tem 3 anos, mas eu tenho uma pequena duvida, porque eu coloquie uma className e quando utilizei ela no app.css consegui fazer alterações normalmente, e não sei se isso está certo.
Basicamente eu utilizei o className como se fosse uma class normal estabeleci um nome e no arquivo css estabeleci a estilização, isso é errado? deveria funcionar?
posso usar o tailwind sem priblemas
Com todo respeito ao React, mas no vue isso é muito melhor, em um único arquivo fica o HTML o CSS e o Javascript, e por incrivel que pareça de forma extremamente organizada
Valeeeeu
Sempre que utilizo styles.nomedaclasse, o nome da classe fica azul igual o styles e não é aplicado de jeito nenhum as mudanças. Se eu aplicar direto na tag, funciona normalmente. Se eu colocar o className="nomedaclasse" ele funciona normal também. Sabe me dizer o por que disso?
Estou com o mesmo problema...
Joo Mendes, eu encontrei o problema que ocorria comigo: Eu criei o arquivo com o nome ***.modules.css em vez de ***.module.css, ou seja, com um "S" no final de "module". Assim, importando o arquivo ele funciona, mas não através do styles.container do React. Quando renomeei o arquivo para ***.module.css ele passou a funcionar normalmente. Veja se não é este o caso.
@@chicobg466 cai nessa agora que vi corrigi o porque de acontecer isso ? .module para .modules ?
@@gabrielvictor319 se eu entendi direito, o React monitora o arquivo .module.css, apesar de precisar importar... Quando o nome é diferente ele não consegue se achar.
Cara fiquei procurando aqui direto sem entender o porque. Ajudou demais@@chicobg466
Em relação à responsividade, é feita por módulos também??
Professor, qual a vantagem de importar como module e não um css ou scss diretamente como é executado no arquivo App? Obrigado e um abração!
Faz um teste, cria um componente com tags P e da um estilo para ele, crie outro componente com tag P, portanto tenha 2 componentes recheados de tags P, em 1 desses componentes importe o css sem ser via module e dps de uma olhada no App.js, vc ira perceber que como vc importa 1 componente portanto, vc puxa tanto o HTML como o css e o estilo se aplica aos 2 modulos tanto o com o CSS e o 100.
Eu estava quaaaaaaase quererendo aprender react. Quando vi que ele exige que voce saiba css desanimei. Sou dev de sistemas e gosto de coisas prontas como bootstrap. Odeio ter qiue focar desenhando telas com css. Será que existe algo com bootstrap ?
oi, verifiquei que o teu está centralizado mas o meu está a esquerda com a mesma configuração de css. pode ser porque o teu esta com inspecionar ativo? ou tem alguma coisa no css or em outro lugar para centralizar o html?
o "Frase.modulo.css" nao precisa da export?
Cara eu uso css no react igual no js puro tem algum problema? Kkkkk seila fica menos confuso,sigo uma linha só porem coloco um espaço consigo entender perfeitamente, separando tudo agora parece que me perco total
Meu estilo nao esta funcionando. O codigo aparentemente esta correto, nao sei porque. Como verifico?
Eu poderia usar Sass?
sim...
Esta forma de implementar o CSS com módulos não funciona aqui comigo. O objeto 'styles' está vazio e não aplica as propriedades CSS. Estou vindo de outro curso de React e lá também era esse mesmo problema: o css modules não funciona comigo. Estou usando a versão 18 do React, seria esse o problema? SIgo atentamente o código digitado e não identifico nenhum erro de digitação meu. Alguém mais está com este erro?
Bom dia Diego, não sei se é isso, mas talvez o seu arquivo css você esteja usando a palavra "modules" e não "module", tenta dar uma vericada nisso. Isso tava acontecendo bastante com o pessoal dos outros comentários
@@khy2489 Obrigado pela dica. Mas já tinha descoberto como corrigir, está funcionando agora.
@@barbosadiego estou com esse problema e já olhei a questão do 'module' e não era isso, como você corrigiu?
@@barbosadiego Como fez, tô com o mesmo problema
@@barbosadiego ac
Meu CSS não está indo alguém me ajuda?
02 - 29/06/2024
🗿
CSS modules é uma desgraça