Estilização e Reutilização de Componentes Personalizados no React

Рет қаралды 9,465

Күн бұрын

Já sabe como identificar padrões visuais repetitivos no código React? Nesse vídeo eu te mostro como você consegue fazer isso, indicando a necessidade de criar componentes personalizados para otimizar e simplificar o desenvolvimento.
Explorando o uso essencial de propriedades e Children no React, você entenderá como passar informações de forma eficiente para os componentes personalizados.
Além disso, descobrirá como estender as propriedades de elementos HTML em componentes React para automatizar a inclusão de todas as propriedades necessárias.
Aprenda a criar e estilizar componentes únicos de forma prática e eficaz para melhorar a estrutura e reusabilidade do seu código React.
- [00:00]( • Estilização e Reutiliz... ) 🔄 Identificação de componentes repetitivos no código
- Padrões visuais repetitivos podem indicar a criação de um componente personalizado.
- [02:03]( • Estilização e Reutiliz... ) 🛠️ Utilizando propriedades e Children no React
- Uso essencial de propriedades e Children para passar informações para componentes personalizados.
- [05:05]( • Estilização e Reutiliz... ) 🧩 Estendendo propriedades de elementos HTML em um componente React
- Estender propriedades de elementos HTML em componentes React para repassar todas as propriedades automaticamente.
-----
Conecte-se a 500mil devs e avance para o próximo nível com a nossa plataforma: rocketseat.com.br/
Cadastre-se na nossa plataforma: app.rocketseat.com.br/signup
Junte-se a mais de 392mil devs em nossa comunidade no Discord: / discord
Acompanhe a Rocketseat nas redes sociais:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat

Пікірлер: 42

@MordyDeep 24 күн бұрын

2 anos de react e n sabia desse componentProps, apesar de ter pouco tempo de typescript, ISSO AI É MUITO BOM!!

@artur-bb6js 25 күн бұрын

Que conteúdo massa, estou estudando react, esse vídeo me serviu demais pra estudos, parabéns pelo vídeo, curti demais, traz mais vídeo sobre dicas de react

@alynho6884 25 күн бұрын

excelente aula para quem está iniciando com react, assim como eu :)

@malveslinck 12 күн бұрын

Muito bacana a explicacao

@ruggerygusmao4386 24 күн бұрын

Ficou bacana demais essa aula. Pode seguir nesse sentido.

@edwilsondasilva9946 24 күн бұрын

Parabéns!!! Mais um excelente conteúdo.

@rangel3l1 25 күн бұрын

nossa que aula top demais

@devmau1716 25 күн бұрын

muito bom!! aprendi a mexer com react graças aos cursos da rocketseat ! recomendadissimo!

@ThiagoOliveira-yk3sx 25 күн бұрын

Sensacional

@iJuulia 25 күн бұрын

caramba, estava procurando um conteúdo sobre isso esses dias e vocês postam hoje haushaushau

@saulotarsobc 22 күн бұрын

uau 😮

@allandouglas2726 25 күн бұрын

top

@gustavo.saraiva 25 күн бұрын

🤘🤘

@MarlonEnglemam 15 күн бұрын

Eu não sabia desse ComponentProps, quando eu fazia componentes assim eu dava extends usando o HTMLElementProps e passava pra dentro dessa tipagem a interface do componente html nativo. Tem alguma diferença? Pois do jeito que eu faço sempre funcionou muito bem

@LCProg-321 24 күн бұрын

Não seria melhor extrair o children das props para não repassar pro ? Exemplo: NavLink({ children, ...props }: NavLinkProps)

@MordyDeep 24 күн бұрын

já é padrão passar as props como objeto, além do intelicense, n precisa chamar props.algumacoisa toda vez kkk bem melhor mesmo.

@esbnet 25 күн бұрын

Senti falta do tsconfig, onde ele ficou neste projeto?

@sweydabdul8090 21 күн бұрын

melhor usar um spread operator dps de todos os atributos, ou seja no fim, para poder substituir quando necessario pelo pai. se nao se existir uma alteracao padrao, a nova nunca terá efeito

@luffyfat2 25 күн бұрын

