Styled Components (O construtor de elementos do React) // Dicionário do Programador

Подписаться 686 тыс.

Просмотров 12 тыс.

50% 1

🚀 𝗖𝗬𝗕𝗘𝗥 𝗠𝗢𝗡𝗗𝗔𝗬 𝗡𝗔 𝗔𝗟𝗨𝗥𝗔 → shor.by/iPcG
Quem trabalha com Front-End sabe muito bem que essa área a cada 2~3 anos evolui em uma velocidade incrível. O trio HTML, CSS e JavaScript ainda domina no que roda no navegador, mas a construção de componentes, elementos e design systems está bem longe de ser trivial. O Styled Components surgiu da necessidade de separar a construção de componentes de forma que seja fácil reaproveitar em outros projetos, não só visualmente mas também seus comportamentos e estados.
📝 𝗟𝗶𝗻𝗸𝘀 𝗖𝗶𝘁𝗮𝗱𝗼𝘀
→ Repositório utilizado como exemplo: github.com/fol...
🎙️ Compilado Podcast
→ RU-vid: codft.me/canal...
→ Spotify: codft.me/compi...
→ Newsletter: compilado.codi...
🔗 Mais links do Código Fonte TV
→ codigofonte.tv
#FrontEnd #React #JavaScript

Опубликовано:

1 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 44

@devtocruz6698 Год назад

Top! Só vai sem medo de styled components, depois que acostuma com a sintaxe ganha muita produtividade, principalmente em projetos maiores

@guustavols Год назад

a perda de performance por n poder salvar o css em cache é grande?

@denysantos9012 Год назад

Eu nunca o achei estranho, estou acostumado a ver coisas diferentes a cada momento no js

@emanoelinfinity Год назад

Esse eu já conheço tanto que já adotei por padrão. E uso um pattern como ele. Ao invés de importar cada componente, importo o arquivo com o alias `import * as S from './styles;` E no arquivo em questão posso usar assim: ou , ficando mais fácil visualização e evitar encher com todas as constantes dos estilos.

@atailooliveira Год назад

manda mais detalhes por favor !!!

@weslleyjuann 5 месяцев назад

Irmão, essa prática é interessante, mas acredito que seja interessante separar os css por 1 motivo, se você tem 20 configs e usa somente 1 num arquivo, tu carregou as 20 desnecessariamente.

@charlesmontilla Год назад

PHP "misturado" = Meme do cachorrinho bravo; JavaScript "misturado" = Meme do cachorrinho feliz;

@vyamashiro Год назад

Já quero o vídeo sobre atomic design!!! Por favor

@lucassilva1347 Год назад

Excelente vídeo, explicando mais a fundo algo tão utilizado no ReactJS, meus parabéns pelo conteúdo! Seria muito bom um vídeo se aprofundando sobre o Atomic Design, aprovado!

@fscamilo Год назад

Usei styled components e modules em diferentes projetos esse ano, e prefiro os modules. Arquivos separados, utilizando Sass sem instalar nenhum pacote extra, organizado e fácil de ler. Styled components tem cara de gambiarra e o código fica uma salada, além da sintaxe com estética duvidosa.

@6644guilherme Год назад

Honestamente, achei o css modules bem melhor. Adorei o video, bem explicativo

@douglasilvax Год назад

Css modules fica mais fácil pra exportar pra qualquer framework de JS e TS (que pode ou não usar o styled components) já que usa a sintaxe puramente css. Aproveitamento de código também é facilitado. Vlw pelo vídeo

@MachoMeu 3 месяца назад

Sintaxe se pronuncia (sinTÁsse) e não ( SÍntakse) como vcs estão pronunciando

@samuel_do_prado Год назад

Façam um vídeo sobre o Atomic Design sim, ou arquitetura no frontend em geral, por favor, é um tema pouco abordado

@VitorHugo-fz1go Год назад

falem sobre atomic design pfvr!!

@sergioblue000 Год назад

Vídeo sobre Atomic Design por favor!

@contosfatos Год назад

Like no melhor canal de ti do youtube (Minha opnião)

@codigofontetv Год назад

Muito obrigado pelo carinho e por nos acompanhar.

@pedroelisio555 Год назад

