Vamos praticar criando um componente de cartão composto por três componentes. O objetivo é utilizar diferentes componentes e aplicar estilos para torná-lo visualmente atraente. Seguiremos passo a passo para alcançar esse resultado.

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

const App = () => (
  <Container>
    <Notification />
    <Message />
  </Container>
);

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 possui o seguinte código:

const Container = (props) => (
  <div>{props.children}</div>
);

Nota

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

Podemos começar.

Etapa 1

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

Exemplo:

// `Container` component to hold `UserImage` and `UserInfo`
const Container = (props) => (
  <div>{props.children}</div>
);

// `UserImage` component to display user image
const UserImage = () => (
  <img
    className="image"
    src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/styling/user.png"
    alt="user"
    width={200}
  />
);

// `UserInfo` component to display user information
const UserInfo = (props) => (
  <div>
    <p>
      <span>Name:</span> {props.name}
    </p>
    <p>
      <span>Age:</span> {props.age}
    </p>
    <p>
      <span>Occupation:</span> {props.occupation}
    </p>
  </div>
);

// `App` component that combines `Container`, `UserImage`, and `UserInfo`
const App = () => (
  <Container>
    <UserImage />
    <UserInfo name="Michelle" age="36 years" occupation="Accountant" />
  </Container>
);

Etapa 2

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

// `Container` component to hold `UserImage` and `UserInfo`
const Container = (props) => <div className="container">{props.children}</div>;

// `UserImage` component to display user image
const UserImage = () => (
  <img
    className="image"
    src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/styling/user.png"
    alt="user"
    width={200}
  />
);

// `UserInfo` component to display user information
const UserInfo = (props) => (
  <div className="description">
    <p className="text">
      <span className="label">Name:</span> {props.name}
    </p>
    <p className="text">
      <span className="label">Age:</span> {props.age}
    </p>
    <p className="text">
      <span className="label">Occupation:</span> {props.occupation}
    </p>
  </div>
);

// `App` component that combines `Container`, `UserImage`, and `UserInfo`
const App = () => (
  <Container>
    <UserImage />
    <UserInfo name="Michelle" age="36 years" occupation="Accountant" />
  </Container>
);

Etapa 3

Vamos importar o arquivo CSS no arquivo que contém todos os componentes. Fazemos isso no início do arquivo.

import "./index.css"; // Importing the CSS file

Etapa 4

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

/* Styling for the `Container` component */
.container {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 3px solid #4f5e77;
  border-radius: 10px;
  width: 320px;
  background-color: #ff8a00;
}

/* Styling for the `UserImage` component */
.image {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
}

/* Styling for the `UserInfo` component text */
.text {
  font-size: 22px;
  color: #bbdefb;
}

/* Styling for the `UserInfo` component label */
.label {
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  color: #4f5e77;
}

Código completo do aplicativo: