O problema do ReactNode no ReactJS + Typescript

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

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

50% 1

ReactJS com Typescript é uma combinação poderosa para o desenvolvimento web.
O ReactJS oferece uma estrutura flexível e eficiente para criar interfaces de usuário dinâmicas e responsivas, enquanto o Typescript adiciona um sistema de tipagem estática que traz benefícios significativos em termos de manutenção, escalabilidade e detecção de erros durante o desenvolvimento.
Porém, existem várias dúvidas em relação à uma das principais props do ReactJS e como tipar corretamente com TS. Claro que estou falando da prop children!
---
✅ Curso de Next.js 13:
hotm.art/lA0ujDcw
📷 Segue lá no Instagram:
/ devjunioralves
💭 Participe da nossa comunidade no Discord:
/ discord
🧑‍💻 Repositório do canal:
github.com/jju...
𝗢𝗦 𝗠𝗘𝗟𝗛𝗢𝗥𝗘𝗦 𝗩𝗜𝗗𝗘𝗢𝗦 𝗗𝗢 𝗖𝗔𝗡𝗔𝗟:
7 CONCEITOS DO TYPESCRIPT QUE VOCÊ DEVE SABE
• 7 CONCEITOS DO TYPESCR...
Signals no React.js?!
• Signals no React.js?!
QUAL A MELHOR ESTRUTURA DE PASTAS PARA PROJETOS REACT/NEXT.JS
• QUAL A MELHOR ESTRUTUR...
COMO APLICAR SOLID NO REACT - Inversão de dependência DIP
• COMO APLICAR SOLID NO ...
[ROADMAP] O QUE VOCÊ DEVERIA ESTUDAR EM 2O23? Fique de olho nessas tecnologias
• [ROADMAP] O QUE VOCÊ D...
TUTORIAL NEXT.JS 13: FETCHING DATA - PARTE 3/3
• TUTORIAL NEXT.JS 13: F...
A FORMA CORRETA DE CRIAR ROTAS PRIVADAS NO NEXT.JS 13 - Nova pasta pasta app!
• A FORMA CORRETA DE CRI...
QUANDO NÃO UTILIZAR ESTADOS NO REACT?
• QUANDO NÃO UTILIZAR ES...
MELHORE A USABILIDADE DE SUAS APLICAÇÕES COM ISSO
• MELHORE A USABILIDADE ...
TUTORIAL NEXT.JS 13: VALE A PENA MIGRAR? PARTE 1/3
• TUTORIAL NEXT.JS 13: V...
A FORMA CORRETA DE CRIAR ROTAS PRIVADAS NO NEXT.JS 13 - Nova pasta pasta app!
• A FORMA CORRETA DE CRI...
---
Livros que me ajudaram:
Código Limpo
amzn.to/3hHXVKY
Arquitetura Limpa
amzn.to/3Viqw7v
Como ser um programador melhor
amzn.to/3POQ5fq
Estruturas de dados e algoritmos com JavaScript
amzn.to/3hM0L1u
Entendendo Algoritmos: Um guia ilustrado para programadores e outros curiosos
amzn.to/3BWsaEO
14 hábitos de desenvolvedores altamente produtivos
amzn.to/3uZqsyy
Hábitos Atômicos
amzn.to/3FGllIM
Aprendendo a Aprender
amzn.to/3WxM0hG
Rápido e devagar
amzn.to/3PLrYhq
A vida dos Estoicos
amzn.to/3vaQIGl
Meditações de Marco Aurélio
amzn.to/3joFYS1
*Links afiliados.
---
👋 Você pode me encontrar aqui:
🧑‍💻 Blog: www.devjuniorp...
💼 LinkedIn: / junior-alves-b66a10127
💻 GitHub: github.com/jju...
📷 Instagram: / devjunioralves
👨‍💻 Sobre mim
Eu sou Junior, Senior Frontend Engineer! Tenho mais de 4 anos de experiência.
Aqui, compartilho conteúdo sobre React.js, Next.js, TypeScript, JavaScript, testes, livros, SOLID e tudo mais relacionado à desenvolvimento de software.
✉️ Email comercial
devjuniorplus@gmail.com
📌 Utilidades
Editor: VS Code
Tema: Illusion
Music provided by NoCopyrightSounds.
#reactjs #typescript #nextjs

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

