Create components in this way in React (Composition Pattern)

Muito top cara, Obrigado por compartilhar

mt massa que qnd vejo as aula dele parece tudo mt facil, ai qnd coloco em pratica passo hrs quebrando a cabeca kkkkkkkkkkkkkkkkkkkkkkk


faz parte do processo!

akgyen sabe qual o nome da extensao desses icons (arquivos etc) ?

Onde eu encontro o repo desse projeto?

sou apenas um júnior acabei ficando surpreso pois eu estava fazendo algo semelhante com styledComponent o que é deveras complexo e tudo ficava no style.ts fica styled.wrapper styled.button etc..., separa cada parte em um arquivo diferente facilita bem mais o entendimento, so fico um pouco assustado com a quantidade absurda de arquivos que um projeto real pode chegar a ter mas acho que é so questão de costume

Ao usar esse pattern, performance deveria ser uma preocupação? Quando a gente importa o objeto Notification, vem todo o pacote de componentes relacionados, certo?

Muito interessante!

Cara, baita conteúdo!

Tenho uma dúvida em relação ao next13, to tentando fazer um select personalizado usando composition, eu precisei criar um contexto para compartilhar alguns estados entres esses componentes que compoem o Select. Dentre esses componentes tem um de Icon semelhantes ao do vídeo. O problema é que o Icon precisa ser `use cliente` porém o Next não deixa eu passar o ícone como ElementType. Erro: "Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server"".

Muito interessante essa forma de criar componentes!!!

Cara, acho incrivel. O que eu fico incredulo é como eu vou saber que eu precisaria de outra biblioteca para fazer um tal de merge nas classes, como ele chega a essa conclusão e sabe da existencia de uma biblioteca pra isso? é esse nivel que eu quero chegar.

alguém tem a URL desse projeto no github?

Diego, você é o cara mais foda que eu não conheço!

surreal de bom. esse pattern facilita muito como eu não sabia disso?

Qual o tema, do vscode e dos icones/materials?

Que lindo

Se eu tenho uma lista com 100 resultados, ainda vale a pena usar esse pattern?

Muito bom! Isso vai ajudar muito.

muito bom, vou testar.

Vlw pelos dica no final, eu tava mesmo procurando algo como o Radix

qual gravador de tela usou aqui para ter esse avatar que sinaliza qnd esta falando?

muito bom esse pattern, excelente vídeo Diego

Certeza que vocês estão me vigiando. Eu estava com esse mesmo problema (dos ícones) e resolvi EXATAMENTE como você citou ( antes do ElementType, no caso... kkkkk). Como assim?!?!?! ^^

Conteúdo top demais, criando componentes dessa forma traz mais flexibilidade e facilita a manutenção. Será que vou usar isso pra tudo ? rsss

Conteúdo muuuito bom, Diegão!! Não conhecia esse pattern de composição mas já vou levar pro time que trabalho para aplicarmos isso nos nossos projetos.

Funciona no React Native?

Muito bom, esse pattern salva vidas !!!

eu queria mto ver os videos mais o jeito q o cara fala coisas como root eu nao consigo
F

Senti um ppuco de falta de um html mais semântico, fira isso otima demonstração do design pattern

To começando a utilizar o Tailwind pra fazer estilizações nos meus apps, qual a melhor forma de indentação pra que não fique com essas linhas enormes e facilite a leitura?

tenho apenas duas palavras pra esse design pattern: DO CARALHO.

Tem algo que me incomoda no composition pattern, que é a possibilidade de colocar os componentes children fora da ordem e grande. Por exemplo, temos o componente RootComponent:


function RootComponent() {
return <p>Root Content</p>;
}

function HeaderComponent() {
return <p>Header Content</p>;
}

function ContentComponent() {
return <p>Main Content</p>;
}

function FooterComponent() {
return <p>Footer Content</p>;
}


<RootComponent>
<HeaderComponent />
<ContentComponent />
<FooterComponent />
<RootComponent/>


Nada impete e me proibe de fazer assim:

<FooterComponent>
<HeaderComponent />
<ContentComponent />
<RootComponent />
<FooterComponent

Pois todos os componentes recebem children e isso é muito genêrico.


Eu prefiro continuar rebendo os componente como props e ter controle onde colocar os componentes.

function RootComponent({ headerComponent, contentComponent, rooterComponent}) {
return (
<>
<p>Root Content</p>
{ headerComponent }
{ contentComponent }
{ rooterComponent }
</>
);
}

Detalhe, esse código está apenas como exemplo, no código em produção teríamos react.memo e outras boas práticas.

O que você acha sobre isso, faz sentido?

nao goustei, asmei

Alguem tem alguma sugestao de artigo que ajudasse a ver como aplicar essas dicas do video, pra criar formularios? Pq um formulario que cada form tem seus campos de validacao específicos, teria alguma forma de nao precisar ficar replicando eles, por exemplo pra não precisar criar um formLogin, um formRegister e por ai vai. Ou não tem jeito de evitar.

Sensacional Diego 🚀

Pattern muito bom, eu apenas não gosto da verbosidade do .Root e costumo deixar só o nome do Elemento pai.

Que conteúdo delicioso de ser consumido!

Era exatamente o que eu procurava a muito tempo! Me surgiu uma dúvida, caso eu queira fazer o componente semelhante a estrutura do React Bootstrap, como seria? Por exemplo: <Card><Card.Body></Card.Body></Card>, sem que eu precise criar um Card.Root.

Melhor vídeo

niceeeeeeeeeeeeeeeeeeee

Alguém sabe qual é essa extensão para quando salvar o arquivo, importar as coisas já?

ta me dando nervoso essa bola roxa pingando na tela

Ééé, Tailwind é horroroso msm

Gosto muito de usar o design atoms por conta disso também Diegao

Uma dica boa:
Pra evitar ter que exportar sempre um componente "Root", você pode usar o próprio componente inicial como Root, assim:
function Navbar(props) {
// Navbar implementation
}

function Section(props) {
// Section implementation
}

Navbar.Section = Section;


export default Navbar;

Dessa forma, o componente <Navbar /> vai poder ser renderizado corretamente, e você ainda pode acessar os elementos dentro dele (no JS, tudo é objeto, até funções kkkk).

I don't know... Isso faz todo sentido para mim, mas components demais atrapalham na manutenção de um app grande... E acho que não é nem isso. Com o tempo vai ficar difícil definir o escopo certo de cada component e reutilizá-los corretamente. Isso definitivamente é muito bom, mas precisa de muita experiência para implementar e principalmente sem deadline. Uma boa documentação pode ajudar.

Top em

Legal pra caramba, eu ainda não tinha visto esse tipo de abordagem em componetização, vou começar a utilizar, estava fazendo tudo via props😂

Teu teclado tão barulhento que me desconcentrou 😂
Edit: terminei o vídeo agr. 😅 muito poderoso esse pattern. Já tinha visto e usado antes mas tu executou muito bem no vídeo, muito legal ver o resultado!