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

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

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

Ficou bacana demais essa aula. Pode seguir nesse sentido.

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

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

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

Muito bacana a explicacao

nossa que aula top demais

Sensacional

top

uau 😮

🤘🤘

Senti falta do tsconfig, onde ele ficou neste projeto?

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

Ай бұрын

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

@icaroteles2773

Ай бұрын

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

Ай бұрын

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

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

@MordyDeep

Ай бұрын

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

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

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

@CarlosZiegler1

Ай бұрын

ReactNode

Graças aos deuses devs existe um Next/Link

@luizsiewerdt5291

Ай бұрын

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

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

@rtrampox

Ай бұрын

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

@UmFilipe

Ай бұрын

Esse tema é o Vesper++

@ThiagoOliveira-yk3sx

Ай бұрын

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

@ustav_o

Ай бұрын

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

@ustav_o

Ай бұрын

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

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

@rotivanov

Ай бұрын

Vesper++

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

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

Ай бұрын

{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

Ай бұрын

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

@MordyDeep

Ай бұрын

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

@edsonrcosta

Ай бұрын

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

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

Ай бұрын

No nome do arquivo kebab-case, o export PascalCase

@everson.barbosa

Ай бұрын

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