28 сен 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@devjunioralves 6 месяцев назад

👉 Seleção de livros pra você: Estruturas de dados e algoritmos com JavaScript amzn.to/49FOzFd Lógica de Programação e Algoritmos com JavaScript: amzn.to/48Cj65Z JavaScript: O Guia Definitivo: amzn.to/48jh9vp Como ser um programador melhor amzn.to/48WYGVj Arquitetura Limpa (Clean Arch) amzn.to/3Viqw7v Clean Code amzn.to/3hHXVKY --- ✅ Segue lá no Instagram: instagram.com/devjunioralves/ ✅ Nossa comunidade no Discord: discord.com/invite/bVxW4Dhgrf

@durighettoful 6 месяцев назад

Muito bom o vídeo. Só ainda não ficou muito esclarecido a diferença entre JSX e ReactElement. Foi mencionado que o ReactElement é mais específico, mas com os exemplos do vídeo deu a entender que funcionava com os dois tipos, faltou algum exemplo em que o JSX não atenderia tão bem quanto o ReactElement para ficar um pouco mais claro

@cristiankeibersbardelotto 6 месяцев назад

O melhor é as variáveis do React: Do_NOT_USE_OR_YOU_WILL_BE_FIRED kkkkkkkkkkkkkkkkk Ótimo vídeo!

@richardlima9535 6 месяцев назад

kkkkk

@pauloricardomaltaleal3558 6 месяцев назад

coringuei

@brunof7600 6 месяцев назад

😂

@pedrobenicio4955 6 месяцев назад

confesso que nunca tive problemas com ReactNode nos projetos. Sempre usei ele pra tudo e 0 problemas... Tomando cuidado em como voce vai utilizar os components em um nível mais acima, acho que não tem problema utilizar o ReactNode. Já sabia dos outros tipos, mas nunca cheguei a me interessar em utilizá-los pois não precisava. Mas mesmo assim, ótimo vídeo!

@melkdesousa9302 6 месяцев назад

Um cenário que já precisei do ReactElement e/ou JSX.Element foi em momento que precisava da declaração JSX/XML, exemplo: , onde a prop Icon esperava receber um JSX.Element, para que dentro do Button fosse declarado como . É útil nesses cenários que aplica o Composition Pattern.

@MultiDante23 6 месяцев назад

Fiquei muito feliz assistindo esse vídeo, mesmo não trabalhando todo dia com o typeScript, eu já sabia o que fazer para contornar o problema (que esse sim eu não sabia nada) parabéns pelo vídeo que traz um detalhe do "porque cada um" e como usar

@GleristonCastro 6 месяцев назад

Ganhou mais um inscrito! Que venham mais vídeo assim... Vou pensar em sugestões e vou mandar também!

@devjunioralves 6 месяцев назад

Valeu demais e seja muito bem vindo Gleriston! 👊

@markus_dev_cwb 6 месяцев назад

Conteúdo fantástico! Por mais tópicos assim.

@devjunioralves 6 месяцев назад

Valeu man!!!

@carlosamorim94 6 месяцев назад

Excelente vídeo! Fundamental pra quem usa composition pattern, e tbm icones aleatórios em custom button kkkk

@aylonaraujo9233 6 месяцев назад

Muito bom!

@nanduhTM3 6 месяцев назад

Seu canal e muito bom ta de parabens!

@devjunioralves 6 месяцев назад

Valeuuu demais! 👊

@br-lemes 6 месяцев назад

Sempre que uso children eu espero que ele possa ser null. Por isso sempre usei o ReactNode mesmo.

@devjunioralves 6 месяцев назад

Nesse caso, uma opção seria children: ReactElement | null. Pois como mostrei no vídeo, o ReactNode aceita string, undefined, boolean e tudo mais.

@cristianoseixas2417 6 месяцев назад

Fala Jr, beleza, cara perguntas dificeis: tem como de alguma forma dizer que meu componente recebe apenas 1 filho, eu sei que uma possível alternativa seria passar como prop mas existe outra? A outra pergunta é, vamos supor que eu tenha um componente que recebe uma lista de qualquer coisa, para mostrar em uma tabela, nesse caso eu uso T ou uso any? Obrigado

