React.js: Einführung in React.js

Hallo, mein Name ist Tony und ich bin dabei. In diesen Lektionen erfahren Sie, warum Sie React gegenüber Plain wählen JavaScript in HTML und erstellen Sie mit Erstellen eine neue React-App React-App-Dienstprogramm. In dieser Lektion werfen wir einen Blick darauf, was React wirklich ist und wie es dazu kam. React ist eine JavaScript-Bibliothek. Es ist Open Source, also die Quelle. Der Code ist für jedermann zugänglich und einsehbar. Und es wurde von Facebook mit erstellt. Die Absicht, auch das Web zu vereinheitlichen. Als mobiles User Interface Design unter einem gemeinsamen Dach. Den ersten gibt es eigentlich schon eine ganze Weile Version von. React wird der Öffentlichkeit vorgestellt als. Schon im Jahr 2013. Seit etwa 2018 ist es jedoch sprunghaft gewachsen Dies führt zu anderen erweiterten Frameworks wie NextJS tatsächlich React als Basis verwenden und darauf aufbauen. Von seinen bereits beeindruckenden und umfassenden Fähigkeiten. React wird hauptsächlich für dynamische Anwendungen verwendet. Das bedeutet, dass sich ihr Inhalt mit den Daten ändert. Hinter den Schnittstellenänderungen. Jetzt mit einer Standard-Old-School-Website. War nicht der Fall. Also jedes Mal, wenn ein Benutzer gehen würde. Zu einer neuen URL, die mit einem verknüpft ist. Bei der Anwendung müsste eine neue HTTP-Anfrage gestellt werden und so weiter des Inhalts, aus dem die Seite besteht. Also jede einzelne Grafik, alles für den Overhead Menü, die Seitenleiste, die Fußzeile. Müssen von Grund auf neu erstellt und neu gerendert werden Mal wieder. Wenn Sie sich vorstellen können, ist dies nicht der Fall. Sehr effizient und React löst dieses Problem. Durch die Verwendung von partiellem Rendering und Datenhydrierung. Das bedeutet, sobald unsere Vorlage geladen ist Browser, nur die. Daten, die vom aktuell angezeigten Status abweichen, werden aktualisiert. Im Gegensatz zu einer Website der alten Schule, auf die man sich verlassen konnte. Das Client-Server-Modell der alten Schule. Was das bedeutet, dass die einzigen Teile. Diese Änderungen am Bildschirm des Benutzers sind die Unterschiede vom aktuell angezeigten Zustand. Daher führt das Navigieren von Seite zu Seite nicht mehr zu einem vollständigen Seitenwechsel Neudarstellung aller einzelnen Dinge, die ein Benutzer sieht. Dies führt zu einem wesentlich effizienteren Datendurchsatz Strategie, da weniger Daten vom Server übertragen werden müssen an den Client. Darüber hinaus nutzt React eine weitere Funktion, um eine zu erreichen Leistungssteigerung ist der Einsatz von Shadow Dom. Mittlerweile sind Sie höchstwahrscheinlich vertraut. Mit unserem Standard-Dom, aber eben dazu. Stellen Sie sicher, dass wir alle eingeschaltet sind. Auf derselben Seite ist „dom“ ein Akronym. Was für Document Object Module steht. Bei der Nutzung unserer Internetseite handelt es sich ansonsten um ein Dokument in den Browser geladen, sein Inhalt wird analysiert und alles die Informationen über das Objekt, seine. Die Struktur sowie alle ihre Bestandteile werden geladen in die Erinnerung. Vom Client oder vom Browser. Aber leider für uns, mit allem, was dazugehört Neben unserer Bewerbung landen auch andere Dinge dort Und. Sie beziehen sich auf die Kernfunktionalität des Browsers. Das ist für uns nicht sehr hilfreich. Und hier kommt Shadow Dom ins Spiel. Shadow Dom ist eine Untergruppe des regulären Doms, und sein Hauptvorteil ist. Dass die einzigen Informationen, die es speichert, die Informationen sind, die betrifft unsere Bewerbung und absolut nichts anderes. Wir haben weniger Zeug in unserem Schattendom. Dann ist Dom natürlich von Vorteil. Und die Tatsache, dass alles auf unsere Bewerbung angewendet wird, bedeutet nur das wir können. Store, extract and manipulate only the parts that we need. This leads to a significant performance boost. React is component based, meaning that to. Achieve the results that we are after, we will break up our application into a series of components to encapsulate each visual part of the user interface. That gives us the ability to reuse. Our component throughout the site, speeding up our development efforts. And additionally, it leads to uniformity in. The application, thus enabling a smoother, less confusing and more comprehensive user experience, since. Components used for similar things will be used in a similar manner throughout the application. Lastly, for those who may be familiar with other JavaScript frameworks, react provides a one way data binding. What that means is the data within. Our application flows in one direction, in one direction only, from the top parent. To the bottom child component. In our next lesson, we will take a look at why we would use React over plain JavaScript in HTML. Thank you for watching. Bye.