© zffoto/Shutterstock.com
Cloud Compendium
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.

Marc André Zhou


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?Verwendung von ReactListing 1: HTML einer einfachen React-Anwendung

JS Bin
JS Bin
class Welcome extends React.Component { render() { return (

Hello React!

) }}ReactDOM.render(, document.querySelector("#root"))class Welcome extends React.Component { render() { return (

{this.props.name}

) }}ReactDOM.render(, document.querySelector("#root"))Listing 4: Periodische Ausgabe der Uhrzeit mit Reactclass Welcome extends React.Component { constructor() { super(); this.state = {Cu...
Cloud Compendium
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.

Marc André Zhou


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?Verwendung von ReactListing 1: HTML einer einfachen React-Anwendung

JS Bin
JS Bin
class Welcome extends React.Component { render() { return (

Hello React!

) }}ReactDOM.render(, document.querySelector("#root"))class Welcome extends React.Component { render() { return (

{this.props.name}

) }}ReactDOM.render(, document.querySelector("#root"))Listing 4: Periodische Ausgabe der Uhrzeit mit Reactclass Welcome extends React.Component { constructor() { super(); this.state = {Cu...

Neugierig geworden?


   
Loading...

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