acho genial o styled components! parabéns pelo video!

@CarolineMoraes 7 месяцев назад

🤩🤩🤩🤩🤩

@fantokens2139 Год назад

Boa Noite Professor , Tenho uma Dúvida Fiz um App pra mim Cidade , Estou Pensando em Colocar Banners de Patrocinadores Empresários da Cidade pra me Ajudar a Monitorar , O meu App e de Anúncios Tipo OLX mais só Pra Cidade. vocês Tem Ideia de Valor pra cobrar Por Mês já que estou Iniciando , Já Coloquei na Playstore está em Análise 🙌

@josedavi7707 Год назад

Olá, tudo bem galera ? Queria que alguém me desse umas dicas, comecei por Python pra pegar a lógica, mas assim mesmo tô tendo uma dificuldade... Lógica em matemática ajuda? Alguma coisa a mais?

@mus.igorfranco Год назад

Alguém sabe a relação entre tailwindCss e Styled Components ? Qual é melhor e tal? Tô voando no tailwind, comecei a usar há mt pouco tempo e ele simplesmente substituiu todo meu SCSS q eu escrevia na mão.

@claudinha-freithas Год назад

Fiz hoje meu primeiro código com Styled-components. Confesso que tive bastante dificuldade pois muitos termos são novos para mim. Perguntei e pesquisei bastante para entender. Não foi tão difícil entender alguns termos pois eu já estava acostumada com o velho CSS, o Java e o C#, então orientação a objetos nem foi tão complicado. O que foi complicado foi a forma de utilizar o props e as diferenças das linguagens citadas. Está sendo um desafio pra mim aprender mais uma línguagem nova. Gosto muito

@charliebellow2229 Год назад

Só CDF café raiz vai perceber que Vanessa tá com a voz diferente..

@rodrigopedroso4058 Год назад

Muito top! Achei muito interessante a abordagem e super fácil o entendimento, tive uma pequena experiência com o styled components achei um pouco complicado no começo mas fui me acontumando, toda vez que tenho a oportunidade eu a utilizo kkkk, mas também não posso deixa de dizer que juntamente com o React temos o MUI é uma outra forma de estilizar, mas claro é como foi dito no vídeo, vai depende do projeto e o que é melhor por time. Parabéns pelo conteúdo incrível.

@yuri4dev Год назад

Ao meu ver as desvantagens afetam muito a experiência e performance, e definitivamente não vale o uso em projetos grandes.

@werlenxaraujo456 Год назад

v6 são demais

@denneraladim6190 Год назад

QUAL VOCÊS ACHAM MELHOR O STYLE COMPONTES, SASS OU TAIWINDCSS NO NEXTJS ?

@JeffersonSantos-sb1dm Год назад

Faz um vídeo sobre Material UI, é uma biblioteca de componentes react, tenho utilizado ela e é bem interessante também. ela tem uma maneira própria de estilização e da também suporte ao styled components

@alamo_DevFlow Год назад

Ah legal uso bastante no meu dia a dia em todos os projetos q eu desenvolvo. Uso tudo que o styled componentes junto com typescript tem a oferecer.

@viniciusrubia3656 Год назад

Esse canal é o melhor! Tudo que tenho dúvida tem vídeo nesse canal aaaaa parabéns pra vocês

@Edu-SanDevIstan Год назад

Esse é bom em! Uso direto muito fácil de aprender e muito prático pra fazer as coisas

@danilogozzialgaranazdossan5812 Год назад

Estou usando Atomic Design nos projetos da empresa e gostei muito!

@rafaelmagalhaesguedes579 Год назад

Excelente explicação, como sempre!

@_rubenscjr Год назад

Seria muito legal um dicionário sobre atomic design

@sebastiancotta Год назад

Gostaria de ver um vídeo sobre atomic design

@arozendojr Год назад

Dúvida, styled components em react-native, acaba sendo mais performático, pois será estilizada a parte nativa e não teria o comportamento do CSS no navegador?

@devtocruz6698 Год назад

Na verdade é menos performático, nada perceptível e os gargalos de performance ficam muito mais em renderizações desnecessárias por exemplo, mas respondendo a pergunta, é menos performático