Aberto para Extensão: Imagine que você tem um brinquedo, como um quebra-cabeça. Você pode adicionar peças novas e diferentes para torná-lo mais interessante sem precisar desmontar as peças que já estão encaixadas. Assim, você melhora o brinquedo sem mexer nas partes antigas.

Fechado para Modificação: Agora, pense em um brinquedo como um boneco de montar. Quando você termina de montá-lo, ele fica pronto e funcionando. Você não deveria mexer nele ou tentar trocar as peças, a menos que seja realmente necessário. É como se dissesse: "Ok, está pronto, não vou mexer mais."

No contexto do React, "aberto para extensão" significa que você pode adicionar novas coisas a um componente sem mudar o que já funciona. E "fechado para modificação" significa que, depois que o componente estiver funcionando bem, é melhor não mexer nele, a menos que seja muito necessário. Isso ajuda a evitar problemas e a manter tudo funcionando corretamente.




O código acima não segue esse princípio porque ele faz uma checagem para saber que tipo de coisa deve ser mostrada na tela (em caso de premium e de free). Isso significa que, se quisermos mostrar um novo tipo de coisa, como um brinquedo diferente, teríamos que mexer no código desse componente.Isso não é muito bom! Mas temos uma solução! Vamos consertar isso. Vamos fazer o código de forma que, se quisermos adicionar um novo tipo de coisa para mostrar, não precisaremos mexer no código desse componente. Isso tornará nosso código mais organizado e mais fácil de cuidar.


Nós removemos coisas que não eram importantes no código e fizemos uma maneira para que outro componente possa ser adicionado a este como se fosse uma parte dele. É como adicionar mais peças a um quebra-cabeça para torná-lo maior e mais completo.




Assim, seu componente EBook poderá ser melhorado com coisas novas, mas não precisará ser mexido depois de pronto. É como um brinquedo que você pode tornar mais divertido sem desmontá-lo depois. 👏