Mobile-Menu

JavaScript-Bibliothek für webbasierte Benutzeroberflächen Performante GUIs mit React erstellen

Von Thomas Joos 4 min Lesedauer

Anbieter zum Thema

Rittal GmbH & Co. KG
DAXTEN GmbH

React wurde ursprünglich vor allem bei Facebook und Instagram für den Betrieb des Newsfeeds verwendet. Die JavaScript-Bibliothek nutzt Virtual DOM, um schnell ändernde Inhalte schneller und ohne Performancebelastung darstellen zu können.

Erste Schritte mit React.(Bild: Joos / React)
Erste Schritte mit React.
(Bild: Joos / React)

React ist eine JavaScript-Bibliothek, die vornehmlich dazu dient, webbasierte, interaktive Benutzeroberflächen zu programmieren, in denen auch dynamische Änderungen des Inhalts performant dargestellt werden können. Die Open Source-Bibliothek wurde ursprünglich vor allem von Facebook und Instagramm eingesetzt.

Im Fokus von React stehen daher vor allem komplexere Oberflächen, deren Inhalt sich häufig ändert. Aber auch einfache HTML-Seiten profitieren von den Möglichkeiten die React bietet, da auch hier sehr leicht interaktive Komponenten eingebaut werden können.

Um React zu nutzen, muss nicht die komplette Webseite auf Java aufbauen. React lässt sich sehr leicht in HTML-Seiten einbetten. Dynamische Widgets auf Webseiten nutzen in diesem Fall React, während andere Inhalte auf andere Bibliotheken oder sogar Programmiersprachen setzen. Auf der Webseite des Projektes sind Beispiele zu finden, mit denen sich React-Code unproblematisch in HMTL-Seiten integrieren lässt.

React arbeitet deklarativ und mit verschiedenen Komponenten

Durch das Verwenden von deklarativen Vorgehensweisen können Entwickler mit React festlegen, was in einer Ansicht der Benutzeroberfläche erscheinen soll. Wenn Aktualisierungen notwendig sind, erledigt React das automatisch und lädt genau die Komponenten nach, die erneuert werden müssen, alle anderen bleiben unverändert.

React eignet sich dadurch ideal für Umgebungen, in denen ständig verschiedene Inhalte aktualisiert werden, es aber nicht ideal ist, gleich die gesamte Oberfläche neu aufzubauen. Das kostet unnötige Ressourcen und Leistung. Gleichzeitig hilft die deklarative Vorgehensweise dabei, den Code leichter zu verstehen und Fehler auch schneller zu finden und zu beheben.

Zusätzlich setzt React auf Komponenten. Das ermöglicht die Programmierung verschiedener Blöcke, die sich anschließend zu komplexeren Oberflächen zusammenbauen lassen, ähnlich wie der Newsfeed in Facebook oder Instagram. React nutzt dazu die Methode render(). Diese nimmt Daten entgegen und gibt anschließend die notwendige Ausgabe an.

JSX und Babel mit React einsetzen

Mit React kann auch JSX zum Einsatz kommen, um eine XML-ähnliche Syntax mit React zu nutzen. Bei JSX handelt es sich um eine Syntaxerweiterung von JavaScript, die optimal mit React zusammenarbeitet. Das ist natürlich nur optional. Beispiele für die Verwendung sind auf der Startseite des React-Projekts zu sehen.

Wer umfassend auf React setzt, sollte sich die Möglichkeiten von JSX parallel dazu anschauen. Auf der React-Landingpage „Introducing JSX“ sind Beispiele und ein Einstieg zu finden, wie die Verwendung von JSX die Arbeit mit React vereinfacht. Auf der Seite „JSX In Depth“ sind noch mehr Infos dazu zu finden.

Als Compiler kommt beim Einsatz von React oft Babel zum Einsatz.(Bild: Joos / React)
Als Compiler kommt beim Einsatz von React oft Babel zum Einsatz.
(Bild: Joos / React)

Wenn JSX nicht zum Einsatz kommen soll, spielt das bei der Verwendung von React keine Rolle. Es ist auch möglich, JavaScript direkt zu verwenden und zum Beispiel den Code mit Babel zu kompilieren. Babel gehört zu den beliebtesten Compilern beim Einsatz von React.

Einstieg in React – Online Playgrounds nutzen

