Vi övar genom att skapa en kortkomponent bestående av tre komponenter. Målet är att använda olika komponenter och applicera stilar för att göra den visuellt tilltalande. Vi går igenom stegen för att uppnå detta.

Innan vi börjar undersöker vi funktionen hos den speciella propen children, som gör det möjligt att skicka komponenter, element eller text som barn. Så här fungerar det:

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

Container-komponenten inkluderar en children-prop, som kommer att innehålla Notification- och Message-komponenterna. Allt innehåll som placeras mellan öppnings- och sluttaggarna för Container-komponenten behandlas som dess barn.

Container-komponenten har följande kod:

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

Notera

Enkla props definieras och nås uttryckligen med sina specifika namn i en komponent. children-propen gör det däremot möjligt att skicka komponenter, element eller text som barn till en komponent utan att uttryckligen definiera ett prop-namn. Den representerar innehållet mellan öppnings- och sluttaggarna för komponenten.

Vi kan börja.

Steg 1

Vi skapar alla nödvändiga komponenter: Container, UserImage och UserInfo. Bygg hela appen genom att inkludera dessa komponenter i App-komponenten.

Exempel:

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

Steg 2

Säkerställ att alla nödvändiga klassnamn läggs till på elementen med attributet 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>
);

Steg 3

Importera CSS-filen i filen som innehåller alla komponenter. Detta görs högst upp i filen.

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

Steg 4

Slutligen har vi friheten att tillämpa vilka stilar vi vill enligt våra preferenser.

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

Fullständig appkod: