Harjoitellaan luomalla korttikomponentti, joka koostuu kolmesta komponentista. Tavoitteena on hyödyntää eri komponentteja ja soveltaa tyylejä, jotta lopputulos olisi visuaalisesti houkutteleva. Etenemme vaiheittain tämän saavuttamiseksi.

Ennen kuin aloitamme, tutustutaan erityiseen prop-ominaisuuteen nimeltä children, jonka avulla voimme välittää komponentteja, elementtejä tai tekstiä lapsielementteinä. Näin se toimii:

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

Container-komponentilla on children-prop, joka sisältää Notification- ja Message-komponentit. Kaikki sisältö, joka sijoitetaan Container-komponentin avaus- ja sulkutägin väliin, käsitellään sen lapsina.

Container-komponentin koodi on seuraava:

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

Huomio

Yksinkertaiset propit määritellään ja käytetään komponentissa niiden nimillä. Sen sijaan children-propin avulla voidaan välittää komponentteja, elementtejä tai tekstiä komponentin lapsiksi ilman, että propin nimeä tarvitsee määritellä erikseen. Se edustaa komponentin avaus- ja sulkutägin väliin sijoitettua sisältöä.

Voimme aloittaa.

Vaihe 1

Luomme kaikki tarvittavat komponentit: Container, UserImage ja UserInfo. Rakennetaan koko sovellus sisällyttämällä nämä komponentit App-komponenttiin.

Esimerkki:

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

Vaihe 2

Varmista, että kaikki tarvittavat luokkanimet on lisätty elementteihin käyttämällä className-attribuuttia.

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

Vaihe 3

Tuodaan CSS-tiedosto siihen tiedostoon, joka sisältää kaikki komponentit. Tämä tehdään tiedoston alussa.

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

Vaihe 4

Lopuksi meillä on vapaus käyttää haluamiamme tyylejä.

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

Sovelluksen koko koodi: