Was ist React?

React ist eine leistungsstarke Bibliothek für die Erstellung interaktiver Web-Apps und sogenannter Single-Page-Apps. Diese Technologie ist perfekt für Programmierer, die gerade erst anfangen, zu lernen.

Benutzeroberflächen im Kontext moderner Webentwicklung

Die Vorteile der modernen Webentwicklung liegen klar auf der Hand: es gibt unglaublich viele Ressourcen zu diesem Thema. So gut wie jeder Autor, Experte oder Praktiker hat inzwischen einen Artikel, Podcast oder YouTube-Kanal zum Thema Webentwicklung verfügbar gemacht. Dies ist natürlich ein Segen für alle Interessierten. Denn man muss nur die richtigen Quellen finden und sich durcharbeiten. Allerdings birgt dieses Ungleichgewicht auch eine große Gefahr: Oft gerät man nämlich an veraltete Inhalte, halbfertige Lösungsansätze oder schlichtweg schlechte Tutorials. Wer sich gerade erst mit modernen Entwicklungsthemen beschäftigt, stellt schnell fest, dass es schwer ist zu wissen, was man überhaupt als Erstes lernen soll. Die Liste an modernen Webtechnologien wie Angular, Spring, Docker, Kubernetes oder Firebase scheint endlos zu sein! Um jedoch den Hype um die UI-Bibliothek von Facebook verstehen zu können empfiehlt es sich einige Grundlagen-Kenntnisse zu haben.

Welche Firma steckt hinter React?

Entwickler ist Facebook (Meta). Die Entwicklung von React begann im Jahr 2011 und wurde erstmals 2013 auf der JSConf US vorgestellt. Seitdem hat sich React zu einer der beliebtesten JavaScript-Bibliotheken entwickelt und wird von einer großen und aktiven Community unterstützt. Obwohl Facebook die treibende Kraft hinter der Entwicklung von React ist, wird die Bibliothek unter einer Open-Source-Lizenz veröffentlicht und kann von jedem genutzt und angepasst werden.

UI-Bibliotheken und Frameworks

React wird oft mit UI-Frameworks für Web-Apps wie Vue.js oder Angular in Verbindung gebracht, aber tatsächlich handelt es sich hier nicht um ein Framework im herkömmlichen Sinne. React ist eine kleinere und leichtgewichtigere Bibliothek zum Rendern von grafischen Oberflächen. Im Gegensatz zu kompletten UI-Frameworks wie Angular verzichtet die UI-Bibliothek von Facebook auf Konzepte für Routing, Dependency Injection (DI) und ähnliche Funktionen. Damit ist die UI-Bibliothek schlanker als viele alternative Optionen. In den Anfangstagen war die UI-Bibliothek revolutionär. Insbesondere im Vergleich zum damaligen Platzhirsch Angular brachte die UI-Bibliothek viele Features und Funktionalitäten, die von der Entwickler-Community lange erwartet wurde. Angular konnte zwar komfortabel genutzt werden, war aber aufgrund der schlechten Skalierbarkeit und Performance für die Entwicklung komplexer User Interfaces weniger gut geeignet.

React adressierte diese Probleme und führte verschiedene Konzepte aus der funktionalen Programmierung in die UI-Welt ein, wie zum Beispiel die Unveränderlichkeit von Datentypen (Immutability) oder einen Datenfluss, der nur in eine Richtung verläuft. Die Verwendung funktionaler Konzepte wie zum Beispiel das virtuelle DOM (Document Object Model ) ist ein entscheidender Vorteil von React. Durch das Verbessern der Performance und die Isolation des In-Memory DOMs vom tatsächlichen DOM können sich Entwickler auf den Kern ihrer Arbeit konzentrieren, anstatt Fehler zu suchen oder bereits implementierte Funktionalitäten zu testen. React ist nicht nur ein technologischer Fortschritt, sondern revolutioniert auch die Art und Weise, wie Entwicklerinnen und Entwickler funktionale Konzepte umsetzen.

