Entwicklung mit ReactJS – eine Einführung in die beliebte JS-Bibliothek und ihre Anwendungen

Was genau ist React? Für welche Art von Anwendungen wird es verwendet? Eine Einführung in seine technischen Eigenschaften sowie Vor- und Nachteile

Web EntwicklungUPDATED ON Juni 11, 2021

Author

React development

ReactJS ist eine Open Source JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen, die von Facebook entwickelt wurde und zum Erstellen von Webanwendungen benutzt wird. Das React-Framework ist in der Sprache JavaScript geschrieben und wurde 2011 von Jordan Walke bei Facebook entwickelt. Facebook hat die Bibliothek anschließend im Jahr 2013 als Open Source veröffentlicht.

Im Jahr 2021 basieren jetzt bereits mehr als 54 Millionen Websites auf React. Websites oder Anwendungen, dessen Frontend mit React erstellt wurden, können über interaktive, datenintensive Dashboards oder Datenvisualisierungstools verfügen. Als UI-Bibliothek ist React eine beliebte Wahl für Social-Networking-Apps und E-Commerce-Webanwendungen.

Warum ist die Entwicklung mit React eine so beliebte Wahl für dynamische Webanwendungen? Was sind die Vor- und Nachteile der Bibliothek? Und welche Beispiele gibt es für Anwendungen, bei denen React eine gute Wahl sein könnte? Wofür ist es möglicherweise weniger gut geeignet?

Can We Help You With Your Next React Development Project?

Flexible models to fit your needs!

React als Teil des JS-Ökosystems für die Frontend-Webentwicklung

Bevor wir näher auf React als Wahl für die Frontend-Technologie eingehen, wollen wir kurz einige Grundlagen erklären:

Statische Websites

Der Inhalt der Website ist statisch oder ändert sich nicht. Statische Seiten werden mit HTML und CSS erstellt.

Dynamische Websites

Dynamische oder interaktive Websites ändern den Inhalt, der dem Benutzer bereitgestellt wird, ohne dass dieser durch erneutes Laden im Browser aktualisiert werden muss. In einem Facebook- oder LinkedIn-Feed werden beispielsweise Kommentare eines anderen Benutzers in Echtzeit geladen.

Javascript

Echtzeit-Updates für Websites oder webbasierte Apps erfordern ein clientseitiges Rendern. JavaScript ist eine leichte, interpretierte Programmiersprache und die Programmiersprache der Wahl für Webanwendungen, die auf ein clientseitiges Rendering angewiesen sind.

Benutzeroberfläche (UI)      Die Benutzeroberfläche (engl. User Interface) umfasst alles, dass Benutzern präsentiert wird, damit sie mit einer Anwendung interagieren. Wir können React verwenden, um eine Benutzeroberfläche für eine Anwendung zu beschreiben.

DOM

Document Object Model. Die Darstellung einer Webseite auf Objektebene. Man kann JS-Code schreiben, um Webseitenobjekte im DOM zu bearbeiten.

Virtuelles DOM

Das virtuelle DOM (VDOM) ist ein Programmierkonzept, bei dem eine ideale oder „virtuelle“ Darstellung einer Benutzeroberfläche im Speicher gehalten und von einer Bibliothek wie ReactDOM mit dem „echten“ DOM synchronisiert wird.

Frontend (der Website)

Der Teil einer Webseite, mit dem der Benutzer direkt interagiert. Es kann auch als die „Client-Seite“ bezeichnet werden. Das Frontend enthält Elemente, die Benutzer direkt wahrnehmen: Textschriftarten, Farben und Stile, Bilder, Grafiken und Tabellen, Schaltflächen, Navigationsmenü usw. Die Sprachen, die zur Entwicklung des Frontends einer Website verwendet werden, sind HTML, CSS und JavaScript.

Responsive Frontend

