Pratiquons en créant un composant carte composé de trois composants. L'objectif est d'utiliser différents composants et d'appliquer des styles pour le rendre visuellement attrayant. Nous procéderons étape par étape pour y parvenir.

Avant de commencer, explorons la fonctionnalité de la propriété spéciale appelée children, qui permet de transmettre des composants, des éléments ou du texte en tant qu'éléments enfants. Voici comment cela fonctionne :

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

Le composant Container inclut une propriété children, qui contiendra les composants Notification et Message. Tout contenu placé entre les balises ouvrante et fermante du composant Container sera traité comme ses enfants.

Le composant Container possède le code suivant :

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

Remarque

Les propriétés simples sont explicitement définies et accessibles en utilisant leurs noms spécifiques au sein d'un composant. En revanche, la propriété children permet de transmettre des composants, des éléments ou du texte en tant qu'enfants à un composant sans définir explicitement un nom de propriété. Elle représente le contenu situé entre les balises ouvrante et fermante du composant.

Nous pouvons commencer.

Étape 1

Nous créons tous les composants nécessaires : Container, UserImage et UserInfo. Construisons l'application complète en intégrant ces composants dans le composant App.

Exemple :

// `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>
);

Étape 2

Vérifier que tous les noms de classes essentiels sont ajoutés aux éléments à l'aide de l'attribut 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>
);

Étape 3

Importer le fichier CSS dans le fichier qui contient tous les composants. Cette opération se fait en haut du fichier.

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

Étape 4

Enfin, nous avons la liberté d’appliquer les styles selon nos préférences.

/* 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;
}

Code complet de l’application :