React Props und States

Ein Scrivito Widget für eine optisch ansprechende, interaktive Navigations-Bildleiste.

Die Bildleiste, welche oben zu sehen ist, mag auf den ersten Blick wenig spektakulär sein, aber aus Sicht eines React-Entwicklers bietet sie einiges, um sich mit Props und States vertraut zu machen. Und das Ergebnis ist doch auch ein schöner “Eyecatcher“. Gefunden habe ich ihn auf der Startseite von westfalenbad.de. Und den Nachbau mit Scrivito und React fand ich reizvoll.

Wie ist der Aufbau? Wenn die Seite geladen wurde, erscheint das mittlere Bild in einer Breite von 50% und die zwei äußeren Bilder in einer Breite von je 25%. Außerdem wird über dem mittleren Bild ein Titel angezeigt, bei den anderen Bildern ist das nicht der Fall. Alle Bilder werden mit voller Deckkraft dargestellt. Das habe ich geändert. Nur das prominente Bild in der Mitte verfügt über die volle Deckkraft.

Der grundsätzliche Aufbau lässt sich mit dem CSS Flexbox-Modell recht einfach abbilden. Im Original wurde mit Prozentangaben für die Breite gearbeitet. Mit Flexbox ist das allerdings wesentlich einfacher umzusetzen. Dadurch werden die drei Sektionen nebeneinander mit einer Breite von 33% und halber Deckkraft dargestellt.

Mit hover wird die Breite und die Deckkraft eines Bildes, bei Mouse over, verändert.

Ein wesentlicher Teil der gewünschten Funktionalität lässt sich also mit (S)CSS, ohne ReactJS,  umsetzen.

.special-image-wrapper {
      flex-grow: 1;
      opacity: 0.5;
      position: relative;
      height: 360px;
      &:hover {
        flex-grow: 4 !important;
        opacity: 1 !important;

  }
 transition: all 1s ease-in-out;
}

Alle anderen Zustände lassen sich allerdings nur mit React und CSS umsetzen. Dazu wird ein Scrivito Widget und eine React Child-Komponente benötigt. Das Scrivito Widget besteht aus drei Bildern, drei Headlines und drei Links. Die Child-Komponente wird benötigt, damit eine Komponente seinen jeweiligen Status, isoliert verwalten kann. Das ist ein wesentliches Merkmal von React.

Der folgende Code-Schnippsel zeigt den Aufruf der Child-Komponente im Scrivito-Widget. Drei Props übergeben Daten, die Prop active ist für die initiale, prominente Darstellung des mittleren Bildes zuständig.

<SlideSectionComponent link="scrivito" active="active" imageTitle={midTitle} imageSrc={midImage}  />

Die class active kann dann so im CSS genutzt werden, um das mittlere Bild initial anders darzustellen.

.active {
    flex-grow: 2;
    opacity: 1;
}

Soweit zu den React props. Sie werden eingesetzt um Properties von Komponenten zu Komponenten übergeben zu können. Wann aber kommen die oben erwähnten states zum Einsatz? Und was sind states? States verwalten Zustände einer Komponente und rendern die Komponente neu, wenn der Zustand einer Komponente geändert wird. Dazu gehört auch das Anzeigen oder Ausblenden eines Elements, wie die Headlines, die beim Mouse Over in der hier beschriebenen Komponente, gerendert werden. Ein großer Unterschied zu jQuery, ist es, dass dies nicht über die Veränderung einer class erledigt wird, sondern dass die Headline entweder gerendert wird oder eben nicht.

Der folgende Code-Schnippsel zeigt, wie der state isHovering die Headline verwaltet. In der Komponente, über der sich gerade der Mauszeiger befindet, wird die Headline gerendert. Nur in dieser, in den zwei anderen Komponenten nicht. Kein 'display: none' oder ähnliches ist notwendig.

constructor(props) {
    super(props);
    this.handleMouseHover = this.handleMouseHover.bind(this);
    this.state = {
      isHovering: false,
    };
  }

handleMouseHover() {
    this.setState(this.toggleHoverState);
}

toggleHoverState(state) {

    return {
      isHovering: !state.isHovering,
      };
  }

//Ausschnitt aus der render function
{this.state.isHovering && <h1 className="h2 p-2">{this.props.imageTitle}</h1>}

Scrivito Widget mit React child components.

Dieser Artikel kann natürlich nur einen sehr kleinen Überblick über React-Entwicklung mit props und states geben. Aber viele einfache Anwendungsfälle können so oder ähnlich gelöst werden. Für Entwickler, die mit React beginnen, ist so eine Komponente der ideale Einstieg, um sich mit wichtigen React Konzepten vertraut zu machen.

Und Endanwender können das Scrivito Widget einfach nutzen und editieren.

Fazit

Individuelle Elemente beleben jede Website und sind bei Besuchern sehr beliebt.. Häufig leider aufwendig und teuer und selten einfach zu pflegen. Scrivito und Widgets von mdwp* ändern das.
Sind Sie an individuellen Widgets für Ihr Scrivito-Projekt interessiert?

Dann können Sie mich gerne kontaktieren: per Mail an m.droste@mdwp.de oder telefonisch unter +49 2331 62 85 27 3

Kommentare

Melde dich bitte an, wenn du einen Kommentar schreiben möchtest.
Es wurden noch keine Kommentare erstellt. Sei Erste(r).