@marcusmaiialima 6 месяцев назад

Com o ReactNode, JSX e ReactElement, eles só podem ter 1 filho, só que dentro desse filho podem ter N filhos. Caso queira passar o children com N filhos diretamente, só usar o [ ] no final dos types que funciona numa boa, tipo ReactNode[], ReactElement[] e por ai vai. Espero ter ajudado mano ✌🏼

@devjunioralves 6 месяцев назад

Como o Marcus comentou, o ReactNode, JSX.Element, ReactElement são para apenas 1 unico children, porém, se tu passar, por exemplo, um fragment, tu pode passar N children dentro dele. A ideia é nunca (ou evitar o máximo possível) o uso no any. Se tu não sabe o tipo e/ou pode variar, utilize os genéricos.

@Anbor_ 6 месяцев назад

Eu utilizo o PropsWithChildren

@brunodeoliveira7245 6 месяцев назад

quando preciso, eu sempre importo o ReactNode (import { ReactNode } from 'react') e não utilizo React.ReactNode. Tem alguma diferença entre esses dois modos?

@kelsondouglas23 6 месяцев назад

Não, é como se você fizesse `` import React from 'react' `` e depois utiliza-se como React.ReactNode.

@devjunioralves 6 месяцев назад

Exatamente! Nas ultimas versões, você não precisa explicitamente importar o React from 'react'. Daí, você pode fazer dessa forma React.ReactNode, React.useState e etc.

@bbarreto18 6 месяцев назад

@@devjunioralves fica até menos poluido os imports

@caiqueroliveira 6 месяцев назад

O que é aquilo DO_NOT_USE_OR_YOU_WILL_BE_FIRED dentro da definição do ReactNode? Kkkkk

@devjunioralves 6 месяцев назад

Rapaz, boa pergunta viu kkkkkkk Vou ver se descubro e trago aqui no canal

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

Matou minha curiosidade nesse assunto, agora parar com o vício de usar o ReactNode kkkk

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

Pois é kkkkk A gente cria hábito.

@NoSb0r100 6 месяцев назад

Excelente! Legal seria falar também da tipagem em extensões do ts. Exemplo: interface ButtonLinkProps extends ButtonHTMLAttributes

@victorfigueiredo6031 6 месяцев назад

Papo reto, eu amo esse canal, inclusive recomendo maratonar os vídeos, só conteúdo top

@devjunioralves 6 месяцев назад

Valeu demais man! 👊🚀

@RaulPeSilva 6 месяцев назад

Salve! Gostaria de um caso de uso onde isso seria util. aproveitei para uma olhada em umas libs conhecidas, como React Query, React Router Dom e React hooks form e todas elas usam ReactNode para os children e ReactElement apenas para tipar as Returno de elementos. O que faz sentido para mim, pois mesmo usando TS a validação das props precisa ser feito por código e não por tipo. ;D

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

Muito interessante os vídeos, traz algumas curiosidades que eu percebo enquanto programo, mas acabo não dando tanta bola.

@joaocuriosidades2331 6 месяцев назад

qual sintaxe é melhor cria funções utilizando const ou utizando function, afeta em algo, ou só é um questão de gosto?

@devjunioralves 6 месяцев назад

É mais questão de gosto, Joao. Só um ponto que acho interessante é seguir um padrão.

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

Prefiro com function, fica mais claro que aquele código é uma função

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

@@devjunioralves valeu

@skeks1081 6 месяцев назад

Esqueceu de um: any

@devjunioralves 6 месяцев назад

Kkkkkkkkkkk aí o TS chora.

@lordth33nd36 6 месяцев назад

cara fim das contas mapea o retorno não as entradas kkkkkk

@MarcosPaulo-zj7mh 6 месяцев назад

Melhor canal do mundo pra dev front

@hectorkayque9586 6 месяцев назад

Uma dica que já resolveria isso é esse tipo do próprio React que já cria a prop children para seu componente, ex: const Button({children, ...props}:React.PropsWithChildren) => {...}

@devjunioralves 6 месяцев назад

Sim poderia, porém, eu particularmente não faço assim, prefiro deixar de forma mais explícita possível.