Ein gutes Frontend muss eine hohe Leistung aufweisen (schnelles Laden) und „responsive“ sein. Eine responsive Seite wird auf Geräten aller Größen, von Monitoren bis zu Smartphones, korrekt angezeigt. Alle wichtigen Teile des Frontends der Website sollten so gerendert werden, dass sie der Bildschirmgröße entsprechen.

SPA

Single Page Client Applications

Javascript Framework

Ein JavaScript-Framework ist ein in JavaScript geschriebenes Anwendungsframework, mit dem Programmierer die verfügbaren Bibliotheksfunktionen in Templates (Vorlagen) bearbeiten können. Mit JS-Frameworks können UI-Elemente wie Listen, Tabellen usw. erstellt, geändert und gelöscht werden. Frameworks können für das Frontend oder Backend nutzbar sein.

JSX (JavaScript XML)

Eine Kombination aus JS + HTML.

Frontend JS-Frameworks

Einige der beliebtesten Frontend JS-Frameworks sind:

ReactJS

React ist eng gesehen kein Framework, sondern eine Bibliothek zum Rendern von UI-Komponenten. React wird in Kombination mit anderen Bibliotheken verwendet, um Anwendungen zu erstellen. React und ReactDOM ermöglichen es, Webanwendungen usw. zu erstellen. Da React und ReactDOM so häufig zusammen verwendet werden, wird React umgangssprachlich als JavaScript-Framework bezeichnet.

Angular

Ein Open Source Webanwendungsframework. Angular ist ein komponentenbasiertes Framework, das deklarative HTML-Vorlagen verwendet. Der Compiler des Frameworks übersetzt die Vorlagen in optimierte JavaScript-Anweisungen.

Vue

Vue erweitert, wie ReactJS, HTML mit eigenem Code, verlässt sich aber ansonsten auf modernes Standard-JavaScript.

Über ReactJS

React ist eine Bibliothek zum Erstellen webbasierter Benutzeroberflächen. Es kann verwendet werden, um verschiedene Arten von Anwendungen zu erstellen. Häufige Beispiele sind Dashboards oder Datenvisualisierungstools, Single-Page-Websites, Social-Networking-Apps, Medienseiten, Videoplattformen, Marktplätze, E-Commerce-Plattformen.

Hinweis:

Im Jahr 2015 wurde React Native als mobile Entwicklungslösung von React veröffentlicht. React Native ist ein hybrides App-Entwicklungsframework, das Entwicklern die Möglichkeit bietet, über 90 Prozent ihres Codes in iOS- und Android-App-Entwicklungsprojekten wiederzuverwenden.

Es ist wichtig, die Definition von React zu verstehen, bevor Sie fortfahren. Die offizielle Definition von React lautet: Eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Schauen wir uns die beiden Teile dieser Definition an.

Zunächst ist ReactJS eine JavaScript-Bibliothek. Es ist kein Framework. Möglicherweise müssen Sie manchmal andere Bibliotheken mit React kombinieren.

ReactJS wird verwendet, um Web-UIs zu beschreiben. Basierend auf der von einem Entwickler bereitgestellten Beschreibung erstellt ReactJS die eigentlichen Benutzeroberflächen. Dies ist einfacher und spart Zeit, verglichen mit der manuellen Erstellung von UI-Komponenten von Grund auf mit Web-APIs und JavaScript.

React verfügt über eine kleine Anzahl von APIs, die es zu Erlernen gilt. Außerdem sind JavaScript-Kenntnisse erforderlich, um eine auf React basierte Anwendung vollständig zu entwickeln.

In den Architekturmustern Model-View-Controller (MVC ) und Model-View-View Model (MVVM) für die Webentwicklung passt ReactJS in den „V“-Teil – also den View-Teil. Dies bedeutet, dass React nur für die Ansichtsebene der Anwendung verantwortlich ist.

Virtuelles DOM