Die UI-Bibliothek wurde maßgeblich von Facebook entwickelt und wird auch heute noch für den Eigengebrauch weiterentwickelt. Tatsächlich hat Facebook die UI-Bibliothek sogar in Eigenregie entwickelt, um die Benutzeroberflächen in eigenen Produkten zu verbessern. Anfangs gab es allerdings Kritik an der eingesetzten Lizenz, da diese durch proprietäre und Facebook-spezifische Erweiterungen erweitert wurde. Mittlerweile ist das Problem jedoch behoben und die UI-Bibliothek steht unter der gängigen MIT-Lizenz allen Entwicklern kostenlos zur Verfügung.

React ist eine fantastische Technologie, die von Anfang an stark auf Komponentenorientierung setzte. Inzwischen gibts zwei Möglichkeiten für Entwickler. Es lassen sich klassenbasierte oder funktionale Komponenten einsetzen – beides mit unterschiedlichen Vorteilen. Der funktionale Ansatz ist annähernd gleichwertig mit dem konventionellen Ansatz, allerdings gewinnt der erste zunehmend mehr Aufmerksamkeit. Daher erscheint es ratsam, in neuen Projekten den funktionaleren Weg zu verfolgen.

Single Page Apps

Im Rahmen einer Web-App gibt es mehrere verschiedene Ansichten, die man als Views bezeichnet. Sobald etwas in der App angeklickt wird, ändert sich automatisch die angezeigte View. Viele Internetnutzer assoziieren eine solche Änderung mit dem Wechsel zu einer neuen Seite bzw. dem Laden einer neuen Seite. Das ist nicht falsch. Denn frühere Webanwendungen bestanden typischerweise tatsächlich aus mehreren unterschiedlichen Webseiten. Um dann aber eine neue View anzuzeigen, musste jeweils erst eine komplett neue Seite erzeugt und geladen werden – was natürlich sehr Zeit beansprucht hat.

Ein wesentlich modernerer Ansatz sind Single-Page-Applications (SPAs). Der wesentliche Vorteil einer solchen Anwendung spiegelt sich in der Tatsache wider, dass nur eine Seite benötigt wird – im Gegensatz zu herkömmlichen Multipage-Apps, bei denen jede Ansicht auf einer separaten Seite lädt. Dies bedeutet nicht nur einen schnelleren Ladevorgang für den Besucher, sondern auch weniger Ressourcenbedarf für die Entwicklung und Wartung der App insgesamt. Wenn Sie zum Beispiel auf einen Sign-in-Link in der Navigationsleiste klicken, wird keine neue Seite geladen. Stattdessen ändert sich bei SPAs je nach State die aktive Ansicht, sodass das Laden einer separaten Seite nicht erforderlich ist.

Fazit

React ist eine leistungsstarke UI-Bibliothek, mit der man auch sehr umfangreiche und anspruchsvolle grafische Oberflächen schnell und einfach erstellen kann. Vielen Programmierern gefällt die UI-Bibliothek besonders deshalb so gut, weil es funktionale Programmierung unterstützt und die Modularisierung von Frontends fördert – im Gegensatz zu Angular, welches eine voll integrierte All-in-one-Lösung bereitstellt. Natürlich gibt es hier kein pauschales Richtig oder Falsch, denn letzten Endes sind UI-Bibliotheken und UI-Frameworks auf unterschiedliche Anforderungen und Bedürfnisse ausgerichtet.

unsere React–Programmierleistung

Wir bieten ihnen eine große Bandbreite an Dienstleistungen:

  • Programmierung
  • Entwicklung
  • Planung
  • Umsetzung
  • Betreuung
  • Überwachung
  • Skalierung

Sie benötigen Unterstützung bei einem Projekt? Durch unseren Full Service können wir Ihnen mit Sicherheit weiterhelfen. Sprechen Sie uns an!