PunktDe Kontakt LogoKontakt
Schließen
Einfach Suchbegriff eingeben und Enter drücken
Abbrechen

Warum wir React verwenden

Warum wir React verwenden

React ist eine JavaScript-Softwarebibliothek, die ein Grundgerüst für die Ausgabe von User-Interface-Komponenten von Webseiten zur Verfügung stellt (Webframework). Komponenten werden in React hierarchisch aufgebaut und können in dessen Syntax als selbst definierte HTML-Tags repräsentiert werden. Das Modell von React verspricht durch die Konzepte des unidirektionalen Datenflusses und des „Virtual DOM“ den einfachen, aber trotzdem performanten Aufbau auch komplexer Anwendungen. [Wiki: https://de.wikipedia.org/wiki/React]

React wird heute häufig für modernen Webanwendungen / Projekte verwendet, von kleinen und einfachen (z.B. Single Page Application) bis hin zu großen und komplexen. Es ist sehr flexibel und kann für UI-Projekte jeder Größe und Plattform verwendet werden, einschließlich mobiler, Web- und Desktop-Entwicklung.  Viele weltbekannte Unternehmen, wie z.B. Instagram und Airbnb, setzen daher bei ihren Produkten auf React.

Die Features und Vorteile von React

Virtual DOM

Performance ist die größte Herausforderung der heutigen dynamischen Webanwendungen. Um dynamische Webseiten zu ermöglichen, wird im Browser ein DOM (Document Object Model) aufgebaut, das alle auch noch so kleinen Elemente in einer Baumstruktur speichert, um auf diesen dann Operationen wie das Berechnen von Positionen oder Eigenschaften wie Farbe, Größe etc. auszuführen. Sollen das DOM oder einzelne seiner Eigenschaften verändert werden, muss das DOM neu berechnet werden. Dazu wird typischerweise jQuery genutzt, welches die Operationen über das Browser DOM ausführt. Da sich die Elemente auf unterschiedlichste Art gegenseitig beeinflusst können, sind diese Änderung bzw. Berechnungen ziemlich aufwändig.

In React löst Virtual DOM dieses Problem: Indem das DOM im Memory gespeichert und nur selektiv aktualisiert wird, ist es sehr schnell änderbar und die Anzahl an Aktualisierungen im Browser wird minimiert.

Komponenten

Komponenten erlauben dir deine Benutzeroberfläche in unabhängige, wiederverwendbare Teile aufzubrechen und jedes Teil isoliert zu betrachten. Die Komponenten sind JavaScript-Funktionen oder -Klassen (seit ES6) mit einer render-Methode.

One Way Data Flow

React überträgt die Daten nur in eine Richtung, zu den Komponenten hin. Damit wird das Debugging vereinfacht.

JSX

Ein fundamentales Konzept von React ist JSX. JSX ist eine Erweiterung der Programmiersprache JavaScript und ermöglicht es, HTML-ähnliche Elemente nahtlos in JavaScript zu verwenden. Mit JSX wird React einfach mit der Darstellung (View Layer) verbunden. Die Idee hinter JSX ist, nicht mehr nach Technologie, sondern nach Zuständigkeit zu trennen. Dieses Konzept wird Separation of Concerns (SoC) genannt. Dadurch, dass eine Komponente nicht mehr aus zwei Entitäten kombiniert werden muss, trägt JSX dazu bei, in sich geschlossene Komponenten zu schreiben, die ihrerseits sehr gut wiederverwendbar sind.

Vorteile von React für die Entwicklung

Einfachheit

React hat eine sehr steile Lernkurve, denn es ist sehr einfach, damit Komponenten zu bauen. Eine Komponente ist in React nicht viel mehr als eine JavaScript-Klasse, welche die gesamte Logik zur Darstellung der Komponente enthält. Um eine Komponente zu schreiben, muss man nicht einmal eine Template-Sprache lernen, denn der UI-Teil einer Komponente wird in React mit JavaScript geschrieben. JSX verbessert die Lesbarkeit, insbesondere durch die Vereinfachung beim Schreiben von DOM-Elementen.

Skalierbarkeit und Flexibilität

Der Kern von React sind Komponenten und ihre Komposition zu einer Anwendung. Die Komponenten sind in Klassen unterteilt, die leicht erweitert und übertragen werden können. Dadurch können skalierbare und flexible Applikationen entwickelt werden. Außerdem kann der Komponentenstatus jederzeit durch die React-API übergeprüft und verändert werden.

Vereinfachte Entwicklungskomplexität und Wiederverwendbarkeit

Ein weiterer großer Vorteil von React ist die JSX-Syntax-Erweiterung, die eine hervorragende Wiederverwendbarkeit bietet. Die Standardmechanik bei React schlägt vor, standardisierte Inline-Stile zu verwenden, die mit JavaScript-Objekten beschrieben sind. JSX verbindet HTML und CSS in einem JavaScript-Code und befreit von dem Schmerz, die Links zu anderen Dateien über Attribute einfügen zu müssen. Jede Komponente kann überall im Projekt frei definiert werden, indem ihr ein bestimmter einzigartiger Status zugewiesen wird.

Active Community und ausreichend wiederverwendbare Komponenten

React mit seinem Ökosystem ist eine Art flexibles Framework. Man selbst kann Bibliotheken aussuchen und zum Kern der Anwendung hinzufügen.

Quellen:

[1] Bild des Blogbeitrags: React Native Logo, https://commons.wikimedia.org/wiki/File:React_Native_Logo.png (abgerufen am 27.11.2019)

Autor: Weiye Sun

Kommentare

Weitere Beiträge

18. Februar 2020

Unser E-Mail und Kalender Umzug, geräuschlos und erfolgreich

Wie löst man einen Austausch eines der wichtigsten Unternehmenstools ohne Ausfallzeit? mehr

17. Februar 2020

Neos/Flow Update auf 6.x - Eine Anleitung

Hier kommen die PHP-Standards PSR-3 und PSR-7 ins Kundenprojekt mehr