Im Kern unterhält React einen DOM-Baum, der Berechnungen auf den Knoten ausführt. Die heutigen interaktiven Websites und Anwendungen haben komplexe und große DOM-Bäume. Jedes Mal, wenn Eingaben oder Abfragen vorgenommen werden, muss ein echtes DOM die gesamte Seite neu schreiben, was die Leistung beeinträchtigen und Speicher verschwenden kann. Das Problem bei „echten“ oder traditionellen DOM-Konstrukten besteht darin, dass sie bei der Verarbeitung von Änderungen den gesamten DOM-Baum neu schreiben müssen.

Anstatt bei jeder Änderung durch einen Benutzer den gesamten DOM-Baum neu zu schreiben, aktualisiert ein virtuelles DOM nur das manipulierte Element. Angenommen, Sie haben eine To-Do-Liste mit fünf Elementen. Ein echtes DOM schreibt alle fünf Elemente neu und rendert sie erneut, sobald ein Element in der Liste ausgewählt wurde. Ein virtuelles DOM schreibt statt der gesamten Liste nur das einzelne ausgewählte Element neu.

React implementiert ein virtuelles DOM, das wesentlich effizienter ist, schneller arbeitet und letztendlich zu einer besseren Benutzeroberfläche führt.

Grundlagen der Entwicklung mit React

Sie müssen das Konzept eines „Zustands“ (State) verstehen, wenn Sie ReactJS verwenden. ReactJs verwendet Komponenten, in denen die Anwendung geschrieben wird. Komponenten können einen Zustand (State) haben oder zustandslos (Stateless) sein.

Zustandslose Komponenten akzeptieren einfach Daten und zeigen sie in irgendeiner Form an. Sie sind hauptsächlich für das Rendern der Benutzeroberfläche verantwortlich. Eine zustandslose Komponente oder unkontrollierte Komponente ist eine einfache Funktion, die Eingaben (Input) entgegennimmt, funktionale Anweisungen ausführt und eine Ausgabe (Output) zurückgibt. Eine zustandslose Komponente steht normalerweise damit in Verbindung, wie dem Benutzer ein Konzept präsentiert wird. Sie ähnelt einer Funktion darin, dass sie Eingabeeigenschaften (props) übernimmt und die Ausgabe (react-Element) zurückgibt. Sie können eine zustandslose Komponente verwenden, wenn Sie:

  • Die Props wiedergeben müssen
  • Keinen Zustand oder irgendwelche internen Variablen benötigen
  • Ein Element erstellen, das nicht interaktiv sein muss
  • Code wiederverwenden möchten

Eine Komponente kann als zustandsbehaftete Komponente oder als kontrollierte Komponente definiert werden, wenn sie eine Zustandsänderung verarbeitet. Immer wenn eine Zustandsänderung eintritt, rendert React die Komponente neu. Wenn Sie beispielsweise in einer Zähleranwendung auf die Schaltfläche „Zählen“ klicken, wird der Wert des Zählers erhöht. Hier wird der Wert des Zählers durch den Zustand Eigenschaftszähler gesteuert.

Andere Fälle, in denen Sie zustandsbehaftete Komponenten benötigen, sind:

  1. Wenn Sie ein Element erstellen, das Benutzereingaben akzeptiert, oder ein Element, das auf der Seite interaktiv agiert
  2. Wenn der Elementwert für das Rendern von seinem Status abhängt, z. B. beim Abrufen von Daten vor dem Rendern
  3. Bei Abhängigkeit von Daten, die nicht als Props weitergegeben werden können

Syntax

Eine zustandslose Komponente kann props rendern, während eine zustandsbehaftete Komponente sowohl props als auch Zustände rendern kann.

In zustandslosen Komponenten werden die Props als {props.name} angezeigt.

In zustandsbehafteten Komponenten werden die Props und der Zustand als {this.props.name} bzw. {this.state.name} gerendert.

Komponenten

