Mettiamoci alla prova creando un componente card composto da tre componenti. L'obiettivo è utilizzare diversi componenti e applicare stili per renderlo visivamente gradevole. Procederemo passo dopo passo per raggiungere questo risultato.

Prima di iniziare, analizziamo la funzionalità della prop speciale chiamata children, che consente di passare componenti, elementi o testo come elementi figli. Ecco come funziona:

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

Il componente Container include una prop children, che conterrà i componenti Notification e Message. Qualsiasi contenuto inserito tra il tag di apertura e quello di chiusura del componente Container verrà trattato come suo figlio.

Il componente Container ha il seguente codice:

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

Nota

Le prop semplici sono definite esplicitamente e vengono accedute utilizzando i loro nomi specifici all'interno di un componente. Al contrario, la prop children permette di passare componenti, elementi o testo come figli di un componente senza definire esplicitamente un nome di prop. Rappresenta il contenuto tra il tag di apertura e quello di chiusura del componente.

Possiamo iniziare.

Passaggio 1

Creiamo tutti i componenti necessari: Container, UserImage e UserInfo. Costruiamo l'intera app incorporando questi componenti all'interno del componente App.

Esempio:

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

Passaggio 2

Verificare che tutti i nomi delle classi essenziali siano aggiunti agli elementi utilizzando l'attributo 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>
);

Passaggio 3

Importare il file CSS nel file che contiene tutti i componenti. L'importazione va effettuata all'inizio del file.

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

Passaggio 4

Infine, abbiamo la libertà di applicare qualsiasi stile secondo le nostre preferenze.

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

Codice completo dell'app: