React - komponenty (cz.2)

Wstęp

Witryny oraz serwisy web są budowane niezmiennie z kodu HTML do przechowywania treści, styli CSS do formatowania wyglądu oraz języka JavaScript wprowadzającego interakcję. Podział na te trzy części składowe witryny był realizowany tak logicznie, jak i fizycznie - istniały pliki dedykowane dla HTML, CSS i JS co jest nazywane Architekturą trójwarstwową. Dzięki czemu struktura danych była niezależna od jej wyglądu, a wygląd i dane niezależne od logiki aplikacji.

Jednak wraz z rozwojem web-aplikacji, które były coraz bardziej interkatywne upodabniając się do aplikacji natywnych język JavaScript stał się tym, który kontroluje strukturę HTML oraz wyglad w CSS. Framework React wprowadził pojęcie Komponentu oraz użycie kilku wzorców projektowych. W tym podejściu komponent łączy ze sobą strukturę, wygląd i logikę porzucając m.in. podejście kodu języka programowania i ciągów tekstowych (konkatenacja, czudzysłowy i apostrofy) oferując prostą składnię dla komponentów gotowych do ponownego użycia - czyli język JSX.

Wymagania języka JSX:

• Znacznik HTML musi być zamknięty, czyli znacznik <IMG> musi koniecznie zostać zapisany jako <IMG />

• Z powodu ograniczeń języka JavaScript do którego konwertowany jest JSX, należy używać notacji camelCase dla atrybutów jezyka HTML i SVG, więc atrybut margin-left zapisujemy jako marginLeft, natomiast class zapisujemy jako className (tu powodem jest zarezerwowane słowo dla Klasy w JS). W przypadku konieczności zamiany istniejącego kodu HTML na JSX można uzyć tego konwertera.

Komponenty (funkcje) mogą zwracać kod HTML na dwa sposoby:

1. Jako jeden element BEZ tworzenia Węzła HTML* w wynikowym dokumencie:

   <>kod HTML złożony z wielu znaczników</>

2. Jako nowy Węzeł HTML w wynikowym dokumencie:

   <DIV>kod HTML złożony z wielu znaczników umieszczony w węźle DIV</DIV>

*Kiedy zwracany jest jeden element - można go poprstu zwrócić. Jednak kiedy potrzeba zwrócić więcej niż jeden element - należy użyć znacznika grupującego jak w punkcie 1.

Jeżeli JSX zrezygnował z konkatenacji języka programowania i ciągów tekstowych jak w takim razie zapisać użycie zmiennej w kodzie HTML?

1. Zamiast dotychcasowego zapisu w wielu językach:

   const node.innerHTML = '<FIGURE>'+
   '<IMG src="'+adresObrazka+'" alt="'+opisAltObrazka+'" />'+podpisObrazka+
   '</FIGURE>';

2. Wystarczy następująca notacja z użyciem nawiasów klamrowych {} z pominięciem znaków cudzysłowa " dla atrybutów:

   <FIGURE className={cssClass}>
     <IMG src={adresObrazka} alt={opisAltObrazka} />{podpisObrazka}
   </FIGURE>

3. Używanie obiektu JS(ON) wymaga podwójnych nawiasów klamrowych {{}}:

   <P style={{
         backgroundColor: 'yellow',
         color: 'blue'
       }}>Tekst<P>

4. Przykład użycia zadeklarowanych zmiennych, w tym obiektu JS:

   export default function Komponent(){
     const cssClass = "logoLandingPage";
     const adresObrazka = "../public/obrazek.png";
     const opisObrazka = {
       alt: "Tekst alterantywny",
       podpis: "Podspis pod obrazkiem"
     };
     return (
       <FIGURE className={cssClass}>
         <IMG src={adresObrazka} alt={opisObrazka.alt} />{opisObrazka.podpis}
       </FIGURE>
     );
   }

Komponenty jak klasy posiadają swoje właściwości lub jak funkcje mogą posiadać argumenty - wystraczy je przekazać, lub zadeklarować z opcjonalną domyslną wartością:

<P style={{
      backgroundColor: 'yellow',
      color: 'blue'
    }}>Tekst<P>

Przykład użycia zadeklarowanych zmiennych, w tym obiektu JS:

import { formatRGB } from './narzedziaObrazow.js';
function Komponent({color, imageId, opisObrazka, adresObrazka="brak.png"}){
  return (
    <FIGURE className={cssClass} style={formatRGB(color)} dataImageid={imageId}>
      <IMG src={adresObrazka} alt={opisObrazka.alt} />{opisObrazka.podpis}
    </FIGURE>
  );
}
export default Komponent;

Przygotuj komponent LandingPage w strukturze projektu:

node_modules
public
src
├── App.css
├── App.js
├── App.test.js
├── components
│   └── LandingPage
│       ├── LandingPage.js
│       └── LandingPage.styled.js
├── index.css
├── index.js
├── logo.svg
├── reportWebVitals.js
└── setupTests.js

Komponent ma za zadanie:

1. Używać zmiennych JS oraz Properties z zewnętrznego pliku

2. Wyświetlać obraz z tekstem ALT na podstawie zmiennych

3. Używać styli CSS do określenia wyglądu komponentu