Graças aos deuses devs existe um Next/Link

@luizsiewerdt5291 24 күн бұрын

sim, mas isso se aplica a todas as classes html, não tem um component do next pra cada classe que vc possa reutilizar.

@iJuulia 25 күн бұрын

vocês podem fazer um vídeo sobre componentes dinâmicos? exemplo: eu tenho dois menus em um site, um que aparece apenas em telas grandes e outro q aparece apenas em telas pequenas, mas eles compartilham as mesmas informações, com estilizações diferentes. tem algum modo de dinamizar a manutenção desses menus?

@Piipos 25 күн бұрын

Dá uma procurada sobre "Gerenciamento de estados", veja se resolve seu problema.

@icaroteles2773 25 күн бұрын

Talvez um único componente ou uma High Order Function (se não conhecer sobre, recomendo que pesquise um pouco para entender sobre). A ideia é que essa HOC utilize, por exemplo, um Hook personalizado seu que poderia se chamar "useMediaQuery", para saber qual o tamanho da tela atual do usuário e se é mobile ou desktop. A partir desta informação, faz uma renderização condicional... Conseguiu entender um pouco?

@luizsiewerdt5291 24 күн бұрын

coloca no className do que vc quer que apareça quando está em telas grandes "hidden md:block" e no componente de tela pequena "md:hidden", da uma estudada em responsividade do tailwind

@thiagodiniz8224 25 күн бұрын

Você passou o children como string só, qual a melhor forma de passar elemento html?

@CarlosZiegler-t8l 25 күн бұрын

ReactNode

@CarlosEduardo-ef2mh 24 күн бұрын

alguem pode me dizer qual o tema que o Diego usa no VScode?

@rotivanov 23 күн бұрын

Vesper++

@edsonrcosta 24 күн бұрын

Está muito bom! No entanto, caso eu queira passar um ícone no children, já que o children está tipado como string, como poderia fazer isso?

@MordyDeep 24 күн бұрын

{children} interface = { children: string icon: StaticImageData } n precisa passar o texto e o icone junto, pode ser duas props separadas que vão no 'corpo' do link, o react só sabe o que é as props, aonde vc vai posicionar elas você quem decide, só jogar um flex, alignItems: center, e ja era kkk

@MordyDeep 24 күн бұрын

caso seja OU texto OU icone, só mudar a tipagem pra condicional: children: string | StaticImageData

@MordyDeep 24 күн бұрын

ou se for um componente como filho tipo texto + imagem, tipagem seria children: ReactNode ou JSX.Element

@edsonrcosta 24 күн бұрын

@@MordyDeep acho que deve ser a melhor opçao

@limazia 25 күн бұрын

Como deixar as cores do VSCode iguais às do Diegão?

@rtrampox 25 күн бұрын

Ele usa o Min theme da loja de extensões do VSCode

@UmFilipe 25 күн бұрын

Esse tema é o Vesper++

@ThiagoOliveira-yk3sx 25 күн бұрын

Ele tem um vídeo no KZfaq da Rockseat ensinando a customizar o VSCode pra ficar igual o dele

@ustav_o 25 күн бұрын

tu baixa o vesper++ nas extensões do vscode e depois baixa o Symbols para ícones de arquivos e pastas.

@ustav_o 25 күн бұрын

ele tem um vídeo explicando como deixa o vscode igualzinho o dele tb

@toribot628 25 күн бұрын

Não tem haver com o vídeo, é mais curiosidade de como vocẽs fazem no dia a dia de vocês. Voces usam camelCase ou kebab-case para criar seus componentes? Eu uso camelCase para componente, mas notei com que shadcn-ui usa kebab-case (Assim como o Diego no vídeo, nav-link)

@EzekiGamer 25 күн бұрын

No nome do arquivo kebab-case, o export PascalCase

@toribot628 25 күн бұрын

@@EzekiGamer é o nome do arquivo mesmo, eu normalmente crio uma pasta com nome em PascalCase (falei camelCase, errei) e jogo lá o index.tsx (Componente), o index.scss (estilos), o teste com o nome do componente, exemplo: Componente.test.tsx. Queria saber como as pessoas fazem em outros projetos.