Vamos praticar criando um componente cartão que consiste em três componentes. Nosso objetivo é utilizar diferentes componentes e aplicar estilos para torná-lo visualmente atraente. Vamos proceder passo a passo para alcançar isso.

Antes de começarmos, vamos explorar a funcionalidade da prop especial chamada children, que nos permite passar componentes, elementos ou texto como elementos filhos. Veja como funciona:

O componente Container inclui uma prop children, que conterá os componentes Notification e Message. Qualquer conteúdo colocado entre as tags de abertura e fechamento do componente Container será tratado como seus filhos.

O componente Container tem o seguinte código:

Nota

As props simples são explicitamente definidas e acessadas usando seus nomes específicos dentro de um componente. Por outro lado, a prop children nos permite passar componentes, elementos ou texto como filhos para um componente sem definir explicitamente um nome para a prop. Ela representa o conteúdo entre as tags de abertura e fechamento do componente.

Podemos começar.

Passo 1

Criamos todos os componentes necessários: Container, UserImage e UserInfo. Vamos construir todo o aplicativo incorporando esses componentes dentro do componente App.

Etapa 2

Certifique-se de que todos os nomes de classes essenciais sejam adicionados aos elementos usando o atributo className.

Passo 3

Vamos importar o arquivo CSS para o arquivo que contém todos os componentes. Fazemos isso no topo do arquivo.

Passo 4

Por último, temos a liberdade de aplicar quaisquer estilos conforme nossas preferências.

Código completo da aplicação: