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

🚀 𝗖𝗬𝗕𝗘𝗥 𝗠𝗢𝗡𝗗𝗔𝗬 𝗡𝗔 𝗔𝗟𝗨𝗥𝗔 → 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
→ KZbin: codft.me/canal...
→ Spotify: codft.me/compi...
→ Newsletter: compilado.codi...
🔗 Mais links do Código Fonte TV
→ codigofonte.tv
#FrontEnd #React #JavaScript

[@vyamashiro]

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

[@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]

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.

[@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!

[@charlesmontilla]

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

[@Edu-SanDevIstan]

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

[@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.

[@pedroelisio555]

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

[@viniciusrubia3656]

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

[@CarlosSilva-hy8xt]

styled components é meu xodó

[@danilogozzialgaranazdossan5812]

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

[@rafaelmagalhaesguedes579]

Excelente explicação, como sempre!

[@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.

[@machadoviewer]

Styled components é lindo 🥰

[@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

[@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

[@_rubenscjr]

Seria muito legal um dicionário sobre atomic design

[@sergioblue000]

Vídeo sobre Atomic Design por favor!

[@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

[@6644guilherme]

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

[@brenoaugusto2945]

Conteúdo maravilhoso :D

[@codigofontetv]

Muito obrigado Breno!

[@VitorHugo-fz1go]

falem sobre atomic design pfvr!!

[@sebastiancotta]

Gostaria de ver um vídeo sobre atomic design

[@denneraladim6190]

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

[@werlenxaraujo456]

v6 são demais

[@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.

[@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 🙌

[@charliebellow2229]

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

[@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

[@contosfatos]

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

[@codigofontetv]

Muito obrigado pelo carinho e por nos acompanhar.

[@CarolineMoraes]

🤩🤩🤩🤩🤩

[@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?

[@ddosmax293]

👋👋👋👍👍👍

[@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.

[@yuri4dev]

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

[@MachoMeu]

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