React 201: Mittelstufe React. js

1. Willkommen zu intermediate: Hallo und willkommen, um auf 001 zu reagieren. Dies ist Zwischenreaktion in diesem Modul oder in diesem Kurs werden wir mit vielen verschiedenen Komponenten in React arbeiten. beispielsweise eine einseitige Anwendung erstellen, damit Sie sofort zwischen den Seiten wechseln können. Wir werden auch mit der Suche arbeiten. Also kann ich Star Wars eingeben und all diese verschiedenen Suchergebnisse erhalten. Ich kann sogar auf die Details von einem dieser klicken und zu einer Form einer Detailansicht mit React-Routing gehen . Wir werden funktionale Komponenten in React to 01 verwenden. Und wir werden mit Dingen wie Zustand und Einstellung des Zustands arbeiten. Arbeiten mit APIs wie der db.org-API des Films Wir werden mit Requisiten arbeiten. Und wir werden sogar mit der Geschichte in dieser Richtung arbeiten. Wir werden auch US-Effekt verwenden, die ein React-Buch ist. Also werden wir das in Verbindung mit Staat verwenden. Auch hier werden wir eine API verwenden. Wir werden Router verwenden, würden Komponenten verwenden. Wir werden Requisiten an diese Komponenten weitergeben. Und wir werden diese gesamte Anwendung mit verschiedenen Komponenten einer Komponente sprechen lassen, die mit einer anderen Komponente sprechen kann. Nun, warum sollten Sie lernen, Zwischenstufe reagieren? Reagieren Sie als eine der gefragtesten Fähigkeiten für die Front-End-Web-Entwicklung. Zu wissen, dass React Ihnen fast einen Job als Front-End-Webentwickler garantieren kann. ist also wirklich wichtig, gut in React zu sein. Wenn Sie ein freiberuflicher Webentwickler werden, müssen Sie wissen, wie man Reactant schreibt, was es tut. Und dieser Kurs ist nur ein wenig anders als reagieren eins zu eins. Reagieren Sie eins zu eins war sehr, sehr einfach. Wir haben keine anderen Seiten oder so etwas benutzt. Es war alles nur auf einer einzigen Seite. Diese ist eher eine progressive Web-App, in der Sie buchstäblich alles in diese Suchleiste eingeben und API-Antworten sofort erhalten können. Colleen und ich lehren seit 2012 Webentwicklung. Ich habe mehr als 350 Tausend Studenten weltweit beigebracht, wie man kodiert und auf einen reagiert, werde ich Ihnen eine funktionale Komponente mit React beibringen. Willkommen, um auf einen Einsen zu reagieren, und wir sehen uns drinnen. 2. Eine neue a erstellen: In Ordnung, willkommen, zuerst ein Tupel 1 zu reagieren, Sie müssen Node installiert haben und reagieren installiert. Wenn Sie nicht Knoten n, React bereits auf Ihrem Computer installiert haben , gehen Sie bitte über zu reagieren 101, wo wir die Grundlagen von React einschließlich Installation und Aufstehen und Laufen mit Node JS behandelt . Jetzt gehe ich davon aus, dass Sie bereits Create React App auf Ihrem Computer mit Knoten und NPM installiert haben, in diesem Fall können wir einfach direkt in diese eintauchen. Okay, also was ich hier tun werde, ist, dass ich n px, Create React-App tippe. Und ich werde diesen Film Browser nennen, Film-Browser. Und das wird weitergehen und ein paar Sachen für uns installieren. Also, bevor wir hier fortfahren, wir einen Blick auf die Version des Knotens, den ich benutze. Ich benutze Knoten 15. Sie möchten Knoten 14 oder neuer verwenden, wenn möglich. Wenn Sie Node Version zehn verwenden, wird dieser Create React App-Befehl etwas anderes für Sie erstellen. Sie möchten also sicherstellen, dass Sie im Grunde die neueste Version der neuesten LTS-Version von Node haben. Verwenden Sie also Knoten 14 oder 15, oder wenn 16 oder 18 aus ist, verwenden Sie die LTS-Version, vielleicht 16 oder Knoten 18. Also, jetzt werde ich in den Film Browser CD. Und was ich tun kann, ist L.A. Oder wenn Sie sich in Windows befinden, können Sie DIR eingeben. Und es zeigt Ihnen, dass Sie ein read me node_modules Paket, public, SRC, Garn Dialog haben. Sie sollten alle diese Dateien und Ordner haben. Was ich tun werde, ist, dass ich diesen und VS-Code öffnen werde, indem ich Code dot eintippe. Wenn Sie diesen Befehl aus irgendeinem Grund nicht auf Ihrem Computer haben, ist das in Ordnung. Sie können einfach VS-Code öffnen und zu Datei Öffnen gehen und den gesamten Ordner auswählen. Und Sie wollen nur sicherstellen, dass Sie die Film-Browser-Ordner auswählen. So können Sie zur Datei öffnen gehen. Und Sie können diesen gesamten Ordner hier auswählen. So Film-Browser. Okay, sobald Sie das laufen haben, ist das, was Sie tun können, im VS-Code oder wenn Sie keinen VS-Code haben, können Sie einfach Ihr Terminal öffnen wie das, was ich vorher geöffnet hatte. Nur dieses Terminal hier oder PowerShell oder, oder was auch immer Sie verwenden möchten. Was ich tun werde, ist, dass ich das direkt innerhalb des Browsers verwenden werde. Also werde ich das schließen. Also Terminal beenden Terminal. Und in meinem VS-Code werde ich mein Terminal hier sehen. Also all mein Code sind alle meine Dateien werden sein, sie werden auf der linken Seite sein. Mein Terminal wird unten sein und mein Code wird oben rechts hier oben sein. Also, was ich jetzt tun möchte, ist, dass ich npm start eingeben möchte. Und das sollte Sie zu Ihrer ersten Art von Reaktionsseite bringen. Es sagt dir genau, was du tun sollst. Bearbeiten Sie SRC Schrägstrich App Punkt JS. Und wir werden ein paar Sachen machen. Also an diesem Punkt in der Zeit, sollten Sie das einsatzbereit haben. Wenn Sie diese Funktion nicht ausgeführt haben, machen Sie dies zu Ihrer Aufgabe für dieses Video. Stellen Sie sicher, dass Ihre erste React-App mit dem Befehl „React App erstellen“ aktiviert ist. 3. Code: Okay, willkommen zur nächsten Lektion. In dieser Lektion werden wir in unseren SRC gehen und in app.js gehen. Und ich gehe einfach zu einem Make dies nur ein wenig kleiner. Und da gehen wir. Das sieht ein bisschen vernünftiger aus. Und was ich tun werde, ist, dass ich dieses Zeug hier drin loswerde. Nur, ich brauche das Logo nicht mehr. Also lasst uns das Logo löschen. Löschen Sie das Logo. Ja, löschen Sie ClassName App. Ich brauche diesen Klassennamen auch nicht. Und ich werde einfach sagen Rückkehr H1, hallo von React 201. Und das ist alles, was ich tun werde. Und um das zu retten. Und Sie können sehen, dass dies erfolgreich kompiliert, es wird mir sagen, erfolgreich kompiliert, wie wir erwarten. Also lasst uns weitermachen. Speichern. Jedes Mal, wenn ich spare, wird es neu kompilieren. Und jedes Mal, wenn es neu kompiliert wird, sollte es meinen Browser automatisch aktualisieren, damit ich nicht auf Refresh klicken muss. Es ist wirklich, wirklich nett. Und so sollte es sagen Hallo von reagiert auf eine. Gehen wir weiter und räumen das auf. Und während ich Sie das tun lasse, lassen Sie uns app.use CSS öffnen. Und lasst uns das auch klar machen. Wir werden weiterhin app.use ESS verwenden. Wir brauchen nur keines der Standard-CSS, mit dem es kommt. Also lasst uns fortfahren und das löschen und speichern. Und Sie können sehen, dass es sagt erfolgreich kompiliert. Sobald Sie das getan haben, gehen wir weiter zur nächsten Lektion, wo wir Bootstrap fünf installieren. 4. Bootstrap 5: Alles klar, willkommen zu der Lektion, in der wir Bootstrap installieren. Dies wird unsere Website schön aussehen lassen. Und anstatt nur wie eine, eine grobe Standard text-basierte Website, werden wir tatsächlich wie ein Navigationssystem und See, einen Heldenbereich und Karten und so. Gehen wir also zu bootstrap.com, getbootstrap.com und klicken Sie auf „Erste Schritte“. Und hier verwende ich übrigens docs Version fünf. Also benutze ich Bootstrap fünf. Es sagt im Quickstart, dass ich dieses CSS-Blatt grundsätzlich einfach kopieren und auf meine Seite einfügen kann. Und das ist alles, was ich tun werde, ist, dass ich hier buchstäblich auf Kopie klicke. Und ich werde hier rüber gehen und die öffentliche index.html öffnen. Und es wird ein paar Sachen im Jahr haben, Haufen von Kommentaren und so. Ich will zwei Dinge tun. Zuerst möchte ich diesen Link hier in den Kopf stecken. Also vor diesem Schrägkopf und davor, nicht vor, sondern nach dem Kopf. Also willst du es irgendwo dazwischen. Also, wenn ich das zusammenbreche, möchten Sie den Code irgendwo zwischen diesen beiden Tags. Die zweite Sache, die ich tun möchte, ist, dass ich dies von React App in Film-Browser umbenennen möchte . Und das wird einfach so aussehen, als hätte es nichts getan. Grundsätzlich hat es nichts getan. Es hat nur einen Teil des Abstands, Art von Reset oder CSS ein wenig geändert. Es hat etwas getan, aber im Grunde hat ein nichts an dieser Stelle getan. All dies erlaubte uns, unser CSS von einem Bootstrap fünf zu verwenden, was uns schließlich erlauben wird, nette kleine Komponenten wie diese Karte zu verwenden. Also gehen Sie weiter und lassen Sie Bootstrap installiert. Stellen Sie sicher, dass Sie den Link dieses Stylesheet einfach hier kopieren und einfügen. Stellen Sie einfach sicher, dass Sie das kopieren und in Ihre index.html einfügen, die sich innerhalb Ihres Öffentlichen Ordners befindet. Als nächstes gehen wir weiter und erstellen Sie eine navbar funktionale Komponente. 5. Hinzufügen einer Navbar: Okay, werfen wir einen Blick auf das Hinzufügen einer globalen Navigationsleiste zu unserer Website. Also habe ich einfach app.js geöffnet und hier wird im Grunde die gesamte App leben. Und so will ich, dass diese Navbar, diese theoretische Navigationsleiste irgendwo hier drin wohnt. Und ich möchte, dass der Rest der Website im Grunde auch hier lebt. Aber es gibt ein paar verschiedene Möglichkeiten, wie wir das tun können. Und der erste Weg ist durch eine funktionelle Komponente. Der zweite Weg ist durch eine klassenbasierte Komponente. Und der dritte Weg ist ähnlich dem ersten Weg, der eine funktionelle Komponente ist. Wir können Const benutzen. Und so werde ich Ihnen beide Möglichkeiten zeigen, funktionale und const zu verwenden. Also werde ich Funktion navbar schreiben. Und das alles tut, ist etwas zurückzugeben. Also schreibe ich div hier. Div, das ist meine Navigationsleiste, und das ist eine funktionale Komponente. Und alles, was es ist, ist es buchstäblich nur eine Funktion und es gibt eine Reihe von js X also JavaScript und XML zusammen. Also kopieren wir nav bar und lassen Sie uns voran und schreiben dies als eine Komponente nav bar. Und Sie können sehen, dass dies erfolgreich kompiliert wurde. Also, wenn ich jetzt meinen Browser öffne und Bootstrap für jetzt schließen lassen. Wir brauchen sie nicht. Es steht, das ist meine Navigationsleiste. Und wenn ich etwas anderes in meiner Navigationsleiste ändere, ist das meine navbar 123123. Sie können sehen, es automatisch für mich aktualisiert und sagte Dies ist meine navbar 123123. Das ist also eine funktionsbasierte Komponente, eine funktionale Komponente. Und diese unterscheiden sich ein wenig von klassenbasierten Komponenten, die Sie in React 101 gelernt haben. Jetzt gibt es meiner Meinung nach keine richtige oder falsche Möglichkeit, Komponenten zu schreiben. Sie können sie als funktionale Komponenten schreiben oder als klassenbasierte Komponenten verwenden. Ich persönlich möchte nur sicherstellen, dass, wenn ich funktionale Komponenten verwende, aber sie alle Funktionen sind, oder wenn ich klassenbasierte Komponenten schreibe, dass sie alle Klassen den Code so standardisiert halten. Nun, wenn Sie einen Job auf der Straße haben und Sie bemerken, dass beim Schreiben reagieren, dass ein Abschnitt eine funktionale Komponente verwendet und ein anderer zweite klassenbasierte Komponente verwendet. Das ist eigentlich ALK. Es ist nichts falsch daran, und das ist nur eine Vorliebe von mir. Reagiert also auf eine, die wir funktionale Komponenten verwenden werden. Also gehen wir zurück zu unserem Browser und lassen Sie uns Bootstrap fünf eingeben, tatsächlich schließen das zu früh und Bootstrap F5 und ich will Navigationsleiste hier drin. Und so werde ich in Komponenten gehen. Und wo ist meine Navigationsleiste? Und es gibt eine in Ihrem speziell, die ich will , dass wir modifizieren und es ist dieser erste hier. Also werde ich das alles kopieren und wir werden hier auf ein paar Fehler stoßen. Also zuerst werde ich das alles dort einfügen und mich beim Einrücken ändern. Und jetzt können Sie sehen, wenn wir dies speichern, dass es erwartete entsprechende js X schließende Tag für HR sagt . Wo ist HR? Hier ist eine Personalabteilung. Und so können Sie in regulärem HTML HR so schreiben. Sie können BER schreiben, so. Sie können sogar IMG schreiben und es nicht wirklich selbst schließen, n js X. Sie benötigen alle Ihre selbstschließenden Tags, um tatsächlich mit einem Schrägstrich am Ende richtig selbst zu schließen. Also lasst uns voran gehen und das speichern. Es sagt, dass erwartetes entsprechendes js X schließendes Tag für die Eingabe in Zeile 3838, Spalte 1038, Spalte zehn mir hier zeigen wird. Das ist eigentlich nicht ganz richtig, aber es ist nah genug. Und was es sucht, ist dieses Eingabetag. Input ist die gleiche Sache JS Acts und er ist ein selbstschließendes Tag. Lass uns voran gehen und das speichern. Und jetzt gibt es mir noch ein paar andere Warnungen. Und ich glaube, zu diesem Zeitpunkt sollte das perfekt funktionieren. Also gehen wir zurück zu unserem Browser und schauen uns das an. Wenn es für Sie nicht funktioniert, kann einfach Refresh drücken und es sollte für Sie zu diesem Zeitpunkt funktionieren. Jetzt wurde das Dropdown-Menü nicht funktionieren. Wir haben Bootstrap nicht hinzugefügt. Javascript wird das nicht verwenden. Grundsätzlich wollen wir nur den Navbar-Home-Link, vielleicht einen deaktivierten Link und die Suche dort drin. Das ist alles, was wir zu diesem Zeitpunkt suchen. Nun ist eine Sache zu beachten, wenn Sie Ihr Inspektionswerkzeug öffnen. Wenn du also mit der rechten Maustaste auf Inspect klickst und in die Konsole gehst, wirst du sehen, dass es sich ziemlich schwer über viele Dinge beschweren wird. Und zuerst, lasst uns voran gehen und diesen Tab-Index reparieren. Meinten Sie Tab-Index? React und js X ist ein wenig. Jetzt gibt es keine Möglichkeit, das auszudrücken. Es ist wählerisch. Und ich tippe Tab-Index mit einem Großbuchstaben I. Und wenn ich meine Seite aktualisiere und zu den Fehlern zurückscrolle, existiert dieser Fehler nicht. Und das Schöne ist, dass es mir sagt, was es denkt. Ich meine, der andere hier und der hier treibt mich die ganze Zeit hoch, und das wird dich wahrscheinlich auch holen. Ist dies sagt ungültige DOM-Eigenschaftsklasse. Meinten Sie ClassName? Jetzt verwenden wir keine Klassen im Sinne von JavaScript-Klassen, aber wir verwenden Klassen im Sinne von HTML, CSS, Klassenattribute. Und so ist Klasse eigentlich ein reserviertes Wort. Es ist ein Schlüsselwort in JavaScript und wir wollen das nicht verwenden. Also, was ich tun werde, ist, ich werde alle diese auswählen und zur Auswahl gehen und dann das nächste Vorkommen hinzufügen. Und es wird nur all diese auswählen. Also möchte ich Klassen gleich auswählen und dann alle diese auswählen, jede einzelne. Und dann kann ich im Grunde tippen, ich kann alle diese Orte auf einmal eingeben. Ich kann einen Klassennamen mit einem Großbuchstaben N eingeben. Okay, lassen Sie uns fortfahren und aktualisieren und sich das ansehen. Und wir haben diese Fehler nicht mehr da drin. Wir haben jedoch einige Warnungen. Also lassen Sie uns das nur ein wenig aufräumen und wir müssen diese Warnungen vielleicht für ein paar Minuten ignorieren. Also dieses Dropdown, wir brauchen diese Navigationsleiste nicht. Wir werden diese Nav-Bar nicht nennen. Wir rufen den Film-Browser an. Und es wird sich über HRF mit leerem Link beschweren. Also nur ein Nummernzeichen, das ein leerer Link ist. Sagen wir einfach, zu irgendwohin zu gehen nur damit wir diese Beschwerden für jetzt loswerden, gehen wir zurück zu unserem Browser, drücken Sie Aktualisieren, und mit geöffneter Konsole sehen wir, dass es keine Fehler gibt. Wenn wir nun auf eines dieser klicken, wird dies nirgendwo hingehen. Sie können sehen, dass es irgendwo in der URL geht, tatsächlich nichts tut. Also werden wir das ziemlich bald angehen. Aber die Hauptsache, die wir hier wegnehmen sollten, ist diese Klasse, die Attributklasse ist eigentlich Klassenname in reagieren. Sie möchten also sicherstellen, dass Sie den Klassennamen verwenden. Und Sie möchten sicherstellen, dass alle Ihre Elemente JS Acts oder XHTML sind, nicht reguläres HTML, XHTML. Und der Unterschied ist wieder nur in normalem HTML können Sie Bild schreiben. Oder Eingabe, oder HR oder BR. Während in JS Acts und in XHTML tatsächlich Bildschrägstrich ist. Und deshalb siehst du mich in anderen Kursen oder anderen Modulen, die es so schreiben. Dies ist Old School Weg, aber so erwartet React auch, dass Sie Ihren Code, Ihren HTML, formatieren. Es erwartet also immer, dass in ihrer Reaktion, wenn es kompiliert wird, sagen wird, hey, wenn es hier eine BR ohne diesen Schrägstrich gibt, dann wird es wahrscheinlich ein schließendes BR-Tag geben. Aber in HTML gibt es kein schließendes BR-Tag als selbstschließendes Tag. Also verwenden wir dieses selbstschließende Tag wann immer möglich mit React. Okay, es gibt noch eine Sache, die wir hier tun müssen. Wir haben diese Funktion bei navbar. Wir müssen dies in eine andere Datei einfügen, sonst wird unsere Datei app.js wahnsinnig schwer zu bewältigen. Also gehen wir weiter und klicken Sie mit der rechten Maustaste auf SRC New File. Und ich werde hier einen neuen Ordner erstellen, der als Komponenten bezeichnet wird. Und das wird navbar ab.js genannt. Und was ich hier tun werde, ist, dass ich diesen Code buchstäblich ausschneiden werde. Lass mich zur Navigationsleiste dot js gehen und es dort einfügen. Und ich sagte Ihnen, ich würde Ihnen zeigen, dass es einen funktionalen Weg gibt, wie eine Möglichkeit, eine Komponente mit der Schlüsselwortfunktion zu schreiben. Und es gibt auch eine Möglichkeit, const zu verwenden. Also, wenn ich das irgendwann auf der Straße exportiere, werde ich const verwenden. Und was ich sagen will, ist die const nav bar gleich einer Pfeilfunktion, die noch keine Parameter enthält. Hier werden wir unsere Aufforderungen setzen. Wir reden darüber auf der Straße. Aber im Grunde ist dies eine anonyme Funktion, anonyme Pfeilfunktion, die in ein Konzept namens navbar geht. Und unten werde ich sagen, Export Standard navbar. Nun, das wird eigentlich nichts tun, außer unsere navbar aus unserer app.js zu entfernen und es kann sogar nicht kompiliert werden, weil navbar nicht definiert ist. Was wir jetzt tun müssen, ist navbar from.com importieren. Das heißt, dieser spezielle Ordner, dann der Komponentenordner. So Punkt Schrägstrich wird dieser bestimmte Ordner sein, dann der Komponentenordner und dann navbar. Wir müssen nicht navbar ab.js nehmen, weil es davon ausgehen wird ab.js war die einzige Zeit, die wir brauchen, um unsere Erweiterung zu schreiben , ist, wenn es layout.css oder etwas sein wird, aber React und im Grunde Web Pack im Allgemeinen ist gehen davon aus, dass Sie beim Importieren von etwas eine andere JavaScript-Datei importieren. Also lasst uns weitermachen und das speichern. Und wenn das richtig funktioniert, sollten wir sehen, dass sich hier nichts geändert hat. Das bedeutet, dass es für uns funktioniert. Jetzt ist React zu jedem Zeitpunkt wirklich gut auf diese Weise. Wenn Sie ein Problem haben, können Sie jederzeit auf Ihr Terminal schauen. Es wird Ihnen genau sagen, was das Problem ist. Wenn Sie mehr Details benötigen, können Sie immer Ihren Browser öffnen und es wird Ihnen genau das gleiche sagen. Also in diesem Fall ist nav bar nicht definiert. Das heißt, hey, versucht, navbar zu verwenden, aber es wurde nicht definiert, weil es auskommentiert wurde. Jetzt habe ich es importiert. Ich habe Zugriff darauf als Komponente. Es wird für mich funktionieren. Es wird erfolgreich kompilieren. in unserer nächsten Lektion Lassen Sie unsin unserer nächsten Lektioneine neue Komponente für unsere Homepage erstellen. Das wird also unsere Homepage hier sein. Wir werden mehr Details auf unserer Homepage haben. Also in der nächsten Lektion, gehen wir weiter und tun das. 6. Hinzufügen einer Home-Komponente: In Ordnung, lassen Sie uns weitermachen und eine funktionale Homepage-Komponente erstellen. Also lasst uns Konsole machen. Ich werde dieses Mal Konstante verwenden. Ich werde diese Startseite nennen, Home-Ansicht jetzt nennen es einfach zu Hause ist gleich Klammern Pfeil. Das ist also eine Pfeilfunktion. Und ich kann alles zurückgeben, was ich will. Und so werde ich sagen, Rückkehr mit einem div. Und in der Tat, eine coole kleine Sache, die Sie tun können, ist, dass Sie nicht div schreiben müssen, Sie müssen nur JS Acts öffnen und schließen. Und Sie können Hallo Welt von React 201 schreiben. Und beachten Sie, dass dieser hier nur Hallo von Reaktor eins sagt. Dieser sagt hallo Welten. Lass uns weitermachen und das loswerden. Und weil wir diese Konstante hier haben, ist das eine Pfeilfunktion und anonyme Pfeilfunktion, die nach Hause genannt wird. Wir können das Haus jetzt als Komponente bewerten. Gehen Sie weiter und speichern Sie das. Und lassen Sie uns unsere Seite aktualisieren und sagt hallo Welt von reagieren auf eine. Oder wenn ich wollte, könnte ich yada, yada, yada, und es wird automatisch für mich auf meiner Seite als auch aktualisiert. Nun, das ist cool und alles, nicht super, super hilfsbereit. Aber was es tat, war, dass es den Code aus der App nahm und ihn in eine Komponente legte, so dass Sie in unserer App einfach so tun können, als wäre dies unser ganzer App-Code hier. Es ist schön und sauber. Also wissen wir, dass wir eine Navigationsleiste haben, haben wir ein Haus Komponenten. Und wenn wir wollten, wenn wir nur zu Hause Komponenten ändern wollten, was wir tun könnten, ist home.html oder nav bar dot js zu öffnen und diese separat zu bearbeiten. Also ist es, unsere Komponenten getrennt zu halten, na ja, das ist die Idee sowieso, ist, dass wir unsere Komponenten getrennt halten können und deshalb nennen wir sie Komponenten. Also, was ich hier tun werde, ist, dass ich diesen Schnitt nehmen werde, den ich sagen werde , Import nach Hause von Punkt Schrägstrich Komponenten Schrägstrich nach Hause. Jetzt wird das nicht für mich kompilieren. Was ich tun muss, ist eine neue Datei in hier namens home.html zu erstellen. Und das lebt nur in meinen Komponenten. Sie können das hier sehen Komponenten. Es ist auch in meinen Komponenten. Und was ich tun werde, ist, ich werde sagen, fügen Sie das ein und exportieren Sie dann standardmäßig diese Home-Const. Und jetzt können Sie sehen, dass das funktioniert. Und wenn ich nur die Seite aktualisiere, gibt es einen kleinen Fehler in der Konsole, aber wenn ich die Seite aktualisiere, gibt es keinen weiteren Fehler. Und wenn ich jemals meine Homepage ändern wollte, bekomme ich, dass dies eine Änderung in einer anderen Datei ist. Und was daran schön ist ist, dass meine Homepage jetzt in sich geschlossen ist. Ich muss nicht all diese Logik in meine App schreiben , weil das Ganze Ihre App sein wird. Und wenn Sie das getan haben, kann diese Datei wirklich, wirklich lang werden. Wir reden über Tausende und Tausende von Codezeilen. Und das ist wirklich, wirklich schwer zu arbeiten. Das ist viel einfacher. Man kann einfach sagen, hey, schau, es gibt eine App, es hat eine Navigationsleiste, es hat ein Zuhause. Lassen Sie uns mit der rechten Maustaste auf Navbar, Go-to Definition. Es öffnet es für mich in VS-Code. Nicht alle Browser werden das tun, aber VS-Code ist wirklich, wirklich schlau, wenn es um JavaScript geht. Also, was ich möchte, dass Sie für Ihre Aufgabe hier tun, ist, dass Sie sicherstellen, dass Sie die Navbar-Komponente und eine Home-Komponenten haben. Stellen Sie sicher, dass sie sich in separaten Dateien befinden. Importieren Sie sie und verwenden Sie sie. Sie müssen nicht komplex sein. Die müssen nicht viel Text haben und hier, in der Tat, hat das nicht einmal sehr guten Text darin. Dies ist einfach nur sagt hallo Welt von reagiert auf eine. Gehen Sie weiter und stellen Sie sicher, dass das funktioniert, damit wir unseren Code in andere Dateien schreiben können. Und das wird nur unseren Code halten wird auch ihre Vernunft in der Schlange zu halten, um voranzukommen. 7. Eine About: Okay, lassen Sie uns weitermachen und eine neue Seitenansicht erstellen. Also im Moment, die einzige Seitenansicht, die wir haben und was ich eine Ansicht nenne. Und was ich eine Ansicht nenne, ist diese ganze Sache hier drin. Das ist also wie die Homepage-Ansicht. Und wenn es wie eine Über Seite gäbe, wäre das eine Über Ansicht oder wenn es eine spezielle Suchseite gäbe, wäre ich eine Überspannungsbewertung. Und wir verwenden diesen Begriff viel in Template-Rendering-Sprachen und Frameworks wie Django. Das ist also eine Ansicht und wir müssen eine Info Seite erstellen. Also haben wir keine Homepage, wir brauchen jetzt eine About Seite. Also lassen Sie uns const über Vw ist gleich einer Pfeilfunktion und Rückkehr, dies wird tun zurückgegeben und H2. Das sagt „Über uns“. Nun, das ist cool. Sie können tatsächlich sehen, dass über v zugewiesen wurde, aber es wird nie verwendet. Was wir tun können, ist, dass wir das hier reinwerfen können und wir über die Sichtweise sagen können. Ich hätte wahrscheinlich diese Homepage nennen sollen, die Home-Ansicht. Aber wenn wir vorwärts gehen, lassen Sie uns einfach diese benannte Ansicht behalten. Also haben wir das über Kraftstoff und Sie können sehen, dass es, es erfolgreich kompiliert. Aber das Problem ist, dass wir jetzt eine Homepage-Ansicht haben. Hoppla, und wir haben jetzt eine Homepage-Ansicht. Und wir hatten keinen Blick auf das Boot und wir wollen, dass sie auf separaten Seiten stehen. Was ich will, dass Sie tun, ist, dass Sie in einer Boot-Ansicht schreiben und dann möchte ich, dass Sie das in eine eigene Komponente verschieben. Und wenn Sie das getan haben, gehen wir weiter zur nächsten Lektion, wo wir lernen, was wir über das React-Router-DOM lernen, es ist ein anderes Paket. Wir werden in der nächsten Lektion ein neues Paket installieren. Stellen Sie also sicher, dass Sie dies in eine neue Komponente aufteilen. Das ist Ihre Aufgabe für diese Lektion. Wenn du das fertig bist, sehe ich dich im nächsten Video. 8. Installieren eines React: Okay, nun, wir müssen jetzt tun, ist, dass wir anfangen müssen , mit diesem Ding zu arbeiten, der Rotor genannt wird. Und der Rotor ist im Grunde, wie wir von verschiedenen Seiten aus fahren. Ist es Route oder ist es root? Ich sage „Route“. Wenn Sie also auf die Startseite klicken, wo, wenn Sie auf Länge klicken, tun Sie so, als wäre dies wie die About Seite. Es sollte nur über uns zeigen. Und wenn Sie auf die Startseite klicken, sollten sie nur den Homepage-Titel anzeigen. Und die URL sollte sich auch ändern. So sollte es sein, wie Schrägstrich wäre nur Ihr Zuhause ist Schrägstrich über wird die About Seite sein. Momentan rendert es alles zusammen. Also in den nächsten Videos, lassen Sie uns daran gewöhnen, mit React, Router DOM zu arbeiten. Und was wir hier tun müssen, ist das Terminal zu betreten. Lassen Sie uns einfach die Kontrolle C abbrechen, um dort abzubrechen. Ich werde Knoten V. Das wird Ihnen nur zeigen, dass ich eine falsche Version von Node verwende. Überraschenderweise, wenn ich diesen Knoten ändern werde, benutze 15, das ist meine neuere Version. Und was ich tun werde, ist npm installieren React, Router, Dash, DOM. Und das wird losgehen und im Grunde ein weiteres nützliches Werkzeug in der Welt von React installieren , das einen Rotor genannt wird. Also, wenn wir uns unsere package.json ansehen und hier reingehen, tun, tun, tun. Wir werden Abhängigkeiten sehen. Wir haben reagieren, reagieren, Dom, Reaktor, Router, DOM, also haben wir das jetzt drin. Und das ist nur der Beweis, dass es richtig installiert wurde. Also, was ich möchte, dass Sie für dieses bestimmte Video tun, ist einfach NPM installieren, React, Router, DOM ausführen. Das ist alles, was Sie tun müssen, wenn Sie das laufen oder ich schätze nicht laufen, aber wenn Sie das installiert haben, gehen wir über die nächste Lektion, wo wir unseren Browser-Router einrichten. 9. Verwendung der Browser: Okay, schauen wir uns mal an, unseren Router zu aktivieren. Also der Router, nur weil wir ihn mit npm install React Router dump installiert haben, tritt nicht wirklich automatisch in. Wir müssen sagen, dass es benutzt werden soll. Und was wir hier tun wollen, ist in index.js zu gehen und wir wollen Import eingeben, und wir werden dies strukturieren oder dekonstruieren. Wir holen den Browser-Router von React Router, dash.com. Und Sie können sehen, dass dies irgendwie dunkel ist, weil es gerade nicht wirklich verwendet wird. In unserem Strict-Modus, was ich tun werde, ist, dass ich hier ein neues Element erstellen werde. Und es wird diese App innerhalb davon bewegen. Und so habe ich strikten Modus reagieren, cool. Dann habe ich Browser-Rotor, und dann habe ich meine App darin. Das ist, was wir in den letzten Videos gearbeitet haben, ist unsere eigentliche App. Sie können sehen, was von der Punkt-App kommt. Punkt, Punkt-Punkt-Punkt, ab.js. Das kommt von hier. Und dann sagte ich, schließen Sie den Router für den Fall, dass wir keinen Router mehr verwenden wollen. Schließen Sie den strikten Modus. Nun, das sagt nur, dass unsere App innerhalb eines Routers sein wird. Alles, was das tut. Also lasst uns voran gehen und das speichern. Gehen wir zurück zu unserer app.js. Und hier drin müssen wir diese Sache machen, die einen Schalter genannt wird, und dann wechseln wir die Wurzeln. Und wenn Sie also eine JavaScript-switch-Anweisung geschrieben haben, sieht es ungefähr so aus. Wechseln Sie, Ihren Fall. Und dann wird es sagen, dass dein Fall Ding sein wird, etwas zu tun, zu brechen. Groß-/Kleinschreibung, Standard Mach etwas kaputt. Und so ist dies eine switch-Anweisung. Es ist, es ist im Grunde eine sehr schnelle if, else if - Anweisung, die nur eine andere Art von Syntax in JavaScript verwendet, viele verschiedene Sprachen haben eine switch-Anweisung und JavaScript ist einer von ihnen. Und was wir jetzt tun wollen, ist, dass wir unsere switch-Anweisung hier schreiben wollen. Also habe ich dieses div und was ich tun werde, ist, dass ich Schalter schreiben werde und der automatisch erstellte Schalter. Gehen wir weiter und bewegen das nach oben. Und dann kann ich Router schreiben. Pfad ist gleich dem Schrägstrich exakt. Und hier drinnen kann ich sagen, es wird eine Homepage geben. Es gibt eine andere Möglichkeit, diese beiden zu schreiben und lassen Sie uns diese Summe dieser Navbar außerhalb des Switches verschieben , so dass es immer global sein wird. Und es gibt eine andere Möglichkeit, das zu schreiben. Wir können sagen, dass Rotorpfad ein Boot schrägt. Und dann können wir in die Komponente übergehen. Wir können sagen, dass die Komponente die Ansicht „Über“ sein wird. Und dieses Mal ist es ein selbstschließendes Tag, lassen Sie uns das speichern und sehen, ob es irgendwelche Probleme gibt. Start von Npm. Und wir haben, ja, das macht Sinn. Switch und Router oder nicht definiert, weil ich es natürlich nicht importiert habe. Also, was ich hier tun möchte, ist es auch kein Router. Was ich hier mache, ist Route. Und was ich tun möchte, ist zu importieren, wechseln und auch von für React, Router, Dumm. Lassen Sie uns voran und speichern Sie das erfolgreich kompiliert. Lass uns voran gehen und sehen, ob das tatsächlich funktioniert. Also, wenn wir zu localhost Port 3 Tausend gehen, können wir sehen, dass sagt hallo Welt von reagieren auf eine. Wenn ich zum Schrägstrich gehe, wird die Info Seite angezeigt. In der nächsten Lektion gehen wir weiter und fügen hier Links hinzu , damit wir Links zu und von den Seiten verknüpfen können. Es ist ein bisschen anders als ein normaler Link, denn Sie werden feststellen, wenn ich das mache, ist es irgendwie schnell blinkt. Also, wenn ich nur Schrägstrich ein Boot eingegeben, Sie sehen andere Seite Art von Blitzen, dauert eine schnelle 15 oder 20 Millisekunden zu laden. Es ist nicht sofort. Wir können tatsächlich machen, dass vollständig sofort, wenn Sie auf einen Link klicken. Und das wird unsere App zu einer einseitigen Anwendung machen. Wir werden eine progressiven Web-App genannt. Das werden wir in der nächsten Lektion tun. Für den Moment möchte ich, dass du sicherstellst, dass du das Setup gewechselt hast. Innerhalb Ihres Switches haben Sie verschiedene Routen. Sie sollten eine Route für Ihre Homepage haben, eine für Sie über die Ansicht geschrieben. Und es gibt zwei verschiedene Möglichkeiten, dies zu tun. Sie sind genau gleich, es tut genau das Gleiche. Eine Sache, auf die Sie jedoch achten wollen, ist dies Ihre Homepage, also wird nur Schrägstrich Ihre Homepage sein. Und hier steht anspruchsvoll, das ist die einzige Route, die genau gehen wird. Und das kommt zu sagen, wenn dieser Pfad genau dieser ist, dann wird er unsere Homepage rendern. Wenn der Pfad Schrägstrich um nicht genau ist. Hier ist ein spezieller Fall. Wenn es genau das ist, dann rendern Sie die Homepage. Ansonsten ist dieser Pfad Schrägstrich über Komponente ist über Ansicht und wir wissen über die, über Kraftstoff, wir wissen über die Home-Komponente. Wir haben die schon ausgebaut. Wir haben, wir haben diese importiert, wir haben diese in verschiedenen Komponentendateien bereits. Und das sind also, das sind nur zwei verschiedene Möglichkeiten, genau das Gleiche zu tun. Wie auch immer du auch schreiben willst, ist völlig okay für mich. Ich wollte dir nur zeigen, dass es diesen Weg gibt, und es gibt diesen Weg. 10. Reagieren von Links: Alles klar, was wir haben ist, wenn ich einfach Google Chrome öffne und wir haben diese navbar und derzeit die Links nicht wirklich irgendwo gehen. Gehen wir weiter und stellen Sie sicher, dass diese Links irgendwo hin gehen, damit wir zwischen der Über Seite und der Homepage wechseln können. Und dafür müssen wir navbar ab.js öffnen. Und so haben wir diesen Film-Browser, und das ist nur unser Titel. Das ist genau hier oben. Und es steht, dass es irgendwo hin geht. Anstatt also ein zu sagen, was wir sagen werden, ist, dass wir all diese packen werden. Wir werden einen Link benutzen. Wir haben das noch nicht importiert, also wird das ein kleines Problem sein, aber wir werden es in nur einer Sekunde erreichen. Ich werde alle schließenden Link-Tags, die Anker-Tags und stattdessen Schrägstrich Link greifen . Und all die HRFs. Href wird es auch sein. Jetzt, dass Film-Browser gehen, um Schrägstrich nach Hause wird auch gehen, um Schrägstrich. Und das wird nicht retten. Sie können sehen, dass dies tatsächlich fehlschlägt, weil die Verknüpfung nicht definiert ist. Lassen Sie uns voran gehen und Link importieren. Importieren Sie den Link von React, Router, dash.com. Und da gehen wir hin. Okay, also lasst uns weitermachen und das von ihrer Verbindung ändern. Derjenige, der gerade regelmäßige Lincoln dort hat und ja, nennen wir es einfach wegen uns nicht. Und das wird gehen, um Schrägstrich über und wurden nicht Schrägstrich über ist genau hier passt es zu diesem bestimmten Pfad. Also Schrägstrich über deaktiviert. Lass uns weitermachen und das hier machen, sagen wir bald kommen. Das hier zu tun, spielt keine Rolle. Dieser Link ist sowieso deaktiviert, so dass er so ziemlich überall hingehen kann. Und ich glaube, das ist alles, was wir hier drin haben. Und gehen wir zurück zu unserem Browser, aktualisieren. Und wir haben eine About Seite. Und wenn ich diese anklicke, können Sie sehen, dass es sofort ist. Es ist super, super schnell. Und das Schöne daran ist, dass es nicht neu lädt, all mein JavaScript nicht alle meine CSS neu zu laden. Er ist schon sofort geladen. Und so, wenn ich, wenn ich auf eine von diesen klicken, alles hat einen Schalter aus den Inhalt für mich. Und so, wie wir das tun, ist wir schreiben Link, die von einem React Router DOM importiert wird. Also haben wir Link-Klassennamen genau wie ein normales HTML-Element. Mehr HTML-Elemente Attribute anstelle von HREF, schreiben wir 2x gleich und dann setzen wir in einen Link, der tatsächlich existiert. Also Schrägstrich geht zur Homepage, Schrägstrich Über, geht zu unserer About Ansicht. Dann sagen wir Schrägstrich Link. So funktioniert es sehr wie unregelmäßige Anker-Tag in HTML. Dieser sagt einfach, dass hey, weil Sie einen Router verwenden, können Sie diese Inhalte sofort austauschen. Sie müssen sich keine Gedanken über das Neuladen der Seite oder irgendetwas machen. Es weiß nur schon, dass es existiert. Und so wird das wirklich, wirklich schnell sein, wenn Leute irgendwann Ihre Seite laden. Wissen Sie, sobald Sie Ihre Seite auf einem Live-Server haben, wird jemand sie laden und es wird einfach sofort sein. Also gehen Sie vor und ändern Sie diese ein Tags in ein Link-Tag. Vergessen Sie nicht, Ihr HREF 2A, zwei Attribut zu ändern. Und wenn du das getan hast, lass uns zur nächsten Lektion gehen, wo wir vielleicht eine neue Komponente mit dem Namen hinzufügen, ja, es ist keine neue Komponente namens Hero. Und wir werden nur einen schönen kleinen Titel auf jeder unserer Seiten hinzufügen. 11. Die Hero: Okay, lassen Sie uns eine neue Komponente namens Held hinzufügen. Also lassen Sie uns diese home.html Datei öffnen und lassen Sie uns eine neue Komponente erstellen. Also konstant, nennen wir es Hero ist gleich einer leeren Pfeilfunktion und es wird einfach etwas Bootstrap zurückgeben. So können wir den Header sagen. Und das wird ein Heldenbereich sein. Ich zeige dir in nur einer Sekunde, was das ist. Der Klassenname wird VG dunkel sein. Ich kann mich nicht erinnern, ob das Bootstrap oder Rückenwind ist. Ich glaube, das ist Bootstrap. Also BG, dunkler Text weiß. Lasst uns den ganzen Weg um fünf auffüllen. Und sagen wir einfach eins. Dies ist eine Heldenkomponente. Jetzt wird das nichts tun. Sie können hier sehen, dass es tatsächlich gestaut wurde und wir erhalten eine Warnung, die zugewiesen ist, aber sie wird nie in unserem Haus verwendet. Was wir tun können, ist, dass wir jetzt Held als Komponente sagen können. Und das scheint vollkommen in Ordnung zu sein. Nun, wenn wir zurück zu unserer Seite gehen, Nun, ich bin derzeit auf der über Seite, aber wenn ich auf die Homepage gehe, Dies ist eine Heldenkomponente. Jetzt hatten wir das nicht bis zu diesem Punkt. Und was wir tun können, ist, wenn wir es nicht auf der Übersichtsseite wollen, können wir es einfach von der Übersichtsansicht lassen. Aber was wir tun können, ist zu sagen, hey, ich mochte diese Komponente und ich möchte auch, dass sie auf der Überseite ist. Also lasst uns voran gehen und das in seine eigenen Komponenten namens Hero aufteilen. Und was ich tun werde, ist eine neue Datei namens Hero ab.js zu erstellen und sie einfach dort einzufügen. Und ich werde Exportstandard schreiben und dann den Namen dieses Const Helden. Und wenn ich öffnete home.html s, Es wird versuchen, Helden zuzugreifen, aber es ist nicht definiert. Sie können tatsächlich sehen, dass das hier unten steht. Also, was ich jetzt tun möchte, ist Held aus nicht Schräg- oder Punktschrägkomponenten zu importieren aus nicht Schräg- oder , weil wir bereits im Komponentenordner sind. Also wollen wir in diesem Ordner sagen, So Punkt Schrägstrich Held. Und das funktioniert für uns. Wenn die Dinge funktionierten, sollten wir keine Veränderung sehen. Das ist perfekt. Wenn Sie während des Refactoring keine Änderungen sehen, während Sie Code verschieben , ist das genau das, was Sie wollen. Also lassen Sie uns voran gehen und bewegen Sie diesen Helden und nicht bewegen, aber lassen Sie uns diesen Helden hinzufügen. Also werde ich Zeile eins und Zeile sieben kopieren. Und ich werde zu meiner Ansicht gehen. Das werde ich auch hier reinkleben. Und wir müssen hier ein bisschen Arbeit machen. Also, in meiner Ansicht, werde ich auch Held importieren. Dies ist also eine Komponente, die in zwei verschiedenen Dateien verwendet wird. Und ich möchte js X zurückgeben. Ich möchte diesen Helden nach oben bewegen. Ich möchte das über uns nach oben bringen. Lassen Sie uns das loswerden. Und alles sieht gut aus. Jetzt, wenn ich hierher zurückgehe, haben wir diese Heldenkomponente auf beiden Seiten. In der nächsten Lektion werde ich Ihnen zeigen, wie wir dies basierend auf der Seite ändern können, damit wir dies dynamisch machen können, da dies eine Heldenkomponente ist. Dies könnte sagen, willkommen in Film-Browser, aber wenn es sagt Willkommen zum Film durchsuchen Sie auf jeder Seite, die gehen, um Art von alt zu werden. Niemand möchte alte Inhalte auf jeder einzelnen Seite sehen. Wir wollen also sehen, dass dies über uns sagt, oder warum wir existieren oder etwas. Und die Homepage wird sagen, willkommen, auf eine oder etwas in dieser Richtung zu reagieren. Aber im Moment möchte ich, dass du eine neue Heldenkomponente erstellst. Und dann möchte ich, dass Sie es in Ihre Homepage importieren und es auch in Ihre Über Ansicht importieren. Stellen Sie sicher, dass Sie es an beiden Orten verwenden. Es kann hart codiert sein und sollte zu diesem Zeitpunkt hartcodiert sein. Und so wie dies eine Heldenkomponente in der nächsten Lektion ist, wir, wenn Sie dies getan haben, über das Übergeben von Requisiten sprechen. 12. Component: Ordnung, lassen Sie uns einen Blick auf die Übergabe einer Textaufforderung an die Heldenkomponenten werfen. Also auf unserer Homepage haben wir diese Heldenkomponente und es macht einen Header. Mit diesem ist ein Held Komponenten. Und wir wollen, dass dies anders ist, weil wir derzeit in der About Ansicht das Gleiche haben. Wir importieren diese Heldenkomponente. Aber wenn ich mit der rechten Maustaste klicke und zur Definition gehe, sagt es genau das Gleiche und das ist keine Möglichkeit, dein Leben zu leben. Was Sie tun möchten, ist, dass Sie in der Lage sein wollen, etwas flexibler zu übergeben . Also, was wir tun werden, ist zuerst auf unsere Homepage zu gehen und wir werden unsere erste Aufforderung hinzufügen. Und es wird nur Text genannt werden. Und dieser Text wird willkommen sein, um 201 zu reagieren. Und in der Tat, weil dies nur eine normale Zeichenfolge ist, brauche ich diese geschweifte Klammer da drin nicht. Also haben wir diese Texteigenschaft oder ein Attribut in HTML, aber in React nennen wir es eine Requisite. Und weil es Texte genannt wird, aber wir können jetzt in unserem Helden tun, können wir geschweifte Klammern verwenden, Text eingeben, und dann können wir den Text innerhalb unserer Komponente setzen, wie dieser Text. Und es heißt willkommen, auf einen zu reagieren. Die About Seite hat nichts anderes als die Homepage sagt Willkommen, um auf eine 1s zu reagieren. Es ist also, es wird zu diesem Zeitpunkt ein wenig dynamischer. Nun, was wir für unsere Wohnungsansicht tun wollen, ist, dass wir hier auch die Heldenkomponente verwenden. Sagen wir also, der Text wird über uns sein. Und wieder, was das tun wird, ist zu sagen, hey, rendern Sie diese Heldenkomponente mit einer Eigenschaft von Text. In unseren Helden-Komponenten haben wir Collins Held ist gleich. Und dann machen wir hier eine Restrukturierung. Also, dass die erste destrukturierte Variable Text sein wird, und das entspricht dem Eigenschaftsnamen genau hier. Und dann können wir das innerhalb unserer Return-Anweisung verwenden. Und wenn wir jetzt auf unsere Homepage gehen, sagt es über uns und das ist perfekt, dass der Inhalt dynamisch verändert wird. Nun, was schön daran ist, dass wir jetzt einen Helden haben. Wir können dieses H2 loswerden, und auf unserer Homepage können wir das H1 loswerden. Und wir haben diese Seite irgendwie zusammenkommen, diese beiden Seiten kommen zusammen. Ich möchte, dass du sicherstellst, dass du eine Heldenkomponente hast, nicht die Hausaufgaben, aber hey, Heldenkomponente, das nimmt eine Immobilie. Pass in die Requisite. Verwenden Sie den Text, den Sie dort übergeben möchten, aber geben Sie diese Requisite in Ihre Heldenkomponente und rendern Sie diese Requisite dann in Ihrer Return-Anweisung. Probieren Sie das aus. Und wenn Sie fertig sind, gehen wir über die nächste Lektion, wo wir einfach einige grundlegende Inhalte auf unserer Homepage und unserer Info Seite hinzufügen. 13. Generische Inhalte hinzufügen: Okay, lassen Sie uns ein wenig Inhalt auf unserer Homepage und unserer Info Seite hinzufügen. Das ist also eigentlich nicht super reaktiv, aber das ist irgendwie wichtig für den Aufbau einer Seite. Und so verwenden wir Bootstrap und ich bin in meiner Home-Dot-JS-Datei hier. Und was ich tun kann, ist der Typ div Klassenname gleich Container. Div Klassenname ist gleich rho d von ClassName. Und das sieht viel wie normales HTML aus, nur das Schreiben von Bootstrap fünf, class_name wird Kohle sein, LG acht Offset LG auch. Und das wird nur meine acht von 12 Spalten hier zentrieren , die ich einstellen werde. Und gehen wir weiter und schreiben Lorem ipsum hier rein. Und lassen Sie uns das retten. Gehen Sie zurück zu unserer Homepage. Wir können sehen, dass wir ein paar Lorem ipsum hier drin haben. Jetzt müssen wir etwas Marge hier in Rand oben und unten hinzufügen. Also Marge y von fünf. Da gehen wir. Das sieht ein bisschen besser aus. Und was wir hier tun können, ist, weil dies ein Absatz sein soll. immer, was wir tun werden, ist zu sagen, dass dieser Absatz class_name geführt wird. Und das wird diesen Text nur ein bisschen größer machen. Und das ist wieder nur normales Bootstrap. Und so kann man sehen, dass der Text ein bisschen größer wird. Lass uns weitermachen und das schließen. Und auf unserer Seite machen wir genau das Gleiche und Sie können alles schreiben, was Sie wollen. Ich werde das nur als Dummy-Text behalten. Und wenn ich am Ende davon komme, bevor ich Ihnen den gesamten Quellcode gebe, werde ich ändern, was dieser Text auf der Homepage ist. Ich wollte nur nicht, dass du zusehen musst, wie ich das schreibe , denn das ist langweilig und keine Möglichkeit, dein Leben zu leben. Und so werde ich das einfach hier einfügen. Und diese Formatierung wurde lustig. Also, was ich tun werde, ist zuerst, ich habe eine Erweiterung namens hübscher installiert. So PRE TTIP, ER, Es ist dieses und es ist ein einfacher Code-Formatierer. Und so, sobald Sie das installiert haben, können Sie Command Shift P drücken, Shift B unter Windows steuern, alle Verschiebung P oder so, Sie werden diesen kleinen Kerl offen wollen. Wenn Sie also wie ALT P treffen, können Sie einfach das Größer-als-Zeichen drücken und dann Format Dokument eingeben. Und dies könnte Sie bitten, mit hübscheren zu konfigurieren, in diesem Fall werden Sie gehen, Sie müssen hübscher auswählen, was völlig in Ordnung ist, und es wird Ihren Code für Sie formatieren. Also vielleicht werde ich das für ein paar andere Dateien hier tun, um uns dies auf dem Home-Format-Dokument zu tun. Lassen Sie uns dies im App-Format tun. Das Dokument, nein, nichts hat sich geändert. Perfekt. Wir machen es dort gut. Index.js, wir können schließen, wir werden das nie wieder berühren. Und das war's auch. Und so hat das meinen Code für mich gut formatiert. Und jetzt, wenn ich nach Hause gehe, haben wir andere Inhalte und ja, stellen wir sicher, dass wir hier auch verschiedene Lorem haben, Lorem 25. Nur damit wir sehen können, dass sich dies in der Tat verändert, und das war genau der gleiche Text. Sehen wir uns Lorem 50. Ich habe nur eine Abkürzung auf meinem Computer für Lauren 25 und Lauren 50. Da gehen wir. Das sieht anders aus. So haben wir jetzt eine Homepage und über die Seite mit einer einseitigen Anwendung. Jetzt nutzt unsere React-Website dies und was daran schön ist. Wenn jemand zu Ihrer Website kommt, gehen Sie direkt zu einem Schrägstrich ein Boot und es wird die About Seite für uns zu rendern. Wir müssen nichts Magie machen. Es findet es einfach magisch für uns heraus, was großartig ist. In unserer nächsten Lektion. Sobald Sie fertig sind, daran zu arbeiten und es so aussehen zu lassen, wie Sie wollen. Hier können Sie Bilder und alles andere hinzufügen, was Sie wollen. Wenn du bereit bist. Lassen Sie uns über die nächste Lektion gehen, in der wir eine neue Such-Routenendansicht erstellen, weil unsere Suche momentan nichts tut. Das funktioniert nicht. Und wir wollen, dass das funktioniert. In den nächsten Videos werden wir also mit der Suche arbeiten. 14. Hinzufügen einer Suchkomponente: Okay, lass uns weitermachen und eine Suchroute und eine Ansicht erstellen. Und was ich hier tun werde, ist vor allem, was ich nur sagen werde importieren Suchansicht aus Punktschrägstrich Komponenten Schrägstrich Suche Ansicht. Und jetzt gibt es das nicht. Und das wird sich in nur einer Sekunde über mich beschweren und ich werde hier eine neue Route erstellen. Und diese Route wird einen Pfad der Schrägstricksuche haben und das ist alles, was sie tun wird. Und hier kann ich die Suchansicht sagen und ich möchte nicht, dass das geschlossen wird, ich möchte, dass das sich selbst schließt. Jetzt wird das nicht kompilieren. Dies wird offensichtlich sagen, dass Komponenten Suchgebühr nicht existiert, kann es nicht lösen. Lasst uns weitermachen und es existieren lassen. Also lasst uns unser Zuhause schnappen. Und ich werde das einfach als Suchansicht Dot js speichern. Und wir müssen dies ändern, um die Suchansicht zu ändern. Und ja, lassen Sie uns unseren Helden so halten, wie er ist. Weil mir das irgendwie gefällt. Und lassen Sie uns dieses Sprichwort so etwas wie Sie suchen. Und dann ein paar Sachen da drin. Wir lassen es so, wie es vorerst ist. Stellen Sie sicher, dass wir das exportieren. Okay, jetzt funktioniert es. So können wir jetzt in Schrägstrich Suche gehen. Und da steht, dass Sie suchen. So haben wir jetzt sehr, sehr schnell eine Suchansicht erstellt. Und wir haben eine neue Route geschaffen. Und auf dieser Strecke habe ich diese Version genauso benutzt, wie wir die Homepage benutzen , nur um Ihnen zu zeigen, dass Sie diese zwei verschiedene Möglichkeiten machen können. Ich hätte es genauso einfach auf diese Weise schreiben können. Ich entschied mich, es auf diese Weise zu schreiben. Vielleicht ist der nächste, den du am Ende schreibst, oder der nächste, den wir am Ende schreiben, weil wir noch eins schreiben werden. Wir werden, wir werden diesen Weg nur verwenden, um Ihnen zu zeigen und zu zeigen, dass Sie beide austauschbar verwenden können. 15. Search: Okay, lassen Sie uns über die Verwendung des Status sowie Übergabe des Status durch Eingabeaufforderungen an acht sprechen, eine andere Komponente. Das klingt vielleicht ein bisschen beängstigend, ein bisschen überwältigend, aber nein, wir machen es nur einen Schritt nach dem anderen, wie wir es immer tun. Also in unserer App hier, was wir sagen können, ist diese magische Sache namens cont. Wir gehen zu D-Struktur und Array. Also werden wir diese Suchergebnisse Komma setzen Suchergebnisse nennen. Und das wird Staat benutzen, nicht Statue, sondern Staat. Und es wird dauern, ich denke, es wird ein Objekt sein. Keine Suchergebnisse brauchen wir etwas, um später mit der Map-Funktion durchlaufen zu lassen. Also werden wir ein Array als Standard setzen. Jetzt geben Sie an, ist nicht wichtig, wir müssen dies importieren. Also lasst uns von Import gehen. Verwenden Sie staatenlos auch, Sie bekommen US-Effekt, während wir hier sind, wir werden dies ein wenig auf der Straße verwenden. Und das werden wir aus React importieren. Und wenn wir kompilieren, sagt das zumindest, dass es nicht verwendet wird, aber zumindest beschwert es sich nicht, dass es undefiniert ist. Jetzt müssen wir noch eine Sache in Ihrem const Suchtext festlegen. Das ist, was wir auf unserer Seite zeigen und Suchtext festlegen. Ich werde Ihnen zeigen, wie Requisite in nur einer Sekunde funktioniert. Verwenden Sie also den Status und der Standardwert wird eine leere Zeichenfolge sein. Ordnung, also werde ich Ihnen zeigen, wie das funktioniert, aber wir müssen zuerst das Setup bekommen. Also lasst uns weitermachen und das Setup holen. Eigentlich nominieren. Darauf werde ich zurückgehen. Also, wenn Sie setzen Suchergebnisse verwenden, werden Suchtext gesetzt oder was auch immer Sie dies nennen. Dies wird Ihre Variable sein, auf die Sie zugreifen können. Dies wird die Funktion sein, die Sie dann diesen Zustand setzen. Und wenn Sie also ganz neu in State sind oder wenn Sie relativ neu sind, um zu bleiben und Sie haben, haben Sie mit ein wenig in Lake klassenbasierten klassenbasierten Komponenten gespielt, wie zum Beispiel in reagieren eins zu eins. Nun, wir verwenden in reagieren eins zu eins und reagieren eins zu eins. Verwenden Sie diesen Punktstatus. Während wir das nicht in funktionsbasierten Komponenten haben. Also verwenden wir einen Haken namens US-Bundesstaat. Und wir können dies ändern, indem wir sagen, setzen Suchtext, neuer Text. Und, und so gehen wir voran und machen diese Konsole. Punktprotokoll Suchtext ist die Standardeinstellung. Ich habe da einen Tippfehler, aber das ist in Ordnung. Ich werde das in einer Sekunde löschen. Und dann lassen Sie uns Timeout setzen. Und lassen Sie uns dies auch zu einer Pfeilfunktion machen. Und das ist Zeit, die um zwei Sekunden vorbei ist. Wir werden sagen, setzen Suchtext, neuer Text. Und dann gehen wir zu console.log. Suchtext ist der neue Text. Und so lassen Sie uns zu unserem Film-Browser gehen und unsere Seite aktualisieren. Und so groß genug habe ich nicht schnell genug gemacht. Und Sie können sehen, dass sich das tatsächlich ein wenig ändert. Nun, da ist ein bisschen ein Fehler hier drin. Und was ich tun werde, ist, dass ich das loswerden werde, nur weil und das ist wirklich wichtig zu wissen. Da gehen wir. Es gibt eine und wollte nicht, dass mein Browser jedes Mal, wenn Sie die Set-Funktion aufrufen, Verwendung des Status wird Ihre gesamte App erneut ausgeben. Also, was das tat, war, dass es meinen Suchtext bekam, was standardmäßig nichts war. Dann nach zwei Sekunden würde es meinen Suchtext auf neuen Text setzen. Da der eingestellte Suchtext jedoch im Zustand verwendet wurde, hat er meine gesamte Komponente neu gerendert, was zufällig meine gesamte Anwendung ist. Was dann wieder liest es von oben nach unten und sagt, okay, lassen Sie uns Text suchen wird nichts in Sekunden sein. Legen Sie es als neuen Text fest. Oh, sieh dir das an. Ok. Suchtext erneut geändert, rendern Sie die App erneut. Und es geht immer und immer wieder. Es gibt einen Weg, den ich Ihnen zeigen werde, wie das mit US-Effekt auf der Straße funktioniert. Aber jetzt lassen Sie uns voran gehen und einige dieser Dinge in unsere Suchansicht geben. Und so wird unsere Suchansicht hier wie ein Schlüsselwort sein wird und das ist ein Requisiten-Suchtext. Und wenn wir zu Suchergebnissen kommen, wollen wir das auch in unsere Sichtsuche einbringen. Also werden wir sagen, die Suchergebnisse sind gleich zwei Suchergebnisse. Und was das tun wird, ist, weil wir eine Navigationsleiste haben und hier haben wir auch diese verschiedenen Komponenten. All diese Informationen, wird der Zustand in der Gesamtanwendung gespeichert werden. Und so in, sagen wir, unsere Navigationsleiste und wir könnten sagen, setzen Suchergebnisse wird die Suchergebnisse ändern. Wenn sich diese Suchergebnisse ändern, wird es dann diese Ansicht oder diese ganze Anwendung erneut rendern und es wird unsere Suchansicht für uns ändern. Also lasst uns voran gehen und das speichern. Und lassen Sie uns unsere Suchansicht öffnen. Also klicke ich mit der rechten Maustaste und gehe zu Definition. Und unsere Suchansicht muss jetzt Requisiten und ESA nehmen, Keywords und Suchergebnisse nehmen. Also lasst uns D diese strukturieren. Also sagen wir Keywords und Suchergebnisse, und ich habe das einfach aus meiner Zwischenablage kopiert und eingefügt. Ich habe eine ausgefallene Zwischenablage, so dass ich mehrere Dinge gleichzeitig kopieren und einfügen kann. Und dann möchte ich dieses Schlüsselwort ändern. Also schau dir dieses Schlüsselwort an und es wird nur einen Text in meinem Helden ändern. Wenn ich also zur Schrägschrägsuche gehe, ist dort standardmäßig nichts drin. Aber wenn ich das ändere, weil dies der Standardwert ist. Suche nach Punkt-Punkt-Punkt, Suche nach Punkt-Punkt-Punkt, 1-2-3, 1-2-3, 4-5-6, 4-5-6, 4-5-6. Das wird also nur den regulären Suchtext dort verwenden. Jetzt will ich nicht, dass es einfach sagt, wonach ich suche. Ich möchte, dass das einen Satz sagt. So ist const Titel gleich einem Template-Literal. Sie suchen nach, und dann nach einem Schlüsselwort. Und was wir tun können, ist, anstatt eine Zeichenfolge hier zu verwenden, können wir diesen Titel verwenden. Sie suchen nach. Und dann leer. Da ist noch nichts drin. Das ist okay. Wir werden damit arbeiten. Nun lassen Sie uns auch weiter gehen und unsere Suchergebnisse in der Konsole protokollieren. Console.log oder Suchergebnisse sind die Suchergebnisse. Das ist alles, was wir jetzt tun werden. Schließlich werden wir die Suchergebnisse nehmen, die eine Liste oder ein Array sein wird. Und wir werden jede Schleife durchlaufen und etwas Text in unsere Seite einfügen, damit wir die Suchergebnisse mit einer API durchlaufen können. Wir sind noch nicht so weit gekommen, wir mussten das nur ungefähr zur gleichen Zeit übergeben. Also als eine kurze kleine Zusammenfassung, was wir hier getan haben, ist, dass wir Suchtext und Suchtext setzen wird Zustand verwenden. Setze Suchtext ändert den Suchtext durchsucht. Und wenn der Suchtext geändert wird, wird diese Funktion verwendet, um die gesamte Anwendung erneut zu rendern, was wir die ganze Zeit wollen oder nicht. Und so gibt es einen Weg, um das mit US-Effekt zu umgehen. Dann sagten wir, dass Suchtext und die Suchergebnisse, die eine Zeichenfolge und ein Array sein werden, Requisiten der Suchansicht sein werden. So können wir diese in die Suchansicht geben, um die Straße runter zu rendern. Dann haben wir in unserer Suchansicht gesagt, es gäbe ein Stichwort und Suchergebnisse. Dieses Schlüsselwort setzen wir in ein Template-Literal und ein Konzept namens Titel. Und wir haben diesen Hero-Text dynamisch geändert. Und wenn wir unsere Suchergebnisse ändern, wenn wir dieses Schlüsselwort ändern, dann wird sagen, dass Sie nach Star Wars suchen, suchen Sie nach Star Trek. Du hast nach Schergen oder irgendwelchen Filmen gesucht, nach dem du suchen willst. Es wird viel dynamischer auf der Straße sein. Jetzt geh weiter und gib dem eine Chance. Das mag ein wenig verwirrend sein, aber zu diesem Zeitpunkt muss es nicht wirklich zu viel Sinn machen, weil wir irgendwie in der Mitte von ein paar Hauptmerkmalen sind hier. Und so funktioniert es, wenn Sie online unterrichten , ist, dass es in mehrere Videos aufgeteilt werden muss. Und so sind wir hier in einem seltsamen, kleinen Zustand. Und wenn das für dich keinen Sinn ergibt, wenn das, was ich in diesem Video gemacht habe, für dich keinen Sinn ergibt, ist das okay. Macht das trotzdem durch, gib dem einen Schuss. Sie können immer auch den Quellcode überprüfen. 16. Schlüsselveranstaltungen binden: Na gut, gehen wir weiter und arbeiten mit unserer Suchleiste. Also in unserer Suchleiste, wenn wir ein paar Sachen eingeben, mussten wir tatsächlich etwas tun. Und derzeit tut es nichts. Also lasst uns in unsere Navigationsleiste gehen, wo unsere Suche ist. Und hier, wissen Sie, lassen Sie uns dieses Dokument formatieren. Also haben wir diese Eingabe und wir wollen hier einen Wert setzen. Also wird der Wert sein, sagen wir Test. Es ist Test, aber Sie können sehen, dass wir tatsächlich einen Fehler in Ihrem Ohr sagen oder eine Warnkomponente ändert einen unkontrollierten Eingang gesteuert werden. Dies wird wahrscheinlich dadurch verursacht, dass der Wert von undefiniert zu einem definierten Wert wechselt , der es war, es war derzeit Fragezeichen und jetzt ist es Test, was nicht passieren sollte. Entscheiden Sie, ob Sie für die Lebensdauer der Komponente einen kontrollierten und unkontrollierten Eingang verwenden möchten. Hier gibt es mehr Informationen, darüber können Sie immer lesen. Aber im Grunde, was das sagt, ist, hey, das war schreibgeschützt und du kannst es nicht eingeben und ich weiß nicht, ob du mich hier auf meiner Tastatur zuschlagen hören kannst, aber ich tippe, nichts passiert, und das ist ein Problem. Also, wie haben wir das umgehen können, um zu reagieren? Nun, zuerst sagt reagieren immer, dass ein Eingabefeld immer nur gelesen wird , wenn Sie versucht haben, diesen Wert zu setzen. Nun, wir müssen tun, ist, dass wir diesen Wert setzen müssen, um den Suchwert zu sein. Wir benötigen auch einen onchange Ereignishandler, um dies tatsächlich zu behandeln. Und wir werden sagen, Suchtext aktualisieren. Das macht momentan keinen Sinn. Aber wenn, wenn, wenn, wenn es in der Nähe ist, einige von denen nö, zu viel. Da gehen wir. Das wird einfach nett hier und ich möchte das nur etwas kürzer machen, damit wir ungefähr alle Sachen im selben Fenster sehen können . Wir können const sagen, ob wir es aktualisieren Suchtext nennen. Suchtext aktualisieren ist gleich einem Ereignis. Das ist der erste Parameter. Und wir können sagen, Konsole Punkt Log e Punkt Punkt Punkt Wert. Und das sagt einfach nur, dass dies eingeschaltet ist, sagen wir eine Eingabe. Es wird sagen, E dot, im Grunde Eingabepunktwert, was auch immer dieser Wert ist, es wird viel für mich kosten. Nun, das ist nicht super-hilfreich, da dies derzeit hart codiert ist. Der Wert besagt, dass der Suchwert ist. Und wir brauchen dies, um etwas dynamischer zu sein, wie der Suchtext. Aber Suchtext wird noch nicht hinzugefügt. Also lassen Sie uns voran und stellen Sie sicher, dass wir es hier in unserer Navigationsleiste hinzugefügt haben, damit wir Suchtext und innere Navigationsleiste in unserer App sagen können , müssen wir diesen Suchtext als Requisite hinzufügen. So können wir jetzt sagen, Suchtext ist gleich Suchtext. Und das ist der Name der Immobilie. Es wird nur das gleiche genannt wie unsere Zustandsvariable hier. Also lasst uns das mal ausprobieren. Lassen Sie uns auffrischen. Und jedes Mal, wenn ich tippe, können Sie sehen es in meiner Konsole angezeigt wird, also funktioniert es jetzt tatsächlich. Das ist großartig. Aber wir brauchen tatsächlich Zugang dazu von einer höheren Ebene. Und was ich damit meine, ist. Wir müssen dann in der Lage sein , diesen Suchtext hier oben so zu setzen , dass wir ihn wieder an unsere Suchansicht weiterleiten können. Also in unserer Navigationsleiste werden wir diesen Suchtext einstellen. Es wird zu unserer App kommen, die ist, wo dies definiert ist. Und dann geht es zurück in unsere Suchansicht als Suchergebnisse. Also müssen wir diese Suchergebnisse einstellen. Und was wir tun werden, ist als Requisite zu übergeben. Wir werden also sagen, die Suchergebnisse sind gleich den Suchergebnissen gesetzt. Und das wird nur eine Eigenschaft sein, eine Requisite. Und alles, was wir hier tun werden, ist, das in unsere Navigationsleiste zu setzen, was bedeutet, dass wir das hier auch hinzufügen müssen. Suchen Sie nach Text und legen Sie die Suchergebnisse fest. Nicht, das ist um einen Satz Suchtext. Das ist das Richtige. Tut mir leid. Ich benutze die Runde. Und das passiert von Zeit zu Zeit. Also müssen wir diesen Suchtext einstellen. Wenn wir nun diesen Suchtext einstellen, müssen wir sicherstellen, dass jedes Mal, wenn wir auf einen Schlüssel klicken, dass wir diesen Suchtext setzen. Also gerade jetzt sind wir nur Konsolenprotokollierung. Aber was wir tun können, ist, dass wir sagen können, setzen Sie den Suchtext E Punkt Zielpunktwert. Jetzt wird dies diesen Suchtext setzen , der auch den Wert hier oben ändern wird, wonach React sucht. Es sucht nach einem bestimmten Ereignishandler wie diesem. Aber weil Suchtext sich auch ändert und es wird hier kommen. Sagen Sie, es hat sich auch hier geändert. Dieses Schlüsselwort wird sich auch ändern. Was, wenn wir zurück in unsere Suchansicht gehen , wird dieses Keyword in unseren Titel gehen , der in unseren Helden gehen wird. Also theoretisch, wenn ich hier eintippe, wenn ich da drüben eine große Maus tippe, sollte es sich auch hier ändern. Mal sehen, ob ich etwas kaputt gemacht habe oder ob das funktioniert. Da ist es. Star Wars. Es ändert sich für mich. Ziemlich gut, richtig? Das funktioniert also. Und zu diesem Zeitpunkt können wir tatsächlich mit einer API arbeiten, was genau das ist, was wir anfangen wollen. Wir wollen anfangen, mit einer API zu arbeiten, da APIs die Welt umgeht. So großer Atem. Ich könnte Sie hier verwirrt haben. Ich weiß, als ich das erste Mal lernte reagieren, wenn das für mich definitiv verwirrend war. Was ich also gerne mache, ist darüber nachzudenken, dass meine App ist, das ist wirklich großer Bucket. Sagen wir mal, Sie haben wie einen riesigen, riesigen Eimer und darin haben Sie diese kleinen Behälter mit Eis. Und was wir hier sagen, ist die App unser riesiger, riesiger Eimer. Navbar ist unser Geschmack von Eis. Startseite ist ein Geschmack von Eis Suche Ansichten von Geschmack von Eis. Und wir müssen im Grunde einen Schokoladen-Chip aus unserer Navigationsleiste holen und ihn in unser Suchfeld setzen. Und was wir tun müssen, ist, dass wir sagen müssen, Hey, wenn Sie den Suchtext setzen, ziehen Sie ihn aus dem Container in unserem Eimer und lassen Sie ihn ein wenig in unserem Eimer schweben. Und wenn es dann diese Suchansicht findet, legen Sie den Schokoladenchip, aber dieses kleine Nugget Schokolade zurück in die Suchansicht Eisbehälter. Und so ist die Idee, dass unsere Daten von der Navigationsleiste bis zu unserer App fließen und dann wieder nach unten in unsere Suchansicht. Und wir haben diese sehr ausgefallene UI mit einer Reihe von Requisiten gemacht. So übergeben wir den Suchtext so, dass wir immer den Suchtext in unserem Eingabefeld rendern konnten . Set Suchtext ist eine Funktion, die wir als Satz Suchtext übergeben. Wir haben es dekonstruiert. Nein, das ist das Falsche. Wir haben es dekonstruiert und setzen Suchtext ist hier drin. Und jedes Mal, wenn sich dieser Wert ändert, wird es Aktualisierungstext ausführen. Und dann wird es den Suchtext einstellen, der dann wieder zu unserer App bläst. Und dann geht es zurück in unsere Suchansicht, wo wir unser Keyword haben und wir bekommen Keyword aus unserem Suchtext hier. Wir haben es zufällig als Eigenschaft umbenannt, als Problem. Wir haben dieses Schlüsselwort und landet dann schließlich in unserem Heldentext. Probieren Sie das aus, vergessen Sie nicht, Sie können auch zu jedem Zeitpunkt auf den Quellcode verweisen. Wenn Sie stecken bleiben, vergessen Sie nicht, Fragen zu stellen. Ich bin hier, um zu helfen. Aber am wichtigsten ist, wissen Sie, versucht, etwas Spaß mit uns zu haben, auch wenn es kaputt ist. Jedes Mal, wenn es bricht und gibt Ihnen einen Fehler, gehen Sie in Google, was dieser Fehler ist, dass es eine gute Möglichkeit, zu lernen. Also, wann immer Sie einen Fehler sehen, gehen Sie einfach und googeln Sie es. Oder wenn es Ihnen einen Link direkt zu den React Docs gibt, lesen Sie die React Docks, die React Dogs sind wirklich, wirklich gut. 17. API-Schlüssel: In Ordnung, lasst uns mit einigen API-Sachen beginnen. Also in erster Linie werden wir die Film-Datenbank verwenden. So tm DB. Und ich erinnere mich nicht an his.com oder.org. Es ist der Film db.org. Und so werden Sie sich für ein absolut kostenloses Konto anmelden wollen. Du musst für nichts bezahlen. Ich, aber du willst dich für ein kostenloses Konto anmelden und dann wirst du in deine Einstellungen gehen wollen. Und in Ihren Einstellungen haben Sie diesen kleinen API-Abschnitt. Jetzt habe ich bereits einen API-Schlüssel, also müssen Sie einen neuen API-Schlüssel erstellen. Und ich benutze die V3 aus. Und so ist das mein API-Schlüssel. Und kann ich einen neuen machen? Ich glaube nicht, dass ich hier drin einen neuen machen kann. Das ist bedauerlich. Ansonsten würde ich Ihnen genau zeigen, wie es geht. Aber was Sie nicht tun können, ist, einfach einen neuen API-Schlüssel zu erstellen , und Sie möchten diesen kopieren. Also einfach mit der rechten Maustaste kopieren und du wirst das irgendwo speichern wollen , weil wir es ein paar Mal referenzieren werden. Und was ich tun werde, ist sogar nur in meinem Code, wo ich suchen werde. Was ich tun werde, ist nur einen Kommentar in Jahr t IMDB API-Schlüssel ist gleich, dass, nur damit ich später Zugriff darauf habe. Nun, was Sie tun können, ist, dass Entwickler den Film db.org dotieren. Es gibt ein paar Dinge, die wir hier tun können. Und so zuerst, lasst uns voran gehen und nach Filmen suchen. Und wir können das ausprobieren. Und was ich tun werde, ist, meinen API-Schlüssel und ihre Film-ID zu schlagen. Machen wir 559, Student Nummer 11. Und lassen Sie uns diese Anfrage senden. Und oh, es steht, dass der Service nicht verfügbar ist. Interessant, interessant. Ich frage mich, ob das bei der Aufnahme in den nächsten Minuten keine Probleme verursachen könnte , hoffe ich nicht. Aber im Wesentlichen, was dies am Ende tun würde, ist eine Reihe von Informationen auszuspucken. Boot wird JSON-Format über diesen bestimmten Film sein, was auch immer in diesem Film ist. Es gibt eine weitere API, API-Endpunkt , den wir verwenden werden, genannt Suche und nicht nur allgemeine Suche, aber wir wollen Filme suchen. Wir können das auch ausprobieren. Und lassen Sie mich diesen API-Schlüssel dort einfügen. Es ist bereits in ihrer Abfrage Star Wars. Und lassen Sie uns versuchen, dieses Auto Gemüse oder gehen zu 503 auf mich als auch. - Ja. Ich weiß nicht, ob dieser Dienst tatsächlich ausgefallen ist oder was das Problem ist. Wir könnten uns das ansehen, wenn wir wollen. Wir sind Entwickler, wir könnten herausfinden, warum das passiert, bin ich sicher. Aber lassen Sie uns nicht unsere Zeit damit verschwenden. Das ist nicht unser Service, das ist nicht unsere Farm. Es lohnt sich nicht, sich um unsere Tiere zu kümmern. Das ist das Problem eines anderen. Aber es gibt uns keinen netten kleinen Link, den wir hier verwenden können. Und wir werden am Ende diesen Link kopieren wollen. Also habe ich das alles kopiert. Und ich werde das hier drin aufbewahren. Beispiel Link für die Suche nach Filmen. Suchen ist gleich und dann nur der Link dort drin. Und Sie werden feststellen, dass es Abfragen gleich Star Space Wars gibt. Und das werden wir hinzufügen. Und das werden wir uns dynamisch verändern. Und unser API-Schlüssel wird dieser API-Schlüssel sein. Sie können sehen, dass es in beiden Spots auswählt und Erwachsene einschließt. Aber lassen Sie uns sicherstellen, dass das falsch ist, also ist es sicher für die Arbeit, wenn Sie das bei der Arbeit beobachten. Und das geht es darum. Also, was Sie für diese spezielle Lektion tun müssen, ist gehen Sie in den Film db.org. Erstellen Sie ein neues Konto, wenn Sie noch kein Konto haben, gehen Sie zu den Einstellungen, gehen Sie zur API und erhalten Sie einen API-Schlüssel. Es sollte also etwa so aussehen. Es wird nicht genau dasselbe sein wie meins, aber es sollte etwas Ähnliches wie meins aussehen. Also ein Haufen Buchstaben und ein Haufen Zahlen. Wenn Sie also das Gefühl der Freiheit haben, fahren Sie mit der nächsten Lektion fort. 18. Reagieren von React: In Ordnung, lassen Sie uns weitermachen und eine API-Anfrage stellen. Jedes Mal, wenn Sie in die Suchleiste eingeben. Jedesmal, wenn sich der Suchtext ändert, werden wir eine API-Anfrage stellen. Und dafür werden wir US-Effekt verwenden, der von React kommt. haben wir noch nicht benutzt. Ich habe mich darüber beschwert, dass es noch nicht benutzt wurde. Lasst uns weitermachen und es benutzen. Typ, Effekt verwenden. Und das ist eine Funktion und es nimmt eine anonyme Pfeilfunktion. Und als zweiter Parameter, was wird es auf Änderungen überwachen? So wird es den Suchtext zu überwachen. Also stellen wir hier den Suchtext ein. Wir geben es an die Navigationsleiste weiter. Diese Navigationsleiste wird onchange, aktualisieren Sie diesen Suchtext, dann wird , um diesen Suchtext zu setzen. Stellen Sie also diesen Suchtext ein, legen Sie diesen Suchtext fest, der dann diesen Suchtext aktualisieren wird. Also, jetzt können wir console.log sagen. Suchtext ist der Suchtext. Und es macht mir nichts aus, dass ich da drin einen Tippfehler habe. Das ist in Ordnung. Und lassen Sie uns einfach voran und aktualisieren Sie dies und Sie können sehen, dass nichts drin ist ein Suchtext. Aber wenn ich Star Wars tippe, können Sie sehen, Star Wars ist der Suchtext. Und das fängt an zu kommen. Und jedes Mal, wenn wir ein Zeichen eingeben, müssen wir irgendeine Art von API-Anfragen an TMD B stellen und so können wir das mit Fetch tun. Und wo ist dieser Link? Link, den wir aus der letzten Lektion wollten, war hier drin, das ist der, den wir wollten. Wir werden diese API-Anfrage annehmen. Und das einzige, was wir hier ändern wollen, ist, wo es Star Wars sagt, wir wollen dies ändern, um eine Variable namens Suchtext. Dann werden wir diese Antwort nehmen und sagen, Hey, übrigens, JavaScript, diese Antwort wird eine JSON-Antwort sein. Analysieren Sie es also in JSON. Und dann sagen wir, nehmen Sie die verbleibenden Daten und protokollieren Sie diese Daten nur für eine Sekunde. Das ist alles, was wir tun werden. Und wenn ich mich erneuere und Star Wars tippe, können Sie sehen, dass ich hier eine Reihe von Anfragen mache. Wir erhalten eine Seite mit einer Reihe von Ergebnissen hier mit 20 Ergebnissen pro Seite. Und so ist der erste hier ein Objekt Erwachsenen falsch. Es hat einen Hintergrund, Genre-IDs, die IDs sind. Wir können weitere API-Anfragen stellen. Der ursprüngliche Titel Star Wars Übersicht Prinzessin Schichten, Ebene. Prinzessin Leia wird gefangen und als Geisel gehalten von den bösen imperialen Kräften und ihren Bemühungen, das Galaktische Reich, Yada, Yada, Yada, Yada zu übernehmen. Also haben wir alle möglichen Informationen hier drin. Wir haben auch einen Plakatpfad , der schließlich ein Bild sein wird, das wir verwenden können. Und so können wir sehen, dass jedes Mal, wenn wir etwas eingeben, wir unterschiedliche Ergebnisse bekommen. So insgesamt Seiten, 414 Seiten. Je mehr wir getippt haben, desto weniger Seiten haben wir. Schließlich haben wir bis zu acht Seiten, wo Sie nur Star Wars eingeben können und über eine 160 Ergebnisse oder eine insgesamt 157 erhalten , insgesamt. Also das Einzige, was wir hier wollen, ist, dass wir dieses Array wollen. Warum wir nach einem Array suchen, ist, weil wir diese Suchergebnisse einstellen möchten. Und das Suchergebnis wird auf ein Array gesetzt. Und der Grund, warum wir ein Array wollen, ist, weil wir ein Array einfacher durchlaufen können , als wir über ein einzelnes Objekt schleifen können. Und so ist diese ganze Seite hier, dieses ganze Ergebnis ist ein Objekt. Und in der Tat, was ich tun kann, ist, lassen Sie uns einfach weitermachen. Klicken Sie mit der rechten Maustaste in neuer Registerkarte öffnen und wir können die gesamte JSON-Antwort hier sehen. Lasst uns das einfach größer machen. Also haben wir eine Objektseiten-ID, Ergebnisse sind gleich einem Array von Ergebnissen. Und wir können alles kleiner machen, weil sie im Grunde gleich sind. Nun, das hat Spaß gemacht. Lasst uns einfach einen öffnen. Und so ist dies eine Reihe von Ergebnissen. Und in jedem Ergebnis ist jede Iteration ein Objekt. Und wir wollen nur diese Liste und wir wollen nur dieses Array von Daten. Wir wollen die Seitenzahl nicht. Wenn du willst, könntest du die Seitenzahl und das Zeug später haben. Vielleicht als eine Möglichkeit, dieses Projekt als Ihr eigenes Projekt zu erweitern. Aber lassen Sie uns voran gehen und halten Sie diese Ergebnisse einfach. Und was wir jetzt hier tun wollen, ist, dass wir sagen, setzen Suchergebnisse. Ergebnisse mit Datenpunktpunkten. Ja, es hieß, also nennt man diese ganze Sache Daten. Hoppla, was habe ich hier gemacht? Diese ganze Sache ist also all unsere Daten und wir wollen Datenpunktergebnisse, weil das eine Liste ist, das ist ein Array, das ist, was wir wollen. Und wieder wollen wir das nur, damit wir es später mit JavaScript durchlaufen können. Also werden wir diese Suchergebnisse als Daten Re.search-Ergebnisse festlegen. Nun, zu diesem Zeitpunkt wird es so aussehen, als wäre nichts passiert , wenn wir hier drinnen suchen. Also tippe ich Star Wars und es macht all diese verschiedenen API-Anfragen, die funktionieren. Es ist nur noch nichts zu rendern. Die andere Sache ist auch, wenn Sie hier sind, können Sie Star Wars eingeben und Sie können sehen, dass es all diese verschiedenen API-Anfragen hier für mich macht. Das ist cool. Es funktioniert, aber es ist nicht wirklich auf der Suchseite und wir wollen erzwingen, dass dies auf einer Suchseite ist. Also im nächsten Video, was ich tun werde, ist, dass ich Ihnen zeigen werde , wie, wenn jemand hier eintippt, Sie automatisch zwingen können, zur Suchseite zu gehen. 19. Browserverlauf reagieren: Ordnung, lassen Sie uns einen Blick darauf werfen, wie wir Menschen zur Suchseite zwingen können , wenn Sie nach etwas suchen, gehen wir weiter und entfernen Sie diese Konsole anmelden sich hier. Das brauchen wir nicht. Wir brauchen diese Suchergebnisse auch nicht. Und in unserer navbar hier, was wir tun wollen, ist, dass wir importieren, verwenden Geschichte sowie Link. Und dann werden wir sagen, const, Geschichte ist gleich der US-Geschichte. Und dann, wenn wir diese Suchsteuer aktualisieren, aber wir werden tun, wird der Benutzer zwingen, zur Suche nach Schrägstrich zu gehen. Und so beobachten Sie dies, wenn ich gehen würde, sagen wir auf die über Seite und ich tippe etwas, Ich werde den Buchstaben T eingeben. Es bringt mich direkt auf die Suchseite, änderte meine URL für mich, T E S Wenn ich zurück zum Homepage, Test zwei, es bringt mich jedes Mal zurück auf die Suchseite, wenn ich tippe. Alles, was wir dort taten, war, dass wir gesagt haben, wann immer wir mit dieser Eingabe eingeben, wann immer es geändert wird, ausführen Suchtext aktualisieren, was eine anonyme Funktion hier oben ist, eine Pfeilfunktion. Es wird die Geschichte dazu bringen, zu suchen. Und dann werden wir den Suchtext festlegen. Jetzt haben wir hier die Geschichte benutzt. Wir sagten, die Geschichte des Wettbewerbs ist gleich der Geschichte der USA. Und wir importierten Geschichte oder den amerikanischen Geschichtshook von React, Router, DOM. Das ist alles, was wir getan haben. Also innerhalb von drei Zeilen Code, wir haben einfach gesagt, hey, user, wann immer Sie auf einer Seite sind, sagen wir, Sie sind auf der Homepage und Sie geben einen Brief ein. Jeder Brief, gehen Sie direkt auf die Suchseite, weil Sie suchen, so sollten Sie direkt auf die Suchseite für Sie gehen. Und es tut das automatisch für Sie? Ja. Ich sagte, automagisch, weil es ein wenig Magie ist. Gehen Sie weiter und machen Sie das Setup. Wenn Sie bereit sind, gehen wir zur nächsten Lektion. 20. Die Suchergebnisse ordnen: Okay, werfen wir einen Blick auf die Abbildung unserer Suchergebnisse. In unserer Navigationsleiste setzen wir den Suchtext und die innere Suchansicht ein. Schließlich kommt es wieder nach unten als Suchergebnisse und die durch eine API gehen und wir werden dann Suchergebnisse verwenden. Was wir also tun können, ist, dass wir die Suchergebnisse verwenden können und wir jedes Ergebnis durchlaufen und etwas tun können. Lassen Sie uns also jedes Ergebnis durchlaufen, indem Sie die Kartenfunktion in JavaScript verwenden. Und dann lassen Sie uns all diese Suchergebnisse in unser Dokumentobjektmodell auf unserer Seite einfügen. Also lassen Sie uns sagen, const Ergebnisse, HTML ist gleich Suchergebnisse Punktkarte. Und das wird ein Objekt und in der Iteration nehmen, und es wird eine Pfeilfunktion sein. Nun, wenn Sie sich fragen, woher habe ich Objekt und Iteration bekommen? Hier, wo wir durch jedes der Suchergebnisse gehen. Da ist ein Objekt drin. Also für das Suchergebnis Nummer eins haben wir Objekt Nummer eins. Für Nummer zwei haben wir Objekt Nummer zwei und wir können sehen, dass es ein Objekt ist, weil ein, das ist nur JSON und JSON sieht genau wie JavaScript aus. Und so ist dies das Symbol für ein Array und das ist das Symbol für ein Objekt. Und das ist, wo wir das Objekt bekommen. Wir sagen, für jedes Suchergebnis, durchlaufen alle von ihnen. Wir bekommen den Index. Also ist es 12345, et cetera, et cetera. Und wir werden das Objekt bekommen. Und so können wir sagen return div, was auch immer dieses Objekt ist und die Daten, die hier reinkommen. Sagen wir also div Originaltitel. Also werde ich das einfach da reinkleben. Objekt-Punkt Originaltitel. Und mit unseren Suchergebnissen können wir jetzt unsere Suchergebnisse hier eintragen. Und das wird einfach eine sehr coole Sache tun. Sieh dir das an. Oh, wir haben etwas kaputt gemacht. Was haben wir hier kaputt gemacht? Lass uns Star Wars gehen. Oh, wir brechen immer wieder etwas. Was haben wir, was haben wir kaputt gemacht? Die Eigenschaftenzuordnung undefinierter Ergebnisse kann nicht gelesen werden. Mal sehen, was wir hier tun können. Also wollen wir wahrscheinlich sicherstellen, dass es hier eine Art Ergebnis und irgendeine Art von Texten gibt. Also wollen wir sicherstellen, dass es Suchtext gibt, dann machen Sie diese API-Anfrage. Andernfalls, wenn kein Suchtext vorhanden ist, tun Sie nichts. Also lasst uns das versuchen. Da gehen wir. Das funktioniert ein bisschen besser. Das Problem gab es also, hier war nichts drin. Diese Abfrage war also leer und gab nichts für uns zurück, was keine seltsame API-Antwort ist. Aber wir hatten einen Griff, dass. Und so sagen wir, führen Sie die API-Anfrage nur aus, wenn sich der Suchtext ändert. Und in der Tat gibt es einen Suchtext und es ist nicht null, es ist nicht leer. Also, jetzt, wenn ich diese und drei frisch schließen, Lassen Sie uns auf die Homepage gehen. wir sicher, dass das funktioniert. Und ich tippe Star Wars ein und wir bekommen all diese verschiedenen Star Wars-Filme und so. Also, das ist gut. Wir bekommen hier die erste Seite. Das ist im Grunde alles, was wir zu diesem Zeitpunkt tun wollten, wo wir filtern, was großartig ist, wir filtern über eine API. Wenn ich also Star, Star Track eingeben wollte , wenn ich das richtig schreiben kann, Star Trek und wir bekommen Star Trek. Star Trek Beyond Star Trek nemesis, Interaktion in die Dunkelheit, Evolutions, et cetera, et cetera, et cetera, et cetera, et cetera. Nun gibt es ein kleines Problem hier, dass jeder untergeordnete Analyst eine eindeutige Schlüsseleigenschaft haben sollte. Und was das heißt, ist in unserer Suchansicht, das sollte einen Schlüssel haben. Und so können wir einfach sagen, dass C0 gleich i ist. Und so wird das 0 sein, dann eins, dann zwei, dann drei, dann vier. Also wird es im Grunde genommen diese Iteration nehmen und sie als Schlüssel einwerfen. Und lassen Sie uns in machen reagieren glücklich. Also lasst uns voran und erfrischen. Und Sie können sehen, dass der Fehler nicht mehr auftaucht. Eine Sache zu beachten ist, was passiert, wenn wir hier einen Haufen Müll eingeben und es keine Ergebnisse gibt? Das überlasse ich Ihnen, wenn es für einen Teil Ihres letzten Projekts ist, ein, whoops, es gibt keine Suchergebnisse. Es muss eine Art Text hier drin sein, also bleibt Ihnen das überlassen. Aber weiter vorwärts, wir werden nur um dies in eine schöne Karten zu machen. Also, was ich möchte, dass Sie tun, ist sicherzustellen, dass Ihre Suche tatsächlich funktioniert. Nun, wirklich mussten wir nur drei Codezeilen hinzufügen. In unserer Suchansicht haben wir diese Suchergebnisse und dann sagten wir, dass das konstante Ergebnis gleich einer Reihe von Sachen hier ist. Alles klar, probieren Sie das aus, wenn Sie in der nächsten Lektion bereit sind, was wir tun werden, ist, dass wir eine neue Komponente für unsere Suchergebnisse erstellen. Und anstatt nur ein div zu verwenden, werden wir eine Bootstrap-Karte verwenden. 21. Bootstrap 5 Suchergebnis: Alles klar, was wir hier tun müssen, ist , zuerst auf getbootstrap.com zu gehen. Ich benutze Bootstrap fünf und ich werde das in meine Zwischenablage kopieren und alles, was ich getan habe, war, dass ich zu Komponenten und dann Karte ging. Und ich habe gerade den ersten gewählt, weil ich diesen mag, das ist der, den ich verwenden möchte. Und so ist die Idee immer, wenn Sie hier eintippen, anstatt einfach nur Star Wars oder so etwas zu sagen. Und es sollte sagen, oder sollte eine Karte mit Ihrem Bild darin zeigen. Und so werden wir das mit einer funktionsbasierten Komponente generieren. Und so lassen Sie uns weiter gehen und eine neue Komponente hier erstellen. Const Filmkarte ist gleich, und dies wird eine Eigenschaft zu nehmen. Und wir werden diesen Requisiten-Film nennen. Wir werden das irgendwann passieren. Und es wird eine Pfeilfunktion sein. Und das wird ein paar Sachen zurückgeben. Und so möchte ich das einfach in stoßen und wo es sagt, Klasse ist gleich k, wir müssen jedes Mal reparieren, wenn es sagt, Klasse ist gleich zwei, Klassenname ist gleich IMG muss ein DJ Sx-Bild oder ein js X-Element sein. Diese Quelle muss eine Art Plakat-URL sein. Also reden wir in nur einer Sekunde darüber. Das alles wird der Film Dot Originaltitel sein. Lassen Sie uns auch kopieren, dass von hier in unser HIV, wo es sagt Kartentitel, loswerden, dass, gehen Sie irgendwo in diesem wird zeigen Details sagen. Jetzt tut das momentan nichts. Poster-URL ist nicht definiert, das wird derzeit nichts tun, ohne dass diese definiert wird. Also lasst uns Nachteile machen. Const. Poster-URL ist gleich, und wir wollen diese Poster-URL. Das ist kein Bild, wir wissen nicht, woher das kommt. Also, was ich tun werde, ist TMD BY Poster Pfad, Bild, so etwas, und klicken Sie einfach auf das erste Ergebnis und es wird mir etwas geben. Also lasst uns auf einen dieser klicken. Ja, das wollten wir. Ich glaube, es war vom Fight Club. Werfen wir einen Blick auf diese Dokumentation. Und ja, hier ist es, ein Bild wie dieses. Also, was ich tun möchte, ist, das zu kopieren und in meine URL einfügen. Und ich habe diesen Plakatpfad mit einem Schrägstrich darin. Und so vermutlich muss ich nur den letzten Schrägstrich und all die lustigen Charaktere da drin herausnehmen . Fügen Sie meinen neuen hier ein. Und welchen Film werden wir bekommen? Star Wars? Und das heißt, es gibt eine Breite von 500, also das ist, was wir wollen. Die andere Option ist original. Werfen wir einen Blick auf das Original. Herkunft. Nun, das hier ist viel größer und sieh dir das an. Oder wir können Breite von 500 tun. Und können wir mit irgendetwas anderes tun? Ich glaube, es sind nur 500 und was ist mit 250? Nein, Bildgröße wird nicht unterstützt. Und das ist in Ordnung. Wir bleiben mit einer Breite von 500. Und so im Grunde wollen wir, wir wollen diese URL nehmen, diese ganze URL. Und wir wollen einfach diesen letzten Teil durch Film-Punkt-Plakatpfad ersetzen. Und wo ich Post bekam, war dein Weg genau hier. Also, jetzt machen wir eine Menge Bewegung. Also diese Filmkarte ist statt dieser, wir werden sagen, Rückkehr. Movie-Karte. Und dieser Film wird das Objekt und der Schlüssel sein, weil wir immer Key müssen. Und so wird das dieses Objekt nehmen, zum Beispiel, dieses hier. Es wird es in Film als Requisite umbenennen. Wir werden diese Requisite akzeptieren. Dann werden wir überprüfen, dass Film Punkt Post Ihren Weg, Film Dot Plakat Pfad. Fügen Sie es hier an diese URL an. Und das wird unsere Plakat-URL sein. Nun, das wird im Moment nicht gut aussehen. Wir werden das in ein bisschen reparieren. Aber was das tun wird, ist ein Haufen HTML für uns zu rendern. Lasst uns das retten. Und es wird sich darüber beschweren. Link wird das angehen und nur ein bisschen. Aber lassen Sie uns voran gehen und sehen, was das mit Daten tut. Etwas ist kaputt. Oh, Stil. Es gibt eine andere Art, Stil zu machen. Okay, wenn Sie also jemals diesen speziellen Fehler sehen, erwartet diese Stilstütze eine Zuordnung von Stileigenschaften zu Werten. Es sucht hier nach JavaScript, seltsamerweise, für Ihr Style-Attribut. Und so würden Sie es so schreiben, als ob dieser Stil doppelt geschweifte Klammern gleich ist. Und dann können Sie sagen, wie die Breite gleich 18 m Komma ist, und dann ist es nur ein Objekt. Es sah also viel wie ein normales JavaScript-Objekt aus. Es hat nur die zwei geschweiften Klammern um ihn herum. Die äußeren geschweiften Klammern. Das hier genau. Und dieser hier sagt: Hey, hüpfen Sie außerhalb von HTML und verwenden Sie nur normales JavaScript. Und dann hier drin heißt es, oh, das wird es sein, was du kartierst. Wir brauchen nichts von dem, was etwas später in einem neuen Feature mit Stil umgehen wird. Lass uns einfach voran gehen und das löschen, weil ich nicht möchte, dass die maximale Breite dort drin und eine Konsole, Star Wars, aktualisieren. Und Sie können sehen, dass es hier eine Menge Dinge verändert hat. Und es ist groß. Es ist zu groß. Es ist ziemlich nah an dem, was wir wollen, aber es ist zu groß. Also, was wollen wir hier machen? Wir wollen HTML-Ergebnisse oder Ergebnisse HTML und Ende, wenn es Ergebnisse gibt, dann können wir etwas wie div Klassenname tun. Werfen wir das in einen Behälter. Lassen Sie uns einen anderen div Klassennamen hinzufügen ist gleich einer Zeile. Und dann lassen Sie uns unsere Ergebnisse HTML hier einfügen. Wir werden sehen, dass dies nicht ganz das ist, wonach wir suchen, aber das bringt uns ein bisschen näher. Das ist also jetzt zumindest alles innerhalb eines Containers. Das Problem ist, in unserer Reihe haben wir all diese verschiedenen Karten und was wir eigentlich als Spalten brauchen, denn in Bootstrap fünf haben Sie einen Container mit einer Zeile im Inneren, mit einer Spalte. Also, was wir tun können, ist, anstatt Klasse Namenskarte zu schreiben, wir können div sagen, Klassenname ist gleich Kohlealgen von lasst uns tun, mal sehen, wie zwei aussehen. Und großes Ende. Das ist auch do col, Md. Also mittelhoch, es wird 33 mal drei plus drei plus drei plus drei plus drei plus drei sein. Schnelle Mathematik, es wird vier Spalten weil Spalten immer von 12 und Bootstrap sind. Sonst Kohle, SM, nicht SM, sondern Kohle von zwei. Und das muss immer innerhalb eines übergeordneten Elements sein. Also lasst uns voran und schrägst div das. Und sieh dir das an. Das sieht in Ordnung aus. Das sieht ein wenig überfüllt aus, zu voll für den hohen Geschmack. Lass uns voran gehen und sagen Kohle LG. Drei. Das sieht ein bisschen besser aus, immer noch wenig überfüllt. Also für jeden von ihnen, der Rand oben und Rand, unten, Rand auf der Y-Achse von vier hinzufügt . Da gehen wir. Das sieht ziemlich gut aus. Werfen wir einen Blick auf das, was das tut auf der Suche nach Star Wars, überprüfen Sie das. Es macht eine eigentliche Suche für uns jetzt gibt uns den Titel, gibt uns einen Namen. Und so fügen wir Bootstrap-Karten zu unserem Projekt hinzu. Also, was ich möchte, dass Sie für diese Lektion tun, ist, dass Sie Bootstrap-Karten zu Ihrem Projekt hinzufügen . Und alles, was wir wirklich tun mussten, war dass wir eine neue Komponente geschaffen haben, mit der wir vertraut sein sollten. Wir gehen in einer Requisite namens Film. Und in unserer Karte haben wir gesagt, dass diese neue Komponente Requisite dieses Films nur zufällig ist, es heißt OBJ. Wir geben ihm immer einen Schlüssel, damit es reagiert nicht beschwert. Und dann haben wir im Grunde eine Reihe von HTML zurückgegeben, die rein Bootstrap war. Nun, nicht rein fünfundneunzig Prozent Bootstrap. Und dann haben wir einfach ausgetauscht einige der Eigenschaften wie das Bild SRC ist gleich der Poster-URL. Wenn Sie das fertig sind und es für Sie funktioniert. Was wir als Nächstes tun werden, ist, dass wir diesen Link in eine Detailansicht ändern werden. Und so können Sie tatsächlich klicken, weil Sie gerade jetzt nicht klicken können, und es wird nirgendwohin gehen. Scrollen Sie einfach nach oben auf der Seite, was nicht nützlich ist. Wir werden eine Film-Detailansicht einrichten, so dass Sie tatsächlich verwenden können, zum Beispiel, Ihre website.com Schrägstrich Filme 11. Und es wird Ihnen Film ID 11 mit einer API zeigen. Und es wird wirklich schön aussehen und es wird ein Haufen Zeug machen. Also machen wir das als Nächstes. 22. Movie: In Ordnung, lassen Sie uns weitermachen und eine Film-Detailansicht mit API-Anfragen hinzufügen. Also zuerst, lasst uns voran gehen und diese Linie loswerden. Das brauchen wir nicht. Es ist an anderen Orten auffindbar. Doo-doo-doo. Öffnen wir unsere app.js. Und auf unserer Route gehen wir weiter und erstellen eine neue Route. Ich werde das kopieren und das einfach benutzen. Und es wollte sagen, Schrägstrich Filme Schrägstrich Doppelpunkt ID. Und wir werden diesen Ausweis auf der Straße benutzen. Und statt etwa VR nennen wir das eine Filmansicht. Jetzt hätte ich diese Methode verwenden können, ich hätte diese Methode verwenden können, spielt keine Rolle. Ich verwende diese Methode gerne, wenn Sie Requisiten zum Übergeben haben, wie Schlüsselwörter oder Suchergebnisse. Aber das tue ich nicht. Also werde ich nur eine Filmansicht verwenden und ich werde das U oder L herausfinden lassen was dieser Film Ideen hat und dann eine API-Anfrage basierend auf dieser Film-ID stellen. Lassen Sie uns also voran gehen und sagen, dass dies nicht wie erwartet kompiliert wird, Filmansicht ist nicht definiert. Also lassen Sie uns voran und importieren Sie eine Sache, die noch nicht existiert, importiert Filmansicht aus Punktschrägstrich Komponenten Schrägstrich Filmansicht. Es wird sich weiter beschweren. Ich werde nur über VW zwei Filmansicht Punkt js neu schreiben und es beulen, bearbeiten und es endete. Über Ansicht wird Filmansicht genannt werden. Und das wird jetzt wenigstens für uns laden. Also, wenn ich gehe, um Filme Schrägstrich 11, es sagt über uns. Das ist nicht richtig. Und es war kein Tippfehler im Abutment? Ja, es hat über uns gesagt. Lass uns das einfach über uns ändern. Und da gehen wir. Und Film Detailansicht schließlich wird dies der Name des Films sein. Nun, um den Parameter aus dieser URL zu erhalten, müssen wir zuerst importieren. Und was ist es? Ich denke, es werden Parameter verwendet, wenn ich mich richtig erinnere, benutze Parameter von React, Router, DOM. Und dann schnappen wir uns diesen Ausweis und wir werden ihn dekonstruieren. So ist const ID gleich, um params zu verwenden , die anfänglich magisch es für uns herausfinden, was erstaunlich ist. Und console.log diese ID. Und lassen Sie uns unsere Werkzeuge hier öffnen und wir können sehen , dass es 11 im Jahr sagt, also wird es 11. Lass uns etwa 550 machen. Es bekommt 550. Das ist also perfekt. Wir ziehen nun Daten aus unserer URL und in unsere Anwendung. Das ist genau das, was wir verwenden wollen. Als nächstes wollen wir sicherstellen, dass wir einige Filmdetails in hier haben, so dass wir const Film-Details tun können , als gleich zu beachten, dass nichts gleich Film-Details eingestellt ist jetzt gleich dem US-Bundesstaat ist. Und das wird ein Objekt halten. Und die einzigen Filmdaten, die wir speichern wollen, sind diese speziellen Daten hier drin. Wir wollen nicht alle Filme, wir wollen nur einen bestimmten Film hier drin. Und in der Tat, was wir tun können, ist, wenn wir zurück zu unserer Entwicklerdokumentation gehen, gehen wir zu Filmen, Filmen, wo sind Sie Filme? Wir wollen es tun. Ja, holen wir uns einfach Details. Anfrage senden. Fünf über drei, das funktioniert nicht für uns. Lassen Sie uns das kopieren und einfügen. Und, wissen Sie, tatsächlich fügen Sie nur den Text, den Sie wollen, nicht auch auf die Schaltfläche. Da gehen wir. Das sind all die Daten, die zu uns zurückkommen werden. Also werde ich das Original schließen. Bootstrap schließen. Ich glaube, wir werden das nicht mehr benutzen. Und was haben wir es hier drin? Wir haben Budget, Homepage-ID, IMDB ID, was ziemlich cool ist. Originalsprache, Originaltitel, Übersicht, Popularität Plakatpfad. Wir sollten auch eine Kulisse haben, die ein etwas anderes Bild sein wird. Nur eine größere Kulisse wie ein riesiges Poster. Zum Beispiel. Umsatzstatus der Produktionsfirma, Slogan, et cetera, et cetera, et cetera, et cetera, allerlei Sachen hier drin. Das ist also, was wir verwenden wollen. Wir wollen diesen Lincoln hier haben. Es ist also vorerst in unserer Gesäßtasche versteckt. Jetzt müssen wir eine Tatsache verwenden. Also, wenn sich diese ID ändert, müssen wir dann neue Daten von TM db holen. Also müssen wir importieren, verwenden Sie Effekt von React. Und wir werden sofort einen Effekt hier drinnen schreiben , nur um zu beweisen, dass das funktionieren wird. Also sagen wir „Use effect“. Es wird eine Pfeilfunktion, Console.log, nehmen Sie eine API-Anfrage. Und der zweite Parameter wird sein, wonach es sucht? Es sucht nach dem Ausweis. Jedes Mal, wenn sich diese ID in der URL ändert, wird sie eine, eine, eine, eine API-Anfrage an was auch immer diese Ideen. Also lassen Sie uns voran und speichern Sie diesen Benutzerstatus ist nicht definiert. Ja, das ist richtig. Der Benutzerstatus ist nicht definiert. Also verwenden Sie eine Tatsache und es ist auch wichtig, verwenden Sie Staat, dass Rio, beschweren sich über einige Sachen, die wir das in ein wenig beheben können. Star Wars. Und wir können zu keiner von denen gehen, aber gehen wir zu Filmen Schrägstrich 11. Und wir können sehen, 11, stellen Sie eine API-Anfragen an 11. Das ist perfekt. Das ist es, was wir wollen. Also okay, machen wir einen Schritt zurück und gehen wir zurück zu unserem Suchfeld. Und lasst uns Star Wars machen. Und wenn wir auf eine dieser Schaltflächen klicken, geht es nirgendwo hin. Es bringt uns nur wieder nach oben. Und so wollen wir, dass dies tatsächlich zu unseren neuen Detailansichten geht. Und was wir tun können, ist in unsere Suchansicht zu gehen und einen HREF für Link zu tauschen ist gleich. Und das soll ins Kino gehen Schrägstrich DID, was auch immer das sein wird, wir werden das in nur einer Sekunde gegen eine const austauschen. Wir müssen Link importieren. So importieren wir Link von React Rotterdam. Und dann können wir die const Detail-URL erhalten. Ich nenne es eine Detail-URL, weil wir es in Django nennen. Und die Idee ist, dass es nur detaillierte Daten zu einem bestimmten Film zeigen wird. Also wird es nicht alle Ihre Filme zeigen, die wie eine ListView oder Suchansicht sein wird, wird Daten auf einem Film, einem bestimmten Film mit einer ID anzeigen , und das wird eine Detailansicht genannt. Und so soll das gehen, um Filme zu schrägen und dann was auch immer diese Ideen. Und ich habe diese ID von meiner app.js bekommen. Und das kommt in, zu, zu, zu, zu tun Route, Pfad Filme Doppel-ID. Nun, was ich tun möchte, ist, dass ich diese Doppelpunkt-ID durch die tatsächliche Film-ID ersetzen möchte. Also könnte ich Film DID machen, glaube ich, es ist. Und schauen wir uns das an. Dies ist unsere API-Antwort. Movie-ID ist gleich 11. Das ist es, wonach wir suchen. Das funktioniert also perfekt. Detail-URL und ersetzen Sie einfach diese Zeichenfolge durch unsere Variable. Lasst uns das retten. Und gehen wir zurück zu unserer Seite hier. Und Sie können sehen, dass, wenn ich unten links darüber schwebe , es sagt Schrägstrich Film Schrägstrich 123475. Lassen Sie uns darauf klicken und es geht zu einem Film VW 13475, machen Sie eine API-Anfragen und 13475. Also kommen wir dorthin, wir kommen dorthin. Wir machen das langsam, aber sicher. Wir erstellen hier eine Detailansicht. Also können wir unsere Suchansicht schließen, weil ich denke, das ist jetzt alles erledigt. Und gehen wir zurück zu unserer Filmansicht. Und was wir wollen, ist, dass wir diese Daten holen wollen. Und so gehen wir hier rein, schnappen wir uns diesen Link. Es hat unseren API-Schlüssel und es war einfach völlig in Ordnung. Ich werde meinen API-Schlüssel später einfach deaktivieren oder er wird deaktiviert, wenn zu viele Leute ihn benutzen. Aber hier drinnen wollen wir diesen Ausweis austauschen. Also gingen wir zu api dot den Film db.org Slash 3 Schrägstrich Filme Schrägstrich was auch immer diese Ideen. Also in meinem Fall war es 11. Und dann mein API-Schlüssel. Dann werden wir diese Antwort nehmen und wir werden sagen, hey, Antwort ist JSON, oder es kommt als JSON und irgendwie aus JSON XML konvertiert, analysiert sie von JSON. Dann nehmen wir die Daten und wir werden sagen, Set Film-Details sind die Daten. Und dann können wir das hier ändern, um so etwas wie Filmdetails zu sein. Punkt-Originaltitel. Und während Filmdetails von momentan kommen, ist es als nichts gesetzt. Aber was wir tun könnten. Und was wir tun, ist, dass wir diesen Effekt verwenden. Jedes Mal, wenn sich die ID ändert, werden wir dann eine API-Anforderungen an diese ID stellen. Wir werden sagen, hey, es ist JSON. Arbeiten Sie mit diesen Daten als JSON. Legen Sie diese Daten fest, die dann unsere Filmdetails ändern werden. Und wann immer wir den festgelegten Teil unseres US-Bundesstaates verwenden, wird es diese ganze Komponente für uns wiedergeben, in diesem Fall, und das ist wirklich schön. Dies wird zuerst leer sein und dann wird es tatsächlich mit einem Namen erscheinen. Also lasst uns weitermachen und das tun. Und gehen wir zu Nummer 11. Und Sie können sehen, wie wenn ich mich erfrischen, es ist irgendwie nichts da ist und dann plötzlich etwas da ist. Das liegt daran, dass es diese API-Anforderungen macht. Es sagt, hey, verwenden Sie Nummer 11, dann stellen Sie diese API-Anfrage und es verwendet wieder Nummer 11. Lassen Sie uns also dieses Konsolenprotokoll loswerden. Und was wollen wir hier noch tun? Das war's nur darum. Was wir also in der nächsten Lektion tun werden, ist, dass wir hier einige weitere Details hinzufügen werden. Wir werden einen Container, eine Zeile und eine Reihe von Spalten hinzufügen , einige zusätzliche Informationen. Und wir werden sicherstellen, dass es eine Art Laden hier gibt , so dass standardmäßig, wenn das noch geladen wird, es heißt laden und dann den Titel zeigen wird. Anstatt einfach nur leer zu sein und sich dann damit anzuschließen, zeigt es zumindest sofort etwas. Also machen wir das in der nächsten Lektion. Was ich möchte, dass Sie für diese spezielle Lektion tun, ist in Ihrer Filmansicht, verwenden Sie Parameter, verwenden Sie den Status, lassen Sie uns diese zusammen. Verwenden Sie den Effekt. Holen Sie sich diese API-Anforderungen. Stellen Sie sicher, dass Sie dies als Ihre ID angeben. Wenn Sie dies nicht als Ihre ID angeben, nehmen wir an, Sie stellen dies als Filmdetails dar. Du wirst diese Filmdetails festlegen. Es wird dann diesen Verwendungseffekt auslösen , der dann weitere API-Anfragen verursachen wird, die Filmdetails festlegen werden. Filmdetails werden anders sein. Es wird dann dazu führen, dass dieser Effekt ausgeführt wird. Wieder. Das wollen wir nicht. Wir möchten nur, dass der Effekt ausgeführt wird, wenn die ID geändert wird. Wenn Sie also vom Schrägstrich 11 bis zum Schrägstrich 13475 gehen, gehen Sie weiter und probieren Sie das aus, und wenn Sie bereit sind, gehen wir zu unserer nächsten Lektion. 23. Zustand laden: In Ordnung, lassen Sie uns einen Ladezustand zu unserer Seite hier hinzufügen. Und der Grund ist, dass wir in unserem letzten Video die Seite aktualisieren und Sie sehen können, dass sie für eine kurze Sekunde leer ist, und dann wird es tatsächlich mit den Daten angezeigt, also ist es für eine Sekunde leer, dann macht diese API-Anfrage, erhält die Daten, dann wieder rendert oder Komponente für uns. Und das ist cool und alles. Aber das ist nicht wirklich eine gute Benutzererfahrung. Manchmal wollen wir nur, dass dies heißt, laden und es dann automatisch ersetzen. Die Idee ist also, dass Ihre Benutzer nicht mit der Idee frustriert werden, dass es gibt, mit dem Konzept, dass es keine Informationen geben könnte, bis es Informationen gibt, sie wollen einfach immer etwas sehen. Und so lassen Sie uns voran und fügen Sie einen Ladezustand hinzu. Also werden wir sagen, const wird geladen und set is loading ist gleich dem US-Bundesstaat und standardmäßig, wird es geladen? Das ist es. Und sobald wir Daten hier drin haben, können wir sagen, set is, loading, ist falsch, es wird nicht mehr geladen. Und wir können eine neue Funktion innerhalb dieser Funktion erstellen. Nehmen wir an, Funktion rendern Filmdetails. Und wir können sagen, wenn geladen wird, wollen wir dann Held mit einem Text von Punkt, Punkt, Punkt oder laden Punkt-Punkt-Punkt, es wäre besser. Ansonsten, wenn es Filmdetails gibt und wo ich bekomme, lädt und Filmdetails von ist hier oben Filmdetails und wird geladen. Und ich setze diese Änderungen nur mit dem Status ein. Wenn Sie also laden, wird es diese API-Anforderungen stellen und dann wird es sagen, dass das Laden falsch ist. Es wird nicht mehr geladen. Wenn wir diese Filmdetails rendern, ist es in der Tat geladen, wird es sagen, laden in unserem Helden. Sonst. Lassen Sie uns das hier in diese Linie bringen. Und lassen Sie uns die Details des Films rendern. Anstelle einer großen Return-Anweisung werden wir eine Funktion zurückgeben, die dann etwas mehr JS X4 zurückgibt , abhängig von einer Bedingung. Okay, lassen Sie uns erfrischen. CEO sagt, dass er schnell geladen wird. Laden, laden, laden Star Wars laden Star Wars laden, Star Wars laden, Star Wars laden. Das ist es, was wir wollen. Nun, der Grund, warum wir das tun, ist, weil, wenn jemand die Internetverbindung wirklich, wirklich langsam ist , es ein bisschen Zeit in Anspruch nehmen könnte. Es kann 2-3 Sekunden dauern, bis jede API zurückantwortet. Und so, während sie warten, wird es zumindest sagen, laden. Und lassen Sie uns das einfach als Beispiel machen. Settimeout. Und wir werden das ändern, um zwei Sekunden oder zweitausend Millisekunden zu warten. Es ist gepackt, dass das eine Linie nach oben bewegt. Und lasst uns erfrischen. Es steht, dass es geladen wird. Und dann sagt es, dass es Trauer geladen hat oder so imitieren wir die Idee, dass eine API zwei Sekunden dauern könnte, um zu reagieren. Jetzt ist mein Internet schön und schnell, so dass es nur sehr, sehr, sehr schnell blinkt. Aber wenn das Internet von jemandem langsam ist, könnte es länger als Ladepunkt, Punkt, Punkt, Punkt für viel länger erscheinen . Und deshalb ist das wichtig. So fügen wir das Laden dort hinzu. Also sagen wir, dass das Laden des Satzes geladen wird. Und wir, wir hätten das alles ehrlich innerhalb unserer Hauptrückgabe tun können. Aber nur um dies ein bisschen schöner aussehen zu lassen, was wir am Ende gemacht haben, war, eine andere Funktion hier zu schaffen und zu sagen, wenn es geladen wird, dann den Helden mit Laden zurückgeben. Andernfalls geben Sie ein paar andere Sachen zurück. 24. Movie: Jetzt gehen wir weiter und machen das etwas komplizierter. Und nicht kompliziert, denke ich, weil wir hier nicht wirklich etwas Komplexes machen. Wir schreiben etwas Großes, Größeres. Also lasst uns ein paar JS x hier öffnen und das js X schließen und wir werden hier einen Helden haben, aber wir werden auch einen div-Klassennamen haben. Und es wird ein Container sein. Wir werden auch div schreiben. Klassenname ist gleich Zeile. Und wir werden zwei Spalten in Ihrem div-Klassennamen setzen. Die erste Spalte wird col md E3 sein. Und das wird die linke Spalte sein. Und dann div Klassenname col md neun. Und das wird die rechte Spalte sein. Und lassen Sie uns voran und fügen Sie auch etwas Spielraum hinzu. Genau das, was nicht ganz umarmt unser Banner oder unseren Helden die ganze Zeit. Schau dir die linke Spalte an, rechte Spalte. Also lassen Sie uns in der linken Spalte gehen Sie voran und fügen Sie hier ein Bild hinzu. Also brauchen wir diese Plakat-URL. Und so haben wir eine Plakat-URL. Wo bist du? Plakat? Oh, es heißt Plakatpfad. Und das kommt wieder in unseren Film-Details. So, jetzt können wir sagen, in hier const Poster Pfad ist gleich und wir wissen, dass es Filmdetails Punktposter Pfad sein wird. Und woher kam das Bild? Bewerten Sie hier. Wir wollen auch den 501. Also lasst uns einfach den ersten Teil dieser URL greifen. Und das werden wir hier reinlegen. Und wir werden es mit dem Filmpfad anhängen. Nun, was ich möchte, dass Sie tun, ist, wenn Sie fertig sind, an diesem Projekt als Ihre Hausaufgaben zu arbeiten, was, wenn es keinen Posterpfad wert gibt, dass der Posterpfad als null zurückkommt? Was machst du das? Da dies Bild sagen wird, dass Team db.org Slash T Schrägstrich p Schrägstrich w 500 Schrägstrich null oder nicht einmal Schrägstrich null sagen könnte, könnte es einfach null sein. Also, wie gehst du mit dem fehlenden Bild um? Und das ist auch etwas für Sie, an dem Sie arbeiten können. Also todo befassen sich mit einem möglichen fehlenden Bild. Und das ist wirklich nur eine Bedingung. Wenn es etwas gibt, wenn es nichts gibt, ändern Sie diese Variable. Also, dass Plakatpfad, lassen Sie uns voran und fügen Sie ein Bild in Ihrem IMG SRC wird, dass Plakatpfad sein. Alt wird Punkt-Punkt-Punkt sein. Wir können alles, was wir wollen, reinbringen. Klassenname wird IMG Fluid sein, um es mit Bootstrap reaktionsschnell zu machen. Lass uns ihm einen Schatten geben und ihn umrunden. Und mal sehen, wie das aussieht. Oh, da gehen wir. Ich habe ein kleines Bild da drin. Und dann lasst uns etwas von dem Zeug in der rechten Spalte ändern. Sagen wir mal, es wird hier ein H2 geben. Und das wird der Film Details Punkt Originaltitel sein. Und lassen Sie uns voran und fügen Sie ein p mit einem Klassennamen Lead hinzu, und das ist nur Bootstrap. Und lasst uns Filmdetails setzen. Ich denke, es hieß Überblick, To-to-do-Übersicht. Worum es in diesem Film geht. Filmdetails Punktübersicht. Und das habe ich. So haben wir jetzt einen kleinen Überblick hier und Sie können hier mehr Details eintragen, wenn Sie möchten. Sie könnten einen Link auf die Homepage setzen. Wenn du es wolltest. Sie können eine Verknüpfung zu einer IMDB-Seite herstellen. Hier gibt es auch Bewertungen. Es gibt Stimmen, also mag die durchschnittliche Person uns. 8,2 von zehn. Der Status wurde freigegeben, da er nicht freigegeben wurde. Lassen Sie uns zum Beispiel einen Blick auf Deadpool werfen. Und ich habe heute herausgefunden, dass es einen toten Pool von drei geben wird. Und das ist die ID 5.3.3, fünf, 35. Lassen Sie uns das hier ändern und sehen, ob das freigegeben wird. Der Status wird geändert. Veröffentlicht seine geplante. Deadpool drei ist geplant und es gibt keine Abstimmung dafür. Wie geht man damit um, wenn es keine Stimmen gibt? Es gibt also eine Menge, mit denen Sie hier arbeiten können. Es gibt nicht einmal einen Überblick. Ja, wir wissen nicht, worum es im Film geht. Also vielleicht setzen Sie das in eine if-Anweisung. So erstellen wir ein wenig Detailansicht. Nun ist dies nicht das beste Beispiel, nur weil da nichts drin war, aber der Star Wars sieht man ziemlich gut aus. Lassen Sie uns nun in der nächsten Lektion einen Hintergrund nehmen , der dieses Hintergrundbild sein wird. Und lassen Sie es uns wieder hier platzieren, so dass der Text immer oben geschichtet wird. Und dafür werden wir ein bisschen CSS schreiben. 25. Einen Hintergrund hinzufügen mit CSS: Okay, in diesem Video, und das wird unsere letzte Lektion vor dem endgültigen Projekt sein. Ich glaube. Wir wollen dieses Bild hier wieder ändern. Also gerade jetzt ist es nur grau, aber lassen Sie uns gehen und es tatsächlich zu einem Bild ändern , so dass es etwas mehr Thema darüber gibt. Und dafür müssen wir noch einmal mit unserer Heldenkomponente arbeiten. Also lassen Sie uns unsere Filmansicht öffnen. Und hier, unser Held, werden wir einen Hintergrund hinzufügen. Hintergrund ist gleich einer Art URL. Also lassen Sie uns diese Hintergrund-URL nennen. Wir wissen noch nicht, was das ist, aber lassen Sie uns herausfinden, was das sein wird. Also const Hintergrund-URL ist gleich etwas und es wird Hintergrundpfad genannt. So können wir eine Variable in Ihrem Hintergrundpfad setzen, Filmdetails nach oben Hintergrundpfad. Und dann könnten wir das wahrscheinlich auch nehmen. Und nennen wir das Original. Ich denke, das war es, was es vor ein paar Videos war. Und wir werden die Hintergrund-URL aufnehmen. Und wir werden es in unseren Helden stecken, was bedeutet, dass wir jetzt unseren Helden öffnen und eine optionale Kulisse akzeptieren müssen. Und nur für Fonds diese, lasst uns voran gehen und mal sehen, was dieser Hintergrund sein wird. Und lasst uns das aufmachen. Ja, das ist ein großes Bild, genau das wollen wir. Also wollen wir das Bild hierher bringen. Dafür brauchen wir ein bisschen CSS. Also zuerst, lassen Sie uns voran gehen und nennen das unseren Heldencontainer. Und für H1 geben wir diesem einen Klassennamen Hero-Text. Und für ein optionales div für das Bild. Wir sagen Klassenname, Held Kulisse. Und wir werden diese Kulisse hier vorerst behalten , damit wir darauf zugreifen können, wenn wir sie brauchen. Jetzt wollen wir also unsere app.js S öffnen, die wir noch nicht berührt haben. Und lassen Sie uns unseren Bildschirm teilen. Und so haben wir BG dunklen Text, weiße Polsterung, fünf Hero Container. So psu dot Held Armaturenbrett Container. Und das wird Position relativ sein. Ist das der Index von 100. Wir haben auch Held 2.txt, unser Held Strich Text, Position, relative zed Index 200. Und dann haben wir unsere Held Kulisse, Held Kulisse. Und das wird Position absolut sein. Oben, 0, links, 0, Breite 100%, Höhe 100%. Und Hintergrund x2 Hintergrundgröße ist enthalten. Und lasst es uns vorerst dabei belassen. Wir passen es in ein bisschen an. Ich bin sicher, dass sich das nicht so ergeben wird, wie ich es erwarte. Also haben wir diese Held Kulisse und das passt hier. Gehen wir weiter und speichern Sie das. Ja, ich werde das vorerst schließen. Wir können das immer ein wenig später wieder öffnen, wenn wir müssen. Und wir müssen diesen Hintergrund setzen, dieses Hintergrundbild. Also sagen wir Stil, öffnete unser JavaScript und öffnen Sie dann ein Objekt mit unserem Mapping. Lassen Sie mich sagen zurück, Bodenbild ist gleich, hier wird es seltsam. Zurück Ticks, URL, öffnende und schließende Klammern. Dann haben wir eine Variable mit Öffnen und Schließen geschweiften Klammern. Und dann setzen wir unsere Hintergrund-URL hier ein. Das ist also eine Menge zu schreiben und was ich gerne mache, ist, dass ich einfach URL öffnen und schließen kann. Dann schreibe ich innerhalb dieser URL meine Variable. Und dann schreibe ich innerhalb dieser Variablen den tatsächlichen Variablennamen Hintergrund oder nicht Hintergrund, sondern Hintergrund. Und das hält es einfach überschaubar. Denn an diesem Punkt wird dies eine Menge zu betrachten sein, obwohl es nur ist, na ja, was bedeutet, dass Daten zu den 3839 Zeichen, die dieser Teil sieht aus wie eine Menge. Also lasst uns voran gehen und das speichern und sich das ansehen. Das sieht nicht schlecht aus. Und wie erwartet, war es nicht so, wie ich es erwartet hatte. Also gehen wir zurück zu unserer app.js S. Hinterhof Größe wird abgedeckt werden. Und lassen Sie uns die Hintergrundposition so ändern, dass sie zentriert und zentriert ist. Und was ist, wenn der Text weiß auf weiß ist? Das kann knifflig sein. Also lasst uns Opazität machen oder es wird Stadt 0,5 bezahlen . Machen Sie einfach ein wenig dunkler und es wird immer auftauchen. Lass uns das vielleicht auch noch dunkler machen. Und da gehen wir. Jetzt schauen wir uns ein anderes Bild an. Lass uns Star Trek machen, so. Sieht ziemlich gut aus. Star Wars. Schauen wir uns das an. Schön, das sieht schön und thematisch aus. Und so verwenden wir jetzt ein wenig CSS. Wir haben das auch verwendet, lassen Sie uns hier eine Bedingung verwenden, nur um sicherzustellen , dass dieses div nicht angezeigt wird, wenn es keinen Hintergrund gibt. Also können wir sagen, zurück fallen. Und, und wir werden das div dort reinlegen, aktualisieren. Und es funktioniert. Schauen Sie sich das an und sagt sogar laden und lädt dann alles auf einmal. Das ist wirklich, wirklich nett. Wir mögen das wirklich, wirklich. Nun, das ist so ziemlich alles, was es für dieses gesamte Projekt zu tun hat. Wir haben viel hier drin gemacht. Also im nächsten Video, was ich tun werde, ist, dass ich Ihnen einige Ihrer Brunnen beschreiben werde , im Grunde die Dinge, die Sie tun müssen, um dieses Projekt zu beenden, sagt, ich habe uns etwa 90% dorthin gebracht. Wir haben auf dem Weg viel gelernt, aber es gibt noch weitere 10%, die vielleicht 5%, was ich möchte, dass Sie tun. Und wir werden darüber in der nächsten Lektion sprechen, die Ihr endgültiges Projekt sein wird. 26. DEIN PROJEKT: In Ordnung, willkommen zu Ihrem abschließenden Projekt für reagieren auf eine Eins. Nun, das ist ein bisschen interessant, ein bisschen anders als die Art, wie ich normalerweise Dinge mache. Normalerweise habe ich dir die Grundlagen gezeigt und dich dazu gebracht, etwas auf eigene Faust zu bauen. Aber weil React so groß sein kann und es so viele Informationen gibt. Was wir taten, war, dass wir diese gesamte Film-Datenbank Suchanwendung fast vollständig aufgebaut haben. Und was ich tun werde, ist, den Rest davon in deinen Händen zu lassen. Es gibt also ein paar Dinge, die Sie für Ihr Projekt tun sollen. Und es gibt ein paar Bugs, die ich absichtlich noch nicht gelöst habe. Es gibt also keine 404 Seite. Also zum Beispiel, wenn ich zu Schrägstrich fehlende Seite gehe, gibt es einfach nichts. Also sollte es etwas geben, das ich möchte, dass Sie eine Art Fangseite erstellen , die besagt, Hey, diese Seite existiert nicht. Da sollte ein 404 drin sein. Manchmal hat ein Suchergebnis kein Bild. Und ein gutes Beispiel ist Wanda, ich habe versucht, eine Abteilung zum Beispiel nachzuschlagen. Und es gibt einfach keine Bilder für einen, ich kann nicht einmal sagen, dass Name oder der Film nur genannt Wanda. Und was ich möchte, dass Sie tun, ist, wenn es keinen Plakatpfad gibt, ich möchte, dass Sie es ändern, um etwas nur generisches, nur damit es immer ein Bild drin ist. Es gibt auch keinen Handler, wenn keine Suchergebnisse vorhanden sind. Also, wenn ich eins zu 99999 eintippe, sagt es nichts aus. Und es sollte etwas für gute Benutzererfahrungen drin sein, sagt, hey, schau, ich weiß, dass du nach einem zu 99999 suchst, aber es gibt keine Ergebnisse. Es existiert einfach nicht. Also müssen Sie das erstellen. Und die Suchschaltfläche, Schaltfläche Suchen in der Navigation funktioniert nicht. Also, wenn ich Wanda tippe und auf Suche klicke, geht es nirgendwo hin, es tut nichts. Und das wird ein großer sein, das wird schwer für Sie zu implementieren sein. Also geh weiter und gib denen eine Chance. Ich lasse dich absichtlich hängen, etwa 5% von ihnen waren etwa 95% dort. Also musst du nur die letzten kleinen Bits fertig machen. Und dann sind wir fertig. Das Schöne daran und der Grund, warum ich es so mache, und es ist ein bisschen anders als ich normalerweise ein Projekt erstelle, sind diese Aufgaben, die ich absichtlich aus diesem Projekt ausgelassen habe , so dass Sie sie selbst lösen müssen. Und das ist sehr, sehr, sehr ähnlich zu im Grunde eine Hausaufgabe, die ein Unternehmen wird Ihnen geben , wenn Sie sich bewerben, wenn Sie mit ihnen arbeiten. Und so, sobald Sie durch Ihre Interviewphasen bekommen, Unternehmen wird Ihnen oft ein wenig Code geben. Sie werden es dir per E-Mail schicken oder so was. Und dann musst du einige der Bugs ausarbeiten. Und Sie müssen herausfinden, was diese Fehler sind und wie Sie sie selbst lösen können. Und das ist wirklich gute Praxis, wo 95% dort, müssen Sie uns über die Ziellinie mit den letzten 5% bringen. Denn das ist, wie wir es in der professionellen Welt machen. So ziemlich jeder macht es. Und so ist das einfach wirklich, wirklich gute Übung für Sie. Also geh voran und probiere das aus. Und vergessen Sie nicht, wenn Sie stecken bleiben, können Sie eine Frage unten lassen. Letzt, mein Name war ein Caleb Tolkien war nein, Mein Name ist Caleb Pauline. Danke, dass du mir gefolgt bist, auf einen Eins reagieren. Vergessen Sie nicht, Sie können den Quellcode jederzeit herunterladen und Spaß damit haben. Möglicherweise müssen Sie die API-Schlüssel austauschen. Ich bin nicht allzu verwirrt darüber, dass der API-Schlüssel meiner oder jemand anderes ist. Also musst du die nicht austauschen. Aber Sie können auf jeden Fall einen Blick auf den Quellcode werfen. Du kannst mir immer auf Twitter bei Caleb Tolkien oder auf Instagram folgen. Codierung, Punkt für Punkt. Jedermann. Nochmals vielen Dank für das Auschecken reagiert auf eine Eins. Ich hoffe, du hattest viel Spaß und hoffentlich werde ich dich in einem anderen Modul von mir sehen, beißen.