© zffoto/Shutterstock.com
Kolumne: SharePoint ganz praktisch

SharePoint Server 2019: eine App mit React (Teil 1)


Nachdem in der letzten Ausgabe der Kolumne die neue SharePoint-2019-Entwicklungsumgebung final eingerichtet wurde, geht es heute wieder um die Entwicklung eines SharePoint-Features. Genau genommen um die Implementierung eines clientseitigen Webparts mit dem SharePoint Framework, kurz SPFx.

Das neue clientseitige Framework für SharePoint-Lösungen wurde bereits in früheren Ausgaben der Kolumne thematisiert. Der Schwerpunkt lag dabei auf der Einrichtung der Entwicklungsumgebung, der Verwendung der Office-UI-Steuerelemente und dem Zugriff auf SharePoint-Daten. In dieser Ausgabe soll der Schwerpunkt auf React gelegt werden. Für viele SharePoint-Entwickler stellt sich hier zunächst die Frage, was genau überhaupt React ist und wie es – ohne SharePoint in Betracht zu ziehen – funktioniert. Daher erfolgt zu Beginn eine kurze Einführung in React. Im weiteren Verlauf wird dann mit der Realisierung eines SPFx-basierten WebParts begonnen. Das zu erstellende WebPart soll die Inhalte einer SharePoint-Bildergalerie als Slideshow darstellen. Zunächst aber widmen wir uns der React-Bibliothek. React ist eine der zahlreichen JavaScript-Bibliotheken zur Erstellung moderner Webanwendungen. Sie wurde bereits im Jahr 2011 durch Facebook initiiert und zunächst nur intern verwendet. Im Jahr 2013 erfolgte dann die Veröffentlichung als Open-Source-Projekt. Betrachtet man dazu auf GitHub die bis heute positiven Feedbackangaben und Anzahl der Sternebewertungen, ist es zudem äußerst beliebt und weit verbreitet. Daher kommt sofort die Frage auf, was React von den anderen sehr oft eingesetzten clientseitigen Lösungen wie Angular und Vue unterscheidet.

React: (k)ein Framework?

Definitionen und Einordnungen von Bibliotheken in bestimmte Kategorien sind nicht immer einfach und eindeutig möglich. React macht es allerdings etwas leichter, indem es sich selbst als JavaScript-Bibliothek beschreibt und sich somit von Angular abgrenzt. Angular sieht sich als vollständiges Framework, das dem Entwickler quasi alles Notwendige für die Entwicklung einer clientseitigen App zur Verfügung stellt. Im Vergleich dazu ist React kein vollständiges App-Framework, sondern bietet Unterstützung für bestimmte Einsatzzwecke. Der Schwerpunkt liegt dabei auf der optimalen Umsetzung einer interaktiven Weboberfläche. Das Wort „interaktiv“ greift hier auch schon eine wichtige Eigenschaft von React auf, da React-Oberflächen darauf ausgelegt sind, direkt auf Statusänderungen – zum Beispiel hervorgerufen durch Datenänderungen – zu reagieren. Somit spiegelt eine Oberfläche, wenn gewünscht, immer den aktuellen Datenstand wider. React teilt dazu eine Oberfläche in einzelne Ansichten (Views) auf. Intern verwendet React hierfür ein virtuelles DOM. Analog zu den meisten anderen gängigen JavaScript-Frameworks findet eine weitere Aufteilung in Komponenten statt. Somit kann eine gesamte Anwendung in einzelne Komponenten gesplittet werden. Anders als bei Angular findet aber keine Trennung von Logik und Vorlage (Template) in separate Dateien statt. React geht hier einen anderen Weg und vereint beides in einer Datei. Das ist zunächst ungewohnt, da die meisten Muster (Pattern) – wie MVC oder auch MVVM – einen anderen Ansatz verfolgen. React kann folglich eher mit der View aus dem MVC-Muster gleichgesetzt werden. Auch bei der HTML-Struktur und ihrem Aufbau verfolgt React einen eigenen Syntaxansatz. Frameworks wie Angular und Knockout erweitern das originale HTML um eigene Auszeichnungen (Attribute) und Kontrollstrukturen. Die eigentliche HTML-Struktur bleibt also in der HTML-Seite erhalten. React hingegen verlagert den Code direkt in die JavaScript-Datei und verwendet dafür das sogenannte JSX-Format, das dem ursprünglichen HTML sehr stark ähnelt. React kann aber nicht nur auf dem Client verwendet, sondern in Verbindung mit Node.js auch für ein serverseitiges Rendering eingesetzt werden.

Verwendung von React

Die nachfolgenden Beispiele verdeutlichen zunächst die Syntax und die Arbeitsweise von React. Hierbei wird noch keine Verbindung zu SharePoint verwendet, da es im Schwerpunkt um die ausschließliche Verwendung von React geht. Das Einführungsbeispiel ist in den Listings 1 und 2 zu sehen. Wichtig ist zunächst – damit React überhaupt verfügbar ist – die Referenzierung der Framework-React-Skripte react.development.js und dom.development.js. Innerhalb des body-Bereichs wird ein div-Tag mit der ID root definiert. Dieses dient der späteren React-Komponente als Einstiegspunkt in das HTML-DOM. Damit ist das HTML-Grundgerüst erstellt. Listing 2 zeigt nun eine kleine erste React-Komponente. Eine eigene React-Komponente wird immer von der React-Klasse React.Component abgeleitet. Die wohl wichtigste Methode, die zu überschreiben ist, ist die render-Methode, die das HTML der Komponente definiert. Wie anhand des Beispiels ersichtlich ist, wird – wie bereits weiter oben erläutert wurde – das HTML direkt in der Komponente hinterlegt. Nachdem die Klasse vollständig definiert wurde, wird die Komponente an das HTML-DOM über die Methode ReactDOM.render angefügt. Hierfür findet das zuvor in der HTML-Seite definierte div-Tag Verwendung. Um die Ausgabe einer Komponente noch zu beeinflussen, können Eigenschaften implementiert werden, die Einfluss auf die Ausgabe nehmen können. Dieses Vorhaben ist auch relativ einfach zu realisie...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang