Redux-Saga lernen mit Redux-Toolkit in React JS

1. Einführung: Hallo und willkommen zu diesem Kurs , in dem wir lernen werden, wie Sie Redact Saga mit redact Tool Grid in Reha Gs verwenden können . Mein Name ist Tom mit Division und ich werde Ihr Lehrer in diesem Kurs sein. Wenn Sie ein React-Entwickler sind, verwenden Sie möglicherweise einen Router als Statusverwaltung für Ihre React-Anwendung, um den Anwendungsstatus beizubehalten. Und Sie verwenden möglicherweise auch Reductant- oder Redox-Saga-Middleware, um Nebeneffekte in Ihrer React-Anwendung zu behandeln. Lassen Sie mich Ihnen nun denjenigen unter Ihnen, die nicht wissen, was es ist, den kurzen Überblick über Rudolf geben. Redact Failure ist also die State-Management-Bibliothek, die wir in unserer React-Anwendung verwendet haben, sowie die Sie innerhalb der Front-End-Anwendung verwenden werden . Nicht nur bei React, sondern auch bei der React-Bibliothek sehr beliebt. Das ist also der Überblick über Rudolf. Mit Hilfe dieser Anwendung lernen Sie, wie Sie drei Taxa mit Ruder in Flüssigkeit integrieren können . In diesem Kurs werden wir mit Hilfe von Reduct Saga eine Filmsuchanwendung erstellen mit Hilfe von Reduct Saga eine Filmsuchanwendung und ein dunkles Toolkit machen. So redact Tool Kit bereits von unserer verschiedenen Lösung, um den asynchronen Betrieb zu bewältigen. Wahrscheinlich können Sie Anwendungsnebeneffekte verwalten, Wahrscheinlich können Sie Anwendungsnebeneffekte verwalten einen Think Tank erstellen, sind RTK-Abfragen, aber manchmal möchten Sie es vielleicht um mit redact Saga Ansatz zu gehen, um Ihre Anwendungsnebenwirkung zu behandeln. Mit dieser Anwendung werden wir mit Ride of Total Gate integrieren. Und ich hoffe, Sie haben ein gewisses Verständnis von Redox ADA und Generatorfunktion, da Redox-Saga-Jugendgenerator-Funktion zum Schreiben asynchroner Logik funktioniert. Aber bis ich Ihnen später in diesem Video einen kurzen Überblick über Redox AGA und Generatorfunktion gebe. Lassen Sie uns zunächst eine schnelle Demo der Datenveröffentlichung machen. In diesem Film ist also, dass jede Anwendung, die wir Film holen, der sich auf sein Pulver bezieht. Anfangs passt es mit Hilfe der API von Drittanbietern, die OEM DBAPI genannt werden, etwa zehn Filme . Wann immer Sie es auf einen Film mit einem bestimmten Namen oder einer IMDB-API einstellen , geben Sie nur zehn Filme zurück. Und du hast diesen Circuit gemacht. Sagen wir Jim, ich wollte den Film mit dem Schlüsselwort S durchsuchen. Diesmal mit Rückkehr zu vielen Ergebnissen. Außerdem werden wir nur mit Heterodox- und Redact-Toolkit umgehen . Und du kannst es auch mit einem anderen Filmnamen beginnen , wie Batman. Sie können den Film auch mit einem anderen Filmnamen starten . Und wenn Sie mehr über einen bestimmten Film erfahren möchten, können Sie auf diese Karte klicken. Sie werden nie auf den einzelnen Film zukommen , in dem wir mehr Details zu diesem speziellen Film haben, wie Name, Ohr, Handlung und Regie. Wenn wir auf GoBear Unit klicken, navigieren Sie zurück zur Homepage. Leute, diese Anwendung wird auch reagieren da wir die Material-UI-Bibliothek verwenden werden , um die React-Komponente zu erstellen. Sie können dort sehen, dass diese Anwendung auch reagiert. Dies ist also die allgemeine Verpflichtung , die wir in diesem Kurs mit Hilfe von relativen Saga und Redakt-Toolkits in Riad aufbauen diesem Kurs mit Hilfe von werden. Sprechen wir nun über die Fähigkeiten, die für diesen Kurs erforderlich sind. Dieser Kurs ist so konzipiert, dass jeder an diesem Kurs teilnehmen kann , der daran interessiert ist, modernes Redox-Konzept zu erlernen . Sie müssen nur ein grundlegendes Verständnis von HTML, CSS, JavaScript sowie Reagieren Sie auf Basiswissen. Am Ende dieses Kurses werden Sie verstehen, wie Sie React-Saga mit redact Toolkit in jede React-Anwendung integrieren können. Worauf warten Sie darauf, an diesem Kurs teilzunehmen , um all diese modernen Konzepte zu lernen? Und wenn Sie Fragen oder Vorschläge haben, können Sie sich jederzeit an mich wenden. Ich werde mein Bestes geben , um Ihre Abfrage zu lösen. Das war's. Von meinem Ende sehe ich Sie im Kursbereich. 2. Was ist Redux und warum wir sie verwenden?: In diesem Video werden wir zuerst das Kernproblem des React js Nachlassmanagements verstehen . Wir haben unsere Haupt-App-Komponente. Dann haben wir unsere Unterkomponente bekommen. Wenn wir einen Text ändern wollen, können wir dies nicht direkt tun. Stattdessen muss ich einen Elternteil informieren und den Text dort ändern. Und wenn ich eine zusätzliche Komponente bekomme, wird es noch komplexer. Deshalb haben wir eine Lektüre , von denen ein anderer Ansatz verfolgt wird. Also hier haben wir unsere Ansicht, unsere Anwendung, und in dieser Anwendung wird in einer bestimmten Komponente versandt und handeln. Dann Actionmarke durch den Reduzierstück. Reducer eher einfacher Job oder Aufgabe. Es wird eine Aktion ergreifen, dann wird es alle Manipulierten brauchen, und es wird einen neuen Staat geben. Diese Manipulation wird passieren, backen Sie auf dem Unveränderlichen. Das bedeutet, dass es den alten Vektor nicht ändert. Es wird die gesamte Strecke als Grundlage nehmen und dann eine brandneue Kopie aller abgebildeten Elemente erstellen , die mit den Änderungen in der Ploidie unberührt geblieben sind. Wir schaffen einfach einen neuen Aufhebung und geben diesen neuen Zustand zurück. Dies unveränderlich gibt Ihnen einen eindeutigen Status in Ihrer Anwendung. Jetzt bekommen wir einen neuen Zustand, der reduziert werden kann dann wird er in einem Geschäft gespeichert. Und wir werden nur ein Geschäft in unserer Anwendung haben. Dieser Vektor hat eine einfache Aufgabe, in Richtung unseres Staates zu drängen. Deshalb heißt es Restore. Möglicherweise haben Sie einen Mehrfachreduzierer, aber wir haben nur einen, der in unserer Anwendung gespeichert ist. Dann abonnieren Sie unsere Anwendung diesen Shop. Wann immer es veraltet ist, werde aktualisiert. Neuer State Park im Laden. Der Store sendet es automatisch an die gesamte Komponente und wird weitergeleitet, und die Anwendung wird aktualisiert. Gehen wir nun zurück zum vorherigen Beispiel, in dem wir unsere App-Komponente mit anderen Komponenten hatten. Und jetzt haben wir auch ein Geschäft. Wenn wir nun etwas ändern wollten, die Benutzerkomponente von MainComponent, dann werden wir versenden und handeln. Dann führt der Staat es ein. Und dann liegt uns der Weg allen Komponenten in diesen Daten am Herzen , was reduziert ist und warum wir Redux in React js verwenden. 3. Was ist Redux-Toolkit ?: Lassen Sie uns nun verstehen, was der insgesamt gute Leser zu liquidieren ist , der auch für die Verwaltung von Anwendungen verwendet wird, wenn Sie eine React-Anwendung auf effiziente Weise aussagen. Es werden einige Batterien zur Verfügung gestellt, die ein Werkzeugset für eine effiziente Entwicklung enthalten sind. Diese Batterien enthalten Toolset Begriff, sehen hier ein bisschen schick aus, aber Sie werden diesen Begriff später verstehen. Router waren bereits eine beliebte Option für die Staatsverwaltung in unserer React-Anwendung. Warum ist dann redact Toolkit erforderlich? Mit dem redact Toolkit war so viel Code erforderlich, um es zu konfigurieren, um dieses grundlegende Level zu optimieren. Und damit zu viel Boilerplate-Code , der unseren Code macht, lassen Sie ihn effizient reinigen. Außerdem müssen zu viele Pakete installiert werden, um eine skalierbare Anwendung zu erstellen. Mit traditionellem Redox haben wir früher Action und Reducer in einer separaten Datei geschrieben . Und das wird komplexer, wenn unsere App Sie dazu bringt, diese Herausforderung anzugehen , ein Leser-Toolkit entwickelt hat. Redact Toolkit ist ein besserer Ansatz um Logik loszuwerden. Insgesamt betrachtet der Leser seinen Zeitraum der Reduzierung und Entwicklung durch Einbeziehung des Lesers Corbett redact Tool gute Absätze, die Meinung nach gefüllt sind, um eine native Anwendung zu erstellen. redact Toolkit ermöglicht es Entwicklern also, einfachen, sauberen Redux-Code zu schreiben. Hier geht es also um redact Toolkit und warum wir es mit React verwenden. Ich hoffe, du verstehst diesen ausgefallenen Begriff jetzt, der ein Batterie-Toolset ist. Hier dreht sich also alles um Toolkit. Lasst uns nun verstehen, dass dieser Leser mit einem grundlegenden Szenario gut aussieht . Angenommen, wir müssen eine Zähleranwendung erstellen. Wir müssen es schaffen, dass es immer noch fünf ist. Ich zeige Ihnen die traditionelle Herangehensweise mit traditionellem Reduzieren. Also lesen wir normalerweise Reducer und Unfall in einer separaten Datei. Wie Sie sehen können, haben wir hier x und dot js, in denen wir zwei x Zehn haben zu erhöhen oder den Zählerwert zu dekrementieren und eine Dot-JS-Datei einzuführen, haben wir eine Logik, um eine Zählerwert oder dekrementieren Sie den Zählerwert des Theta. Traditionell schwärzt. Angenommen, lassen Sie uns jetzt sehen, wie wir mit dem Leser umgehen, um gut auszusehen. Im redact Tool könnten wir unseren Reduzierer und unsere Aktion in derselben Datei umschreiben . Sie können sehen, dass wir unsere Aktion bei Reducer unter dem Create Slice durch den Toolkit-Ansatz geschrieben haben unsere Aktion bei Reducer unter dem . Und Sie können den Code viel mehr Konzept machen indem Sie create verwenden. Sowohl der Reduzierer als auch ich können so unter dem Live geschrieben werden, indem man diesen Code sieht, ein Raster damit definiert und die Aktion sauberer wird. Es sind Daten zu schauen. Die Switch-Anweisung muss nicht mehr verwendet werden, um die Aktion mit dem entsprechenden Hersteller zu verwalten. Und noch eine Sache, die Sie haben könnten, beachten Sie hier, dass wir den Wert in der Reducer-Funktion direkt mutieren , anstatt einen neuen zu aktualisierenden Wert zurückzugeben. Dies geschah tatsächlich, weil das Redigt-Tool die Bibliothek verwenden konnte , die es ermöglicht , die Mutierung logisch zu schreiben und zu reduzieren. Hier dreht sich alles um das Reader-Toolkit mit dem Basisszenario. 4. Was ist Redux-Saga ?: Redact Saga ist eine Bibliothek, die darauf abzielt, Anwendungs-Nebenwirkungen zu verwenden. Der dritte Effekt bedeutet hier wie eine HTTP-Anfrage, Finanzierung des WebSocket-Ereignisses oder das Abrufen von Daten vom GraphQL-Server. Unsere Speicherung irgendeiner Art von Informationen im Cache, unser Browser hat sie lokal gespeichert. Dieses Ding fällt unter den Nebeneffekt , den V mit Hilfe der Redigt-Saga geschafft hat, mit der Hypothese, dass es sehr einfach zu handhaben, effizienter auszuführen und besser ist bei Handhabungswert. Hier dreht sich alles um die Redigt-Saga. Hier verwendet Saga das ES6-Feature namens Generatorfunktion , um asynchronen Code zu schreiben. Bei diesem Ansatz sieht unser asynchroner Code so aus, als ob er synchrone JavaScript-Code angibt. Hier dreht sich also alles um die Generatorfunktion. 5. Was ist Generator?: Lasst uns nun das Konzept des Generators verstehen. Der Generator ist also eine spezielle Art von JavaScript-Funktion. Wir haben es in die EF fixiert eingeführt und diese Funktion mit Italien kann es auf halbem Weg stoppen und dann von dort aus weitermachen, wo es gelehrt wird. In JavaScript ist Hausmeister eine Funktion, die ein Objekt zurückgibt , für das Sie eine nächste Methode aufrufen können. Bei jedem Aufruf der net-Methode wird ein Objekt dieses Safes zurückgegeben. Es wird einen Wert haben. Und der Wert könnte alles sein und getan wird entweder falsch oder wahr sein. Meistens wird es falsch sein. Und es wird wahr werden , wenn wir keine Rendite haben. Also erkläre ich die Misshandlung später. Wenn es also keine Yield-Anweisung in der Generatorfunktion findet , verschwand der Generator aus und generiert keinen Wert. Bei jedem Aufruf wird ein neuer Wert generiert. Sobald Sie gesehen haben, dass der Wert von erledigt ist, bedeutete das unser generatives Wissen und es wird keinen Wert erzeugen. Dies ist der grundlegende Code ist Snippet der Generatorfunktion, wie es aussah. Sie können sehen, dass wir hier eine Sternmarke haben, die Funktion, also bedeutet, dass diese Funktion Generatorfunktion ist. Sie können also sehen, dass wir eine jährliche Auszahlungsrendite haben. Es ist ein Operator, bei dem sich der Generator selbst anhalten kann. Im Grunde genommen ist unsere Hinrichtung bei Italien. Und sobald Sie diese Methode wie iteriertes Dotnet aufrufen , unabhängig vom Wert, den wir hier haben, wird sie diesen Wert schnell in Form dieses Objekts zurückgeben . Es wird also einen Wert als eins zurückgeben. Und der Wert von w1 wird der Falsch sein. Wenn ich zu diesem GFP gehe und du siehst , dass wir hier denselben Code haben. Wir haben eine Generatorfunktion. Wir haben eine Rendite von einem Jahr, zwei Jahre alt, drei Jahre alt für diesen. Wenn ich klicke, siehst du, dass wir diesen Wert bekommen haben und Pauls Aussagen gemacht haben. Wir haben immer noch eine gewisse Rendite if Aussage. Um diesen Wert zu erhalten, dieser Wert. Sie müssen also die nächste Methode erneut aufrufen. Wenn ich einfach dieses Konsolenprotokoll kopiere und es einfach hier einfüge. Und wenn ich es einfach wieder lasse und bekomme, wenn ich wieder renne. Jetzt können Sie sehen, dass wir diesen Wert hier erhalten haben und der Wert von Dannys immer noch falsch ist , weil wir immer noch die jährliche Aussage haben. Wenn ich es noch einmal kopiere, wenn ich das einfach lösche. Jetzt haben wir hier den Wert drei bekommen, und dann ist er immer noch falsch. Und wenn ich noch einmal kopiere, wenn ich diesen einfach lösche und wenn ich erneut auf Ausführen klicke, wir diesen Wert bekommen und es hat immer noch haben wir diesen Wert bekommen und es hat immer noch wiederholt gemacht, die Ausführung wird angehalten. Okay? Und wenn du wieder die nächste Methode arbeitest. Jetzt wird hier herausfinden , dass wir keine Rendite haben. Wenn Sie erneut klicken, erhalten Sie diesen Wert undefiniert und über den Admin erledigt. Unsere Generatorfunktion wurde jetzt hier gestoppt. diese Weise läuft im Grunde eine Generatorfunktion in JavaScript. Es ist wie oder lag so, Generatorfunktion funktioniert im JavaScript. Ich hoffe, Sie verstehen jetzt das Konzept einer Generatorfunktion. 6. Projektaufbau: Leute, lasst uns dieses Projekt einrichten. Also öffne ich eine Eingabeaufforderung. Lassen Sie uns unser Projekt hier mit dem Befehl N dx create erstellen. Der Projektname wird wie eine Film-App sein. Lasst uns Enter drücken. Und es dauert etwa zwei bis drei Minuten, um alle notwendigen Abhängigkeiten zu installieren. Also werde ich wieder eins zu einer anderen Abhängigkeit zurückkehren und erfahren Sie, dass unser Projekt-Setup jetzt hier abgeschlossen ist. Sie können sehen, dass wir zuerst in diesen Ordner gehen, der sich nach oben bewegt. Bevor wir es tun und PMI anfängt. In diesem Projekt verwenden wir eine Materialschnittstelle, um unsere React-Komponente zu erstellen. Lassen Sie uns zuerst dieses 15-mal alle Pakete installieren , die zum Erstellen dieser Anwendung erforderlich sind. Hier. Wir brauchen nur materielles UI-Material. Wir brauchen auch Materialoberflächenstile. Und abgesehen davon brauchen wir noch ein paar Pakete wie React, ein Read X. Wir brauchen auch React-Saga, reagieren aber am Altar nach unten. Jetzt. Wir brauchen x, ja. Lassen Sie uns diese Pakete also installieren. Installierte Pakete. Ich habe dieses Projekt bereits in meinem Visual Studio-Code geöffnet. Gehen wir in den VS-Code ein. Das ist also unser Projekt, das ich in meinem VS-Code geöffnet habe. 7. Diese Konfiguration von OMDB API-Schlüssel: Bevor wir anfangen, irgendeinen Code zu schreiben, konfigurieren wir zuerst unseren oder IMDB-API-Schlüssel. Ich gehe in den Browser und das Geschlecht oder IMDB-API-Schlüssel, um das gesamte bewegliche Ziel zu erhalten. Wenn ich das konfigurieren möchte, müssen Sie auf diese Website oder IMDB APA gehen. Und danach müssen Sie auf diesen API-Schlüssel klicken. Und hier musst du drei auswählen. Jetzt müssen Sie einen Einzelhandel wie E-Mail, Name und was sie verwendet haben, um Ihnen mitzuteilen, dass Sie angeben müssen, und danach müssen Sie auf Senden klicken. Sobald Sie das Detail angegeben haben. Und wenn Sie auf die Schaltfläche Senden klicken, wenden Sie eine Methode wie einen Verifizierungslink ab, um Ihren Schlüssel auf diesen ungültigen Schlüssel zu aktivieren. Sie müssen Ihr Google Mail-Konto eröffnen. Sie können also sehen, dass Sie Ihren Schlüssel hier haben und Ihren Schlüssel überprüfen müssen, indem Sie auf diesen Link klicken. Sie können diesen Schlüssel in Ihren VS-Code kopieren und Sie müssen auf diesen Link klicken, um diesen Schlüssel zu überprüfen. Jetzt wurde unser Schwuler hier aktiviert. Lasst uns das schließen. Ich kopiere diesen Schlüssel. Ich bezahle es in meinem VS-Code. Ich füge den Schlüssel ein , den wir bisher generiert haben. Jetzt füge ich nur den Schlüssel hier ein. Und mal sehen, ob unser Paket größer wurde, unserer Paketsumme. Jetzt können Sie diese Hand sehen, lassen Sie uns hier tun, und warten wir, bis die Anwendung in den Browser geladen wird. Es wird in unserem Browser geladen. Unsere Anwendung wird also erfolgreich in den Browser geladen. 8. App und Bereinigung: Lasst uns jetzt in den VS-Code gehen. Ich werde unser Projekt festhalten. Wir werden für LED-Lichtkanten haben. Dann haben wir einen Ordner für Komponenten. Dann haben wir einen Ordner für Redox. Im Root werden wir eine Umgebungsvariable haben, Punkt a und B. Hier werde ich meinen Film-API-Schlüssel, Film-APA, öffentlichen Schlüssel haben Film-APA, öffentlichen Schlüssel und ihn hier einfügen. Da wir in dieser Anwendung eine Umgebungsvariable erstellt haben, müssen wir unseren Server erneut starten. Lassen Sie mich das neu starten. Nun, was ich fünf machen werde, also fünf Mal werde einige Bereinigungen machen, in der Tat Anwendung. Lasst uns all das Ding entfernen, das wir nicht brauchen. Hier. Ich werde nur die Überschrift geben. Logo ist nicht erforderlich, also entfernen wir dieses. Ich lösche diese Datei. Das brauchen wir nicht. Lasst uns das auch entfernen. Logopunkt SVG In der Datei index.js. Dies werden Bleib Additive sein. Gehen wir zuerst in den Browser. Arbeiten, wir haben jetzt kein Problem. 9. Redux-Toolkit und Redux-Saga konfigurieren: Jetzt werde ich das redact Toolkit in dieser Anwendung konfigurieren . Ich werde eine Datei in diesem Reduct-Ordner erstellen. Ich werde eine Datei haben ja, speichert dot js. Ich werde einen Ordner für das Feature haben. Im dritten Filter werde ich unsere Folien haben. Wir haben es mit dem Film zu tun. Also lasst uns diese Folie hier geben. Filme schneiden dot js. In diesem Redex werde ich auch ein paar Dateien haben. Ich werde APA dot js haben. Ich werde Saga haben, auch eine Filmsagas dot js. Das wird alles nur umarmen, die wir bekommen werden, wird auch eine Wurzelsaga haben. Das war's. So viel Datei ist innerhalb des Reduct-Ordners erforderlich. Konfigurieren wir zuerst das redact Toolkit in dieser Anwendung. Für diese Datei müssen wir das Kantenschieberkleinerungs-Toolkit mitbringen. Lassen Sie uns Folien erstellen. Lasst es uns jetzt klären. Unsere Filme schneiden, schneiden, schneiden, schneiden, schneiden den Namen hier drüben. B-Film. Lassen Sie uns den Ausgangszustand unserer Anwendung definieren. Wir werden im Ausgangszustand eine Filmliste haben, die alle Filme enthält, die wir von unserer IMDB erhalten werden . Es wird ein Fehler sein, der zunächst eingegeben wird . Und wir werden einen weiteren Ausgangszustand haben , der einzelne Film und Details enthalten wird. Es wird im T-Objekt sein. Danach können wir diesen exportieren. Standardwert exportieren, Filme lysieren oder reduziert. Kommen wir jetzt zur Store-JS-Datei. Hier müssen wir Konfigurationen für mehr redact Toolkit bringen . Konfiguriere es zerrissen. Dann müssen wir Create Saga, eine Middleware Rameau oder redact Saga mitbringen . Wir müssen nur aus dem schwärzenden Durchhang mitbringen, nicht aus Kern. Entferne diesen. Jetzt müssen wir unsere Filme Dias mitbringen. So wichtig Film-Slice. So wichtiger Film reduziert es. Also Slides, nichts anderes als wir es reduziert haben. Reduziere es von Filmen Slice. Wir müssen auch die Wurzelsaga hervorheben. Wurzel-Saga. Jetzt müssen wir den Moment des Todes erstellen Diagramm-Middleware erstellen, die Saga Middleware genannt wird. Middleware. Lasst uns hier machen, weil sie einlagern. Wir konfigurieren unseren Shop. Konfiguriert schlecht. Wir werden es noch reduziert haben. Und es war ein Pionier-Filmschlüssel. Unterschreiben. Ich bin beleidigend, reduziere es hier, das ist unser Film der Reduzierer. Jetzt müssen wir auch Ihre Middleware verwenden. Also verwenden wir hier Saga füge eine Middleware hinzu. Wir müssen also auch ein Modell angeben, bei dem unsere und dies auf Standard-Middleware ausgerichtet ist. Standardmäßige Middleware. Lasst uns zustimmen. Als Dritter werden wir unsere Saga-Middleware einsetzen. Nach diesem Saga-Middleware-Dot läuft. Hier werden wir den Standardspeicher der Roots-Saga exportieren. Ich werde nur einen Kommentar machen, diese Codezeile, weil wir im Moment keinen Fußball haben. Es wird einen Fehler auslösen, sobald Sie die Reduzierung auf Liquid bisher mit unserer React-App konfiguriert haben . Lassen Sie uns jetzt einfach einen Kommentar abgeben. Gehen wir zur Datei index.js. Hier müssen wir Anbieter aus unserem Reaktor von Reaktor mitbringen mit x Minute Provider reagiert hat. Wir müssen auch einen Ladenordner mitbringen. Wir werden unsere App-Komponente mit dem Anbieter umschließen. Schneiden wir das aus und fügen ihn hier ein. Und lasst uns wiederherstellen. Speichern wir diese Datei und lassen Sie uns in den Browser gehen und überprüfen ob das erfolgreich konfigurierte Redatt-Tool nicht in unserer Anwendung enthalten ist. Repariere diesen, wir haben kein Problem. Lasst uns also die Reduktion öffnen DevTools. Sie können sehen, dass wir unseren Ausgangszustand sehen können . Und dieses Tool zur Reduzierung der Tiefe, das wir in unserer Filmfolien-Punkt-JS-Datei definiert haben , gibt den Wert an, den wir in diesem Video sehen können. Wir werden gutschreiben, dass dies in unserer React-Anwendung vollständig konfiguriert ist. 10. Routing aktivieren: Lassen Sie uns nun das Routing in dieser Anwendung aktivieren. Wir werden nur zwei Seiten in dieser Anwendung haben. Das ist zu Hause, nicht JS. Wir werden es bewegen oder GIS haben , in dem wir einzelne Filme mit einigen Details lösen werden. Lassen Sie uns hier die Takes hemmen. Generieren wir auch ein reaktantes Snippet in dieser Datei. Gehen wir nun zur Datei app.js. Lasst uns das entfernen. Lasst uns Komponente aus unserem Reagierten mitbringen. Wir brauchen Browser-Routerrouten. Mal sehen, bewege das hier. Lassen Sie es an die Komponente der obersten Ebene passen , die Browser-Router ist. Drittens sind sie auf dem dritten Platz, das werden wir Routen haben , auf denen wir mehrere Routen haben werden. Lasst uns unsere Heimroute finden. Bringen wir unseren Home-Komponentencode automatisch mit. Importiere diese Seite. Wir werden auch vier Einzelfilme haben. Also Filmausweis, okay. Wir werden die Filmkomponente rendern. Routing ist konfiguriert. Sie können dies im Browser überprüfen. Gehen wir also zum Browser. Das Routing funktioniert. Lasst uns auch ins Kino gehen. Auch. Okay? Also wurden beide weitergeleitet, um in dieser React-Anwendung zu arbeiten. 11. Arbeiten mit Aktionen und API – Fetch Filme: Ich beginne mit dem nächsten Teil in dem wir alle Filme von unserer eigenen IMDB-API abrufen alle Filme von werden, um den ganzen Film zu holen, wenn es auch richtig, Action und Saga ist. Fünf Mal beginnt mit dieser Filmfolien-Punkt-JS-Datei. Ich schreibe Action. Also Aktion im Reduct Toolkit, wir schreiben darin, dass ihr erstes Mal gute Filme hat reduziert . Anfangs passen wir den Film mit dem Namen Pyridin an. Okay? Also erhalten wir diesen Namen, Pramod-Komponente, und wir können einfach ja Namen zurückgeben. Danach müssen wir die Filme aufstellen, einen bestimmten Film. Dies wird einen Staat haben. Lasst uns auch hier Komma setzen. Liste der staatlichen Punktfilme ist fair zu handeln. Dot-Nutzlast. Lassen Sie dieses Axon auch exportieren. Exportiere also Filme, Folien, Punktakzente. Im Moment haben wir zwei Aktionen, die Filme sind. Filme. Wir haben das für XN erstellt. Jetzt fange ich mit unserer APA an. Dann werden wir an unseren Sagas arbeiten. Also müssen wir zuerst auch den Punkt angeben. Ich importiere axial. Lassen Sie uns danach den Endpunkt, die API, angeben. Endpunkt. Wir werden diesen Endpunkt haben. Diesen Endpunkt werden wir verwenden, um den gesamten Filmspeicher oder IMDB APA abzurufen . Jetzt müssen wir eine Methode angeben, um alle Film-Exportfilme abzurufen . Anfangs passen wir den ganzen Film mit dem Filmnamen Paradigma an. Hier müssen wir den Filmnamen angeben. Danach gibt es. Wir können Return x haben, ja. Und wir können angeben , dass Endpunkt-API, Endpunkt-Ampere-Zeiten, die wir verwenden müssen, dem Film entspricht. Jetzt können wir das auch ausführlich sortieren. Also müssen wir die Rückgabe nicht verwenden. Wenn Sie eine Codezeile haben, entfernen wir diese und lassen Sie mich diese Rückgabe auch entfernen. Das wird auch vorbei sein. 12. Arbeiten mit Saga: Jetzt lasst uns an Saga arbeiten. Wir müssen einen reduzierten Saga-Effekt importieren. Effekt. Wir müssen wirksam werden, wie wir es sagen lassen. Danach. Wir müssen eine Uhr oder ein Jahr angeben. Wir werden die Generatorfunktion verwenden. also Filme laden, werden wir diese nachgeben. Lassen Sie uns also, wir verwenden hier, lassen Sie es diese Schulden beeinflussen, lassen Sie sie grundsätzlich auf einmal laufen. Und wenn wir eine weitere Aktion auslösen und wenn die vorherige Aufgabe noch läuft, wird die vorherige Aufgabe mit Italien abgebrochen. Und diese Technologie lässt es die Aufgabe mit den neuen Daten ausführen. Insgesamt. Vermeiden Sie Nebenläufigkeit hier drüben. Deshalb benutze ich hier nehmen, lass es uns immer den neuesten nehmen. Hier müssen wir also das x und den Typ angeben. Also müssen wir ein Jahr später verwenden und Filme abrufen , die von dem Punkttyp der Folien stammen oder verschieben. Hier müssen wir eine weitere Saga angeben, die Filme laden. Wir haben von diesem Zuhörer bezahlt. Dies wird auch eine Generatorfunktion sein. Funktion zum Laden von Movie. Ich denke, es wird eine Nutzlast-Sommer-Komponente erhalten. Und hier werden wir Handgeld verwenden , wenn Sie irgendeinen Fehler haben. Also mache ich danach einfach ein Konsolenprotokoll und versuche es. Geben wir eine Variable an, die als Filmname bezeichnet wird. Laden. Wir werden Nutzlastdaten sein und uns einziehen. Du wirst hier drüben nicht verwirrt. Auf diese Weise habe ich hier eine Variable deklariert. Payload wird unseren Filmnamen enthalten. Definieren wir nun eine Variable mit Auto-Anleihen. Wir werden anrufen, wir werden hier Anrufeffekt verwenden, abwärts reduzieren, schwanken, API-Anfragen stellen, so dass Filme passen. Und wir können den Filmnamen und das Argument hier weitergeben. Diese erste Hypothek erhält hier besonders diesen Filmnamen. Jetzt werden wir es als Anleihen bekommen. Und hier werden wir prüfen, ob response.status 200. Dann werden wir eine weitere Aktion mit der Alpha-PUT-Methode zerstreuen . Unterstützung ermöglicht es, neue Weimar, redact Stagger Middleware zu zerstreuen . Also hier werden wir die Action-Step-Filme zerstreuen . Hier können wir unsere Antwort verbreiten, die von oder IMDB API für response.data stammt. Was müssen wir danach tun? Exportiere Filmsagas. Wir werden diese Aufgabe beim Laden von Filmen bilden. Gehen wir jetzt zum Root-Stackger. Hier. Wir müssen hierher bringen, dass wir Hall-Effekt aus unserem Staffeln bringen müssen. Bringen wir auch unsere Filme mit, Uigurisch. Filme bringen entweder Filmsagas mit. Hier exportieren, Standard. Die Silvia erzeugte ebenfalls nur. Es werden unsere Wurzeln sein. Hier verwenden wir alles wird verwendet, wenn Sie einen Multi-Saga-Effekt in einem Padlet ausführen müssen. Dieser Misserfolg bei der Verwendung. Wir sind fertig mit unseren Wurzeln. Und lasst uns zur Store-Punkt-JS-Datei gehen. Und jetzt können wir diese Codezeile auskommentieren. Jetzt wollen wir irgendein Problem in unserer Anwendung. Also lasst uns zuerst in den Browser gehen. Hier wurde nicht alles gebildet, was uns fehlt. Also müssen wir von der Wirkung bringen. Gehen wir jetzt zum Browser. Wir haben keine Kette unserer Anwendung, nachdem wir unsere Flash-Saga geschrieben haben. 13. Arbeiten in der Suche: Also haben wir unseren ersten Staffel geschaffen. Lassen Sie uns diese Aktion nun aus unserer Komponente auslösen. Wir haben unsere Homepage hier und Film. Also werden wir zuerst an dieser Homepage arbeiten. Diese Homepage mit Italien wird zwei Komponenten haben. Also lasst uns das entfernen. Und ich benutze dein Fragment. Ich werde eine dritte Komponente haben. Diese Komponente, die Sie haben werden wie Filmlistenkomponente, okay? Eins nach dem anderen werden wir arbeiten. Arbeiten wir an dieser dritten Komponente. Ich erstelle eine Datei im föderalen Komponentenordner. In dieser Wurzel zwei werden wir ein Datei-Styling haben, also verwende ich Ihre Stile dot js. Generieren wir ein Snippet hier drüben. Danach müssen wir tun, um zu reagieren, wenn IT den Status verwendet, Verwenden Sie den Faktor. Sie müssen auch kompetentes Kartonmaterial aus Material mitbringen kompetentes Kartonmaterial aus Material , wenn es fehlgeschlagen ist. Dann müssen wir euch auch ausgewählt bringen und diesen Pfad benutzen Pramod. Sie wählen „In Dispatch verwendet“ aus. Jetzt drinnen werde ich ein Fragment haben. In dritter Schuld. Ich werde h2-Tag haben. Gib dir einen Film. Ich benutze deinen Klassennamen. Ich verwende deinen Material-UI-Stil. Bring her. Verwenden Sie hier Stile, um diese Kacheln zu verteidigen. Habe unsere Komponente gekauft. Bringen wir diesen Verwendungsstil aus. Lassen Sie uns also diese riesigen Stile aus dieser Typdatei mitbringen. Und tatsächlich werde ich diese Kachel für unsere dritte Komponente definieren . In der Tat punkten die Kacheln js. Was wir tun müssen, müssen wir einen Stil aus unserem Material-UI-Stil erstellen, Stile für Standardstile. Und darin definiere ich den Teilwert. Anderer, anderer Klassenname. Wir werden Titel haben. Titel. Ich werde ein winziges Licht haben. Lassen Sie uns als Erstes eine Zeilenhöhe von 0,1 haben, ich werde 1,25 haben. Dann werde ich Marge unten 0,15 haben. Ich werde Schriftgröße haben. Jetzt. Wir werden auch eine Kachel für unser Eingabefeld haben. Also formen Sie sich. Und es wird Breite haben. Ich gebe hier 90 Ansichtsfenster, maximale Breite. Ich gebe hier. Dann werde ich Marge, Auto, Marge, Top-Marge, Mörtel haben Top-Marge, Top-Marge , die wir alle eingestellt sein werden. Wir werden auch einen Klassennamen für Fehler haben. Dafür werde ich färben. Ich benutze noch Farbe. F 914. Jetzt werde ich Polsterung haben, oben. 0.5. Dann Schriftgröße, ich werde 2,15 Gramm haben. Okay, lasst uns dazu gehen, unsere Suchkomponente. Danach, was wir fünf tun müssen, definiere ich einen Status oder unseren Namen des Eingabefeldes, Namen. Und anfangs gehen wir zu dem Film, der mit einer Spinne zu tun hat, um das anfängliche literarische Digest-Paradigma anzugeben. Jetzt müssen wir diesen Zehnten für diesen riesigen Stil erstellen, Die Kosten plus Theta quadriert, um die Styles zu verwenden. Danach lasst uns hier verwendet werden, unseren Stil. Also Klassen Punkttitel. Danach werde ich Form haben, Klassennamen, den ich hier verwenden werde. Wieder Unterricht davon. Ich werde sehr einfach auf einigen mittleren Punkt verhindern Default haben . Jetzt werden wir innerhalb dieses Formulars einen Texttyp haben. Breite Der Wert wird benannt. Und ich werde hier ein paar Kantenkacheln für dieses Eingabefeld machen . Sei eine Breite. Ich gebe TCH. Wir werden einen Punktpunkt der OnChange-Methode haben einen Punktpunkt der OnChange-Methode , Punktwert. Jetzt müssen wir eine Aktion auch nur von dieser Komponente aussenden . Lassen Sie uns die Referenz von uns aufbewahren, ist es am besten. Und dann versandvariabel. Es wird ein Versand sein. Jetzt renne ich hier, um Effect zu verwenden . Das ist ein enormer Effekt. Wir werden immer dann laufen, wenn wir das Schaltungseingabefeld ändern und wann wir es hier unter dem Namen selbständig bereitstellen müssen . Und wir können Code wie Filme versenden und diese Aktion automatisch importieren. Filme wie hier können wir einen Namen geben. Jetzt müssen wir diese Komponente in unsere Home-Dot-JS-Datei bringen . Anstelle von j können Sie die dritte Komponente herausbringen. Gehen wir jetzt zum Browser. Lass das hier. Wir haben zwei große, diese Emotion auch. Okay? Was wir müssen all diese Emotionen tun. Lass das installieren. Wir haben bereits diese materielle Benutzeroberfläche. Olivia. Nur wir aktualisieren all diese beiden Pipetten. Um diese beiden Pakete zu installieren. Beide Pakete haben insgesamt. Jetzt schließen wir das hier. Gehen wir in den Browser. Wir haben dieses dritte Eingabefeld. Und Sie können sehen, dass wir anfangs beim Anpassen des Film-Lifts auf den Film gefeuert wird. Lass uns öffnen. Lasst uns das öffnen. Sie können sehen, dass wir unsere älteren Filme bekommen. Und drittens ist die Filmliste. Holt nur zehn Filme mit dieser IMDB-API. Sie können sehen, dass wir den Film im Zusammenhang mit dieser Spinne fertigstellen können. 14. Bearbeitungsfehler: Und wenn du das gemacht hast und wenn du versuchst, den Film nur mit dem Schlüsselwort F zu fälschen, bekommst du jetzt Eta. Sie können sehen, dass sie hier einen Fehler bekommen , da zu viele Ergebnisse sind. Also werden wir auch die Editor-Methode sortieren. In dieser Anwendung werde ich diese Fehlermethode beheben. Und danach zeige ich den ganzen Film, den Namen, der mit seiner Spinne verwandt ist. Lassen Sie uns das VS-Portfolio setzen. Wenn es also nimm unseren Staat, würdest du „selected“ verwenden. Wir können hier benutzten Selektor verwenden. Unsere Filme Slices sind beim Reducer Key Film registriert. Und wir können hier eine Filmliste im dritten Film spät haben, entweder haben wir Film, unseren Fehler. Wir müssen noch ein Level erreichen. Und das wird ein Fehler sein. Und wir können sie diesen zum Irrtum bringen. Jetzt können wir Lotus TextField überprüfen. Als ob Sie den Fehler haben, Sie nur den Fehler gesehen. Und wenn man den Klassennamen benutzt, verwende ich dein Material uns Fliesen aussehen lachen. F-Punktfehler. Erzählend Wir haben bereits in unserer Style-Punkt-JS-Datei definiert. Das können wir. Gehen wir nun zum Browser über. Wir haben ein Problem. Es wird die Liste der Filme sein. Wenn Sie sich unsere Filmfolie oder GIF-Datei ansehen, hat sie die Liste nicht verschoben. Gehen wir jetzt in den Browser. Lies das hier. Jetzt haben wir kein Problem. Jetzt lasst uns das entfernen. Sie können sehen, dass wir auch die Fehlermethode anzeigen können . 15. Render: Als Nächstes werden wir den ganzen Film zeigen, der seiner Spinne zu tun hat, unter diesem Eingabefeld. Dafür müssen wir eine Komponente erstellen. Heutzutage Filmliste, Filmliste, nicht JS. Generieren wir dieses Snippet. Hier. Wir müssen einige Komponenten aus unserer materiellen Benutzeroberfläche mitbringen. Die Komponente, die wir Ihren Roboter vom Typ Automedieninhalte verwenden Ihren Roboter vom Typ Automedieninhalte Automedieninhalte werden. Danach. Wir werden auch hier verwenden, Sie wählen eine Redux aus. Lassen Sie sich von uns ausgewählt bringen. Wir werden den Link von unserem React Router Dom benötigen. Und zuerst bekomme ich die ganze Filmliste, die wir in unserer Sache haben. Also kopiere ich einfach diese Codezeile. Ich füge es hier ein. Und wir brauchen es nicht, dass nur wir in 13 Filmliste sind. Das hier. Sagen wir mal, entferne das hier. Also werde ich dein Raster benutzen. Lassen Sie uns etwas Styling bereitstellen. Also lass uns wachsen. Es wird ein Container sein. Auch hier werde ich Gitter benutzen. Wieder werde ich hier Grid benutzen. Container, rechtfertigen Inhalt. Und es wird ein Mittenabstand sein. Danach gebe ich hier drei. Filme. Ich werde auf die Karte gehen, wir bekommen die Filme bei dieser Suche, okay, also wenn du dir das Muster ansiehst, wenn ich diese Verpflichtung aktualisiere, werden alle Filme in dieser Suche gespeichert. Stattdessen haben wir unseren Film. Also sagen wir es den VS-Code. Hier können wir also so schreiben. Sobald wir die Daten in unserem WR haben, wird es nur um den ganzen Film kümmern. Dumm. Jetzt werde ich wieder hier Raster und Schlüssel verwenden. Ich kann hier als Index verwenden. Der Index. Ich kann Ihren Schlüssel eingehend verwenden. Es wird der Gegenstand sein. Ich werde noch Kartenkomponente verwenden, etwas Inline-Styling, Sx, Max, Breite, Breite. Ich gebe dir einen 350. Dann bekomme ich meine Kartenmedien. Karten-Medien. Ich werde eine Komponente haben. Komponente wird nur per E-Mail gesendet. Dann. Hi, ich gebe 350. Wir rendern das Bild in diesem Kartenmedium. Ich werfe ab. Unser Bild ist in diesem Objekt gespeichert. Wenn ich also dieses eine Bild öffne, hatten wir diese Eigenschaft nicht. Hier, Punkt Punkt Porter alternativ, können Sie hier Punkt Punkttitel geben. Danach werde ich Karteninhalt haben. Und ich werde hier Topographie-Material verwenden , du bist hier. Ich rendere Artikelpunkttitelvariante. Ich gehe nach Körperfarbe in den Raum . Ich gebe dir einen Punktpunkt Primär. Jetzt erwarte ich hier auch Spinne, Teil des Films, in dem Ohrfilm veröffentlicht wurde. Lassen Sie uns das kopieren. Füge es hier ein. Lass uns Klammer holen. Dieses gesamte Kartenmedium werde ich mit dem Link umschließen. Link wird unten angezeigt. Unter diesem Karteninhalt. Wir können angeben, wo es navigiert wurde. Dies ist bereits digital geroutet, wo wir den einzelnen Film mit einigen Details anzeigen. Ich bezeichnen Punkt hier, ich werde hier IMDB, IMDB ID verwenden. Jetzt müssen wir diese Komponente im Grunde genommen in unserer Home-Dot-JS-Datei verwenden. Wir können das entfernen. Wir können unsere Filmliste mitbringen. Gehen wir jetzt zum Browser. Jetzt können wir zeigen, dass sie alle einer Spinne verwandt sind. Und wenn du auf einen Film klickst, wirst du nie auf den einzelnen Film zugreifen. Wenn du einen anderen Filmnamen befragt hast. Wie Batman. Wir bekommen Filme im Zusammenhang mit Pac-Man. Wir haben unsere Homepage fertiggestellt. Das nächste, was wir an unserer Single arbeiten werden, in der wir einige Informationen über Filme wie zeigen werden, wie zum Beispiel die Geschichte des Films in welchem Jahr er veröffentlicht werden muss? Regie. All das zu erzählen. Wir werden auf dieser einzelnen Filmseite angezeigt. Erstens werden wir an unserem Action-Saga-API-Teil arbeiten . Dann werden wir daran arbeiten. 16. Action, API und Saga – Einzelfilm: Fünf Mal beginnen wir mit unserer Action APA und Stackger. Der Einzelfilm. Gehen wir zur Dot-JS-Datei des Films. Hier. Gut. Film. Es wird einen Ausweis zurückgeben. Wir senden eine ID von unserer Komponente, um Details zum einzelnen Film zu erhalten. Es wird wie staatliche Maßnahmen sein. Bundesstaat Punkt. Film ist keine Nutzlast. Formatieren wir das hier. Exportieren wir diesen Actionfilm. Jetzt müssen wir an unserer API-Dot-JS-Datei arbeiten. Was wir tun müssen, ich kopiere das einfach. Und es werden Filme sein oder mehr suchen. Wir werden uns den Filmausweis ansehen. Kino-ID. Es wird eine Film-ID sein. Hier müssen wir I geben. Jetzt lasst uns an unserer Saga arbeiten. Leg es ins Kino. Ich habe eine Dot-JS-Datei. Ich kopiere das einfach. Es wird genau das Gleiche sein. Es wird nur wie bei Load Movie sein. Es wird auf Load Movie sein und denken, dass dies ein Film sein wird. Und das müssen wir auch definieren . Das ist also dein Zuhörer, und das ist ein Beobachter. Dieser Typ, er hört zu. Wann immer Sie diese Aktion auslösen, wird diese nicht in die Warteschlange gestellt. Wir haben diesen Kerl auch vordefiniert. Es wird fast das Gleiche sein. Nur B-Film. Wir werden eine Nutzlast erhalten, eine Film-ID haben. Es wird also eine Film-ID sein. Es wird nur Film holen, keine Filme. Film. Es wird ein Filmset sein. Wir müssen diese Aufgabe forken, den Fork Load Film. Wir müssen nichts darin tun. Das ist die Saga Dot JS-Datei. Wir sind mit unserer Saga fertig, wenn ein großartiger Filmakzent aus unserer Komponente ausgelöst wird. Dieser Argument half beim Hören auf diese Achse und diesen Typ. Es wird mit Italien enden. Die Bildung und ein Drittel versprechen und lösen sie. Unser Generator wird fortgesetzt. Wir sind fertig mit unserem Service. 17. Filmdetails Seite: Jetzt arbeiten wir an dieser Seite, die Film ist. Also müssen wir dir den Effekt bringen. Jetzt müssen wir auch die Navigation in den USA bringen und Params Tom oder React Router nach unten verwenden. Bringen wir das auf die USA. Navigieren Sie. Und benutze Param. Weil wir die ID benötigen, die wir noch von der URL haben. Jetzt müssen wir Ihnen auch ausgewählt und Disperse aus unserem React Redux verwenden . Lassen Sie uns Ihnen ausgewählten Versand mitbringen und verwenden Sie den Versand. Wir müssen einige Komponenten aus unserer Material-UI-Komponente mitbringen unserer Material-UI-Komponente , um Ihren Typografie-Button mitzubringen. Lassen Sie uns auch den Benutzerstil mitbringen. Riesige Stile. Dieser Schalter hat Pi gefliest. Wir haben vorab angegeben. Man trägt auch den Titel diese Seite. Lassen Sie mich diese Dialog-JS-Datei ausdrücken. Wir werden zwei Abschnitte haben. Abschnitt. Ich kopiere dafür die Kacheln für diesen Abschnitts-Klassennamen, welche Kachel ich für dieses x verwenden werde , und Sie können diese kopieren. Gehen wir nun zurück zu unserer Movie Dot JS-Datei. Zum ersten Mal wird die Referenz der enormen Disparität in der Versandvariablen gespeichert. Ich werde ein Paar kopieren, diese Filmliste dot js anwendet. Um diese Zeile zu kopieren. Wir interessieren uns nur für Filmobjekt und bewegen uns nicht, weil es die Details über den einzelnen Film enthält. Wir brauchen nur Film. Jetzt müssen wir die Stärke dieser riesigen Fliesen schaffen , sogenannte Pluspunkte. Normalerweise Stil. Wir brauchen auch den Ausweis. Sie werden uns Params knallen lassen. Definieren wir nun noch einen enormen Effekt. Dieser enorme Effekt wird Monat dauern. Wir haben den Ausweis. Wir haben den Ausweis. Dann können wir ihm die Aktion anzeigen, die Film bekommen ist. Und wir müssen den Ausweis übergeben. Lassen Sie unsere sechste oder die Referenz der Jugend hineingehen. Navigieren Sie variabel. Jetzt können wir diesen überprüfen , ob wir die detaillierten Daten des einzelnen Films über die ID erhalten oder nicht. Also lasst uns in den Browser gehen und kämpfen. Gehen wir auf diese Seite und aktualisieren Sie diese. Klicken wir auf einen Film. Sehen wir uns ihren Selbstbehalt an. Lass uns diesen einen Film öffnen , in dem du das sehen kannst. Sie können sehen, dass wir unser Filmobjekt haben, in dem wir ein Detail zu diesem Film haben. Das ist erstaunlich. Es ist Paradigma und wir haben einige detaillierte wie Titeldirektor auf unserer Handlung. Wir werden einige Informationen von diesem Objekt verwenden und wir werden jetzt auf dieser Seite anzeigen , was wir tun müssen. Ich werde das entfernen. Und ich werde Abschnitt den Klassennamen haben. Ich benutze Ihre Materialklassen. Und tatsächlich werde ich das Image-Tag verwenden. Ich werde hier wie Filmplakat und alternativ verwenden Filmplakat und und wir werden den Filmtitel, den Filmtitel angeben . Ich werde ein Div haben. Ich benutze Typografie. Und lasst uns die linke Variante ausrichten. Lasst uns S3 behalten, S2. Hier. Ich zeige den Filmtitel, Punkttitel. Ich kopiere das ein paar Mal. Also werde ich den Filmtitel erzählen, diesen Vektor plotten. Okay. Kopieren wir das ein paar Mal. Die Zeit, in der ich Variante fünf verwenden werde . Aber hier können wir noch wie Movie Dot p hier haben. Dann benutze ich hier einen Körper. Es wird eine Handlung sein. Jetzt werde ich auch den Namen des Regisseurs lösen, und hier wird es um sechs sein. Lass uns sechs drehen. Silver Regisseur, Filmdot-Regisseur. Und wir können dir einen Regisseur geben. Und wir werden auch einen „Zurück“ -Button haben. Mal sehen, riesiger Button, der zurückgeht Variante, die ich hier benutzen werde. Und dann werde ich die OnClick-Methode haben. Es wird niemals auf die Homepage zukommen. Navigieren Sie. Wir können hier benutzen. Lassen Sie uns diese Datei speichern. Gehen wir zum Browser. Jetzt können wir diesen einzelnen Film mit einigen Detaillierungen sehen . Also haben wir Filmnamen, Handlung und Regie. Sie können nach Ihrer Bequemlichkeit auch weitere Details hinzufügen . Ich verwende nur so viele Details auf dieser Seite. Und wenn wir auf Zurück klicken, gelangen Sie nie zur Homepage. Sie können diesen Film auch ansehen. Das funktioniert. Lasst uns dieses Steuerelement öffnen. Wir haben also kein Problem in unserer Konsole. 18. Zusammenfassung: Wenn Sie sich dieses Video ansehen, das, wenn Sie diesen Kurs erfolgreich abgeschlossen haben , hoffe ich, dass Sie sich React-Anwendung in das redact Toolkit integrieren. Und ich hoffe, Ihnen hat der Kurs mit einigen neuen Redex-Konzepten gefallen . Und wenn Sie noch Zweifel oder Fragen zu diesem Kurs haben , können Sie Ihre Anfrage oder Zweifel jederzeit in den Kommentarbereich stellen . Ich werde mein Bestes geben , um Ihre Anfrage zu lösen. Das war's also. Von meinem Ende sehe ich dich in Netzwerken.