Composição de Components

Parte do curso de React

Você construiu um card com borda e sombra, e ele ficou bom. Agora você precisa do mesmo card em volta de uma foto, em volta de um formulário de login e em volta de uma lista de comentários. A tentação é copiar o card três vezes, ou dar a ele uma prop para cada coisa que ele possa vir a conter: title, photoUrl, formFields, comments. Os dois caminhos terminam num componente que ninguém quer encostar.

A saída é a composição: construir coisas grandes aninhando coisas pequenas umas dentro das outras, de modo que cada peça permaneça ignorante das demais. Uma moldura de quadro ajuda a fixar a ideia. A moldura tem um trabalho, que é pôr uma borda em volta do que estiver dentro dela, e faz esse trabalho sem saber e sem se importar se está segurando uma fotografia, um diploma ou o desenho de uma criança.