Žingsnis 05

Šiame žingsnyje dėmesį skirsime programėlės layout, komponentų kompozicijai.

05.01 PageBox

Kataloge src/layout sukurkime naują komponentą PageBox.js.

failas: src/layout/PageBox.js

import React from 'react';

export default function PageBox({ children }) {
  return (
    <div className="page-box">
      <div className="page-box__container">
        <div className="page-box-content">{children}</div>
      </div>
    </div>
  );
}

Pridėkime stilius komponentui - tame pačiame src/layout kataloge sukurkime PageBox.css

failas: src/layout/PageBox.css

.page-box {
  height: 100%;
  padding: 1em;
  box-sizing: border-box;
}

.page-box__container {
  height: 100%;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
    0 1px 3px 0 rgba(0, 0, 0, 0.12);
  overflow: scroll;
}

Stiliaus failą importuokime į PageBox.js.

failas: src/layout/PageBox.js

import './PageBox.css';

Dabar panaudokime PageBox komponentą viduje App.

import PageBox from './layout/PageBox';

Tai, kas daroma dabar, vadinama komponentų kompozicija.

Į PageBox komponento vidų įdėkime tariamą komponentą - tiesiog paprastą tekstą "PageBox demo turinys".

failas: src/App.js

function App() {
  // ...
  return (
    <div>
      <FeedbackList feedbackList={feedbackList}/>
      <VideoStream
        videoUrl={`https://www.youtube.com/embed/${eventId}?controls=0`}
      />
+     <PageBox>PageBox demo turinys</PageBox>
    </div>
  );
}

Galime matyti, kad tekstas vaizduojamas komponento viduje.

05.02 PageBox naudojimas layout

App komponento vaizdavimo dalyje pridėkime keletą PageBox komponentų ir į juos perkelkime kitus komponentus.

failas: src/App.js

function App() {
  // ...
  return (
    <div>
+     <PageBox>
        <FeedbackList feedbackList={feedbackList}/>
+     </PageBox>
+     <PageBox>
        <VideoStream
          videoUrl={`https://www.youtube.com/embed/${eventId}?controls=0`}
        />
+     </PageBox>
      <PageBox>Renginio rezultatai</PageBox>
    </div>
  );
}

Svarbūs momentai

• React props children
• Composition vs Inheritance

---

SEKANTIS ŽINGSNIS →