Bevor Sie es für Ihren Tech-Stack auswählen, erfahren Sie mehr über React: seine Komponenten, virtuelles DOM, Flexibilität und einfache Entwicklung. Finden Sie heraus, wie es sich von anderen Frontend-Frameworks unterscheidet, entdecken Sie mögliche Einschränkungen und Möglichkeiten, mit ihnen umzugehen.
A QUICK SUMMARY – FOR THE BUSY ONES
React ist eine Bibliothek zum Erstellen von Benutzeroberflächen, die ihren Zweck perfekt erfüllt und Entwicklern Freiheit und Flexibilität bietet. Um Apps zu erstellen, verwenden Entwickler JavaScript und JSX. Komponenten und deklarativer Code sind das Beste an React.
Virtual DOM verbessert die Leistung, und JSX ermöglicht es Programmierern, die Benutzeroberfläche mit einer Syntax zu erstellen, die HTML sehr ähnlich ist. Komponenten ermöglichen es Entwicklern, selbst die größten Projekte mühelos abzuwickeln.
Flexibilität in Bezug auf Tools, Architektur und Codemuster ist ein Vorteil für erfahrene Entwickler und kann für unerfahrene Entwickler ein Hindernis sein. Die Lernkurve von React ist für diejenigen, die keine Erfahrung mit Frontend haben, steiler. Für diejenigen, die sich mit Frontend oder JavaScript auskennen, ist es einfach, React nachzuholen.
React wird von vielen großen Unternehmen unterstützt und wird daher auch in den kommenden Jahren eine stabile Lösung bleiben.
Die Community von React ist riesig und aktiv, sodass es einfach ist, erfahrene Entwickler zu finden, nach Hilfe zu suchen und vorgefertigte Lösungen zu finden.
Die Standardeinstellung für React ist eine SPA (Single Page Application). Wenn wir serverseitig gerenderte Anwendungen erstellen möchten, müssen wir andere Tools wie Next.js oder Gatsby verwenden. React gibt uns Freiheit in Bezug auf das Backend.
Angular, React und Vue sind heutzutage die drei beliebtesten JavaScript-Frameworks/Bibliotheken. Sie sind sich ähnlicher als Sie vielleicht denken, passen aber zu unterschiedlichen Kompetenzen und leicht unterschiedlichen Projekten.
Die häufigsten Probleme auf hoher Ebene mit React beziehen sich auf die Ordnerstruktur und die Heterogenität der Umgebung. Unerfahrene Entwickler können die Auswahl einer geeigneten Bibliothek als problematisch empfinden und den Code ineffizient strukturieren.
TABLE OF CONTENTS
Die Bibliothek zum Erstellen von Benutzeroberflächen mit wiederverwendbaren Komponenten. Keine vorgeschriebenen technologischen oder architektonischen Lösungen. Flexibilität und Zuverlässigkeit. Das ist React auf den Punkt gebracht.
<blockquote><p>Es ist [...] ein mächtiges Tool, das vielleicht ändern Sie die Art und Weise, wie Sie an die Frontend-Entwicklung herangehen. [...] Anstatt des üblichen Ansatzes zum Schreiben von Benutzeroberflächen behandelt React jedes UI-Element als eine in sich geschlossene Zustandsmaschine.</p> <p>— Bonnie Eisenmann, ehemaliger Software-Ingenieur bei CodeAcademy.com, jetzt technischer</p></blockquote> Leiter bei Twitter
Wenn du React für deinen Tech-Stack in Betracht ziehst, gibt es ein paar Dinge, die du wissen solltest. Lassen Sie uns auf die Einzelheiten eingehen: React-Funktionen, Flexibilität, Lernkurve, mögliche Tech-Stack-Lösungen. Ebenfalls enthalten: Ratschläge eines erfahrenen Ingenieurs zur Ordnerstruktur, die Sie in den Tutorials nicht finden.
React ist eine der beliebtesten JavaScript-Bibliotheken zum Erstellen von Benutzeroberflächen. Hinweis: Es ist eine Bibliothek, kein Framework (auch wenn es oft so genannt wird).
<blockquote><p>Sie können sich Code aus einer JavaScript-Bibliothek in Form von Möbeln und Dekorationen für ein Haus vorstellen, das Sie bereits gebaut haben, während ein Framework eine Modellvorlage für Ihr Zuhause ist, mit der Sie ein Haus bauen.</p> <p>— Skill Crush</p></blockquote>
Frameworks schränken die Flexibilität in Bezug auf Tools, Technologie-Stack und Codemuster ein. React schränkt es in keiner Weise ein. Es hat eine einfache Aufgabe: machen Sie das Erstellen von Benutzeroberflächen einfach und leistungsstark. Und es erfüllt seinen Zweck perfekt.
<blockquote><p>Nachdem wir mehrere Jahre mit JS-Frameworks gearbeitet haben, wissen wir alle, dass Frameworks oft aufgebläht sind und Sie dazu zwingen, Dinge einzubeziehen, die Sie nicht benötigen. Das mag in der serverseitigen Welt in Ordnung sein, aber bei Web-Apps ein erheblicher Nachteil</p>. <p>— Rich Manalang, ehemaliger Architekt und Teamleiter bei Atlassian, über den Neuaufbau von HipChat mit React</p></blockquote>
Die Standardeinstellung für React sind SPAs (Single Page Applications). Wenn Sie eine komplexe Anwendung erstellen, müssen Sie React höchstwahrscheinlich mit anderen Bibliotheken und Tools verwenden. Da es keine Abhängigkeiten gibt, wählen Sie und Ihr Team den gesamten Tech-Stack aus.
Danke an Komponenten und Modularität React ist perfekt für große Apps. Es wird jedoch empfohlen, bei der Erstellung einer React-App von Anfang an einen großen Maßstab zu berücksichtigen, während Sie die Architektur entwerfen und Ordner strukturieren.
<span class="colorbox1" fs-test-element="box1">Tipp: Wie man Ordner strukturiert, erklären wir später anhand von Beispielen.</span>
Um mit React zu programmieren, Entwickler verwende JavaScript und eine spezielle Funktion namens JSX. React-Apps bestehen aus wiederverwendbaren Komponenten. Der Code ist deklarativ.
Mit deklarativem Code teilen Entwickler JavaScript mit, was zu tun ist. Was, nicht wie. Deklarativer Code ist eine ergebnisorientierte Anweisung, die beschreibt, was wir wollen (das Endergebnis), anstatt wie wir es wollen.
Im Fall von React ist die Bibliothek dafür verantwortlich, alle Schritte auszuführen, die zum Erreichen des Ergebnisses erforderlich sind. Manchmal kann es eine Herausforderung sein, da das Team wissen muss, wie die Ergebnisse definiert werden, aber am Ende ist der deklarative Code auf lange Sicht einfacher zu lesen und zu verwalten.
Es ist eine Spracherweiterung, die es Webentwicklern ermöglicht, DOM mithilfe von HTML-Code einfach zu ändern. Entwickler schreiben den Code mit einer HTML-ähnlichen Syntax, die in reines JavaScript übersetzt wird. Die Verwendung von JSX zur Aktualisierung des DOM führt zu erheblichen Leistungsverbesserungen.
Traditionell verwendet eine Website HTML-Seiten, die von einem Server abgerufen wurden, um die Ansicht zu aktualisieren. Bei Websites, die eine hohe Benutzerinteraktion erfordern, kann dies die Leistung erheblich beeinträchtigen, da das gesamte DOM jedes Mal neu geladen werden muss, wenn ein Benutzer auf eine Funktion klickt, die eine Seitenaktualisierung erfordert.
In React geschriebene Single-Page-Apps müssen keine externen HTML-Seiten von einem Server abrufen. Mit JSX können Entwickler ein virtuelles DOMerstelleneine Kopie eines echten DOM React verwendet, um zu sehen, welche Teile geändert werden müssen, wenn ein Ereignis eintritt. Virtual DOM bestimmt, welche Änderungen vorgenommen werden müssen, und aktualisiert den jeweiligen Abschnitt intelligent. Es benötigt weniger Rechenleistung und Ladezeit. Als Konsequenz ist es verbessert die Leistung viel.
Um React-Apps zu schreiben, erstellen Entwickler Komponenten, die verschiedenen Oberflächenelementen entsprechen. Jede Komponente steht für ein kleines, wiederverwendbares Stück HTML, hat seine eigene Logik und Steuerung. Es kann einen internen Zustand aufrechterhalten. Komponenten machen Komponententests einfacher.
Um die Struktur einer Anwendung zu definieren, Komponenten sind logisch in einer baumartigen Struktur organisiert, wobei Komponenten auf höherer Ebene Komponenten auf niedrigerer Ebene kapseln. Komponenten können innerhalb anderer Komponenten verschachtelt werden, was die Erstellung komplexer Anwendungen mit einfachen Bausteinen ermöglicht.
<blockquote><p>Obwohl es möglich ist, Modularität mit einem klassischen Vererbungsmuster zu erreichen, wirken sich häufige Änderungen an Superklassenschnittstellen zur Unterstützung neuer Funktionen auf bestehende Unterklassen aus und erhöhen die Codefragilität. Das Kompositionsmuster von React ist ideal für die allgemeine Wartung und Skalierbarkeit unserer Frontend-Codebasis, da es einen Großteil des</p> A/B-Testcodes isoliert. <p>Jordanna Kwok, technische Leiterin bei Netflix</p></blockquote>
React verwendet eine unidirektionale Datenbindung: Es bindet nur den Wert des Modells an die Ansicht, nicht umgekehrt. Die Informationen fließen nur in eine Richtung. Entwickler ändern den Status der Komponente, und Aktualisierungen werden an die Komponenten weitergegeben, die in ihnen verschachtelt sind. Die Daten können nur von einer Komponente in die Ansicht übertragen werden, nicht andersherum.
<span class="colorbox1" fs-test-element="box1">Wichtig: Komponenten ändern die Daten, die sie erhalten haben, nicht.</span>
Die bidirektionale Datenbindung, die in Frameworks wie Angular verwendet wird, bedeutet, dass bei Datenänderungen im Modell (das Modell wird aktualisiert) auch die Benutzeroberfläche aktualisiert wird, und wenn UI-Elemente aktualisiert werden, diese Änderung zurück an das Modell übertragen wird. Manchmal kann es zu Nebenwirkungen kommen.
<blockquote><p>Der „einseitige Datenfluss“ sprach alle Entwickler im Team an, da er eine nette Art war, über Interaktionen mit einer UI-Anwendung nachzudenken. Dies fühlte sich auch nach einer guten Lösung an, um das Debuggen und das Verständnis von Datenflüssen viel einfacher und vorhersehbarer zu machen</p>. <p>— Subramanyan Murali, ehemaliger technischer Leiter, Yahoo Mail</p></blockquote>
React ist fair leicht zu erlernen, besonders für Entwickler, die sich mit JavaScript auskennen. Wenn Ihr Team jedoch keine solide Frontend-Erfahrung hat, kann es für sie schwieriger sein, React zu erlernen. Warum?
React bietet viel Flexibilität in Bezug auf Architekturmuster, zusätzliche Tools und Bibliotheken von Drittanbietern.
Einerseits ist diese Flexibilität ein großer Vorteil für Frontend-Experten. Eine Bibliothek ohne Meinungen ermöglicht es einem Team, jeden einzelnen Aspekt an die Anforderungen des Produkts anzupassen. React bietet ihnen viele Optionen, es ist einfach und angenehm, damit zu arbeiten.
Andererseits ist es leicht, ein Durcheinander in der Architektur zu verursachen, wenn unerfahrene Entwickler anfangen, in React zu programmieren. Bei großen Teams müssen Sie außerdem Bleiben Sie in Sachen Vereinheitlichung am Puls der Zeit: mit den gleichen Werkzeugen und Mustern.
<span class="colorbox1" fs-test-element="box1">Wichtiger Tipp zum Mitnehmen: Die Flexibilität von React erleichtert erfahrenen Frontend-Entwicklern die Arbeit und kann für andere ein Hindernis sein (achten Sie auf die Vereinheitlichung in Bezug auf Tools und Muster)</span>.
React.js wird von den größten Playern unterstützt. Wie jeder weiß, bleibt Facebook dahinter, aber viele große Unternehmen wie Airbnb, Slack, Lyft sind damit beschäftigt, das Ökosystem rund um React aufzubauen.
Das macht React zu einer stabilen Lösung. Wir können sicher sein, dass die Bibliothek jahrelang unterstützt wird. Auch wenn React selbst das tun würde In ein paar Jahren komplett aufhören zu expandieren, es wird für die nächsten 20 unterstützt. Das macht es zu einer stabilen Lösung für Apps, die expandieren und lange auf dem Markt sein wollen.
Die Community von React ist riesig, sodass es einfach ist, Experten einzustellen. Laut Der Stand von JavaScript 2019, Die Erfahrung mit React nimmt im Laufe der Zeit stetig zu. Mehr als 70% der befragten Entwickler haben Erfahrung mit React und gaben an, dass sie es kontinuierlich verwenden werden.
Die React-Community auf GitHub ist ebenfalls stark. Einerseits ist das ein Indikator für die Verfügbarkeit von Talenten. Auf der anderen Seite bedeutet eine große Community mehr Unterstützung, wenn Ihre Entwickler Hilfe benötigen. Außerdem der React Community ist sehr aktiv und erstellt nützliche Tools und Lösungen, die öffentlich verfügbar sind.
Sie müssen jedoch während des Rekrutierungsprozesses vorsichtig sein, da eine große Community auch dazu führen kann, dass es schwieriger ist, die besten aus der Menge auszuwählen.
Redux ist ein Tool für das Bühnenmanagement, das mit jedem JavaScript-Framework oder jeder JavaScript-Bibliothek verwendet werden kann.
Der Zustand aller Komponenten hängt von einem Stammobjektbaum ab. Dadurch lässt sich Ihre App leichter als Ganzes betrachten und debuggen. Entwickler können die Modellogik einfach und skalierbar von der Ansicht trennen und den Status lokal oder auf einem Server schreiben. Redux bietet Ihnen auch einige großartige Debugging-Tools.
React und Redux bilden einen perfekten Tech-Stack für Echtzeitanwendungen.
Gatsby wird zusammen mit React verwendet, um statische Websites zu erstellen. Es ist nützlich, wenn sich der Inhalt nicht in Echtzeit ändert. Gatsby kümmert sich um alles: generiert eine statische Website aus einem JavaScript-Code, füllt die Lücken im Code und ermöglicht eine einfache Kommunikation mit Datenquellen. React und Gatsby funktionieren gut mit beliebten Headless-CMSs.
Next.js wird verwendet, um zu schreiben serverseitiges Rendern für React-Apps. Serverseitiges Rendern ermöglicht es Entwicklern, die Navigation auf die Clientseite zu übertragen und nur Teile der Website hochzuladen, nicht die gesamte.
Next.js wird auf Node.js gestartet und enthält viele nützliche Standardlösungen, die eine hervorragende Leistung bieten. Das Team dahinter hat viele Optimierungen vorgenommen.
Next.js ist perfekt für E-Commerce: Google versteht es, Kunden erhalten die Inhalte schnell und können einfach navigieren.
React passt gut zu jeder Tech-Stack, den wir wählen, Das heißt, Sie können jedes Backend verwenden.
Node.js scheint die beste Wahl zu sein, wenn Sie ein Team verwenden möchten, um das Frontend und das Backend Ihrer Webanwendung zu erstellen.
Angular, React und Vue sind die beliebtesten und am häufigsten verwendeten JavaScript-Frameworks/Bibliotheken. Sie sind sich doch sehr ähnlich jeder von ihnen passt zu den Fähigkeiten eines anderen Teams.
Da Angular sehr eigensinnig ist, können Frontend-Experten Schwierigkeiten haben, seine Regeln zu befolgen. React und Vue sind beide flexibel und für diejenigen, die erst mit der Frontend-Entwicklung beginnen, schwer zu handhaben. Vue ist relativ neu und baut seine Position auf dem Markt aus, aber die Position von React und der Community rund um die Bibliothek ist größer.
Angular ist das ausgereifteste dieser drei Frameworks. Es bietet eine ganze Plattform mit einer Komplettpaket von Werkzeugen. Manche halten es für einen Vorteil, andere nicht, da es die Flexibilität einschränkt. Die Lernkurve für Frontend-Experten ist steil und die Konzepte scheinen komplex zu sein. Es ist sehr eigensinnig, wird also eine bessere Wahl für fragmentierte Teams und Backend-Entwickler sein. Angular wird von Google unterstützt, aber sie konzentrieren sich auch auf andere Technologien.
React wird von der Community geliebt, bietet eine Menge Unterstützung von den Mitwirkenden und nützliche, öffentlich zugängliche Lösungen. Es ist einfach zu integrieren mit anderen Frameworks. Es bietet nicht so viel wie Angular, aber es erfüllt seinen Teil perfekt. Es wird von den größten Akteuren unterstützt, was es für langfristige Projekte zuverlässig macht. Es gibt viele Talente auf dem Markt. React ist die perfekte Wahl für große Apps, da es Modularität bietet. Entwickler müssen jedoch wissen, wie man damit umgeht.
Vue hat keine Unterstützung von einem großen Unternehmen und ist hier das jüngste Unternehmen. Entwickler mögen es, weil es sehr flexibel. Für einige Teams kann es jedoch zu flexibel und für unerfahrene Teams schwer zu verwenden sein. Es hat die niedrigste Lernkurve für Frontend-Experten und hoch für Backend-Geräte. Vue hat die kleinste Gemeinde und es fehlen einige Plugins, aber es wächst stetig, ist das leichteste und bietet eine hervorragende Leistung.
React ist perfekt für einen großen Maßstab, aber Entwickler müssen sich von Anfang an um die Architektur und Ordnerstruktur kümmern.
Unglücklicherweise Tutorials erwähnen das nicht.
In den letzten 2-3 Jahren hat die Community lauter über diese Probleme gesprochen. Wir haben es auch in Projekten gesehen, an denen wir gearbeitet haben. Ob langweilig oder nicht, dieses Thema ist von entscheidender Bedeutung, insbesondere für große Apps.
Anstatt der Ordnerstruktur aus den Tutorials zu folgen, empfehlen wir, sie unter dem Gesichtspunkt der Abstraktion und Zusammensetzung zu betrachten, Feature-Ordner zu verwenden, häufig zu überarbeiten und eine Architektur zu erstellen, die auf begrenzter Kontext (das zentrale Muster in Domain-Driven Design).
<blockquote><p>DDD befasst sich mit großen Modellen, indem es sie in verschiedene begrenzte Kontexte unterteilt und ihre Wechselbeziehungen explizit beschreibt.</p> <p>— Martin Fowler</p></blockquote>
Dann lautet die goldene Regel bei der Strukturierung von Ordnern Bewahren Sie Dinge in der Nähe des Ortes auf, an dem Sie sie verwenden.
Wie könnte es in einer React-App aussehen? Schau dir dieses Beispiel an:
Warum sollte es dich interessieren? Die Struktur aus den Tutorials skaliert einfach nicht. Ordner wie „Services“ oder „Repositorys“ wachsen endlos und die Teammitglieder müssen sich mentale Bilder erstellen, um Code aus verschiedenen Ordnern miteinander zu verbinden. Wenn Sie es zusammenhalten, wird das Problem gelöst.
Die oben dargestellte Struktur ermöglicht eine hohe Skalierbarkeit und macht die Entwicklung effizienter. Es ist einfacher, Änderungen vorzunehmen und die App zu testen, und neue Entwickler haben einen leichteren Start. Wenn Sie Skalierbarkeit im Sinn haben, kümmern Sie sich von Anfang an um die Ordnerstruktur und machen Sie es richtig.
React bietet viele Lösungen, die dieselben Probleme lösen. Alle von ihnen sind beliebt und es gibt keinen besten, der von der Community ausgewählt wurde.
Es kann beides sein: Vorteil und das Gegenteil.
Einerseits gibt es uns die Möglichkeit, die beste Lösung für unseren speziellen Fall zu wählen, und die Auswahl ist immer breit gefächert. Auf der anderen Seite Wir müssen bewusst wählen und uns darum kümmern, dass jeder Entwickler eine konsistente, relevante Umgebung beibehält. Wenn jeder Entwickler unterschiedliche Tools verwendet, können die Dinge aus den ausgetretenen Pfaden geraten: Der Code wird ineffizient und es entstehen Fehler.
Viele Unternehmen entscheiden sich für React aufgrund der Freiheit und Flexibilität, die es bietet, zusammen mit der Stabilität, der unterstützenden Gemeinschaft und einem großen Talentpool. Das gesamte Ökosystem bietet viele nützliche Tools und gibt uns die Freiheit, den Technologie-Stack für unsere Anwendung auszuwählen. In der Zwischenzeit macht React seine Arbeit hervorragend — es kümmert sich um die Benutzeroberfläche unserer Anwendung.
Frontend-Entwickler werden React im Vergleich zu Angular höchstwahrscheinlich einfacher erlernen und programmieren können. Im Vergleich zu Vue ist es stabiler und verfügt über eine größere Community und einen größeren Talentpool.
React scheint perfekt für große Apps zu sein, aber das Architekturdesign und die Ordnerstruktur wurden von Anfang an berücksichtigt.
Ist es das richtige JavaScript-Framework für Ihr nächstes Projekt? Die Wahl liegt bei Ihnen.
Wenn Sie React weiter erkunden müssen, Das nächste Kapitel dieses Handbuchs befasst sich eingehender mit Skalierbarkeit, Wartung, Leistung und Sicherheit von Reactentscheidende Aspekte bei der Bewertung der wirtschaftlichen Rentabilität der Technologie.
Our promise
Every year, Brainhub helps 750,000+ founders, leaders and software engineers make smart tech decisions. We earn that trust by openly sharing our insights based on practical software engineering experience.
Authors
Enthusiast für Softwareentwicklung mit 8 Jahren Berufserfahrung in der Technologiebranche. Erfahrung im Outsourcing von Marktanalysen, mit besonderem Schwerpunkt auf Nearshoring. In der Zwischenzeit unser Experte darin, technische, geschäftliche und digitale Themen auf verständliche Weise zu erklären. Autor und Übersetzer nach Feierabend.
Enthusiast für Softwareentwicklung mit 8 Jahren Berufserfahrung in der Technologiebranche. Erfahrung im Outsourcing von Marktanalysen, mit besonderem Schwerpunkt auf Nearshoring. In der Zwischenzeit unser Experte darin, technische, geschäftliche und digitale Themen auf verständliche Weise zu erklären. Autor und Übersetzer nach Feierabend.
Read next
Popular this month
previous article in this collection
It's the first one.
