React - Technik Tipps und Tricks

Was ist React?

React ist eine Open-Source-JavaScript-Bibliothek zur Entwicklung von webbasierten User-Interfaces. React-Komponenten werden hierarchisch aufgebaut und können selbstdefinierte HTML-Tags enthalten. Das Framework ermöglicht effizient Single-Page-Webanwendungen zu entwickeln.

React wurde von Jordan Walke, einem Softwareingenieur bei Facebook, entwickelt. Im Jahr 2013, nach erfolgreichem Einsatz in Facebooks Newsfeed und Instagram, wurde React als Open-Source-Projekt veröffentlicht.

Wichtigste Merkmale

Die Programmierung mit React erfordert ein grundlegendes Umdenken im Bezug auf die Struktur einer Webanwendung. Während in den meisten Webdesign-Technologien die HTML und CSS im Mittelpunkt stehen und JavaScript für die dynamischen Änderungen sorgt, stellt React diese Vorgehensweise auf den Kopf. Hier ist JavaScript der Hauptakteur, der HTML- und CSS-Code zur Laufzeit generiert.

Komponentenarchitektur

Reacts zentraler und einziger Baustein sind Komponenten. Ihre wichtigste Funktion ist render(), die das Markup für die DOM-Repräsentation definiert.

Unidirektionaler Datenfluss

Die Daten werden an die Komponente über statische Eigenschaften (props) übergeben. Die Komponente kann die übergeordneten Eigenschaften einer Parent-Komponente nicht direkt ändern, außer über die als Eigenschaften übergebenen Callback-Funktionen.

Virtual DOM

Virtual DOM ermöglicht das gezielte Aktualisieren der betroffenen Komponente innerhalb eines DOM-Baumes. Dazu wird das Browser-DOM im virtuellen Speicher als abstrakte Kopie abgebildet und nach der Änderung verglichen. Die Unterschiede werden dann in einem Schritt in dem Browser-DOM angepasst, ohne es mehrfach neu rendern (repaint) zu müssen. Der Vorteil liegt auf der Hand. Die Seite wird schneller aufgebaut, da nur die tatsächlich geänderten Teile der Komponenten aktualisiert werden.

Im Vergleich zu React sind andere Frameworks um den Faktor (in Klammern) langsamer bei der DOM-Aktualisierung:

Angular (5,2)
VanillaJS (2,0)
Ember (1,8)
Backbone (1,7)
jQuery (1,3)

JavaScript Syntax-Erweiterung (JSX)

JSX (JavaScript XML oder JavaScript Syntax Extension) erlaubt es, den JavaScript-, HTML- und CSS-Code innerhalb einer Komponente zu nutzen. Die Dateien haben die Endung .jsx oder .tsx.