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

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.

📝 𝗟𝗶𝗻𝗸𝘀 𝗖𝗶𝘁𝗮𝗱𝗼𝘀

🎙️ Compilado Podcast

🔗 Mais links do Código Fonte TV

#FrontEnd #React #JavaScript

[devtocruz]

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

[vyamashiro]

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

[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: <S.Container/> ou <S.Content/>, ficando mais fácil visualização e evitar encher com todas as constantes dos estilos.

[lucassilva]

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!

[viniciusrubia]

Esse canal é o melhor! Tudo que tenho dúvida tem vídeo nesse canal 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

[pedroelisio]

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

[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

[charlesmontilla]

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

[danilogozzialgaranazdossan]

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

[rodrigopedroso]

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.

[_rubenscjr]

Seria muito legal um dicionário sobre atomic design

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

[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

[douglasodev]

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

[guilherme]

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

[JeffersonSantos-sbdm]

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

[sebastiancotta]

Gostaria de ver um vídeo sobre atomic design

[denneraladim]

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

[charliebellow]

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