Komponenten in ReactJS sind unabhängige Funktionalitäten. Sie beschreiben Teile der Benutzeroberfläche. Sie erhalten ein „Eigenschaften“-Objekt und geben ein React-Element zurück. Eine Komponente ist somit ein Grundbaustein einer React-Anwendung. Sie kann entweder eine Klassenkomponente oder eine funktionale Komponente sein.

React-Komponenten sind unabhängig, wiederverwendbar und enthalten JSX (JavaScript XML Syntax), d. h. eine Kombination aus JS + HTML. Sie kann props als Parameter annehmen und ein DOM-Element zurückgeben, das beschreibt, wie die Benutzeroberfläche (UI) aussehen soll.

ReactJS isoliert alle Komponenten. Dies bedeutet, dass Änderungen oder Aktualisierungen an einer Instanz einer Komponente keine Auswirkungen auf alle anderen Instanzen derselben Komponente haben. React ermöglicht es Entwicklern, Designkomponenten effektiv wiederzuverwenden, wodurch sie Zeit sparen und ihren Code akkurater macht.

Vorteile der Entwicklung mit React

Einige der Vorteile der Verwendung von React in hybriden mobilen Anwendungen und Single Page Applications sind:

  • Unidirektionaler Datenfluss
  • Serverseitiges Rendering
  • Virtuelles DOM
  • Wiederverwendbarkeit
  • JavaScript XML
  • Komponenten
  • Unidirektionale Datenbindung
  • Virtuelles DOM
  • Einfachheit
  • Leistung
  • SEO freundlich

Nachteile der Entwicklung mit React

  • JSX Syntax.
  • Schnelles Entwicklungstempo.
  • Etwas langsame Dokumentation.

Anwendungen basierend auf React

Verschiedene Arten von Anwendungen, die Sie mit React erstellen können, umfassen:

  • Blogs (Gatsby)
  • Business-Websites
  • Portfolios
  • Foren
  • Bewertungswebsites
  • Sites mit Mitgliedschaft
  • E-Learning-Module
  • Persönliche Websites zur Eigenwerbung
  • Jobbörsen
  • Branchenverzeichnisse
  • Q&A-Websites wie Quora
  • Non-Profit-Websites zum Sammeln von Spenden
  • Wikis und Wissensdatenbanken
  • Medienorientierte Websites wie YouTube
  • Auktions- und Couponseiten

Einige beliebte Apps basierend auf React:

Wann gelingt IT Outsourcing?

(und wann nicht?)

Für einige Anwendungen ist React wahrscheinlich keine gute Wahl

Wie jede Webentwicklungstechnologie eignet sich auch React gegebenenfalls nicht für jede Art von Frontend. Einige Beispiele für Webentwicklungsprojekte, die React wahrscheinlich vermeiden sollten, wären:

Projekte mit begrenzten Ressourcen

React-Anwendungen sollten von erfahrenen React-Entwicklern erstellt und verwaltet werden. Da React-Entwickler teurer sind als Entwickler in PHP und anderen Sprachen, mit denen großartige statische Websites erstellt werden können, ist das Framework wahrscheinlich keine gute Wahl für kleinere Projekte mit entsprechenden Budgetbeschränkungen.

Statische Anwendungen

React dient zum Skalieren und Verwalten von Zuständen. Wenn Sie nichts skalieren müssen oder wenige bzw. keine Zustände haben, brauchen Sie React nicht wirklich und können sich für eine billigere, einfachere Technologie, wie einfaches HTML oder PHP, entscheiden oder eine Lösung wie WordPress verwenden.

Erste Schritte mit React

Um mit React zu beginnen, müssen Sie npm installieren – den Node Package Manager. Das ist ein Paketmanager für JavaScript und der Standardpaketmanager von NodeJS, wenn es installiert ist.

Er besteht aus einer Befehlszeilenschnittstelle und einer Online-Datenbank mit (kostenlosen) öffentlichen und kaufbaren privaten Paketen, die als npm-Registry bezeichnet wird.

