React Webentwicklung
Subscribe to this collection and be first to get notified when new content arrives.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Subscribe to this collection and be first to get notified when new content arrives.
Ein vollständiger und praktischer Leitfaden für React-Webentwicklung für CTOs und Tech-Führungskräfte.
ARTICLES IN THIS COLLECTION
Da React eine der beliebtesten Lösungen für die Frontend-Entwicklung ist, fragen sich Entscheidungsträger oft, ob ihre Beliebtheit der Qualität entspricht und wie genau ein Projekt von React profitieren kann.
Die wahre Stärke von React liegt darin, wie es Sie dazu bringt, Ihren Code zu schreiben.
Tom Occhino, Technischer Direktor bei Facebook
React-Code gibt dir Vertrauen und Zuverlässigkeit. Die Bibliothek erzwingt keine Codemuster oder Tech-Stack-Lösungen. Aber natürlich passt es nicht perfekt zu jedem Projekt und jedem Team. Dieser Artikel sollte Ihnen jedoch eine Antwort geben, ob es perfekt für Sie ist.
Hinweis: Um den Entscheidungsprozess zu unterstützen, haben wir ein komplexes Handbuch für CTOs erstellt, das geschäftliche Sichtweisen mit Tipps und Vorsichtsmaßnahmen unserer erfahrensten Entwickler kombiniert.
Der folgende Artikel ist nur der Anfang.
Um Benachrichtigungen zu erhalten, wenn neue Kapitel veröffentlicht werden, melde dich für Updates an.
Beginnen wir mit den wichtigsten Informationen zu React (und einem Einblick in das, was Sie in den Kapiteln finden können).
React.js ist eine JavaScript-Bibliothek, die für die Handhabung der View-Ebene von Webanwendungen verwendet wird. Es bietet vollständige Flexibilität in Bezug auf Tools und Architektur. Eine hervorragende Community und die Unterstützung großer Spieler machen React zuverlässig. Für Frontend-Entwickler ist es einfach, React zu erlernen und damit zu arbeiten.
React-Code ist in JavaScript und JSX geschrieben. Aber was entscheidend ist, ist, dass der Code geschrieben deklarativ. Es bedeutet, dass Sie das Ergebnis beschreiben, nicht den Weg, es zu erreichen.
Ein primärer Baustein in React ist ein Komponente. Dadurch können Entwickler den Code wiederverwenden und das Testen, Skalieren und Warten einer Anwendung vereinfachen. Deklarativer Code und Komponenten sind das Gold von React.
Skalierbarkeit und Wartbarkeit sind einer der wichtigsten Geschäftsaspekte bei der Technologieauswahl. Natürlich eignet sich React für komplexe Anwendungen, was von den größten Playern wie Bloomberg, Airbnb oder Codecademy getestet wurde.
Dank der komponentenbasierten Architektur können Entwickler einfach Änderungen vornehmen und Updates, die sich nicht auf die gesamte Anwendung auswirken, sondern nur auf ein Modul.
Es ist auch praktisch, neue Entwickler in das Team einzuführen. Dank der Modularität können Entwickler einfach ein separates Modul extrahieren und die Arbeitslast an ein neues Teammitglied delegieren.
Außerdem ist React dank Virtual DOM sehr schnell. Im Gegensatz zum Real DOM existiert es vollständig im Speicher und bestimmt intelligent, welche Änderungen vorgenommen werden müssen. Die Bibliothek ist auch leicht, was verbessert die Leistung noch mehr.
Wichtiges zum Mitnehmen: Dank der Komponenten lassen sich React-Apps einfach skalieren und sind einfach zu pflegen. Virtual DOM hilft der App, leicht zu bleiben, und wirkt sich positiv auf ihre Leistung aus.
Lassen Sie uns 6 Gründe zusammenfassen, warum Entwicklungsteams React für die Frontend-Entwicklung wählen:
SPA (Single-Page Applications) ist bei React die Standardeinstellung, aber wenn wir es mit externen Bibliotheken verwenden, eignet es sich auch perfekt für andere Lösungen.
Da React aus Komponenten besteht, macht es die Bibliothek einfach und bequem, umfangreiche Apps zu erstellen. Komponenten richtig zusammenstellen und kombinieren ermöglicht es Entwicklern, die Kontrolle zu übernehmen selbst über die schwierigste Architektur hinweg. Außerdem ist die Bibliothek stabil und wird von großen Playern unterstützt, sodass es sich um eine sichere Lösung handelt.
Für Echtzeitanwendungen benötigen wir eine hochreaktive Benutzeroberfläche, da die Änderungen schnell angezeigt werden müssen. React and Redux ist dafür ein perfektes Team. React funktioniert perfekt mit ereignisorientierter Architektur, wenn Ereignisse über Web-Sockets gesendet werden. Redux verwaltet den Zustand der Elemente, aktualisiert die Ansicht, wenn sich etwas ändert, und ermöglicht es uns, deklarativ zu beschreiben, was passiert ist.
Es ist Zeit für ein paar Beispiele für React-Webentwicklung. Wir sind uns ziemlich sicher, dass du React-Anwendungen jeden Tag verwendest, während du durchscrollst Facebook, Instagram, oder schauen Sie sich Ihre Lieblingsfernsehserie an Netflix.
Aber es gibt viel bekanntere Spieler, die es benutzt haben. Asana Ich wechselte von Luna zu React, als Probleme auftraten, insbesondere mit der Skalierung.
Unter Unternehmen, die React verwenden, finden Sie auch:
Angular, React und Vue sind die JavaScript-Frameworks/Bibliotheken, die seit einiger Zeit auf dem Markt präsent sind. Wenn Technologieführer ein Frontend-Framework für ein neues Projekt auswählen müssen, findet der Kampf meistens zwischen diesen dreien statt.
Angular und React sind sich ähnlicher als Sie denken. Das liegt daran, dass das Angular-Team bei der Modernisierung des Frameworks und der Reduzierung der Codepakete hervorragende Arbeit geleistet hat.
Was sie unterscheidet, ist, dass Angular ein großes Ökosystem ist, das Codemuster und die Verwendung bestimmter Tools durchsetzt, während React eine Bibliothek zum Erstellen von Benutzeroberflächen ist, die Flexibilität in Bezug auf Tools und Codemuster unterstützen.
Außerdem hat Angular eine anderes Denkmodell, was näher an den Backend-Sprachen liegt. Deshalb ist es für Backend-Entwickler einfach, es zu verstehen und damit zu programmieren. Die React-Lernkurve ist für Frontend-Entwickler flacher.
Beide Frameworks sind modern, eigensinnig und unterstützen die Erstellung von Anwendungen mit Komponenten. Sie verwenden auch Virtual DOM, was die Leistung verbessert.
Was React und Vue unterscheidet, ist, dass React eine großartige Community hat, die Entwickler unterstützt. Die Mitwirkenden von React haben bereits viele nützliche Lösungen entwickelt, die die Entwicklung beschleunigen und erleichtern. Da Vue noch ziemlich neu ist, Die Gemeinschaft ist klein und es gibt nicht viele vorgefertigte Lösungen.
React Native ist ein auf React.js basierendes Framework zum Schreiben plattformübergreifender Apps für Android und iOS.
Die Apps werden mit JavaScript und JSX geschrieben. Dann, unter der Haube, ruft eine Bridge die native Rendering-API in Objective-C und Java auf. Daher wird eine App mit echten Komponenten der mobilen Benutzeroberfläche gerendert, nicht mit Webansichten. Dank dessen sieht es aus und fühlt sich an wie jede andere mobile App.
Wenn Sie planen, eine zu entwickeln Web und eine mobile App, die Verwendung von React und React Native ist eine perfekte Lösung. Ein Großteil des Codes kann zwischen diesen beiden geteilt werden, und React-Entwickler werden React Native schnell nachholen.
React ist flexibel in Bezug auf den Backend-Stack. Sie können eine Technologie wählen, die zu Ihrem Projekt oder beispielsweise zu Ihrem Standort passt (vielleicht gibt es in Ihrer Nähe viele Entwickler von Node.js und keine Golang-Entwickler).
Node.js scheint die bequemste Wahl für die Backend-Entwicklung zu sein, da Ihr Team JavaScript-Code gemeinsam nutzen kann. Dann kann es ausreichen, Full-Stack-JavaScript-Entwickler einzustellen, die sich um das Frontend und das Backend kümmern.
React-Frontends können mit folgenden Backends kombiniert werden:
Wenn eine Legacy-App zu einem Problem wird, ist React eine Lösung. Es ist modern, wird ständig verbessert und kann mit jedem Technologie-Stack kombiniert werden.
Der Migrationsprozess ist einfach und kann dank der Komponenten schrittweise durchgeführt werden.
Daher können auch umfangreiche Apps problemlos zu React migriert werden. Der einzige Haken an einer schmerzlosen Migration besteht darin, sie Schritt für Schritt durchzuführen. eine Komponente nach der anderen. Sorgfältige Planung und Strategie machen den Prozess einfacher und effizienter und verhindern Funktionsstörungen Ihrer App.
Zu den Technologien, von denen Unternehmen häufig zu React migrieren, gehören:
Beginnen wir mit der Tatsache, dass Virtual DOM bereits viele häufig auftretende Leistungsprobleme löst. Ein sich wiederholendes Leistungsproblem in ReactJS ist jedoch mit einer komplexen, langen Liste von Elementen verbunden. Zum Glück ist es ziemlich einfach zu beheben — mithilfe virtualisierter Listen.
Bevor Sie sich jedoch für React entscheiden, sollten Sie wissen, dass das Hinzufügen zu einer vorhandenen Anwendung diese nicht schneller oder einfacher macht. Ganz im Gegenteil. Ihr Team muss einen Teil der Frontend-Codebasis durch React ersetzen — dann werden Sie die erwarteten Ergebnisse sehen.
Typische React-Apps, Single-Page-Anwendungen, funktionieren reibungslos, sind aber nicht SEO-freundlich.
Wenn wir möchten, dass unsere App von Google indexiert wird, benötigen wir serverseitiges Rendern. Das beste Tool dafür ist Next.js.
Beim serverseitigen Rendern rendern wir den HTML-Code auf unserem Server vor. Dann indexiert der Crawling-Bot unsere Website ordnungsgemäß, während wir die Geschwindigkeit und das schnelle Laden für unsere Besucher beibehalten.
Der große Vorteil von React ist, dass Sie klein anfangen und weitere Tools hinzufügen können, wenn Sie sie benötigen.
React ist schmerzlos erweiterbar und zwingt Entwickler nicht, bestimmte Lösungen zu verwenden. Außerdem hat die React-Community viele Lösungen entwickelt, die für typische Anwendungsfälle wie Styling, Routing oder Statusmanagement geeignet sind.
Diese Bibliotheken helfen dir dabei, deine React-App zu erweitern:
Redux ist ein State-Container für JavaScript-Anwendungen und eine flexible, eigenständige Bibliothek. Es speichert den gesamten Status einer Anwendung in einer zentralisiert Standort. Ziel ist es, Entwicklern zu ermöglichen, die Daten an einem Ort zu speichern und überall in der Anwendung darauf zuzugreifen.
Wenn Sie mit der Kombination von React und Redux noch nicht vertraut sind, finden Sie hier ein kurzes Tutorial, das Schritt für Schritt zeigt, wie Sie eine einfache React-Redux-App erstellen.
Wenn Sie Probleme mit der Erweiterung Ihrer React-App, der Migration vom alten Stack haben oder einfach nur Mentoring und Rat suchen, können Ihnen einige Unternehmen helfen.
Die Beliebtheit von React kann ein Vorteil sein und das Gegenteil. Einerseits kennen viele erfahrene Entwickler alle Best Practices und Tricks. Andererseits macht es die Popularität schwierig, die Juwelen in der Menge zu finden.
Bei der Auswahl eines Partners für Ihr Projekt, auch wenn es eine Herausforderung sein kann, suche nach denen, die Beurteilen Sie Ihre Vision, weisen Sie auf Vor- und Nachteile hin und weisen Sie die bestmögliche Richtung ein.
Tech-Stack-Entscheidungen zu treffen, ist eine ernste Aufgabe. Wenn Sie React näher kennenlernen möchten, gehen Sie in den nächsten Kapiteln detailliert auf die Funktionen von React ein und dann auf deren Skalierbarkeit, Sicherheit und Wartung (wichtige Punkte aus geschäftlicher Sicht).
Denken Sie auch daran, Handbuch-Updates zu abonnieren, wenn Ihnen das, was bereits hier ist, gefallen hat.