Durch die komponentenbasierte Ausrichtung von React fällt der Einstieg in die Bibliothek leicht. Auch bei der späteren Verwendung ist React sehr flexibel. Entwickler können genau steuern, wo auf der Seite oder in der Benutzeroberfläche React zum Einsatz kommen soll. Der Einsatz lässt sich jederzeit dynamisch ausbauen. Einen ersten Einstieg mit React gelingt mit Online-Playgrounds. Hier stehen Beispiele auf CodePen, CodeSandbox und StackBlitz zur Verfügung. Mit den Beispielen gelingt schnell ein Einstieg in React.

Erste Schritte mit React.(Bild: Joos / React)
Erste Schritte mit React.
(Bild: Joos / React)

Auf der Tutorial-Seite „Intro to React“ geben die Entwickler einen Einstieg in die Möglichkeiten. Wer sich mit der Bibliothek in der Praxis auseinandersetzen will, sollte das Tutorial durcharbeiten. Zusammen mit den Playgrounds kann der Code an dieser Stelle jederzeit getestet werden, ohne lokale Installationen durchführen zu müssen.

Elemente und Komponenten mit Reacts

Die wichtigsten Bausteine von React-Apps sind die Elemente. In den Elementen ist beschrieben, was bei den Nutzern auf dem Bildschirm angezeigt werden soll. Das Verständnis der Elemente ist bei der Entwicklung mit React ein wichtiger Grundstein. Normalerweise werden Elemente nicht direkt verwendet, sondern von Komponenten zurückgegeben:

const element = <h1>Hello, world</h1>;

Bei React-Komponenten handelt es sich um kleine Codeblöcke, die ein React-Element zurückgeben, das auf der Seite gerendert wird. Komponenten und Elemente sind in React daher eng miteinander verbunden. Die einfachste Version einer React-Komponente ist eine einfache JavaScript-Funktion, die ein React-Element zurückgibt:

Jetzt Newsletter abonnieren

Täglich die wichtigsten Infos zu RZ- und Server-Technik

Mit Klick auf „Newsletter abonnieren“ erkläre ich mich mit der Verarbeitung und Nutzung meiner Daten gemäß Einwilligungserklärung (bitte aufklappen für Details) einverstanden und akzeptiere die Nutzungsbedingungen. Weitere Informationen finde ich in unserer Datenschutzerklärung. Die Einwilligungserklärung bezieht sich u. a. auf die Zusendung von redaktionellen Newslettern per E-Mail und auf den Datenabgleich zu Marketingzwecken mit ausgewählten Werbepartnern (z. B. LinkedIn, Google, Meta).

Aufklappen für Details zu Ihrer Einwilligung
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Komponenten können auch ES6-Klassen sein:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Dabei handelt es sich um Standards für die ECMAScript Language Specification. Die Version ES6/ES2015 enthält verschiedene Ergänzungen zu den Vorgängerversionen. Dazu gehören Pfeilfunktionen, Klassen, Vorlagenliterale sowie let- und const-Anweisungen. Komponenten lassen sich auch in einzelne Funktionsteile zerlegen und dadurch in anderen Komponenten weiterverwenden.

Das ist eine der Stärken von React. Komponenten können andere Komponenten, Arrays, Strings und Zahlen zurückgeben. Idealerweise sollten Teile der mit React entwickelten Benutzeroberflächen, die mehrmals verwendet werden, als Komponente zum Einsatz kommen, die wiederum von anderen Komponenten genutzt werden.

Beispiele dafür sind Buttons, Panels oder Avatare. Auch komplexe Komponenten sollten als wiederverwendbare Komponenten programmiert werden, damit der Überblick erhalten bleibt. In React sollten die Bezeichnungen von Komponenten möglichst mit einem Großbuchstaben beginnen, zu Beispiel <Wrapper/>. Mehr dazu ist auf der Seite „Rendering a Component“ zu finden.

Die Eingaben für eine Komponente in React tragen die Bezeichnung „props“. Dabei handelt es sich um Daten, die eine Komponente einer anderen weitergibt. Dabei erhalten die „props“ einen Schreibschutz, der Änderungen verhindert.

Paketmanager mit React nutzen – NPM und Yarn

Um React-Erweiterungen und -Apps zu nutzen, können auch Paketmanager zum Einsatz kommen. Das ist zum Beispiel auch sinnvoll, um Voraussetzungen für ein Projekt in einem Paket zusammenzufassen. Besonders häufig kommen hier npm und Yarn zum Einsatz.

(ID:48551001)

Weiterführende Inhalte