React create-react-app

Bei so vielen Build-Tools ist das Starten eines neuen React-Projekts oft kompliziert. Es verwendet viele Abhängigkeiten, Konfigurationsdateien und andere Anforderungen wie das Einrichten von Babel, Webpack und ESLint, bevor eine einzige Zeile React-Code geschrieben werden kann.

Glücklicherweise beseitigt das CLI-Tool Create React App viele der Komplexitäten und vereinfacht den Prozess der Erstellung einer React-App. Dazu müssen Sie das Paket mit npm installieren und dann einige einfache Befehle ausführen, um ein neues React-Projekt zu erstellen.

Der Befehl create-react-app ist ein ausgezeichnetes Werkzeug für Anfänger und ermöglicht es Ihnen, React-Projekte sehr schnell zu erstellen und auszuführen. Es erfordert keine manuelle Konfiguration. Das Tool umfasst alle erforderlichen Abhängigkeiten wie Webpack und Babel, sodass Sie sich ausschließlich auf das Schreiben von React-Code konzentrieren können. Dieses Tool richtet die Entwicklungsumgebung ein, bietet eine hervorragende Entwicklererfahrung und optimiert die App für die Produktion.

Anforderungen

Die create-react-app wird von Facebook gepflegt und ist plattformübergreifend kompatibel, sodass sie auf allen macOS, Windows und Linux verwendet werden kann.

React zu einer Website hinzufügen

Sie können React innerhalb einer Minute zu einer HTML-Seite hinzufügen. Sie können die Präsenz dann entweder schrittweise erweitern oder auf wenige dynamische Widgets beschränken.

Eine neue React-App erstellen

Wenn Sie ein React-Projekt starten, ist eine einfache HTML-Seite mit Skript-Tags möglicherweise immer noch die beste Option. Die Einrichtung dauert nur eine Minute!

Wenn Ihre Anwendung wächst, sollten Sie ein stärker integriertes Setup in Betracht ziehen. Es gibt mehrere JavaScript-Toolchains, die wir für größere Anwendungen empfehlen. Jede von ihnen kann mit minimaler Konfiguration arbeiten und lässt Sie das umfassende React-Ökosystem voll ausschöpfen.

ReactJS-Codebeispiel

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>   
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  </head>
  <body> 
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, Let's learn ReactJS!!</h1>,
        document.getElementById('app')
      );
   </script>   
  </body>
</html>

React-Anwendungen kompilieren und erstellen

Eine detaillierte Beschreibung der Installations-, Kompilier-, Erstellungs- und Ausführungsprozesse würde den Rahmen dieses Artikels sprengen. Auf dieser Seite finden Sie Details zum gesamten Ablauf zum Ausführen eines React-Codes.

Lokale Entwicklungsumgebung für ReactJS

Befolgen Sie die in diesem Tutorial beschriebenen Schritte, um Ihre lokale ReactJs-Entwicklungsumgebung einzurichten.

Ressourcen

Um als Anfänger mit ReactJS zu beginnen, können Sie Folgendes nachschlagen:

Fazit

In diesem Blog wurden die Grundlagen der Entwicklung mit React behandelt. React wird verwendet, um interaktive Websites zu erstellen, die einfach getestet und verwaltet werden können. Es ist für Entwickler, insbesondere mit JavaScript-Erfahrung, relativ einfach zu erlernen und zu verwenden, erleichtert den Entwicklungsprozess und unterstützt die neuesten JS-Standards (ES6).

K&C – WIR KREIEREN EINZIGARTIGE TECH-LÖSUNGEN SEIT ÜBER 20 JAHREN. WIR VERSCHAFFEN IHNEN IHREN WETTBEWERBSVORTEIL!

Schreiben Sie uns eine Nachricht, um Ihre individuellen Bedürfnisse oder das nächste Projekt zu besprechen.