Js mit API-Daten reagieren

1. Einführung: Willkommen zu diesem React JS-Kurs. Mein Name ist ja dann jeder Audrey und Algorithmen dr. In diesem Kurs. In diesem Kurs lernen Sie , wie Sie unsere React-Anwendung erstellen und wie Sie React-Paginierung mit realen API-Daten hinzufügen können. Wie Sie sehen können, ist dies das Projekt, das Sie in diesem Kurs erstellen werden. Hier erhalten wir also eine Liste der Informationen von einem API-Endpunkt und zeigen unsere API-Daten in einer Kartenansicht an. Und sobald ich den Mauszeiger über die Karte fahre zeigt der kleine Rand in der linken Ecke. Und sobald ich auf diesen klicke, wird es expandieren. Und dann können wir den Rest der Informationen sehen. In diesem Kurs. Sie lernen nicht nur die React-Paginierung, sondern möchten auch lernen, wie Sie zusammenklappbar hinzufügen, die in Reaktorstühlen gezeigt werden. Und wenn ich darauf klicke, wird man sich öffnen und dann wird es auch markieren, so implementieren wir den Reakt-Zusammenbruch von Shun. Und unten siehst du diese React-Paginierung hier. Derzeit bin ich im Fall Nummer eins, es gibt einen Grund dafür und dieser ist weiß markiert. Und wenn ich auf den Test Nummer zwei klicke, werden diese beiden hervorgehoben. Und dann wird diese vorherige Schaltfläche aktiviert, wenn es die Nummer eins gibt, dann ist die vorherige Schaltfläche deaktiviert weil wir vor dem einen keine Basisnummer haben. Und indem ich auf den nächsten Button klicke, kann ich auch eine Basis auf eine andere Basis und einen anderen E-Bereich verschieben , wir zeigen, und diese Liste von Daten. Und wenn jede einzelne Basis wir Rückerstattungsdaten haben , die wir von unserem API-Endpunkt erhalten. Und dann können wir es Ihnen einfach zeigen , dass Sie unsere Daten einfach mit unserer Paginierung filtern können. Also habe ich versucht, alle Arten von Paginierungsfunktionen hinzuzufügen , die wir normalerweise bei der Replikation der Präferenzen sehen. Wenn ich also die letzte Basis gegangen bin, dann wird der nächste Knopf dezibellieren. Und dann haben wir auch befürwortet, das bedeutet, dass die Basisnummer beibehalten wird. Anscheinend habe ich diese Nummer fünf hinzugefügt. Wenn ich also darauf klicke, wird es dieser Nummer fünf entkommen. Typpassung wird gleichzeitig beibehalten. Jetzt sind wir im Fall Nummer drei, und wenn ich darauf klicke, sind wir jetzt in Vers Nummer Acht. Also kannst du es definitiv ändern, wie du willst. Anstelle von fünf können Sie also anzeigen, um zu sehen, und Sie können auch die Farbe, die Hintergrundfarbe und die Paginierungsdesigns dynamisch ändern . Ich habe mein Bestes versucht, jede einzelne Codezeile dieses Projekts zu erklären , damit Sie alles verstehen und wie Sie ein React JS-Projekt auf Netlify bereitstellen können , damit Leute aus der ganzen Welt world kann auf Ihre Anwendung zugreifen. Wir werden also eine Cloud-Plattform verwenden , um unser Projekt bereitzustellen, das Netlify heißt. Sie können sehen, dass diese URL derzeit dieses Projekt auf dieser URL in Netlify leben soll. Sie werden auch lernen möchten, wie Sie dieses React JS-Projekt bereitstellen können. Deshalb möchte ich Sie dringend ermutigen, diesen Kurs anzumelden. Wir sehen uns in der Vorlesung. 2. React Project erstellen: Willkommen zu dieser Vorlesung. In diesem Teil werden wir anfangen, an unserem React JS-Projekt zu arbeiten. Dafür müssen wir in erster Linie unser React JS-Projekt erstellen. Wie Sie sehen können, habe ich meinen Visual Studio-Code geöffnet, aber derzeit habe ich hier nichts , weil ich das Projekt noch nicht installiert habe. Im Herbst des Verzeichnisses müssen wir unseren Ordner importieren. Also zuerst, was Sie tun müssen, müssen Sie nur einen Ordner erstellen. Zum Beispiel erstelle ich meinen Ordner in diesem Ordnerverzeichnis, zum Beispiel die Reaktivität von Videos, ein Problem mit APA-Daten. Und hier erstelle ich einen neuen Ordner. Und ich sage React Paginierung. Reagieren Sie Paginierung. Und in diesem Ordner müssen Sie Ihr Projekt installieren. Was ich jetzt tun werde, werde ich dieses Projekt schnell in meinen Visual Studio-Code importieren . Sie können also sehen, ob Sie auf dieses Symbol klicken, wird Ihnen dieses Verzeichnis „Ordner öffnen“ angezeigt. Klicken Sie also auf Ordner öffnen. Und dann gehe ich zu diesem Video und dann diesen Herbst, und das ist der Ordnername , den ich erstellt habe. Ich wähle es aus. Und los geht's. Auch hier haben wir nichts in diesem Ordner. Wie Sie sehen können, ist es nur ein leerer Ordner. Wir haben nichts in diesem Ordner. Wir werden unser reaktantes JS-Projekt installieren. So werden wir arbeiten. In Ordnung? Sie erstellen einfach irgendwo in Ihren Labors, auf Ihrem Laptop oder Desktop einen Ordner. Und dann importiere einfach den Ordner hier und öffne jetzt dein Terminal. Und wir werden unser React JS-Projekt installieren. Also was ich tun muss, ich muss hier schreiben, ich sage NP x und dann Create React App. Okay, also eine Sache müssen Sie die Absatzabfrage schreiben, also NPH, React App. Und dann sage ich, der Name ist Kunde. Das Sprint-Beispiel. Sie können einen beliebigen Namen angeben, welchen Namen Sie auch geben werden, Ihr Projekt wird unter diesem Namen stehen. Zum Beispiel stehen wir vor der Front, wir arbeiten an der Paginierung. Paginierung wird normalerweise auf der Clientseite verwendet, die vorne und seitlich ist. Immer noch der Grund, warum ich clientseitig schreibe. Also NP x Create React App-Client. Und jetzt wird es unser Projekt in diesem Ordnerverzeichnis installieren . von Ihrer Internetgeschwindigkeit dauert es einige Abhängig von Ihrer Internetgeschwindigkeit dauert es einige Minuten. Und Sie können sehen, dass der Ordner erstellt wurde und das package.json erstellt wurde. Und es wird ein paar weitere Gegenstände erstellen, ein paar weitere Projekte. Und in der Zwischenzeit kann ich Ihnen einige Dinge zeigen , die für unser Projekt erforderlich sind. Zunächst zeige ich Ihnen, wie wir Bootstrap in unser Projekt einsetzen können. Also weil ich einen buddhistischen Stopp gebrauchen werde. Also kann ich Buddhist absagen. Und es wird für uns benötigt, also werde ich mich darauf einigen. Dies ist also die offizielle Website, oft buddhistische Mitarbeiter bekommen. Und von hier aus kann man viele Dinge lesen. Sie können einfach ihr NPM-Paket installieren. Sie haben es, aber der einfache Weg ist es, den Link zu benutzen. So können Sie die Einführung und dann den Schnellstart sehen. Es gibt einige Links , die wir brauchen werden. Zum Beispiel dieses. Wir können das einfach hier hinzufügen. Sie haben also CSS-Eigenschaft und andere Eigenschaften hier. Lassen Sie mich zum Beispiel überprüfen und den Quellcode herunterladen. Sie haben also vielleicht einen Link namens „Erste Schritte“. Also können wir es auch von hier aus machen. Kein großes Problem hier. Ich denke, wir müssen diese und dann diese beiden Dateien kopieren , die wir installieren müssen. Okay, damit wir unsere kriegen können, können wir unseren Buddhisten von hier aus starten. Und wir werden ein weiteres Paket installieren, das NPM React Paginierung genannt wird. So nutzen wir unsere Paginierung. Reagiere also, taube es. Dies ist der Paketname. Und lass mich sehen, wie es jetzt läuft. Es ist also immer noch, es wird einige Augenblicke dauern. Und das ist unser Paginierungspaket, das wir verwenden werden. Dies ist die wir haben diese Option und Sie können einfach ihre Dokumentation lesen, wenn Sie möchten, Sie können einfach gute Ideen über ihre Funktion sind die Optionen, wie man diese benutzt? Und sie haben ein paar Beweise , die wir offensichtlich in unserem Projekt verwenden werden. Und ich zeige dir, wie es geht. Wie gut bedeutet diese Break-Klasse weiter, mit Ketten auf Pest. Und sie haben viele Dinge. So kannst du hier einfach herumspielen und dann kannst du dir einfach ein paar Ideen holen. Und natürlich zeige ich Ihnen, wie Sie dieses umsetzen können. Und wir werden installieren, wir werden Beleuchtung installieren. Was brauchen wir sonst noch? Wir brauchen unser rotes Icon so schlecht, dass sie ein anderes Paket namens NPM React Icons haben . Wir werden React-Icons aus diesem NPM-Paket verwenden, rote Icons. Und wir werden brauchen, wir werden unsere API-Daten benötigen. Dies sind also die roten Icons , die wir in unserem Projekt installieren müssen. Und dann brauchen wir noch eine andere Sache, die unsere APA ist. Daher verwenden wir unsere öffentliche API , damit Sie lernen können, wie man APA-Daten verwendet. Also sage ich JSON-Platzhalter. Dies ist also die Website, von der aus wir unseren kostenlosen APA-Link erhalten. Und sie haben viele Möglichkeiten. Nehmen wir zum Beispiel an, ich wähle diesen Beitrag aus. Also werden wir unsere APA von hier aus in Daten erhalten. Wir haben Titel und Text und ID. Wir werden diesen Link daraus kopieren. In Ordnung, also hat es Node-Module installiert und ein paar Dinge werden hier hinzugefügt. Also zeige ich dir das auch. Und es könnte hilfreich sein. Okay, also sind wir kurz davor zu beenden und ich denke, wir haben alle erforderlichen Pakete und ich werde Ihnen zeigen , wie Sie es installieren und wie wir aktivieren können. Okay, also um unser Preissymbol zu sammeln, haben sie es gibt React Icon Website. Ich glaube, das ist ihre Homepage. Also los geht's. Nein, das ist nicht die Homepage. Sie haben eine Website, von der wir hier atomar können, von wo aus wir diese bekommen können, nicht diese. Ich kann React Icons sagen. Icons hier. Okay, das ist also die offizielle Website von React Icons. Sobald wir also unser Reaktorsymbol in unserem Projekt installiert haben, haben wir Zugriff auf all diese Symbole. Dann können wir gebrauchen, was wir wollen. Wir müssen nur den Namen importieren. Und dann wird es in unserem Projekt funktionieren. Es ist also sehr einfach, es zu benutzen. Es dauert nur ein paar Sekunden. Okay, also ist unser Projekt fertig und es gibt eine Anleitung, wie man das Projekt durchführt. Wir können also sehen, dass dies unser Ordnerverzeichnis ist. Wir haben diese AB keine Stühle und alle anderen Akten. Zuerst führe ich dieses Projekt durch. Also müssen wir in dieses Client-Verzeichnis wechseln. Um dies zu tun, müssen wir hier einen CD-Client schreiben da unser Projekt in diesem Client-Ordner installiert ist . Wir müssen also in diesem Client-Ordner sein , um unser Projekt ausführen zu können. Um unser Projekt ausführen zu können, müssen wir npm start schreiben. Und jetzt wird es unser Projekt ausführen und wir werden es in unserem Browser sehen können. Und lass mich dir zeigen, ob es klappen wird. Also los geht's. Das ist unser Projekt. Ich hoffe, es wird funktionieren, weil es funktionieren sollte. Wir haben keinen Fehler gemacht. Und wir können auch das Update sehen und wenn Sie irgendwelche Fehler bekommen, wird es hier angezeigt. Und Sie können es auch im Browser sehen. Ich habe keine Vorstellung, warum es so viel Zeit in Anspruch nimmt. In der Zwischenzeit kann ich Ihnen hier eine Anleitung zum Ordner oder Verzeichnis geben. Im Grunde genommen werden wir hauptsächlich unter diesem Quellverzeichnis arbeiten , in dem wir unsere Komponente und die gesamte Datei erstellen werden . Sie können sehen, dass dies unsere Hauptdatei ist , die derzeit die gesamten Daten enthält, aber wir werden sie ändern. Und dann haben wir diese App Dot CSS. Und das ist das öffentliche Verzeichnis. Und in diesem öffentlichen Verzeichnis haben wir unsere index.html. Und wir führen speziell aus, wenn wir unser React-Projekt in jeder Art von Browser ausführen, scheint es, dass wir erfolgreich konkurrieren können. Jetzt sollten wir unser Projekt sehen können . Also los geht's. Dies ist unser Reaktor-Cheers-Projekt. Wir haben derzeit nichts, also müssen wir daran arbeiten. Und ich werde dieses Video gleich hier beenden und wir werden mit der nächsten Vorlesung fortfahren. 3. React Pakete installieren: Willkommen wieder einmal zurück. In diesem Teil werden wir mit der Arbeit an unserem React JS-Projekt beginnen . Letzten Teil konnten wir unser Projekt ausführen und dann installieren wir unseren React JS auf unserem Computer. In erster Linie werde ich in diesem Teil alles Notwendige für die erforderlichen Pakete installieren , damit wir weiter an unserem Projekt arbeiten können. Um dies zu tun, bedeutet das, dass Sie diese 1 zuerst gestohlen haben. Und deshalb müssen wir das React-Icon installieren. Klicken Sie also einfach auf diese roten Symbole, klicken Sie hier, öffnen Sie dann Ihr Terminal und stellen Sie sicher, dass Sie sich in Ihrem Kundenverzeichnis befinden. Denn denken Sie an eine Sache, Ihre gesamte Datei, Ihr gesamtes freigegebenes Paket und den Ordner in diesem Client-Ordner oder welchen Ordnernamen Sie angeben. Sie müssen also immer in diesem Ordner sein, in dem Sie installiert haben, Sie reagieren auf das JS-Projekt und nicht Ihr Hauptordnerverzeichnis. Okay? Um dies schnell zu tun, gehe ich in dieses Client-Verzeichnis. So saurer Client und dann werde ich npm einfügen, ich reagiere PyCon, und dann wird es installiert. Und dann könnte es ein paar Mal dauern. Okay, also ist es installiert, schätze ich. Jetzt lass mich dir was zeigen. Wenn wir also unsere öffnen, wenn wir unser package.json öffnen, können wir sehen, dass das rote Symbol hier hinzugefügt wurde. Jetzt installieren wir React Busy-ness. Was das tun wird, ist für unsere Paginierung erforderlich. Jetzt bin ich bereits in diesem Verzeichnis, also füge ich es ein und dann werde ich dieses installieren. Und es wird hier drüben hinzufügen, reagieren paginieren. Okay, also haben wir zwei benötigte Pakete installiert. Ich denke, wir werden keine weiteren Pakete mehr brauchen, aber für dieses werden wir einfach diesen normalen Link verwenden. Lassen Sie mich vorher diese ändern, damit wir verstehen können , dass unsere Änderungen es in unsere Projekte aufnehmen werden. Also jetzt unser gesamter Code in dieser app.js. Also was ich im Grunde tun werde, werde ich alles auswählen, dann werde ich entfernen, weil ich das will, weißt du, alles, jede Codezeile , die ich hier schreiben werde , Es gibt einen Grund dass ich den gesamten automatisch generierten Code entfernt habe , der von React js erstellt wurde. Als erstes müssen wir unseren React aus unserem React importieren. Und dann füge ich eine Pfeilfunktion hinzu. Also sage ich Konsolen-App. Denken Sie also daran, dass Sie hier Ihren Namen f hinzufügen müssen . Andernfalls wird es Ihnen einen Fehler geben. Dies bedeutet nicht, dass Sie den Namen Ihrer Komponente nicht ändern können. Auf jeden Fall können Sie es tun, aber dafür müssen Sie einige Änderungen vornehmen. Also zeige ich dir den Export Default. Dann füge ich diese App hinzu. Also was ich damit meine, wenn Sie also Ihren Index zu jaws öffnen, index.js und hier Ihr App-Ordner ist Ihre F-Komponente verbunden ist und diese index.js und im Grunde ausgeführt wird, wenn wir unsere Reagiere JS-Projekte. Es gibt also einen Grund , warum Sie sicherstellen , dass dieser Komponentenname f ist, oder wenn Sie hier Änderungen vornehmen, stellen Sie sicher, dass Sie diesen hinzugefügt haben. Und so arbeiten wir gerade an diesen Reaktoren. Hier müssen wir unser F. geschrieben haben. Dafür muss ich zurück sagen . Und innerhalb dieser Rückkehr. Und wir müssen unser, wir können sagen React Punktfragment hinzufügen wir können sagen React Punktfragment da wir hier möglicherweise mehrere Kinder hinzufügen. Es gibt also einen Grund , warum ich hier React-Punktfragment hinzufügen möchte . also vorerst, nur für ein Beispiel und einen Testzweck, Lassen Sie mich also vorerst, nur für ein Beispiel und einen Testzweck, einen hinzufügen, lassen Sie mich hier eine Sache hinzufügen. Also lass mich ein paar hinzufügen. Nur für ein Beispiel kannst du Hallo sagen, React. Und ich werde es retten. Und wenn wir es jetzt ausführen, können wir Hello React sehen. Jetzt ist es an der Zeit, unsere buddhistischen Stub-Produkte so schnell zu testen . Ich muss diesen Link von hier aus hinzufügen , denn dieser Link wird uns den CSS-Teil dieses buddhistischen Zeugs plus dieses buddhistischen Kunstunterrichts geben. Also kopiere ich diesen, um einen buddhistischen Ofen hinzuzufügen, und öffne diese index.html unter diesem öffentlichen Verzeichnis, klicke darauf. Und dann musst du hier in deinem Kopf dieses hinzufügen. Und es sollte hinzufügen, es sollte hier funktionieren. Und dann gibt es zwei JavaScript-Dateien , die Sie je nach Funktion von Buddhist benötigen oder verwenden. Also kopiere ich es einfach. Sie bringen Sie nicht dazu, kein Problem zu erstellen. Vielmehr erhalten wir einen gewissen Nutzen, wenn dies erforderlich ist. Okay, das sind also die beiden Links, drei Links, die du aus guten buddhistischen Sachen bekommen kannst , und du wirst einfach zu deinem Er hinzufügen , um Buddhisten von Funktionen in deiner React-App zu aktivieren . also nur für ein Beispiel für Testzwecke Lassen Sie mich also nur für ein Beispiel für Testzwecke hier einen Klassennamen definieren. Und dann sage ich „Karte“. Auto ist also ein Buddhist oder Eigentum. Wenn unser buddhistisches Zeug in unserem Projekt funktioniert und wir in der Lage sein sollten, eine Karte zu sehen. Los geht's, wir sehen unsere Karte. Es bedeutet, dass unser buddhistisches Zeug hier funktioniert. Cool. Was können wir jetzt tun? Wir können hier eine Komponentendatei erstellen. Innerhalb dieser Komponente werden wir unser Projekt bearbeiten. Wir können sagen, wir können Komponente sagen. Sie können Komponente und diese Komponente sagen, wir können unsere verschiedenen Dateien und Ordner erstellen. Okay, damit wir zunächst einmal eine Datei erstellen können. Erstellen wir hier eine Datei. Und wir können sagen, wir können zum Beispiel sagen, dass wir vielleicht Daten sagen können. Oder wir können sagen: Was wollen wir also im Grunde bauen? Wir wollen im Grunde eine Komponente aufbauen, unser Bildungssystem aufgebaut hat. Aber für die Paginierung werden wir einen separaten Ordner für diesen erstellen , für diese Daten haben wir einen anderen. Sagen wir, wir können es hier sagen. Wir können hier Informationen sagen. Informationen. Diese Informationen enthalten unsere Lead-Informationen hauptsächlich über die Speicherung unserer API-Daten. So können wir eine Entzündung Punkt Js sehen. Und jetzt aktiviere ich das hier. Das wird mir helfen. Es ist eine Art Schnipsel, dass ich die Fourier-Serie verwende. So können Sie hier einfach eine Komponente erstellen , die eine Entzündung sein wird . Und dann können wir das einfach machen. Okay? Wenn ich jetzt weiß, was ich tun muss, werden diese Informationen unseren ganzen Teil hier enthalten. Oder wenn ich das hier drüben mache, dann wird es Teil davon sein. Also werde ich diese Entzündungskomponente importieren , die unsere gesamten Daten enthält. Und dann kann ich diese Information einfach hier nennen. Und wir können diese Informationen sehen, wir können diesen Text sehen. Und jetzt erhalten wir in diesen Informationen alle unsere API-Daten und wir werden auch unsere Paginierung hinzufügen. Egal welche Komponente Sie erstellen, stellen Sie sicher, dass sie mit Ihrer app.js verbunden ist, die mit der index.js verbunden ist. Und so wird es funktionieren. Jetzt brauchen wir diese beiden Akten nicht. Okay, also wenn ich will, kann ich hier auch dasselbe tun, aber ich möchte es trennen, damit Sie lernen können, wie man Komponenten erstellt und wie wir uns miteinander verbinden können. Also zuerst hier müssen wir, okay, also lasst mich zuerst eine anständige Option hinzufügen. Wir brauchen diese Informationen hier nicht. In diesem Div erstelle ich einen Klassennamen. Und hier kann ich Container sagen. Container. Und dieser Container bedeutet, okay, also haben wir hier keine Daten. Also müssen wir H1 hinzufügen, ich kann sagen Informationen abrufen. Und hier geht's. Wenn wir also Container hinzufügen, beginnt es von der Mitte des alles passt. So haben die meisten der gesagten Wellen diese Eigenschaften. Und es gibt einen Grund, warum ich diesen Container benutze. Jetzt können wir in diesem Container erstellen, können wir in diesem Container erstellen wir können zwei hinzufügen , um unsere Daten hinzuzufügen. Dafür erstelle ich zuerst eine CSS-Datei hier. Wir können jedoch Informationen sagen, CSAs, Entzündungspunkt CSS. Und dann sage ich Import. Und ich werde es hier speichern, da unsere Entzündung mit dieser verbunden ist. Jetzt erstelle ich hier einen anderen Ordner. Und in diesem Ordner, in diesem div-Verzeichnis, erstelle ich einen Klassennamen , der unsere gesamten Daten enthält. Und hier können wir uns für das Design einlassen. Das ist also unser Infill-Design und dieses Info-Design, in diesem Info-Design werden wir beispielsweise unser ACE to Tech haben . Und ich kann diese Informationen schicken. Ich kann zum Beispiel eine Liste von Informationen sagen. Und jetzt können wir hier Design machen. Also benutze die linke Seite, aber es sollte in der Mitte sein, aber es sollte nicht in der Mitte sein. Also mache ich es. Ich kann sagen, dann kann ich A7 sagen und dann kann ich sagen, okay, also sollte es A6, A7 sein. Es gibt kein Teilchen ist sieben. Also kann ich sagen, es ist sieben hier. Also A6. Und jetzt kann ich sagen, dass Text ausrichten, zentrieren und rand, oben und Rand 50 Pixel tolerieren. Also los geht's. Dies ist unsere Liste der Informationen, die das Zentrum verwenden , und wir haben auch einen gewissen Spielraum von hier. Cool. Jetzt ist alles in Ordnung. Und danach müssen wir diesen Container hier einen anderen Ordner oder eine andere Datei erstellen , in der wir alle unsere Daten anzeigen. Und noch eine Sache, die wir hinzufügen müssen, hat unsere APA , also was kann ich dafür tun? Ich kann einfach unsere Variable erstellen. Wir können const sagen, URL. Und dann kann ich das einfach hier machen. Ordnung, also erhalten wir von dieser URL unsere JSON-Daten und wir werden sie in unserer Anwendung anzeigen. Also werde ich dieses Video hier beenden und wir werden mit der nächsten Vorlesung fortfahren. 4. API-Daten abrufen: Willkommen wieder einmal zurück. In diesem Teil werden wir versuchen, unsere Daten zu erhalten , und wir werden versuchen, sie in unserer Anwendung zu zeigen. Wir konnten diese Listeninformationen hier hinzufügen. Und jetzt füge ich in diesem Teil unsere Benutzer hinzu, um zu haken. Das wird uns helfen, unsere Daten von unserer API zu erhalten. Dafür müssen wir unsere Verwendungszwecke hinzufügen und Effekthaken verwenden oder diese verwenden. Wir können dafür sagen, benutzt das. Benutzt also Ted Hope und benutze dann den Effekt-Hoop und verwende dann den Effekt Hooke. Und hier drüben gehe ich so schnell, dass ich kreiere. Stattdessen können wir const sagen und Sie können sagen, dass Daten eingestellte Daten sein werden. Und dann können wir Verwendungsschulden hinzufügen und es wird ein leerer Bereich sein , weil wir unsere Daten erhalten und unsere Arrayliste darin festlegen werden. Verwendet es Haken. Und in Ordnung, also erstelle ich hier einen neuen Ordner. Ich sage „const lot“. Es wäre eine Menge API. Es wären viele FBI-Daten. Du kannst ihm einen beliebigen Namen geben, was immer du willst. Du kannst ihm einen beliebigen Namen geben, was immer du willst. Es ist also nur ein Funktionsname. Und in dieser Funktion füge ich Fess hinzu. Was ist schnell? Grundsätzlich ist fess ein vorgefertigter Browser. Es hilft uns, unsere Daten vom Server oder jeder Art von API zu erhalten. Aber wenn du willst, kannst du auch Nullen verwenden, was n, The Becker's ist. Aber für mich benutze ich dieses gerne und es wird alles für uns tun. Also Phase und von wo wir unsere Daten abrufen möchten, möchten wir unsere Daten von dieser URL abrufen, sich um diese URL handelt. Und Sie können sehen, dass dies der API-Endpunkt ist. Hauptsächlich sagen wir, welchen API-Endpunkt Sie haben, Sie können ihn einfach hier verwenden und dann einen Parameter übergeben. Also wird man Methoden sein normalerweise ist standardmäßig die Methode gut ist. Aber wenn Sie möchten, können Sie es auch erwähnen und es hat vier weitere, vier weitere Eigenschaften. Zum Beispiel GET, post, PUT und löschen, die Sie benötigen , wenn Sie einen Löschvorgang oder andere Dinge ausführen, dann müssen wir unsere Daten in ein JSON-Format konvertieren . Da dieses Gesicht unsere JSON-Daten standardmäßig nicht konvertieren kann, können wir sagen, dass die Antwort ein Risikoanleihen-Dot-JSON sein wird . Was heißt das? Und was sagen wir es hier? Wir sagten hier, welche Antwort Sie von dieser URL von unserem API-Endpunkt erhalten haben, konvertieren Sie sie einfach in ein angrenzendes Format. Und dann können nur wir unsere Daten in unserer App anzeigen. Okay, also kann ich jetzt noch einen hinzufügen als hier. Und dann kann ich sagen, wenn Sie es haben, wenn Sie es in das JSON-Format konvertiert haben, können wir unser Ergebnis erhalten. Wir können Ergebnis sagen. Und dann können wir es sehen. Wir können auch den Uterus erraten. Wenn es einen Euro gibt, kann man als knapp denken. Und dann können wir einfach sagen, dass Konsolenpunktprotokoll dieser Fehler sein wird. Und ich füge das hinzu. Also unser Ergebnis, ich meine, dass unsere Daten jetzt in diesem Ergebnis liegen. Jetzt müssen wir dieses Ergebnis in den eingestellten Daten setzen, nämlich dass unsere Benutzer sprechen müssen. Wir können also sagen, dass wir es sind, wenn Sie möchten, können Sie hier auch eine Bedingung hinzufügen. Wenn also unser Ergebnis, bedeutet das, dass wenn wir das Ergebnis erhalten , nur wir unsere Daten hier festlegen können. Und dann wird das Ergebnis in diesem Fall sein. Jetzt standen unsere Benutzer dafür, dass sie diese ganzen Daten enthalten , die wir von dieser API erhalten werden. Lassen Sie mich den Code formatieren. Okay, jetzt müssen wir unseren US-Effekt hinzufügen , damit wir sagen können „Effect“ verwenden. Und dann können wir das hier hinzufügen. Und hier müssen wir hinzufügen, dass ein Angeklagter Unabhängigkeits-Ära ist, weil wir unsere API und Daten nur einmal rendern wollen. Wenn Sie diesen Abhängigkeitsbereich nicht hinzufügen, wird er immer wieder dasselbe rendern . Also sind wir hauptsächlich, wir sagen es wirklich hier. Welche Daten Sie also von dieser API-URL erhalten , sind gerade betroffen oder zeigen sie einfach nur mindestens einmal geladen an. Du musst nicht immer wieder dasselbe tun. Jetzt kopiere ich diese Funktion und füge sie dann hier ein. Cool. Jetzt haben wir dieses , damit unsere Daten bereit sind, aber wir werden immer noch nichts sehen können weil wir unsere Daten nicht verwendet haben. Lassen Sie mich Ihnen also noch einmal erklären. Deshalb haben wir im Grunde einen Benutzer zum Anschließen erstellt und wir erhalten unsere API-Daten mit dieser Phasen-URL. Und dann sagen wir nur , wenn wir unsere Daten erhalten , fügen Sie diese Daten einfach unseren Benutzern hinzu. Jetzt können wir mit diesen Daten auf unsere Daten zugreifen. Um dies zu tun, kann ich zum Beispiel hinzufügen, ich kann es einfach ausprobieren. Man kann sagen, man kann sagen, ich schätze, es ist nur ein Punkt Stringify. Und dann werden diese Daten uns das JSON-Format unserer Daten nur zu Testzwecken geben , falls wir sie erhalten. Wir können also sehen, dass wir alle unsere Daten von dieser API haben und finden, aber dies ist nicht der richtige Weg, um sie offensichtlich zu zeigen. Und wir werden unseren Code definitiv formatieren und Farbabsorption oder einige andere Dinge hinzufügen Farbabsorption oder einige andere Dinge , die wir hier tun werden. Keine Sorge, es bedeutet, dass wir unsere Daten abrufen können. Und im nächsten Teil werden wir unsere Daten in unserem Designformat zeigen und sie menschlicher lesbar machen. Also sehe ich dich in der nächsten Vorlesung. Tschüss. 5. API-Daten in einer Karte anzeigen: Hallo, willkommen wieder mal zurück. In diesem Teil werden wir unsere Daten entwerfen und versuchen , sie in einer Karte zu zeigen. Okay, wie können wir das machen? Um dies zu tun? Ich möchte dieses Ding entfernen , weil wir dieses Ding nicht mehr brauchen. Jetzt können wir von hier aus unseren absteigenden, absteigenden Teil hinzufügen. Jetzt können wir sehen, dass wir nichts in unserer Liste haben. Wie können wir unser Design hier hinzufügen? Also in erster Linie, was ich haben möchte, möchte ich ein erstes erstellen. Wir müssen unsere Daten durchgehen, die wir erhalten. Also holen wir unsere Daten von hier ab. Ich kann sagen, dass Delta-Punkt-Map Sie durch unsere Daten abbilden müssen und ich kann d sagen. Und Sie können jeden Namen hinzufügen, was immer Sie wollen. Und dann füge ich hier die Indexposition hinzu. Und von hier aus können wir es schaffen. Jetzt. Ich kann dieses Div sehen, und dann kann ich diesen Tiff auch sehen. Also sind beide hier gleich und jetzt füge ich hier einen Klassennamen hinzu. Und Klassenname Ich kann Karte sagen. Und nur für einen Beispielzweck werde ich hinzufügen, ich füge Titel hinzu. Ich kann Titel sagen. Und mal sehen, was können wir hier sehen? So können wir das hier eng sehen und wir können diesen Wagen auch sehen. Aber das sieht wirklich schlecht aus und wir müssen es reparieren, damit wir hier Optionen hinzufügen und entwerfen können. Es gibt also zwei Möglichkeiten, dies zu tun. Entweder können wir hier einfach einen Klassennamen erstellen, und dann können wir ihn in dieser CSS-Datei aufrufen oder eine andere gibt es eine Eigenschaft in React, die als Stil bezeichnet wird. Und dann kann ich einfach eine doppelte geschweifte Klammer hinzufügen. Und wenn ich will, kann ich Marge hinzufügen. Und dann wird dieser Rand zehn Pixel betragen. Jetzt können wir auch diesen Rand sehen, zehn Pixel, und dann können wir auch hier Polsterung hinzufügen. Sie können hier fast alle CSS-Eigenschaften machen. Wir können zehn Pixel sagen. Hier wird ein Polsterziel hinzugefügt. Sie können also jedes CSS-Design innerhalb dieser Zeile hinzufügen. Aber wenn Sie nur eine einfache Sache verwenden, scharfes Design, dann können Sie es tun. Aber wenn Sie viele Dinge verwenden, können Sie dieses hier einfach trennen. Ich kann also einfach sagen, dass Kartendesign nicht ist, das ist keine separate Klasse , die ich erstellen werde. Und ich füge es hier hinzu. Wenn ich mir den Browser ansehe, können Sie sehen, dass wir jetzt kein Design haben. Also kann ich sagen, Rand zehn Pixel, und dann wird das Auffüllen fünf Pixel betragen. Also haben wir diesen Titel, wir haben diese Bettwäsche und wir haben diese Marge. Jetzt können wir unseren Titel durch diese Daten durch diesen Titel und diesen Text ersetzen . Wie kann ich das machen? Um dies zu tun, können wir anstelle dieses Titels einfach diesen Titel sagen und daran denken, dass Sie denselben Namen schreiben müssen. Dasselbe ist, was auch immer es in APA ist. Also wird es hier Titel sein, Rico. Okay, also ist der Titel definierter , weil unsere Daten in diesem enthalten sind, also müssen wir dy dt oder title schreiben. Jetzt können wir unseren Titel von unserer API sehen. Wie cool ist es. Eine Sache, die ich hier anpassen möchte anstatt dies ist, dass ich eins bin. Ich mache es zu einer Sechs , damit es kleiner und nett aussieht. Cool, es sieht echt toll aus. Und noch eine Sache, die wir hier tun können, können wir tun, was können wir hier tun? Wir können hier ein p-Tag für den Körper hinzufügen, ich meine, für den Haupttext. Und es gibt einen, den ich sagen kann, welches ist die Eigenschaft, wie lautet der Eigenschaftsname? Der Eigenname ist Körper. Ich kann diese Leiche sagen, DIE Tochter, Leiche. Und los geht's. Jetzt haben wir unseren Titel bekommen, wir haben unsere Beschreibung von unserer API erhalten. Dies bedeutet, dass Sie diese ID auch abrufen können, wenn Sie möchten . Das ist kein Problem. Sie können alles von der API bekommen, unabhängig von der Nahrung, die sie hinzugefügt haben, eine D-Punkt-ID. Jetzt können wir unsere ID hier sehen. Siehe Heidi, 123456789. Cool, aber wir müssen diese ID nicht hier haben. Dies ist die einzige Möglichkeit, Ihr Kartendesign zu erstellen, um API-Daten in Ihrem Projekt hinzuzufügen. Jetzt gibt es eine andere Möglichkeit , es zu tun und was ist das? Und so machen wir jetzt alles in dieser einen Akte, was für unsere Projekte nicht gut ist. Zum Beispiel arbeiten Sie in einem großen Projekt, dann wird es für Sie schwierig sein , mit all diesen Dingen umzugehen. Dafür trennen wir diesen Entwurfsteil in einer anderen Komponentendatei und fügen ihn dann hier in unserer Komponente hinzu und wir werden es hier zeigen. Dies ist der einfachste Weg , den die meisten Unternehmen tun. Die meisten Leute tun es. Und jetzt höre ich dieses Video genau hier auf. Und ich zeige es dir ab der nächsten Vorlesung. 6. API-Daten und Kartendesign anzeigen: Willkommen wieder einmal zurück. In diesem Teil werden wir unsere separate Komponente für unsere Daten erstellen und dann unsere Informationen zeigen. Wie können Sie es derzeit machen, wir haben alle unsere Informationen hier und es sieht gut aus, völlig in Ordnung. Aber ich möchte dir was anderes zeigen. Ich werde eine neue Datei erstellen, eine neue Komponente namens data, oder wir können sagen, dass Daten angezeigt werden, was immer Sie wollen, dann js. Und dann erstelle ich diese Komponente. Zeigen Sie also Daten an, und diese Show-Daten werden alle unsere Informationen enthalten. Also werde ich sagen React dot, Punktfragment in diesem Objektpunktfragment. Was wir hier also im Grunde tun müssen, müssen wir diesen Teil in unser Design aufnehmen. Also musst du das hier hinzufügen. Also zeige Daten, ich werde sagen, okay, es tut mir leid, wir brauchen diese nicht, weil wir diese Def bereits in diesem haben. Also füge ich das hinzu. Cool. Jetzt haben wir diese Karte, Kartendesign, Titel und Körper. Und hier haben wir nichts. Was ist mit Design? Wir hatten früher dafür, und offensichtlich wird es uns einen Fehler für diesen geben . Nun, in dieser Komponente ist keine Frage, dass wir unsere Requisiten weitergeben müssen, wie wir auf diese Daten hier in dieser Komponente zugreifen werden , wie wir auf diese Daten hier in dieser Komponente . Fügen Sie also eine doppelte geschweifte Klammer hinzu und fügen Sie Titel hinzu. Und dann füge Körper hinzu. Stellt sicher, dass der gleiche Titel auf dem gleichen Namen steht, den Sie verwenden, wie wir in unserer API haben. Oder Sie können die Schriftart auch ändern, dann müssen Sie sie erstellen. Mit anderen Worten, jetzt müssen wir keinen D-Punkt-Titel haben, sondern wir müssen nur Titel sagen und dann müssen wir nur darüber sagen, okay? Es ändert sich hier nichts mehr. In diesem Teil wird es funktionieren. Und jetzt können wir unsere anrufen, wir können unsere Show-Data-Komponente importieren. Wir können also sagen Import show data. Diese Daten enthalten jetzt alle unsere Daten. Was können wir also tun? Grundsätzlich können wir diese Daten einfach aufrufen. Und das können wir hier sehen. Mal sehen, was können wir sehen? Jetzt haben wir also eine 100-Karte, aber wir haben hier keine Daten. stimmt, wir haben 100 Kadetten. Wir haben eine 100-Karte, weil wir gerade diese Komponente rendern, sich um diese Komponente handelt. Und, aber wir erhalten keine Daten weil wir unsere Daten hier nicht hinzugefügt haben. Wie können wir diese Daten hinzufügen? Also müssen wir zuerst einen Schlüssel hinzufügen. Lassen Sie mich Ihnen zeigen, was dieser Schlüssel bedeutet. Wenn ich also mit der rechten Maustaste klicke und wenn ich meine Konsole öffne, werden Sie sehen es mir einen Fehler gibt und es besagt , dass jedes Kind in einem Mietvertrag über eindeutige Schlüsselrequisiten verfügen sollte . Wir brauchen also einen eindeutigen Schlüssel. Also welche Art von Schlüssel wir haben wollen, damit wir key d oder id sagen können. Da die ID eindeutig ist, können Sie dies also sehen, können wir diesen Schlüssel verwenden. Und wenn ich diesen dann aktualisiere, sollten wir diesen Fehler nicht mehr bekommen. Siehst du, der Euro ist weg. Wir können das sehen. Es liegt noch ein Fehler vor. Nein, du bist okay. Cool. Aber wir haben immer noch keine Daten, weil wir sie nicht hinzugefügt haben. Was sind unsere Sonden sind Prophezeiungen dieser Titel. Wir können das auf diese Weise machen. Wir können das Ding machen. Dies können wir sagen, dass der Titel , der unser Gewinn ist, gleich unserem Indeed oder Titel ist. Also d-Punkt-Titel. Und jetzt wird es unseren Titel zeigen. Eine andere Sache ist hier bemerkbar, dass dieser Titel Ihren Komponententitel angibt. Wenn Sie also auf diese Weise verwenden, zum Beispiel, wenn Sie dieses Thema auf diese Weise machen, ddo-Titel, müssen Sie nicht genau denselben API-Titelnamen schreiben. Sie können jeden Namen hinzufügen, den Sie sehen können. Wir können einen neuen Titel sagen und sicherstellen, dass Sie diesen hier verwenden. Und dann auch hier, dieser neue Titel und Ddo-Titel. Also ist es immer noch, wir werden unseren Staat bekommen, wir werden unsere Daten bekommen. Warum liegt es daran , dass wir hier sagen , dass Urkunde oder Titel und dieser Titel unser API-Datentitel ist , der hier übereinstimmt. Okay, also wenn du es auf diese Weise gemacht hast, dann ist es nicht notwendig, diesen hinzuzufügen. Aber es gibt einen anderen Weg. Angenommen, Sie haben 100 Artikel, 100 Artikel, die Sie von einer APA erhalten. Also machst du das Ding? Du wirst das auf diese Weise 100 Dinge schreiben. Offensichtlich nicht dafür haben wir eine andere Alternative und die Lösung. Was wir also tun werden, wir werden diese Spaltenliste übergeben und dann werden wir einen Spread-Operator verwenden und dann werden wir diesen D übergeben. Also was bedeutet das? Wie Sie bereits wissen, enthielt dieses D alle unsere API-Daten. Und was sagen wir, dass wir gesagt haben, ist befreit oder D, Es bedeutet, dass wir alles in dieser Komponente hinzufügen werden, ist eine Art angrenzende Sache. Nun, wenn ich React öffne, was können wir dann sehen? Wir können unser Körpermodell sehen, wir können unseren Titel sehen. Und wenn man sich hier anschaut, ist dieser Text im ersten Punkt enthalten. Im ersten Punkt dieses Körpers, dieser Körper, und dies ist der zweite Körper. Der zweite Text liegt daran , dass ich Änderungen im Titel getroffen habe. Okay. Wenn ich es also in Titel ändere, dann sollten wir unseren sehen können, wir sollten in der Lage sein, unseren Text, unseren Titel zu sehen, Sie können jetzt sehen, dass wir unseren Titel haben, wir haben unsere Beschreibung. Auf diese Weise kannst du diesen benutzen. Jetzt können wir sehen, dass ich gerade einen Monat zuvor hinzugefügt habe, ich habe diesen Titel geschrieben, dann gleich als der Kollegenbreite als der D-Punkt-Titelname. Auf diese Weise musste ich alles machen, damit ich es in dieser einen Zeile machen kann , anstatt zwei- oder viermal zu schreiben, vielleicht 100 Mal, basierend auf Ihrem API-Design. Cool, es sieht gut aus. Jetzt möchte ich noch ein paar andere Funktionen haben. Zum Beispiel möchte ich den Titel schnell anzeigen, und sobald ich auf das klicke, das ich zeigen möchte, möchte ich den Zusammenbruch von Sean zeigen. Okay, so eine Art Zusammenbruch hat gezeigt, dass wir im Grunde in einer anderen Art von Anwendung sehen. Zum Beispiel kann ich sagen, wie man einen Zusammenbruch zeigt. Also in Google haben sie diese Collapse-Option, okay, also wenn ich darauf klicke, öffnet es das Fenster und er wird die Details anzeigen. Wenn ich darauf klicke, werde ich mich verstecken, öffnet sich, wird sich verstecken , wird sich öffnen, wird die gleichen Bilder erhöhen. Ich zeige Ihnen, wie Sie es in diesem Projekt umsetzen. Okay, also machen wir es, wir beginnen ab der nächsten Vorlesung daran zu arbeiten. Und ich werde dieses Video gleich hier beenden und wir sehen uns in der nächsten Vorlesung. 7. Card Features: Willkommen wieder einmal zurück. In diesem Teil werden wir versuchen, unseren Zusammenbruch von Sharon hinzuzufügen. Okay, also die Sache ist, dass ich diesen Titel nur in unserer Karte zeigen möchte. Sobald es fertig ist, klicken wir auf das Icon oder was auch immer auf dieser Karte. Dann zeigen wir ihnen diesen oder diesen Detailtext , damit Sie lernen können wie Sie den Zusammenbruch von Sean in Reaktoren verwenden können. Um dies zu tun, können Sie sehen, dass dieser Teil derzeit unseren Designbereich enthalten wird. Hier. Ich füge einen Benutzerstatus-Hook hinzu. Ich sage, benutze einen Staat. Hier. Ich muss den Staat definieren. Ich kann also sagen, dass Const stattdessen ein boolescher Wert sein wird . Ich kann, ich kann Const sagen. Die Show wird so eingestellt, dass Sie einen beliebigen Namen angeben können, was Sie wollen. Und es wird als tot benutzt. Und anfangs wird es falsch sein. Okay? Und anfangs wird es falsch sein. Jetzt ist die Sache , dass Sie, wenn der Benutzer auf diese Karte klickt, sie auf viele Arten schaffen können. Zum Beispiel klicken wir einfach auf den Einkaufswagen oder wir können das Icon hier hinzufügen. Oder du kannst noch ein paar andere Dinge tun. Also mache ich es auf diese Weise. Wenn es also falsch ist, wollen wir diese Körpertexte nicht zeigen. Wenn es stimmt, dann wollen wir nur diese Körpertexte zeigen. Wie können wir das machen? Also können wir es auf diese Weise machen. Wir können einfach sagen, okay, also können wir einfach sagen, wenn diese Show stimmt, wenn diese Show wahr ist , dann werden nur wir unsere Bodytech zeigen. Nur wir werden unsere Körperinformationen zeigen. Okay, ich formatiere das hier. So können wir diese Endoperation bestehen auch unseren ternären Operator passieren. nicht Diese Detailinformationen haben wir hier da die Aussage falsch ist und wir es sind. Also sagten wir, wenn es stimmt, können nur wir das zeigen. Lassen Sie mich es wahr oder falsch in wahr ändern. Dann sollten wir das sehen können. Dies sind die Körpertexte. Was meine ich mit einem ternären Operatortunnel? Dein Portrait ist in etwa so. Wenn es stimmt , wollen wir diese Renditen zeigen. Wir wollen nichts zeigen , was eine Null sein wird, okay? Es wird angezeigt, und wenn ich es füge falsch hinzu. Und dann können wir das hier wieder sehen. Dies wird als ternärer Operator bezeichnet. Im Grunde können Sie also einen ternären Operator verwenden , wenn Sie zwei Bedingung haben. Wenn es zum Beispiel stimmt, möchten Sie etwas zeigen oder etwas zeigen. In diesem Fall können Sie einen ternären Operator verwenden. Andernfalls können Sie auch den End-Operator verwenden , der auf die gleiche Weise sein wird. Wenn ich zum Beispiel sagen möchte, ist es falsch, wenn ich diesen Steadman hier zeigen wollte. Jetzt können wir sehen, dass es falsch ist falsch ist falsch ist, weil die erste Bedingung nicht wahr ist, weil diese jetzt falsch ist, und wenn ich wahr sage, dann wird das Body-Tag, den Inhalt angezeigt werden, Hauptinhalt. Okay, so funktioniert dieser ternäre Operator. Also werde ich für diesen nur benutzen, okay? Ich werde diesen UND-Operator nur benutzen, aber auf jeden Fall kannst du es auf diese Weise machen. Aber wenn Sie nur eine Bedingung zeigen möchten, ist es besser, dieses Ende von Teil zwei zu verwenden. Dann müssen Sie diesen Doppelpunkt nicht hinzufügen oder null wird hier funktionieren, und dann füge ich dies zu false hinzu. Okay, jetzt war es unser Plan , das Icon hier hinzuzufügen. Okay, welches Icon wollten wir hinzufügen. Also geh zurück und dann kann ich hier Sterne sagen, Pfeilsymbol. Sie können sehen, dass es so viele Icons gibt , aus denen wir hier auswählen können. Pfeil, okay, wir können wählen, wir können dieses Symbol wählen, denke ich , oder ich denke, wir können dieses auswählen. Ich benutze es ist dieses und dieses. Also wähle ich dieses aus. Und doch könnte es tun, könnte ein anderes Symbol anstelle von flacher Farbe haben . Ich tröste sie hatten dieses farbige Symbol. Wir könnten etwas bekommen, okay, nun, ich würde dieses von hier aus wählen , weil es das Farbsymbol ist, also müssen wir keine Farbe machen, sie könnten die untere haben, auch LED ist rechts. Wo ist der untere? Ich glaube, sie haben nicht den unteren. Sie haben das nächste, sie haben das vorherige. Sie haben sie haben sie expandieren lassen, das haben sie. Das hier. Also diese beiden füge ich hinzu. Vorher muss ich dieses hinzufügen. Und ich muss das hier importieren. Und dann muss ich in diesen diese Option hinzufügen , die zum Zusammenbruch des FC führt. Also fällt FC zusammen und Sie können sehen, dass FC und FC bereits da sind. Sie müssen also nur dieses hinzufügen. Und wenn Sie ein anderes, anderes Symbol verwenden, wenn es andere Namen hat, müssen Sie es nur dort drinnen wählen. Und dieser wird exponentiell sein. Und dieser ist hier. Um zu reagieren, kann ich die ersten beiden Buchstaben weiterleiten , die Sie schreiben müssen, zum Beispiel was ich damit meine. Also wenn ich von hier aus benutze, kann ich, wenn du das benutzt, dann kannst du diesen BS sehen. Es sind also immer die ersten beiden Buchstaben eines Symbols, die Sie verwenden werden. Eine echte Ikone für wertlos , weil es immer funktionieren wird. Jetzt wollte ich es also auf diese Weise zeigen. Unser Titel und unser Icon sollten in der rechten Ecke sein. Okay, also wie können wir das hier erreichen , ich werde ein div erstellen. Und in diesem Div möchte ich diesen Titel setzen. Und ich erstelle einen Klassennamen. Hier. Ich kann sagen, ich kann sagen Kollapse Icon, Collapse Icon. Und hier werden wir versuchen , unsere Ikone zu setzen. Also füge ich hier ein Tag hinzu. Und ich muss das nur hinzufügen, dieses schnell, weil FC seine Verwendung erweitert. Wir müssen nur diesen Namen nennen und er hat eine Immobilie. Jetzt sollten wir das Icon sehen können . Sie können sehen, dass dieses Symbol hier ist, aber es sollte die rechte Seitenecke sein. Keine Sorge, wir schaffen es. Und dazu verwenden wir auf diese Weise das React-Icon in unserem f und es hat eine Eigenschaft namens size. Wir werden auch diese Omega1-Zellengröße 30 verwenden. Es wird größer sein. Ich denke, wir müssen nicht haben, drittens müssen wir nur 20 haben. Und dann sind diese Spalten weg. Dieses Spalten-Symbol wird hier sein. Und ich kann sagen, das Spaltensymbol, ich kann sagen, Inhalt rechtfertigen Abstand zwischen und Anzeige wird in der rechten Seitenecke fließen. Ziel. Jetzt haben wir das erreicht. Wir schaffen es, wir können ein paar andere Dinge tun. Zum Beispiel, nur um ein Inhalt zu sein und kann ausrichten sagen. Vielleicht richten Sie Elemente in der Mitte aus. Oder ich denke, das müssen wir nicht, es ist schon da. Die Karte ist nicht so groß. Wir haben diesen nicht, weil wir hier bereits Rechtfertigkeitsinhalte verwenden. So cool. Was können wir tun? Wir können hier einen Cursorzeiger hinzufügen. Wir können den Cursorzeiger hinzufügen. Dann haben wir das, aber derzeit wird es nicht funktionieren, also müssen wir es zusammenklappbar machen , wie wir es machen. Jetzt komm wieder her. Und dann können wir hier a definieren, wir können eine Funktion erstellen. Wir können sagen const, const, show item. Du kannst jeden Namen nennen, was immer du willst. Dann können wir hier sagen dass die Setshow nicht gleich der Show sein wird. Okay, es gibt also zwei Möglichkeiten, es zu tun. Zum Beispiel sagen wir hier, dass was auch immer es ist, tun Sie es einfach entgegengesetzt. Aber wir müssen es tun, wir können zwei weitere Komponenten erstellen denn sobald es geöffnet ist, wir das Icon-Farbsymbol ändern, und dann, sobald es Clubs ist, und dann werden wir es in tun auf diese Weise. Also lass mich dir zeigen , was ich damit meine. So schnell. Kopieren Sie dieses und fügen Sie dann hier einen onclick hinzu. Onclick. Dann möchte ich das hier pausieren. Kann diese Funktion einfach anhalten, die wir gerade erstellt haben. Und jetzt können wir einen Zusammenbruch sehen. Und wenn ich auf diese Nachrichten klicke, die sich verstecken, ist das geöffnet. Und wenn ich noch einmal klicke, wird es sich verstecken. Wenn es offen ist und hoch ist, öffnen Sie sich, die Augen öffnen sich und verstecken sich dann. Okay, also funktioniert unsere Anrufaufnahme. Aber was ich jetzt will, möchte ich haben, wenn es geöffnet ist, ich möchte das Icon ändern. Und wenn sie dann darauf klicken, können Sie es nur ausblenden, nicht dasselbe Symbol. Okay? Was kann ich dazu sagen anstatt auf diese Weise, ich kann einfach sagen wenn Sie entweder darauf klicken, wo Sie es wahr machen möchten. Okay? Und jetzt stimmt es, aber diese Aufrufabsorption funktioniert hier nicht. Und jetzt können wir es auch mit dieser Ikone dynamisch machen. Wenn es stimmt, wenn es stimmt, wenn es okay ist, können wir es auch auf andere Weise schaffen. Zum Beispiel werden nicht angezeigt und dann können wir einfach die Farbe des Symbols ändern, dann wird es auch funktionieren. Anstatt also zwei Zeilen zu schreiben, lass es mich versuchen, ob es so funktionieren wird. Wir können also genau diesem gegenüber, was auch immer wir haben, wir wollen es tun. Und dann können wir hier das Icon ändern. Wir können sagen, wenn die Show wahr ist, wenn Shore wahr ist, dann möchten wir diese Option zum Zusammenbruch zeigen. Das bedeutet, dass wir in diesem einen haben wollen . Okay, dann wird die Größe 20 sein. Wenn es stimmt, bedeutet das, dass unser, unser Staat offen ist. Es bedeutet, dass die Determinante wahr ist. Dann möchten wir dieses Kollapse-Symbol anzeigen. Wenn es nicht stimmt , wollen wir das hier zeigen. Wenn es stimmt, wollen wir das zeigen. Und wenn es nicht stimmt, dann wollen wir es gut zeigen, also habe ich es an der falschen Stelle hinzugefügt. Es sollte außerhalb dieses sein. Und los geht's. Okay, also was sagen wir , wenn unser Nachlass wahr ist, möchten wir dieses Kollapse-Symbol zeigen. Ansonsten möchten wir dieses Erweiterungssymbol anzeigen. Mal sehen, unser Nachlass ist jetzt falsch. Also unser stetiges falsch, also die Zone, die wir zeigen, stattdessen dieses Erweiterungssymbol, wenn ich klicke, dann ist unser Nachlass wahr, und dann quadrieren wir dieses Symbol. Dann wenn ich darauf klicke und dann geht es runter. Wenn ich darauf klicke, wird es runter kommen. Auf diese Weise. Es ist auch für dich zur Arbeit gegangen. Überhaupt kein Problem. Wir können sehen, wir können es so machen, und das können wir auch tun. Eine andere Sache ist, dass wenn Sie zum Beispiel diese auf der gesamten Karte anklickbar machen möchten , wenn ich zum Beispiel darauf klicke, es nicht funktioniert. Wenn Sie also auf diese Karte klicken, möchten Sie diese Option anstelle dieses Symbols reduzieren , was können wir dann tun? Wir müssen nicht viel mehr tun. Schneiden Sie einfach diesen Klick auf und fügen Sie diesen hinzuKlicken Sie auf den Hauptwagen , der unser Verwerfen ist. Und wenn ich dann darauf klicke, wird es genauso funktionieren. Sogar das Icon wird sich ändern. So können Sie diese Farbabsorption hinzufügen. Und noch eine Sache, die wir hier tun können, können wir ein wenig Anpassung, Design und das Markdown-System hinzufügen . Ich zeige es dir also in der nächsten Vorlesung. Tschüss. 8. Highlight Collapse Card: Willkommen wieder einmal zurück. In diesem Teil zeige ich Ihnen, wie wir unsere offene Karte hervorheben können , okay, und wie können wir unseren Nachnamen dynamisch ändern? Okay, also eine Sache, die sich hier bemerkbar macht, also ist das der Klassenname, der uns dieses Design gibt. Wenn ich also hier schaue, Kartendesign, hat es eine Randpolster. Okay, also zuerst, lass mich hier eine Eigenschaft hinzufügen. Also Kartendesign Punkt schweben. Wenn wir also schweben, möchte ich das hier zeigen. Also möchte ich dieses Ding hervorheben. Ich kann Border sagen. Der linke Rand wird vielleicht drei Pixel betragen. Nur. Sie können Tomatenfarbe sitzen. Sie können jede Farbe wählen, was immer Sie wollen. Sie können also sehen, wann ich diesen hervorhebe, wenn ich den Mauszeiger über mich bewege, wird sich dieser unterscheiden. Aber wenn es geöffnet ist, ist es immer noch fertig. Ist immer noch fertig. Es sollte diese Farbe haben, es sollte diese markierte Farbe haben. Wie können wir das machen? Wir werden es machen. Aber lassen Sie mich für sie die Grenzgröße erhöhen. Also gut, also ist die Randgröße und Größe jetzt fünf Pixel und es sieht wirklich gut aus. Aber ich möchte dies erreichen, wenn es, wenn unser Staat geöffnet ist, wenn diese Karte geöffnet ist, diese auf diese Weise markiert werden sollte. Ok, wie kann man das machen? Also können wir dieses Ding auf diese Weise wollen. Also müssen wir diesen dynamisch machen. Wie, was meine ich mit dynamisch? Wir können denselben ternären Operator hinzufügen. So der gleiche Zustand in unserer Klasse. Wenn unser JT wahr ist, wollen wir es markieren, markieren Sie diesen. Ansonsten wollen wir das zeigen. Okay, wie kann ich das erreichen? Ich nenne das hier. Und ich füge diese geschweifte Klammer hinzu. In dieser geschweiften Klammer kann ich sagen Show, Show. Wenn es stimmt, dann möchte ich diesen Klassennamen zeigen , dass ich einen anderen Klassennamen anzeigen möchte. Also denken Sie jetzt logisch hier. Derzeit ist unser Steady State falsch. Also lass mich das hier zeigen. Okay, also haben wir das hier. Wenn ich es stattdessen wäre, ist wahr, dann haben wir hier einige Änderungen, weil es diese Zustandsbedingung fällt. Was sagen wir es hier? Grundsätzlich, wenn unser Kombi wahr ist, werden wir nur dieses Auto- und Autodesign zurückgeben. Wenn es nicht stimmt, bedeutet das, was hier falsch ist, wir geben nichts zurück. Der andere Grund, warum unser Auto weg ist. Also was kann ich hier sagen? Ich kann die Karte einfach hier hinzufügen. Es bedeutet, wenn bereits gesagt falsch ist, dann sollte instinktiv verwerfen sogar feststellen, was die Karte ist. Jetzt können wir die Karte hier sehen, okay? Aber wir bekommen das Design nicht, denn dafür müssen wir ein anderes Design haben, das dasselbe verwendet. Also kann ich sagen, wenn es stimmt, bedeutet das, dass diese Bedingung erfüllt sein wird. Wenn es falsch ist, wird diese Bedingung erfüllt sein. Das haben wir also immer noch nicht hier. Okay? Jetzt kann ich das schnell markieren. Löse das hier. Wenn also unser Nachlass wahr ist, wird diese Klasse aktiv sein. Für diese Klasse ist diese Klasse also eine Kartendesign-Klasse. Also kopiere ich das gleiche Design, weil wir dieses hier markieren müssen . Cool. Stattdessen ist es offen. Es gibt einen Grund, warum dieser markiert ist. Wenn ich es aktualisiere, ist es weg, weil es offensichtlich nicht stimmt. Lass mich das hier anklicken. Unsere Geschlechtskraft stimmt, und dann ist diese hier. Und jetzt muss ich noch einen Klassennamen hinzufügen. Wir können sagen, Kartendesign falsch. Wenn unser derzeitiger Zustand falsch ist, können wir jetzt das gleiche Design zeigen, das wir hier haben. Wir können also einfach Kartengebühren und falsch sagen. Wir brauchen Margin Polsterung. Wir brauchen Marge und Polsterung. Also füge ich das hier hinzu. Cool. Nun, wenn ich stattdessen falsch wäre, dann haben wir das gleiche Design. Ich werde diesen zusammenbrechen. Wenn R tot ist stimmt, dann haben wir dieses Ding. Wenn ich es stattdessen wäre, stimmt. Dieser ist Markdown, stimmt, das ist erledigt. Nun, was ich stattdessen e Power haben möchte, ist falsch. Dann wollen wir diesen Hover-Effekt zeigen , den wir zuvor gezeigt haben. Okay? Wie kann ich das machen? Um dies zu tun? Also mit der Klasse wird dieser Schwanz aufrufen, ist in dieser Klasse falsch, denn wenn ich stattdessen wahr wäre, wird diese Klasse es stattdessen falsch nennen , dann diese. Also Knorpel und falsch. Hier. Wir müssen diesen hinzufügen. Die Karte ist beim Schweben in falscher Farbe. Und dann sage ich das. Jetzt haben wir diesen Hover-Effekt. Wenn ich darauf klicke, geht er hier hin. Und jetzt müssen wir dieses Kartendesign nicht schweben lassen. Denn wenn ich sage, dass der Mensch wahr ist, dann werden wir den Mauszeiger darüber bewegen. Wenn das, was wahr ist, falsch ist, dann wollen wir nur diesen Hover-Effekt namens Everything is fine ausführen . Jetzt können wir unsere Karte markieren. Und so wird es so aussehen. Perfekt. Perfekt, perfekt. So haben wir erfolgreich Salz ist Anfälle absagen. Und im nächsten Teil, und ich werde Ihnen zeigen, wie wir unsere Paginierung hinzufügen können, weil wir nicht all diese 100 in dieser einzigen Basis zeigen wollen . Okay, also möchte ich hier eine Paginierung haben. Und wenn der Benutzer dann auf die Paginierung klickt, zeigen wir vielleicht 510 oder welche Menge wir wollen. Wir sehen uns also in der nächsten Vorlesung. Tschüss. 9. Scheibendaten für Pagination: Willkommen wieder einmal zurück. In diesem Teil werden wir anfangen, an unserer Paginierung zu arbeiten. Lassen Sie mich Ihnen also zeigen, wie wir unsere Paginierung erreichen können. Hier drüben ist dies das Tempo, in dem wir unsere Daten haben , die wir von unserer API erhalten. Diese Informationen enthalten bitte einige, lassen Sie mich zuerst unsere Daten aufteilen, als wir unsere Daten mit unseren Paginierungsfunktionalitäten verbinden können . Dafür füge ich hier einen Befehl hinzu. Man kann Paginierung sagen. Nur um zu verstehen , dass dies Ted ist und diesem ganzen Code geht es um Paginierung. Also was ich sagen kann, dass ich hier einen Staat hinzufügen werde. Ich sage einen Staat. Und davor können wir const sagen. Const wird die Basis geparkt. Teil B ist also wie viele Dichter , die du zeigen willst? Derzeit haben wir also, derzeit haben wir 100 Base in nur einem Teil. Wir wollen hier keine 100 Truppen zeigen . Wir wollen vielleicht fünf oder sieben oder acht oder zehn zeigen , was immer Sie wollen. Sie können es jederzeit ändern. Also können wir Barbasis sagen. Base wird es vorerst geben , es gibt die acht Posts, die wir Teiltempo zeigen wollen. Und dann müssen wir einen Staat definieren. Oder du kannst sagen const, const wird unser aktuelles Tempo sein. Also haben wir, lasst uns schnelles aktuelles Tempo schreiben. Und wir können sagen, setze aktuelles Ziel. Und jetzt können wir sagen, dass sie Schulden benutzt. Die aktuelle Phase wird also eins sein. Das bedeutet, dass wir in unseren, nachdem wir alle unsere Daten geteilt haben, vielleicht 100 oder 50 oder 20 oder zehn Pays erhalten , basierend auf den Daten, die wir haben, und basierend auf dem Datenteiltempo, das wir zeigen. Wann immer wir unsere Seite aktualisieren, werden wir unsere Daten von der Basis aus starten, von der Basis aus. Okay, das bedeutet es. Also werde ich Ihnen das weitere Beispiel zeigen können , sobald unser Geschäft und Becky's fertig sind. Also verstehen Sie derzeit nur , dass wir unsere Daten von der PS1 anzeigen. Okay, also aktuelles Tempo, gib das aktuelle Tempo ein. Und jetzt müssen wir hier eine Callback-Funktion übergeben. Ich kann Const sagen, gehandhabt Pest. Wir können das sagen. Plague wird das sein. Und hier können wir Sonden passieren. Man kann „ausgewählt“ sagen. Es wird eine ausgewählte Basis sein. Sie können hier einen beliebigen Klassennamen hinzufügen. Es veranlasst nur, dass wir hier vorbeikommen. Und dann unsere Pfeilfunktion. Und hier, was ist mit Daten? Der Benutzer klickt auf den Datenbenutzer, der hier klicken wird. Okay, also haben wir hier einen Fehler gemacht. Es sollte sich in dieser geschweiften Klammer und dann eine weitere, eine weitere normale, normale Klammer hinzufügen müssen . Und was heißt dann? Wenn ein Benutzer also auf Clique einfügen klickt, möchten wir das Element auswählen, auf das er geklickt hat. Dann wollen wir es, wir wollen es in unserem vorgegebenen aktuellen Tempo festlegen. Wir sind also festgelegt, dass das aktuelle Tempo unsere Widerlegungen sein wird. Cool. Vielleicht haben wir fünf Auszahlungen, zehn Stufen basierend auf der Anzahl der Daten und der Anzahl des Artikels, den wir zeigen, Zweck. Wir sagen, dass Sie auf die Einfügen-Nummer klicken, auf die Einfügen-Nummer klicken und dann diese hier übergeben. Und was auch immer wir bekommen werden, wenn wir auf dieses klicken, wir werden es Ihnen zeigen, dass wir es in unserem aktuellen Tempo festlegen werden. Jetzt können wir schaffen. Also lass mich es dir zeigen. Und hier werden Sie auch diese Art von Anleitung sehen können. Sie können aktuelle Artikel sehen. Du bist gerade Base Count geblieben. Der Artikelversatz verwendet den Status als genug besagtes Element plus Offset. Und dann Handhabung, im Grunde genommen Artikelzweck behandelt. So kannst du es dir auch anschauen und dann kannst du einfach twittern. Aber ich mache es gerne auf diese Weise. Dann kann ich einfach einen anderen erstellen, einen anderen Prozess, von dem Sie sagen können, dass der Offset unserem aktuellen Tempo entspricht. Dann dieser Zweck. Okay, was auch immer wir in unserem aktuellen Tempo haben, vielleicht sind wir auf Seite Nummer fünf und dann wollen wir es mit unserem Zweck multiplizieren. Also Fall Nummer drei, dann wollen wir dies damit multiplizieren. Es wird 24 sein. Dann können wir diese einfach teilen. Und jetzt können wir unsere aktuellen Zahlungsdaten abrufen. Okay, also sind unsere Daten derzeit in diesen Daten verwendet Zustände. Jetzt wollen wir diese Daten aufteilen, damit wir const aktuelle Daten sagen können . Wir werden unsere Daten ohne Dias sein und der Schlamm kommt von JavaScript. Was also im Grunde genommen für uns tut, schneidet unsere Daten im Grunde genommen aus einer großen Menge von Daten, einem großen Array. Es wird nur basierend auf unserem Zustand einschneiden. Im Moment wird unsere Basis ein Daten aufteilen. Und hier müssen wir, wir müssen unseren Offset hinzufügen, was das ist. Und dann, und dann müssen wir unseren Offset plus br plus br plus Offset hinzufügen , dann Offset plus Zweck. Cool. Also was wir hier geschrieben haben, also habe ich gesagt, dass nur eine variable aktuelle Paardaten und ich werde diese schneiden. Also Daten, die unser Datensatz sein werden , der alle unsere API-Daten enthält. Wir werden es mit diesem schneiden. Wir werden diesen schnellen Offset bestehen, nämlich die Anzahl der Paare und das aktuelle Tempo. Und dann fügen wir unseren Offset plus Balken auf diese Weise ein, wir erhalten unsere Daten. Und jetzt bekommen wir vielleicht ein paar Double- oder Float-Daten. Aber wir wollen dieses nicht auf diese Weise haben , um unser Tempo zu zählen. Es gibt also einen Grund , warum wir müssen, dass rund um die Stunde in Ordnung ist. Wie können wir das machen? Wir können also einfach sagen, const, count wird erfüllt, nicht kartiert, er sollte erfüllt werden. So viele Punkte Verkauf haben den dorsal gemacht , dass diese Immobilie aus JavaScript und Metadatenverkauf stammt. Und wir können sagen, dass Data Dot Data Dot, das Land punktiert und viel Land geteilt durch unsere Barclays gemacht hat. Auf diese Weise erhalten wir keine schwebenden Daten. Nehmen wir an, wir haben 2525 Post in unserer API und teilen ihn durch acht, dann acht. Also 25 mal acht, es wird uns eine Punktzahl geben, denn eine 25 mal 83 in drei in acht, es wird 24 sein. Melissa, wir werden eine haben , in die wir nicht hineinkommen können. Lass mich dir zeigen, was ich damit meine. Ich kann Taschenrechner sagen. Nehmen wir an, wir haben 25 Beiträge in Ihrer API geteilt durch acht. Dann kriegen wir 3.125. Und diese Funktion wird uns helfen, diesen Punkt zu verhindern. Es wird uns drei zeigen, weil dieser Mathe-Dot-Verkauf unsere Daten immer abrundet. Jetzt haben wir das hier. Lassen Sie mich zeigen, dass es immer noch keine Änderungen gibt, keine Änderungen gibt weil wir unsere Daten nicht miteinander verbunden haben. Wenn Sie sich also hier ansehen, diese aktuellen Tempodaten enthalten, dass unser Datenteil acht Daten auszahlt weil unser Hauptteil stattdessen in acht für Teil einfügen wird , weil unser Hauptteil stattdessen in acht für Teil einfügen wird. Anstatt diese Daten direkt zuzuordnen, müssen wir diese aktuellen Einfügedaten durchlaufen , damit wir nur den Zweck des Essens, das Ziel, erhalten können. Jetzt haben wir acht Gegenstände hier. Wenn ich nicht falsch liege, 123456788 Artikel hier, okay? Und alle anderen Funktionalitäten, die einwandfrei funktionieren werden, überhaupt kein Problem. Und eine andere Sache ist das, lass mich dir das zeigen. Lassen Sie uns zufällig sagen, wir wollen nur zwei Gegenstände zeigen. Dann zeigt er zwei Gegenstände. Lassen Sie mich fünf Artikel hinzufügen. Dann werden hier fünf Artikel hinzugefügt. Okay, lass mich noch einmal acht Artikel hinzufügen. Dann werden acht Artikel hinzugefügt. Okay, also können wir unsere Daten aufteilen, aber wir haben immer noch nicht unsere Paginierung. Wie können wir andere Daten bekommen? Um dieses Problem zu lösen, müssen wir nach dieser Seite unsere Paginierung unten hinzufügen . Und dann müssen wir diese Pakete hinzufügen, nämlich React paginate. Und dann übergeht man die Überreaktion nach Bedarf. Und dann zeigen wir unsere Daten an. Ich zeige es dir also in der nächsten Vorlesung. Tschüss. 10. React Pagination hinzufügen: Willkommen wieder einmal zurück. In diesem Teil werden wir unsere Paginierung hinzufügen. Was ich also im Grunde mache, versuche ich immer, die Paginierungsdatei zu trennen und dann Requisiten zu übergeben , damit Sie Ihre Paginierung für andere Komponenten wiederverwenden können , was der beste Weg dafür ist. Ich werde hier eine neue Komponente erstellen, neue Datei hier im Ordner. Als erstes werde ich Paginierung sagen. Ich setze mich da hin. Und diese Paginierung in dieser Präsentation werde ich Paginierungspunkt js hinzufügen. Diese Paginierungspunkt-JS-Datei wird unsere gesamte Paginierung enthalten. Und jetzt werde ich sagen: Okay, das ist unsere Paginierung und wir müssen eine CSS-Datei für diesen Paginierungspunkt CSS haben. Unsere Daten und alle Informationen sind also hier. In diesem Teil. Wir müssen diese Paginierung irgendwie hier verbinden. Dafür kann ich hier ein anderes D erstellen. Ich sage „div“. Und dieses Div wird unsere Paginierung enthalten. Ich wähle den Kurs aus. Der Name wird eine Karte sein. Dieses Div wird eine Karte sein. Und du kannst Paginierung für diesen Teil sagen. Okay, und was wir dann tun müssen, müssen wir unsere Requisiten bestehen. Also lass mich es dir zeigen. Jetzt können wir dieses div sehen und das müssen wir nicht haben, okay, also lass mich das nochmal hier nennen. Diese Information wird also in der Entzündungspaste, dieser Paginierung, enthalten sein. Also können wir Paginierung sagen, ich kann einfach Marschieren, dann Pixel und dann auch verblassen. Ich denke als Pixel. Cool. Jetzt sollten wir sehen können , dass das Ding tun kann. Wir haben offensichtlich keine Daten, aber auf jeden Fall werden wir sie bald haben. Okay, also in der Paginierungsdatei, also müssen wir weitergeben, wir müssen unsere React-Paginierung hinzufügen. Und wie kann man das machen? Um dies zu tun, müssen wir unsere React-Paginierung hier aufrufen. Also füge ich hier ein Div hinzu. Und genau normalerweise, und dann können wir einfach die Dokumentation lesen und das Dokument wird angezeigt. Wir können sehen, dass es vergeht. Es übergibt zwei Parameter, zwei oder drei Parameter. Sie haben hier ein paar Möglichkeiten und dann noch ein paar andere Dinge hier. So können wir das hier einfach als Ursprung bezeichnen. Also müssen wir dieses haben und keine Sorge, wir werden hier viele Änderungen vornehmen. Und nur zum Beispiel werde ich diesen Teil von dieser Website aus sprechen . Und jetzt müssen wir, weil wir hier keine Informationen haben, diese beiden Informationen benötigen. Einer ist geordnete Paare zählen, eins sind unsere aktuellen Tempodaten. Okay? Dies sind also die beiden Entzündungen , die wir bestehen müssen. Also können wir einfach sagen: Oh, wir müssen es hier Händel sagen. Und wir haben auch, wie sind das, diese Funktion und diese. Dies sind die beiden Dinge, die wir durch den Parameter gehen müssen. Also sage ich die beste Zählung. Ich füge das hier hinzu. Count und der andere ist das, was gehandhabt wird. Bitte klicken Sie und wir müssen, ich schreibe denselben Namen. Hier auf Paste on Pais besteht die Chance, dass wir unser Handle passieren müssen, ist das Klicken, das ist dieses. Wenn Sie also verschiedene Namen haben, geben Sie es einfach ein und die Einfügezahl wird unser sein. Und diese Paare zählen unsere Anzahl, wie viele Seiten wir hier zeigen möchten. Okay, jetzt haben wir das hier. Diese Komponente enthält diese beiden Schrittzähler. Dies an Datenelement, das wir von hier aus weitergeben können. Wer ist wir alle haben schon hier. Lassen Sie mich dieses Ding also schnell importieren. Ich kann sagen, dass Import Resignation von der Paginierung auf diese Paginierung erfolgt. Und jetzt nenne ich diese Paginierung in unserer knorpeligen gezeigt, die wir für diesen geschaffen haben. Und es wird zwei Parameter übergeben. Eine davon ist diese Basisanzahl, und dann wird es diese erste Zählung sein. Und dann müssen wir hier hinzufügen. Hier müssen wir, wir müssen diese Lenker hinzufügen. Klicken Sie auf. Cool. Unsere Daten, die wir für unsere Paginierung geschrieben haben , zählen und physisch verarbeitet haben, befinden sich jetzt in dieser Paginierung. Lass es mich versuchen. Was können wir hier sehen? Wir haben einen E-Reader, bei dem Rehabilitation nicht definiert ist. Es bedeutet, dass wir unsere React-Paginierung importieren müssen , die wir nicht hatten. Um diese Desoxygenierung zu importieren, müssen wir diese Rate Paginierung hier importieren. Und dann ist das alles Paginierung wichtig, diese. Und hoffe es oder ist das Ziel gegangen. Wir haben hier etwas erwischt, aber offensichtlich sieht es jetzt richtig schlimm aus. Wenn ich jetzt auf das klicke, sollte es unsere Daten ändern, oder? Okay, es funktioniert. Wenn ich auf „Zwei einfügen“ klicke, sehen wir, dass sich unsere Daten ändern. Unsere Daten ändern sich. Es ist echt nett. Das bedeutet, dass unsere Paginierung einwandfrei funktioniert. Und dann funktioniert das auch. Dieser funktioniert auch. Dann können wir das hier und diese Paste in diesem Fünfteil zeigen . Okay, das werden wir, du spielst mit dieser Oberwelt herum. Aber vorher, lassen Sie mich Ihnen zeigen, lassen Sie mich das Design perfekt aussehen lassen. Wie können wir dieses Design hier hinzufügen? Zuallererst müssen wir ein Break-Level haben. Dann brauchen wir einen Break-Klassennamen. Wenn Sie die Unterkunft lesen. Hier drüben haben sie so viele Dinge hier. Das sind die Requisiten. Also müssen wir es hier brechen Klassennamen nennen. Also füge ich einen Klassennamen hinzu. Der Klassenname wird unsere Klasse sein. Dann können wir eine Klasse definieren. Dann können wir Break Glass sagen, Break Glass. Und dann werden wir ein nächstes Level haben, das als nächstes kommt. Wir brauchen das nicht. Wir können das einfach hier hinzufügen. Okay, das sind die beiden Dinge, die wir jetzt haben. Was können wir jetzt hier hinzufügen? Wir können hinzufügen, dass es eine andere Eigenschaft gibt und ein anderer Eigenschaftsname als Paginierung bezeichnet wird . Container-Cluster sie ist also Paginierung. Der Name der Containerklasse ist also Paginierung. Was bedeutet dieser Kontinent-Klassenname? Es gibt eine polynesische Containerklasse im Cluster auf dem Paginierungscontainer. Also können wir das einfach hier hinzufügen. Und dann können wir einfach den Namen sagen, den wir hinzufügen können, Sie können jeden Namen dieser Klasse angeben. Wir können einfach Paginierung sagen. Der Name der Containerklasse wird unsere Paginierung sein. Und jetzt lass mich dafür etwas Design hinzufügen. Das wird also unsere Paginierungsklasse sein. Und in der Paginierungsklasse müssen wir Padding hinzufügen. Wir können Padding hinzufügen, zehn Pixel, und dann müssen wir hinzufügen, unser Display wird den Inhalt reflektieren und dann rechtfertigen. Ich möchte es zentrieren lassen. Ich würde schauen, was wir erreicht haben. Bisher. Ziel. Wir können sehen, dass unsere Daten jetzt im Mittelpunkt stehen. Wir können sehen, dass Ihre Daten eins nach dem anderen sind. Es bedeutet, dass wir auf dem richtigen Weg sind. Sehr bald wird mit uns etwas passieren. Und L und Artikel, ich füge Center hinzu und dann füge ich hinzu, sagen wir, fügen Sie Farbe hinzu. Die Farbe wird blockiert. Und dann müssen wir die Marge hinzufügen. Ich füge morgen hinzu, tut mir leid, muss Marching hinzufügen, dann Pixel. Also wurde jetzt Rand zehn Pixel hinzugefügt. Okay, also denke ich, dass wir damit rumspielen müssen . Eine weitere Sache, die Sie hinzufügen müssen. So wird es aussehen. Text-Dekoration Es gibt noch ein paar andere Dinge , die wir hier hinzufügen können. Lassen Sie mich Ihnen zeigen, was wir in diesem Teil noch hinzufügen können, da diese Daten in diesem Teil enthalten sind. Also Textdekoration müssen wir hinzufügen. Wiederholung wird keine sein. Und was passiert, wenn ich hier a hinzufüge, weil ich denke, es enthielt die ganzen Daten. Cool. Sie können jetzt sehen, dass wir all diese Informationen hier bekommen, okay, wegen dieser Paginierungsklasse und standardmäßig ist der Inhalt ein Immer drücken Sie alle diese Elemente, aber wir werden es in diesem nicht tun Art und Weise. Ich werde das hier entfernen. Dann kopiere ich diese Paginierung noch einmal. Und dann mache ich es getrennt. Auf diese Weise. Wir werden unseren Artikel in der Mitte erreichen und dieses Ding erreichen. Also füge ich Textdekoration hinzu. Keine. Wir brauchen hier keine vorgefertigte Textdekoration. Und dann müssen wir hinzufügen Liste ist groß Typ. Jetzt wird der Listenstiltyp „None“ sein. Dann lasst uns sehen, was wir erreicht haben. Und wir müssen unsere Marge zehn Pixel von dort hinzufügen . Okay, jetzt haben wir das hier. Es sieht echt toll aus. Unsere Paginierung funktioniert. Also bekommen wir keine geringste Deklaration oder SMS, ich denke, ich dachte, wir haben vielleicht diese, die wir im Grunde bekommen. Okay. Also dieses Ding, das wir verwenden können, und Sie bewegen dies unterstrichen aus dem, von diesem oder von diesem, weil dies Vorherige und Nächste sind nimmt unter diesen Verbündeten, dass wir es nicht als Grund sehen können dass wir dieses auch benutzen können. Und wir haben diese Marge oder Polsterung. Okay, also sieht es jetzt gut aus, wir können immer noch ein paar Änderungen vornehmen. Wir können diesen hervorheben. Okay, also zum Beispiel, wenn ich jetzt in dieser Space-Nummer bin, wissen wir nicht, ob wir Platz haben, in dem wir sind. Okay, also müssen wir es hervorheben. Und ich denke, ich werde dieses Video gleich hier beenden und wir werden mit der nächsten Vorlesung fortfahren. 11. Reagieren Sie Pagination: Willkommen wieder einmal zurück. In diesem Teil werden wir versuchen, unsere Paginierung zu aktivieren, Ordnung, damit wir verstehen können , welcher Teil aktiv ist, okay? Und wie können wir das machen? Dazu gibt es eine Eigenschaft namens Paginierung. Und damit wir dieses einfach hinzufügen können und dann können wir diesen Teil einfach in unser Projekt aufnehmen. Der Klassenname ist also aktiver Klassenname. Und dann haben wir auch einen anderen Teil. Lassen Sie mich Ihnen zeigen, wie wir diesen hinzufügen können. Also dieser ClassName, Basisklasse LinkedList und der Cluster auf einem Band von Easy-peasy Lemon. So aktiver Klassenname, dies ist der Name der Klasse, die uns hilft , unseren aktiven Klassennamen anzuzeigen. Wir können einfach den aktiven Klassennamen hinzufügen, wir werden diesen Link sagen, dieser Link aktiv. Und dann kann ich einfach das Design dieses hinzufügen. Wie können wir das machen? Wir können einfach einen Randradius oder andere Dinge in unserem F hinzufügen , wenn es aktiv sein wird, und dann wird es kein Problem verursachen. Wie können wir das machen? Wir müssen zuerst den Grenzradius hinzufügen, und dann müssen wir hier einige andere Dinge hinzufügen. Grenze wird also ein Pixel fester Block sein. Und dann wird das Verblassen zehn Pixel betragen. Und dann werden wir die Farbe wird Stecker sein. Lass es mich sehen. So können wir dieses Design jetzt sehen, es bedeutet, dass dieser Raum aktiv ist. Dieser ist zu aktiv sparsam, aber wir können nichts sehen. Und wir müssen hinzufügen, glaube ich, brauchen keine Überschrift zehn Pixel. Ich denke, fünf Pixel reichen aus. Okay, also nochmal müssen wir das a-Tag aufrufen , da dieser Editor das Hauptdesign enthält. Ich kann also sagen, dass die Farbe weiß sein wird, nicht Weizen, sie sollte weiß sein. Okay, also können wir unsere Farbe immer noch nicht sehen. Mal sehen, was ich eine Hintergrundfarbe von Schwarz hinzugefügt habe. Bären-Link, aktiv. Physisch wird die aktive Farbe weiß sein. Es zeigte sich also, dass es funktioniert. Und also keine Ahnung. Wir müssen diesen beheben, da der erste Link aktiv ist. Okay, also müssen wir das auf diese Weise hinzufügen. Ich denke Link Active Dot Dot, aktive Eigenschaft, die wir verwenden müssen. Und dann sollten nur wir unsere Daten sehen können. Und dann verknüpfen Sie es. Lass mich den Namen ändern. Entfernen Sie dieses Glied, sind Sie aktiv, damit Sie nicht verwirrt werden , weil wir eine Eigenschaft namens Eigenkapital haben , wenn Sie in unserem CSS sind. Also müssen wir diesen hier nur benutzen, und dann können wir diesen hinzufügen. Jetzt sollte es also klappen, schätze ich. Cool. Jetzt wird es so aussehen. Wir haben diese 234 nicht. Und das ist immer noch die Hintergrundfarbe, die hier nicht angezeigt wird, also müssen wir unseren aktiven Link, Link, aktiven Paginierungslink hinzufügen Link, Link, aktiven Paginierungslink aktiven wird Wasser Hintergrundfarbe sein schwarz Und dann müssen wir diese Aktion hinzufügen , um die aktive Farbe zu verknüpfen, wird weiß sein. Und los geht's. In diesem aktiven Klassennamen müssen wir also einige andere Eigenschaften hinzufügen, da es eine vorgefertigte Eigenschaft hat, die ich gerade erfasst habe. Und dann der Klassenname auf dem Deck. Sie können den aktiven Link ClassName sehen. Es gibt eine andere Klasse namens aktiver Klassenname. Also müssen wir das so machen. Wir können einfach einen anderen Line-Link sagen. Und diese aktive Klasse befindet sich in dieser ist hier vorgebaut. Also können wir aktiv sagen. Also können wir das einfach so machen. Dann können wir diesen Parameter einfach in diesen Parameter ändern . Und dann können wir diesen auch hier hinzufügen. Und dann sollten wir es können, dann sollten wir hier einige Änderungen sehen können. Wir können die Hintergrundfarbe sehen, aber die Farbe funktioniert jedoch nicht. So können wir hier auch einfach einen Randradius hinzufügen. Ich kann sagen, Randradius 20 Pixel. Okay, also reparieren wir es in einer Minute zu groß, weil es einige andere Eigenschaften gibt , die mit diesem verbunden sind. Das ist der Grund, warum dieser nicht kommt. Was können wir hier tun? Wenn unsere Paginierung aktiv ist, sollten wir von dort aus unsere Farbe sehen. Und dann gibt es eine andere Eigenschaft, die wir hier verwenden müssen , genannt Basisklassenname Dies wird ein großes anfängliches Design sein , das wir hier schreiben müssen Wir können unseren Basisklassennamen sagen wo ist die Komponente? Es wird also ein Klassenname sein, den wir verwenden müssen. Okay, also können wir diesen Basisklassennamen verwenden. Und dann können wir sagen, dass es Klassennamen gibt. Wir können sagen, Paginierung, die für diesen entwickelt wurde. Und diese Paginierung Designklasse wird das Hauptdesign enthalten. Es bedeutet, dass ohne aktiv ist. Und das können wir einfach hinzufügen. Und wir können einfach Display Flex, Display Flex sagen. Und dann ist das Delta nicht. Und Rand fünf Pixel. Wir können Rand fünf Pixel hinzufügen dann sieben Pixel verblassen. Und dann bringe ich jemanden , der sagt, dass wir hart und weiß definieren müssen. Dann runden wir es ab. So hohe Kunst zu Pixel. Und dann wird y 30 Pixel sein. Und was es sein wird 30 Pixel Farbe wird blockiert. Das wird ein Blog sein. Und dann müssen wir 90 Pixel hinzufügen. Grenzradius wird 90 Pixel betragen. Und dann Text-Dekoration, keine. Textdekoration wird keine sein. SMS wird zentriert. Die Ausrichtung des Textes wird zentriert sein, und dann wird das Ausrichten von Elementen in der Mitte sein. Und was können wir sehen? Wir können also sehen, dass dieser jetzt abgerundet ist . Dieser ist abgerundet. Jetzt. Dieser ist jetzt auch abgerundet. Aber es gibt immer noch wenige Dinge, die auf diese Weise getan werden müssen . Und jetzt können wir dieses einfach hinzufügen. Also eine Sache, die ich vergessen habe, hier hinzuzufügen, die Hintergrundfarbe, denke ich. Also. Ich weiß, dass wir hier eine Hintergrundfarbe hinzufügen müssen, und die Farbe sollte weiß sein. Wenn ich einen Hintergrundfarbblock hinzufüge. Mal sehen, was wir sehen können. Jetzt haben wir dieses grundlegende Design hier. sind, das wird das Hauptthema davon sein, okay, also sieht es so aus. Wir müssen einige Änderungen vornehmen. So können wir den Rand von sieben Pixeln hinzufügen , sieben Pixel, Randradius neun Pixel, nimmt den Landsektor ungerechtfertigte Kontinuität hinzu, ich schätze, dass der Inhalt im Mittelpunkt stehen wird. Und dann ist Text-Dekoration auch keine weil sie einen Leasing-Typ erzeugt. Jetzt sollten wir unseren Text in der Mitte sehen können. Cool. Jetzt sieht es echt toll aus, aber es ist immer noch okay. Unser Hintergrund ist also weiß und unser Highlight-Hintergrund ist auch blockiert, tut mir leid, der Hintergrund ist schwarz, also werde ich ihn in Tomatenfarbe ändern. Es funktioniert jetzt nicht. Wir müssen dies ermöglichen. Wir werden das reparieren, keine Sorge. Also haben wir diese Paginierung. Wenn Sie nun den Mauszeiger über diese Paginierung bewegen, was wir im Grunde tun werden, denke ich, dass wir diese Paginierung aktiv Offshore beheben können indem es einen Call Active Link ClassName gibt. Und dieser Link ClassName wird uns unser gewünschtes Ding geben. Also aktiver Link ClassName zu nehmen. Okay, also lass mich das hier hinzufügen. Und dann wird die Immobilie so sein. Ich kann aktiven Linktext sagen. Aktiver Linktext. Okay, also können wir dieses Ding bis jetzt machen, und wir müssen dieses Problem reparieren, ist immer noch wenige Dinge. Und ich zeige es dir im nächsten. 12. Aktive Pagination und Design hervorheben: Willkommen wieder einmal zurück. In diesem Teil werden wir einige wichtige Änderungen in unserer Paginierung hinzufügen . Okay? Wir können es also auf viele Arten schaffen. Zum Beispiel gibt es eine Eigenschaft namens Wir können einfach die Dokumentation lesen und dann gibt es eine Eigenschaft namens ausgewählte Bayes-Regel. Oder wie heißt dieser? Es gibt einige andere Eigenschaften. Und wir können Pace Pfand-Klassenname sagen. Es gibt also eine Eigenschaft namens Baseline-Klasse Lambda-Clustering beim Start, dh Space Elements. Wir werden diesen also verwenden, um unseren aktiven Text hervorzuheben . So wird Paisley im Klassennamen gewählt Tempo, ausgewählte Auszahlungen. Und dieser E-Bass wird das Tempo sein, das wir wollen. Das ist im Grunde genommen unsere Auswahl. Ich kann also sagen, dass das ausgewählte Gesicht Farbe sein wird, Farbe wird vielleicht Tomatenfarbe haben. Nur für ein Beispiel werden wir es später lösen. Jetzt sind sie hier. Okay, so cool. So wird es also aussehen. Wenn unsere Seite ausgewählt ist, dann unsere, wenn unsere Basis ausgewählt ist, dann können wir sehen, dass dies weiß ist, was hier unsere aktive Basis ist. Paste Link aktiv wird also weiß sein und andere Schädlinge werden Tomatenfarbe haben. So kannst du das Ding also erledigen. Wir können dieses Design in diesen reagieren lassen. Oder ich denke, es ist auch möglich, es so zu machen. Zum Beispiel können wir ein Blatt hinzufügen. Hab das von hier. Und wenn dann hier ein Hinterteil gepostet wird, was passiert dann? Wir werden also sehen können, dass dieses Ding so funktioniert, also müssen wir dieses nicht auf diese Weise haben. Also können wir das Ding einfach hier geben. Und es wird so aussehen. Okay, also noch eine Sache, die wir tun können, können wir machen, können wir sagen, also können wir diesen Hintergrund- und Grenzradius jetzt von hier entfernen . Und wenn es dann ausgewählt wird und dann nur wir können, können wir, nur wir können dieses Ding zeigen, schätze ich. Also. Lass mich dir zeigen, was ich damit meine. Oder wenn du willst, kannst du einfach mit diesem herumspielen. Und dann wird es so funktionieren. Dieser ist also aktiv und dieser ist aktiv. Und dann haben wir das hier. Cool. Also meine ich im Grunde, dass Paginierungsdesign diese ganze Sache halten wird . Also wenn ich einfach, okay, also statt das ist die Paginierung, die wir hier haben. Dies ist eine Paginierung. Okay, also lass mich hier darauf hinweisen. Und das meine ich im Grunde. Wenn du willst, kannst du dieses Ding auch hier machen. Wenn es ausgewählt ist, können nur wir diesen einfach hervorheben und für den anderen Text können wir es tun. Um es zu schaffen, können wir einfach eine Sache machen. Das bekommen wir, damit wir unsere Höhe definieren können. Wir können sagen, dass unsere Höhe 90 Pixel betragen wird und unser Y 90 Pixel betragen wird. Und was auch immer es ist, es werden 90 sein. Dann wird es so sein. Wir haben diese große, größere Größe. Es tut mir leid, ich werde mich verstecken, in welchem verspäteten Pixel auf dem 19. Excel sein würde . Okay, cool, cool, cool. Also haben wir dieses und dann müssen wir ein Element erstellen , das sie immer noch rechtfertigen können , dass der Inhalt zentriert wird , tut mir leid. Nur um eine Menge zu sein, wird zentriert. Und vielleicht können wir das Ding einfach von hier nehmen. Dann kann ich es einfach hier einfügen. Dann sollte es wohl im Mittelpunkt stehen. Oder vielleicht können wir es auch hierher stellen , um es rechts in die Mitte zu bringen. Okay, also denke ich, dass dieses Ding von diesem kommt. Wir können das auch ausprobieren. Aus irgendeinem Grund kommt es nicht ins Zentrum. Meine Daten funktionieren auf diese Weise. Okay, also das wollte ich dir zeigen. Okay, also haben wir eine andere Grenze, die eine schwarze Grenze sein wird. Ich denke, in dieser Grenze kommt von dieser Grenze kommt davon. Also können wir es. Okay, lass mich das ganze Team rückgängig machen, das wir zuvor hatten. Dann können wir das einfach hier hinzufügen. Jetzt haben wir diese Möglichkeiten, schätze ich. Nein, das müssen wir auch entfernen . Also das, diese Höhe und dieser Grenzradius von hier aus. Und dann kriegen wir dieses Ding. Damit wir dieses Ding sehen können, diese Dinge. Und jetzt, wenn ich hier einen Randradius drücke, also Grenzradius 90 Pixel, dann wird es immer noch sehen können , markieren Sie diesen. Und das Problem ist das hier. Und wenn ich, wenn Sie diesen Hintergrund standardmäßig gestalten möchten , können Sie dieses Design einfach auch verwenden. Es wird auch funktionieren, okay? Sie können einfach Ihren Text hervorheben und Ihre Daten hervorheben. Was auch immer Daten oder welches Design Sie bevorzugen, Sie können es einfach tun. Das wird also auch für dich funktionieren. Also wollte ich dir nur zeigen, wie du hinzufügen kannst. Ich spiele um das herum. Jetzt müssen wir noch zwei Dinge reparieren. Einer ist früher, jeder ist der nächste Button. Dafür haben sie auch eine Eigenschaft unseren vorherigen Klassennamen und die nächste Klasse genannt wird, dann wird sie diese verwenden möchten. Wir können vorherigen Link, Nachname und dann vorherige Ebene, vorheriger Klassennamen und vorherige Schaltfläche sagen Nachname und dann vorherige Ebene, . Es gibt zwei weitere Eigenschaften , die vorherige Schaltfläche und vorherige Verknüpfung sein werden . Wir können diesen vorherigen Klassennamen anstelle des Links ClassName verwenden. Wir können also sagen, dass der frühere Klassenname „Vorheriger“ -Button sein wird. vorherige Klassenname wird „Vorheriger“ -Button lauten. Und dieser vorherige Button wird etwas mit diesem zu tun haben. Ich komme für diese beiden Entwürfe dazwischen hierher. Du musst einen auswählen, was immer du willst. Ich meine, dass Sie entweder diese oder die normale Hintergrundfarbe haben möchten , dann möchten Sie einfach diese auswählen. Also ich brauche nur, dass du nur mit dieser Paginierung herumspielen musst . Ich würde es gerne auf diese Weise behalten , denn wenn der Link aktiv ist, zeigt es nur, dass die Farbe und das Normalerweise in diesem sein werden. Dann wird dieses Paginierungsdesign das vorherige Schaltflächendesign sein. Wir müssen hinzufügen. Soweit das Hinzufügen und Anzeigen flexibel sein wird, und dann müssen wir List-Style-Typ keine hinzufügen. Das ist Teletyp wird keiner sein. Und dann müssen wir unseren Rand hinzufügen, fünf Pixel, und dann müssen wir Rand hinzufügen. Das Modell wird ein Pixel fester Block sein. Und dann müssen wir Bettwäsche hinzufügen, damit es gut aussieht. Wir behindern sieben Pixel und dann wird die Höhe, Höhe sein, ich bin Kartik Pixel, ich denke 30 Pixel. Und dann wird y 90 Pixel sein, oder es wird 90 Pixel sein, Farbe wird weiß sein. Die Farbe wird weiß sein. Die Farbe wird Höhe sein. Und wir können den Grenzradius hinzufügen. Grenzradius wird also 20 Pixel betragen. Und dann wird Text-Dekoration Teilung keine sein. Wir können diese Dinge bisher sehen. Lassen Sie mich diesen entfernen, weil es mehr Platz benötigt. Der Grund dafür, dass es auf die Stadt fällt. Stimmt's? Also können wir hier einfach noch ein paar andere Klassen hinzufügen. Lass mich die Höhe entfernen und mal sehen, was wir hier sehen können? Wir können diese Höhe sehen. Und ich kann auch die Höhe hinzufügen wenn automatische Augen automatisch passen werden. Und ich denke, wir brauchen diese Bettwäsche nicht sieben, um vielleicht zwei Pixel Polsterung zu verkaufen. Unsere Größe wird automatisch sein, und dann werde ich c sein. Dann können wir das sehen. Okay, also sind wir in Phase Nummer vier. Wenn ich auf den Plus-Button klicke, funktioniert es einwandfrei. Warum können wir das nicht erreichen? Wir können Höhe, 40 Pixel sagen, es sollte funktionieren, schätze ich. Es sollte funktionieren. Und dann können wir noch ein paar andere Eigenschaften hinzufügen. Zum Beispiel dieses. Alle diese Texteklarationsliste ist Teletyp, um sie in die Mitte zu ziehen, genannt Rauschen in der Mitte. Und jetzt können wir die Größe auf 30 Pixel reduzieren. Cool, es funktioniert. Das ist also unser vorheriger Button. Und dann müssen wir unseren nächsten Button im selben Design hinzufügen. Und das ist also der vorherige Button. Jetzt können wir dasselbe mit unserem nächsten Button-Design machen. Also schließt PVS sie, wird der nächste Klassenname sein. Also können wir einfach diesen nächsten Klassennamen hier hinzufügen. nächste Klassenname wird unser nächster Button sein , unser nächster Button. Und in diesem nächsten Button brauchen wir das gleiche Design. Wenn Sie möchten, können Sie Änderungen vornehmen. Das ist vollkommen in Ordnung. Cool. Wir haben das hier. Nun, wenn ich im schnellen Tempo bin, okay, dann sollte dieser Knopf wünschenswert sein. Ziele sollten weg sein, oder? Weil wir, wenn ich in der Basis Nummer eins bin, dann werden wir nichts tun. Wir können nicht über Phase Nummer eins hinausgehen , da dies der Anfangswert ist. Also müssen wir diesen irgendwie deaktivieren. Ich bin im letzten Stück und dann sollte ich diese Textschaltfläche auch deaktivieren können. Wie können wir das tun? Wie können wir das erreichen? Um dies zu erreichen, gibt es einen Clusternamen, der als induzible Klassenlänge bezeichnet wird. Genau das bin ich mir nicht sicher. Ich schätze. Wir müssen den Link notieren. Ich denke, wir müssen den Klassennamen und den Klassennamen hinzufügen. Und ich füge diese Eigenschaft hier in diese Paginierung ein. Und dann füge ich dieses Ding hinzu. Und ich sage Visible, Visible. Vorherige. Nächste Schaltfläche, hängen Sie von Ihnen ab, welchen Klassennamen Sie hinzufügen möchten. Ich schätze. Also lass es mich versuchen, ob es funktioniert. Und dann können wir sagen keine angezeigt wird, weil wir diese nicht anzeigen wollen oder wollen. Wenn wir Zweifel haben. Wenn Sie im schnellen Tempo sind, ist dieser vorherige Button verschwunden. Wenn ich auf Weiter klicke oder auf die zweite Seite klicke, ist die vorherige Schaltfläche hier oben klicke auf die vorherige Schaltfläche. Es ist weg. Wenn ich auf den Tartan klicke, diesen nächsten Mais der Moderne, wenn ich einen Schritt zuvor komme, dann wird sich das hier zeigen, und so wird es aussehen. Auf diese Weise können Sie einfach mit ihrem ganzen Klassennamen herumspielen , den sie haben. Man kann also auch eine Sache machen. Vielleicht haben Sie auf unserer Website, einer Plattform, bemerkt, dass sie die Schaltfläche deaktivieren, sofern dies nicht der Fall ist. Es sei denn, es sei denn, es ist. Wenn ich zum Beispiel dabei bin, diesen einfach deaktivieren, anstatt diesen zu verstecken kann ich diesen einfach deaktivieren, anstatt diesen zu verstecken. Wie kann ich das machen? Lassen Sie mich das also kommentieren. Also kann ich einfach sagen, Gott, also können wir sagen, dass der Cursor nicht erlaubt wird, eigentlich nicht viel. Und dann können wir sagen, das ist der Cursor. Ich kann sehen, dass dieser Cursor nicht viel ist, oder wir können diesen einfach hinzufügen. Ich glaube, es hat dieses E. Wir gezählt, dann können wir es nur schaffen. Du kannst jetzt sehen, dass diese ganze Sache das ist. Jetzt können wir dieses hier anklicken, aber dieses ist nicht wünschenswert. Auf der nächsten Schaltfläche funktioniert und funktioniert. Und jetzt, wenn ich in der zweiten Paste bin und dieser vorherige Button auch in einer Schüssel ist wie dieser. Und dann klicke auf den dritten. Und dann wird dieser nächste Knopf sein. Und so wird es für die nächste Butter gleich sein. Und wir können auch die Farbe machen, denn die Farbe wird grau sein , so dass sie wirklich induzierbar aussieht. Wenn ich also hinter mir bin, kannst du sehen, dass die Farbe nicht nur ein Bolzen ist und dann ist es nur ein Bolzen. Okay, also kannst du einfach damit rumspielen und dann wird es mit dir arbeiten. Mann, ich bleibe. Ich fange mit dieser Anzeige an. Es sieht besser aus. Okay, also müssen wir das A ändern , weil es das auf diese Weise braucht . 13. React Project auf Netlify bereitstellen: Willkommen zurück. Noch einmal. In diesem Teil zeige ich Ihnen, wie wir unser Projekt auf dem Server oder jeder Art von Hosting-Plattform bereitstellen können , damit der Benutzer problemlos auf Ihre Daten zugreifen kann. Aber davor zeige ich dir ein paar Dinge. Wir müssen unsere Ladehaare hier hinzufügen. Denn wenn unsere Daten nicht geladen werden, können wir ihnen einige Informationen zum Laden anzeigen. Wie können wir das machen? Also hier ist das unsere Basis, und hier füge ich einen neuen Staat hinzu. Ich kann sagen, const, kann sagen, dass das Laden traurig und einsam sein wird. Und anfangs wird es wahr sein. Da es anfangs wahr ist, sobald wir unsere Daten erhalten haben, möchten wir diese Ladung falsch setzen. Also hier bekommen wir unsere Daten. Wenn wir unsere Daten erhalten, müssen wir keine Ladung anzeigen. Wir können sagen, dass es falsch ist. Wie können wir diese Ladung jetzt in unserem Tempo zeigen? Dafür können Sie eine andere Art von Icon oder irgendetwas anderes verwenden. Also nur für ein Beispiel. Danach sagst du Fakt, dass ich hier eine Bedingung hinzufügen werde. Wenn unser Ladestatus „true“ ist, möchten wir ihnen die Meldung zeigen , dass Daten noch geladen werden. Was kann ich dann sagen? Wir können es hier sagen. Wir können Def sagen. Und dann, wie ich schon sagte, Tech Center. Ich füge einen Klassennamen hinzu und das Clustering wird Textzentrum sein. Und ich kann sagen, dass die Marge weit 25 sein wird. Und dann in diesem, ja, dass du ein Icon hinzufügen kannst oder einfach einen Text hinzufügen kannst. Zum Beispiel werde ich das laden. Und wenn ich darauf klicke, siehst du den Ladetext. Sie können diese Ladetags sehen. Auf diese Weise kannst du dieses Ding auch machen. Es könnte also ein Symbol zum Laden geben. Sie können dieses Ladesymbol auch anzeigen. Es gibt viele Icons. Lass es mich versuchen. Sie können dieses Icon sehen, dieses Icon, dieses Symbol. Sie können zum Beispiel ein beliebiges Symbol ausprobieren, sagen wir, ich möchte dieses zeigen. Dann kann ich hier bearbeiten und wo wir unsere Daten dafür verwendet haben. Okay, also kopiere ich das hier und dann füge ich es hier ein. Ich füge das hier hinzu, und so wie es im BI ist. Also werde ich es ändern, ich weiß, dass ich auf dieses Symbol anstelle dieses Textes zugreifen oder diesen Text ausgeben kann . Ich kann dieses Icon auch zeigen. Und dann kann ich die Größe sagen. Und ich füge hinzu , dass entschieden 40 sein wird. Lassen Sie mich das jetzt auffrischen. Ich sehe das Laden und mit diesem Icon. Cool. Jetzt müssen wir unsere App auf dem Server bereitstellen. Sie können jeden Server ausprobieren, aber ich zeige Ihnen, wie Sie unsere App auf Netlify bereitstellen. Erstellen Sie also einfach ein Konto mit Ihrem GitHub-Konto oder Ihrer E-Mail-Adresse. Sie haben so viele Möglichkeiten. Sobald Sie Ihre E-Mail-Adresse haben, können Sie diese Option sehen, sobald Sie sich hier registriert haben. Sie haben also vielleicht keine Website, wenn Sie neu hier sind weil ich zuvor aus einem Grund bereitgestellt wurde , warum ich dieses Ding sehen kann. Aber wenn du total neu bist, solltest du nichts sehen können. Also müssen wir nur auf die Seite klicken und dann können wir unsere Datei einfach hier ablegen. Dafür müssen wir zuerst unsere Daten auf diese Weise hinzufügen. Lassen Sie mich es Ihnen zum Beispiel zeigen. Das ist also unsere Kundengröße. Und okay, also müssen wir unser Projekt aufbauen. Wie können wir unser Projekt aufbauen? Also können wir dieses einfach hinzufügen. Öffnen Sie also Ihr Terminal und ich werde es tun, zuerst muss ich zu meinem Ordner-Client wechseln. Also der Client, jetzt dieses Client-Verzeichnis, also kann ich jetzt sagen npm run build. Dieser Befehl wird unser Projekt erstellen. Und dann können wir unseren Build-Ordner einfach in unserem Netlify bereitstellen unseren Build-Ordner einfach in unserem Netlify und dann unsere Website bereitstellen. sollte also ein Ordner Hier sollte also ein Ordner erscheinen und es dauert ein paar Augenblicke. Und wenn man sich hier anschaut, ist dies unser Hauptordnerverzeichnis. Das ist also der Kunde. In diesem Client-Ordner haben wir alle unsere Dateien und unser Build-Ordner sollte hier erscheinen. Und dann müssen wir einfach hier einen Ordner per Drag & Drop oder Build erstellen. Dann wird es seine Arbeit richtig machen. Es dauert ein paar Mal, also denke ich, dass ich das Video eine Weile pausieren kann , bis es so ist, oder ich kann dir einfach noch ein paar Dinge erklären. Okay, wir können sehen, dass unser Build-Ordner ein paar Mal ein wenig Technologie erstellt. Und das ist unsere Ordnerstruktur, die wir erstellt haben. Ich hoffe, Sie haben wirklich viel von diesem Kurs gelernt , weil diese Paginierung wirklich wichtig ist , da Sie bei der Paginierung in Ihrem Projekt tun müssen . Wenn Sie es mit vielen Datenelementen zu tun haben, ist dies sehr wichtig. Und dieses React Paginierungspaket bietet Ihnen viel Flexibilität, es hinzuzufügen, ohne so viel Code zu schreiben. Also kannst du dir hier anschauen. Wir verwenden einfach ihren vorgefertigten Klassennamen und wir haben unser Design entsprechend unserer Anforderung erfüllt. Also nichts komplexes hier. Und hier müssen wir nur diese paar Codezeilen schreiben und dann können Sie sie einfach verwenden. Das Gute ist also , dass ich, wie ich dir gesagt habe , dass ich diesen Paginierungsordner separat benotet habe. Sie können also denselben Code und Baugruppen verwenden und für jede Art von Daten einfach die Daten oder das Segment eingeben und dann einfach Ihre Komponente wiederverwenden. Okay, also ist unser Build beendet. Jetzt können wir das einfach aus dem Build-Ordner kopieren und dann können Sie es einfach hier ablegen. Dieser Build-Ordner muss also nicht hineingehen und ihn einfach aus dem Build-Ordner ziehen und ihn dann hierher zeichnen. Und mal sehen, was wir sehen können wenn Sie einen Fehler bekommen, und dann müssen wir ihn beheben. Und es wird ein paar Augenblicke dauern. Sie können sehen, dass die Produktion abhängig von der Dateigröße hochgeladen wird . Die Kohleproduktion wird in nur wenigen Sekunden veröffentlicht, wir können sehen, dass unsere App stabil ist. Dies ist die Link-Port-Anwendung. Klicke drauf. Und los geht's. Unser erster Schritt ist jetzt Live und Server. Jeder, jeder kann auf diese Datei zugreifen und das funktioniert, das funktioniert und unsere Paginierung funktioniert auch. Sie können in wenigen Sekunden perfekt sehen. Also was wir im Grunde genommen hier gemacht haben und okay, also können wir jetzt unseren Namen ändern und uns auf jeden Fall anschauen. Das ist also der Name unserer Datei. Was ich getan habe, im Grunde nur ein Login. Und dann bleib es hier und hier wirst du sein, also musst du nur zu dieser Größe gehen. Und hier haben Sie eine Option damit Sie sich von Ihrem Connect aus verbinden können, Sie erhalten die Hälfte oder Sie können einfach surfen, oder Sie können den Spaß einfach hier ablegen, dann können Sie Ihre projekt. Jetzt möchten Sie möglicherweise den Namen dieses Projekts ändern. Definitiv kannst du es schaffen. Wie kann man das machen? Wenn Sie den Domainnamen hinzufügen möchten, können Sie hier auch einen Domainnamen hinzufügen, aber ich möchte den Namen ändern. Dies ist der Name. Und hier sehen wir den Namen der Chen-Website. Und los geht's. Wir können sagen React Origination. Cool. Wenn ich jetzt darauf klicke, ist der besagte Name bereits übernommen. Also hat schon jemand schon mitgenommen. Also können wir diese eine Reakt-Paginierung nehmen. Wir API in Datenzielen. Das ist also unser Website-Name. Wenn ich das jetzt aktualisiere, wird es nicht funktionieren weil unser Name geändert wurde. So können wir einen Überblick zitieren. Ich möchte, dass Sie in unser Hauptverzeichnis gehen , und dann können wir sehen, dass der Name geändert wurde, reaktive Entstehung. Und wenn ich auf den Link klicke, wird es wieder funktionieren. Wir können auch unseren Ladeindikator sehen. Cool. Sie haben gelernt, wie Sie Ihr F auf Netlify bereitstellen, wie Sie diesen Zusammenbruch von Schoen erstellen, wie Sie diese Paginierung erstellen und wie diese diese Funktionen hier hinzugefügt werden können. Ich hoffe, dass dir dieser Kurs gefallen hat und ich wünsche dir alles Gute. Und dies ist die letzte Vorlesung dieses Kurses. Tschüss.