Einführung
Heutzutage sind Frontend-Frameworks und -Bibliotheken ein unverzichtbarer Bestandteil des modernen Webentwicklungs-Stacks. React.js ist eine Frontend-Bibliothek, die sich in der JavaScript-Community nach und nach zum Standard-Framework für die moderne Webentwicklung entwickelt hat.
Was ist React.js?
React.js ist eine Open-Source-JavaScript-Bibliothek, die von Facebook entwickelt wurde, um die komplexe Erstellung interaktiver Benutzeroberflächen zu vereinfachen. Eine mit React erstellte Benutzeroberfläche kann man sich als Sammlung von Komponenten vorstellen, von denen jede für die Ausgabe eines kleinen, wiederverwendbaren HTML-Codeabschnitts verantwortlich ist.
In React entwickeln Sie Ihre Anwendungen, indem Sie wiederverwendbare Komponenten erstellen, die Sie sich wie unabhängige Legosteine vorstellen können. Diese Komponenten sind einzelne Bausteine einer endgültigen Benutzeroberfläche, die, wenn sie zusammengesetzt werden, die gesamte Benutzeroberfläche Ihrer Anwendung bilden.
Die Hauptaufgabe von React in einer Anwendung besteht darin, die Darstellungsschicht zu verwalten, indem es die beste und effizienteste Rendering-Implementierung bereitstellt, ähnlich dem V im Model-View-Controller (MVC)-Muster. Anstatt die gesamte Benutzeroberfläche als Einheit zu behandeln, ermutigt React.js Entwickler, diese komplexen Benutzeroberflächen in einzelne, wiederverwendbare Komponenten zu zerlegen, die die Bausteine der gesamten Benutzeroberfläche bilden. Dadurch kombiniert das ReactJS-Framework die Geschwindigkeit und Effizienz von JavaScript mit einer effizienteren DOM-Manipulation, um Webseiten schneller zu rendern und hochdynamische und responsive Webanwendungen zu erstellen.
Eine kurze Geschichte von React.js
Im Jahr 2011 verfügte Facebook über eine große Nutzerbasis und stand vor einer anspruchsvollen Aufgabe. Das Unternehmen wollte seinen Nutzern ein besseres Nutzererlebnis bieten, indem es eine dynamischere und reaktionsschnellere Benutzeroberfläche entwickelte, die schneller und effizienter war.
Jordan Walk, ein Softwareentwickler bei Facebook, entwickelte React genau zu diesem Zweck. React vereinfachte den Entwicklungsprozess, indem es eine organisiertere und strukturiertere Methode zur Erstellung dynamischer, interaktiver Benutzeroberflächen mit wiederverwendbaren Komponenten bot.
Der Newsfeed von Facebook nutzte es als erster. Mit seinem revolutionären Ansatz zur DOM-Manipulation und Benutzeroberflächen veränderte React die Webentwicklung bei Facebook grundlegend und erlangte nach seiner Veröffentlichung für die Open-Source-Community schnell Popularität im JavaScript-Ökosystem.
Was macht React.js?
Normalerweise ruft man eine Webseite auf, indem man ihre URL in den Webbrowser eingibt. Der Browser sendet dann eine Anfrage für diese Webseite, die anschließend vom Browser ausgeliefert wird. Klickt man auf einen Link auf dieser Webseite, um zu einer anderen Seite zu gelangen, wird eine neue Anfrage an den Server gesendet, um die neue Seite abzurufen.
Dieses ständige Hin- und Herladen zwischen Ihrem Browser (Client) und dem Server wiederholt sich bei jeder neuen Seite oder Ressource, die Sie auf einer Website aufrufen. Dieses übliche Verfahren zum Laden von Websites funktioniert zwar gut, aber stellen Sie sich eine sehr datenintensive Website vor. Das ständige Neuladen der gesamten Webseite wäre redundant und würde die Benutzerfreundlichkeit beeinträchtigen.
Wenn sich Daten in einer herkömmlichen JavaScript-Anwendung ändern, muss das DOM manuell angepasst werden, um diese Änderungen widerzuspiegeln. Man muss die geänderten Daten identifizieren und das DOM entsprechend aktualisieren, was ein Neuladen der Seite zur Folge hat.
React verfolgt einen anderen Ansatz und ermöglicht die Entwicklung sogenannter Single-Page-Anwendungen (SPAs). Eine Single-Page-Anwendung lädt beim ersten Aufruf ein einzelnes HTML-Dokument. Anschließend aktualisiert sie mithilfe von JavaScript den jeweiligen Abschnitt, Inhalt oder Body der Webseite, der aktualisiert werden muss.
Dieses Muster wird als clientseitiges Routing bezeichnet, da der Client nicht jedes Mal die gesamte Webseite neu laden muss, wenn der Benutzer eine neue Seite anfordert. Stattdessen zerlegt React die Anfrage und lädt nur die zu ändernden Teile, wodurch die Änderungen ohne Neuladen der gesamten Seite vorgenommen werden. Dieser Ansatz führt zu einer besseren Performance und einem dynamischeren Nutzererlebnis.
React verwendet ein virtuelles DOM, das eine Kopie des realen DOM ist. Das virtuelle DOM von React wird bei jeder Änderung des Datenzustands sofort neu geladen, um die Änderung widerzuspiegeln. Anschließend vergleicht React das virtuelle DOM mit dem realen DOM, um genau zu ermitteln, was sich geändert hat.
React findet dann den kostengünstigsten Weg, das DOM mit dieser Aktualisierung zu patchen, ohne es neu zu rendern. Dadurch spiegeln React-Komponenten und Benutzeroberflächen Änderungen schnell wider, da nicht bei jeder Aktualisierung die gesamte Seite neu geladen werden muss.
Wie man React.js verwendet
Im Gegensatz zu anderen Frameworks wie Angular schreibt React keine strengen Regeln für Codekonventionen oder die Dateiorganisation vor. Entwickler und Teams können daher die für sie optimalen Konventionen festlegen und React nach ihren Vorstellungen implementieren. Dank seiner Flexibilität lässt sich React so umfassend oder sparsam einsetzen, wie nötig.
Mit React können Sie Schaltflächen, einzelne Elemente einer Benutzeroberfläche oder die gesamte Benutzeroberfläche Ihrer Anwendung erstellen. Sie können React schrittweise in eine bestehende Anwendung mit interaktiven Funktionen integrieren oder – noch besser – damit leistungsstarke React-Anwendungen von Grund auf neu entwickeln, ganz nach Ihren Bedürfnissen.
Integration von React in eine bestehende Website
Wenn Sie Ihrer Website dynamische Interaktivität hinzufügen möchten, ist React eine hervorragende Wahl. Durch die Integration von React können Sie wiederverwendbare, interaktive Komponenten erstellen, die Sie an beliebiger Stelle auf Ihrer Website platzieren können, beispielsweise in Seitenleisten oder Widgets. Hier finden Sie eine kurze Übersicht der einzelnen Schritte.
Schritt 1: CDN-Skripte zu HTML hinzufügen
- Beginnen Sie damit, die React Core Library API vom CDN in die HTML-Indexdatei Ihrer Website einzufügen.
- Importieren Sie anschließend das React DOM vom CDN. Dies ist notwendig, um die Komponenten im Document Object Model (DOM) darzustellen.
- Als Nächstes fügen Sie Babel vom CDN hinzu, das den React-Code übersetzt und so die Browserkompatibilität gewährleistet. Vergessen Sie außerdem nicht, Ihre React-Komponentendatei hochzuladen.
Im ersten Schritt müssen Sie zwei wichtige CDN-Skripte in die HTML-Indexdatei Ihrer Website einfügen. Diese Skripte benötigen Sie, um React über den CDN-Dienst in Ihre Anwendung zu laden.
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src='https://unpkg.com/[email protected]/babel.js'></script>
<script type="text/babel" src="like_widget.js"></script>
Schritt 2: Markieren Sie den Renderort auf Ihrer Website
Bestimmen Sie die Position in Ihrem HTML-Code, an der die React-Komponente gerendert werden soll. Dies kann durch Hinzufügen eines Elements erfolgen. <div> Dies geschah mithilfe einer eindeutigen Kennung, auf die wir in unserem React-Code verweisen werden.
<!-- ... Your existing HTML markup ... -->
<div id="like_widget_container"></div>
<!-- ... Your existing HTML markup ... -->
Schritt 3: Erstellen Sie die React-Komponente
- Erstellen Sie in diesem Fall eine React-Komponente namens like_widget.js.
- Diese Komponente wird eine einfache Funktion enthalten, die eine JSX-Anweisung zurückgibt, welche die Nachricht “Hello World” ausgibt.
- Mithilfe von ReactDOM rendern wir diese Komponente dann im DOM und verwenden dabei die eindeutige ID, die wir zuvor in unserem HTML festgelegt haben.
// Custom React component function that returns a JSX syntax
const ActualWidget = () => Hello World;
// Select the container
const container = document.getElementById("like_widget_container");
// Render the component to the DOM
ReactDOM.render(, container);
Wenn Sie das Programm ausführen, wird an der Stelle, die Sie im untenstehenden Bild markiert haben, im Browser “Hello World” angezeigt.
Möglicherweise ist Ihnen die ungewöhnliche Syntax namens JavaScript XML (JSX) aufgefallen, die von der Funktion `ActualWidget` zurückgegeben wird. JSX wird in Verbindung mit React verwendet, um HTML und JavaScript einfach zu kombinieren. Facebook entwickelte JSX als Syntaxerweiterung für JavaScript, um die Funktionalität von HTML zu erweitern, indem HTML direkt in JavaScript-Code eingebettet wird. Mit JSX ist es nicht mehr nötig, HTML- und JS-Code zu trennen, da React es Ihnen ermöglicht, deklaratives HTML direkt in JavaScript-Code zu schreiben.
Erstellung einer vollwertigen React-App
React lässt sich zwar problemlos in bestehende Webanwendungen integrieren, um kleinere Schnittstellenbausteine zu erstellen, doch ist es praktischer, mit React vollständige Webanwendungen zu entwickeln. Allerdings erfordert React eine umfangreiche Konfiguration der Tools, deren Einrichtung bei der Erstellung neuer React-Anwendungen oft abschreckend und mühsam ist.
Glücklicherweise müssen Sie diese Build-Einstellungen nicht lernen oder die Build-Tools selbst konfigurieren. Facebook hat ein Node-Befehlszeilentool namens `cre-react-app` entwickelt, das Ihnen beim Erstellen von React-Apps hilft. Dieses Paket bietet Ihnen sofortige Unterstützung und eine einheitliche Struktur für React-Apps, die Sie beim Wechsel zwischen verschiedenen React-Projekten wiedererkennen werden.
Ein neues React-Projekt zu erstellen ist so einfach wie die Ausführung der folgenden Befehle in Ihrem Terminal:
npx create-react-app my-new-app
cd my-new-app
npm start
React.js-Beispiele
Als Ursprung von React.js ist Facebook ein Paradebeispiel für die Leistungsfähigkeit der Bibliothek. React vereinfacht die Echtzeitfunktionen der Plattform wie Likes, Kommentare und Statusaktualisierungen und sorgt so für ein nahtloses und dynamisches Nutzererlebnis. Die modulare Architektur von React ermöglicht die ständige Weiterentwicklung der Facebook-Oberfläche und passt sich den Bedürfnissen der über 2,8 Milliarden monatlich aktiven Nutzer an.
Instagram Web ist eine interaktive Plattform, die vollständig auf React.js basiert. Jedes Bild, wie beispielsweise die Story-Ansicht und die Direktnachricht, unterstreicht die Fähigkeit von React, komplexe Nutzerinteraktionen schnell zu verarbeiten. Die ansprechende und benutzerfreundliche Oberfläche der Plattform beweist die Leistungsfähigkeit von React bei der Bereitstellung performanter Interaktionen.
Netflix
Airbnb zeigt, wie React.js komplexe Daten in eine intuitive Benutzererfahrung verwandeln kann. Jedes Objektangebot, jede interaktive Karte und jede Echtzeitbuchung sind ein harmonisches Zusammenspiel von React-Komponenten, die eine nahtlose Benutzererfahrung vom Stöbern bis zur Buchung ermöglichen.
