ReactJS und Redux – Build 4 Web-Apps [2/4] | David Katz | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

ReactJS und Redux – Build 4 Web-Apps [2/4]

teacher avatar David Katz, Software Engineer - Coding Instructor

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

15 Einheiten (1 Std. 10 Min.)
    • 1. Die Kurs einführen

      1:33
    • 2. Wireframing MusicMaster

      1:34
    • 3. MusicMaster einrichten

      1:40
    • 4. Die App erstellen

      4:21
    • 5. Gestalten mit Bootstrap

      4:28
    • 6. Suche für Künstler:innen

      4:01
    • 7. Vorbereitung einer Webanfrage

      5:45
    • 8. Daten mit einer Url fließen

      3:03
    • 9. Das Künstlerprofil erstellen

      5:20
    • 10. Gestalten neuer Komponenten mit CSS

      9:57
    • 11. Die Fetch erweitern

      6:49
    • 12. Eine Galerie erstellen

      9:33
    • 13. Audio-mit JavaScript spielen

      2:24
    • 14. Eine Spuren anhalten

      3:33
    • 15. Animiertes Styling

      5:47
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

1.276

Teilnehmer:innen

1

Projekt

Über diesen Kurs

Werde ein stark gefragte Software-Ingenieur durch Folge diesem Tutorial zu React JS und Redux Als eine der highly-paid Fähigkeiten für Webentwickler, wird dir das React die Türen und Jobs eröffnen.

 

Dieser Projektkurs wird dich sofort programmieren. Der Aufbau vier sorgfältig durchdachter Beispielanwendungen in diesem Kurs wird deine Fähigkeiten in der modernen Webentwicklung schärfen.

 

Lerne zunächst die Prinzipien der ReactJS durch das Erstellen zweifaches Anwendungen. Eine stellt ES6/Babel vor, die man mit einer API umgeht. Lerne mit der dritten Anwendung die Browser-Cookies zu manipulieren. Zum Schluss erstellst du eine ganze App mit vollständiger Authentifizierung und eine Echtzeit-Datenbank, die du in die Hand setzen kannst.

 

Lerne auch die Technik von Redux. Du wirst finden, dass Redux auf drei Schritte eingeht!

Keine Sorge, wenn du neu in der Entwicklung in der Webentwicklung bist. Einige JavaScript werden dir helfen, aber in diesem Kurs wirst du jedes neue Konzept gründlich erklären.


So machst du die Eintauchen in React JS und Redux. Los geht's!

Hier findest du auch einen Link zu der Online-Repository für diesen Kurs: https://github.com/15Dkatz/ReactJS_VideoGuides

Triff deine:n Kursleiter:in

Teacher Profile Image

David Katz

Software Engineer - Coding Instructor

Kursleiter:in

David is a software engineer at Zendesk, with a Bachelor of Computer Science from the University of San Francisco.

David has gained valuable experience from the tech industry. By incorporating these best practices, he hopes to create the highest quality learning experiences possible.

Feel free to connect with David! He is always curious about the cool project you're working on. And he loves to discuss ideas on how to build impactful technology.

Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Die Kurs einführen: willkommen zu einer ausgezeichneten Ressource, wie man Reaktion zu lernen. Ja und Redox. Herzlichen Glückwunsch. Learning React bringt Sie einen Schritt voraus, denn es ist eines der am meisten nachgefragten und bezahlten Fähigkeiten in der Softwareindustrie. Ich habe diesen Kurs mit einem übergeordneten Ziel entworfen, damit Sie in einem Redux auf Ihren Lebenslauf reagiert haben und sich darauf vorbereitet haben, Ihre eigenen Reaktionsprojekte von Grund auf neu zu erstellen. In diesem Kurs erstellen Sie vier Anwendungen. Man wird Sie mit den Prinzipien reagieren und JavaScript es sechs Syntax einführen . Die nächste wird mit einem P I und zeigen, dass Sie einen Deal mit Web-Anfragen hatten In reagieren. Drittens lernen Sie Redux. Es erstellt eine Anwendung, die auch Informationen lokal im Browser speichert. Und schließlich, das Beste von allem, werden wir eine Redox-App haben, die volle Ausbildung für die Anmeldung von Benutzern hat. Als eine Datenbank zurück kam, werde ich jedes neue Konzept genau überprüfen und messen jede neue Idee. Auf diese Weise haben Sie ein gründliches Verständnis des Mantels und der Technik. Außerdem lasse ich dich jetzt auf ein Geheimnis ein. Redux kann sich zunächst kompliziert anfühlen, aber Sie können es auf drei grundlegende Schritte aufkochen. Alles klar, wenn Sie endlich den Schlüssel zum Reagieren und Redux freischalten und sie zu Ihrem Skill Set hinzufügen möchten oder Sie einfach nur Ihre Web-Entwicklungskoteletts aufräumen möchten, dann ist dieser Kurs perfekt für Sie. Also, worauf wartest du? Lassen Sie uns anfangen zu codieren. 2. Wireframing MusicMaster: Willkommen Hier haben wir Musik, Meister. Die zweite Anwendung, die wir erstellen werden, um sie zu erhalten, funktioniert genau so. Suchen Sie nach dem Namen eines Künstlers. Dann finden Sie einige Informationen über sie, zusammen mit einem schönen Profil und seinem Bonus. Erhalte eine Vorschau ihrer Top 10 Tracks und sie sind spielbar. Suchen wir die Käfer. Zum Beispiel. Lass uns Hey Jude spielen, oder lass es sein. Vielleicht willst du einen anderen Künstler über Frank Sinatra. Da gehen wir hin. Wie wäre es, wenn du mich zum Mond fährst, oder ich habe dich unter meiner Haut? Dieser nutzt Spotify Augen Public AP I, um US-Zugangsdaten wie Profilbilder zu ermöglichen , und natürlich, Soundbites beinhaltet gut, bestimmte AP Augen in der Regel in einer p I Taste. Zum Glück, zu diesem Zeitpunkt, Spotify Augen AP. Ich erlaube freien Zugriff auf die Daten, die wir wollen. Außerdem hat diese Anwendung ein ansprechendes Design in Frage. Auf diese Weise wird auch ein mehrfaches Gerät oder eine Plattform in der Lage sein, diese Website oder Web-Anwendung sieht schön und Fleisch zu sehen . In Ordnung. Diese Anwendung hat so viel mehr Interaktivität als die vorherige zählt in. Also lasst uns anfangen zu kommen und bauen Musik Master 3. MusicMaster einrichten: Lassen Sie uns das Musik-Master-Projekt einrichten. Stellen Sie sicher, dass Sie zu Ihrem Terminal gehen navigiert jetzt im selben Verzeichnis. Wurden Sie Ihren ersten Reaktionsprojekttyp Ellis erstellt, sollten Sie Ihren ersten Countdown-Champ bereits dort sehen, zusammen mit allen anderen Dateien oder Projekten, die Sie zwischen jetzt und dahin eingefügt haben, werden wir nun die Create React verwenden noch einmal, um unser Projekt zu initialisieren. Richtig, Erstellen, reagieren Sie auf. Denken Sie daran, es ist der Name unserer Anwendung. Also, Musikminister, das kann ein oder zwei Minuten dauern, abhängig von Ihrer Verbindung. Also werde ich voran gehen und springen voran in das Video, wenn es abgeschlossen ist. Fühlen Sie sich frei zu pausieren, bis Ihre auch beendet ist. Mit Erfolg sollte Ihre Ausgabe so aussehen. Nun, bevor wir unseren Code starten und in PM start laufen, können wir einen zusätzlichen Schritt machen, um uns vorzubereiten, bevor wir uns vor der Zeit neu codieren. Und im Knollensellerie. Bootstrap schon. Führen Sie also einfach den Befehl aus und bin installiert. Reagieren Sie Bootstrap in der Doppelflagge. Sicher und höher. Ich habe tatsächlich vergessen, zuerst in das Projekt zu navigieren, also vergessen Sie nicht, das zu tun. Also werde ich meinen Ordner öffnen und nur um die bekannten Module zu führen, die installiert wurden, gehen voran und löschen Sie mein Terminal nicht in den Musikmaster bekommen und dann den gleichen Befehl ausführen . Mit all dieser Beleidigung könnten wir anfangen, die Musik-Master-Anwendung und unsere erste Komponente zu erstellen, Lassen Sie uns es tun. 4. Die App erstellen: Jetzt, da wir alles installiert haben. Lassen Sie uns unsere erste Anwendung starten, indem Sie NPM Start auch ausführen, lassen Sie uns es in unserem Code-Editor öffnen. Ich werde alles in der Größe ändern. Auf diese Weise ist die Dimensionierung relevanter für das, was wir tun. Das allererste, was zu tun ist. Lass es uns tun. Dieser gesamte Quellordner. Ja, und der Grund, alles zu löschen, besteht darin, von vorne zu beginnen, damit wir genau verstehen , was passiert, wenn wir unsere Anwendung erstellen. Das erste, was wir tun müssen, ist Import reagieren von reagieren. Und dann, wie viele von Ihnen sich erinnern, reagiert es von der Reaktiven. Jetzt können wir einfach aus dem Reaktor rendern, nicht rendern Funktion. Hat, dass wir möchten. Für jetzt nennen wir es einfach Music Master und wollen auf die Div mit der Idee der Route in der Öffentlichkeit greifen . HTML. Wir werden voran gehen und sparen, und da gehen wir. Wir haben Musikmeister in der Ecke auftauchen. So klein es ist, lassen Sie uns die obere Anwendung setzen. Das erste, was wir wollen, ist eine APP-Komponente. Es ist eine neue Akte bei Punkt J sechs. Wir werden reagieren und die Komponentenkomponente reagieren. Das ist alles, was wir für jetzt brauchen. Obwohl wir CSN Slip hinzufügen, lassen Sie uns eine grundlegende Struktur erstellen. Also Klasse bei erweitert Komponente. Ich würde das nicht standardmäßig exportieren wollen, bevor wir es vergessen. Dann, natürlich, Sie wollen Sanjay Sex und Rückkehr machen. Versuchen wir, zurückzukehren , oder? Sagt Music Master von AP? Nein, und dann werden wir es ersetzen. Index dot Js hat hier drüben mit unserem. Also ist es Import aus dem aktuellen Verzeichnis und finden Sie die at. Sie werden einfach einen selbst umschließenden Tad für unsere verwenden und wir fühlten sich zu kompilieren. Sie können die App jetzt nicht im aktuellen Verzeichnis finden. Manchmal müssen Sie den gesamten Server neu laden, bevor er ein neues Modul erkennt. Und dann gehen wir. Wir sehen Musik-Master von at und jetzt lassen Sie uns die tatsächliche Struktur der Anwendung hinzufügen . Zunächst brauchen wir vor unserer Bewerbung einen Titel. Ich werde Music Master als Titel sagen. Wir gehen voran und geben uns einen Klassennamen von bei Titel für jetzt und dann brauchen wir eine Suchleistenkomponente . Denken Sie daran, wir wollen einen Eingabefeld-Platzhalter von Search a artist for now und dann eine Schaltfläche komportiert , die nur sagen würde, ist Submit. Wir werden einen Profilabschnitt haben, so Klassenname gleich Profil hier drüben, können wir einfach sagen Künstler für jetzt und dann für gute Maßnahme benannt Künstler Bild Div hinzufügen und schließlich eine Galerie-Komponente benötigen. Wir können natürlich nur Galerie für Nein sagen . Geben Sie unseren Klassennamen von Galerien. Lassen Sie uns speichern und ist es Updates. Wir haben eine sehr einfach aussehende Anwendung, die wirklich nichts tut, außer sogar auf eine Schaltfläche klicken für nicht so Lassen Sie uns bei einigen grundlegenden Styling weitergehen. Ihre Anwendung, um dies sichtbar und reizbar mit anderen Worten, größer zu machen und etwas Bootstrap zur Anwendung hinzuzufügen. 5. Gestalten mit Bootstrap: bevor wir etwas anderes tun, können wir bereits das Styling dieser Anwendung reinigen, indem wir die Männer einbeziehen. Wenn ich CSS-Datei von reagiere. Bootstrap. Geh nie zurück, um zu reagieren. Bootstraps Einstieg Seite und kopieren Sie den Link der neuesten kompiliert in Unified CSS Spaß . Einige gehen, um es zu kopieren, Navigieren Sie zurück zu öffentlichen Schärpe Index Punkt html und über dem Typ enthalten. Und schon sollten wir sie beim Update mit etwas neuem Styling, dem Fondswechsel sowie dem Input und dem Button sehen. Jetzt lassen Sie uns unser eigenes Styling zu Musik-Chaos hinzufügen. Wir fügen eine CSS-Datei im Quellinhaber hinzu. Wir werden an Punkt CSS sehen, wie vor und bevor wir weitermachen. Lassen Sie uns einen Klassennamen in Vorbereitung zum gesamten DIV der App hinzufügen. Jetzt schwächen Stil, dass ich will, dass alles auf die Mitte ausgerichtet werden. Ich mag es nicht, wie es auf der linken Seite ist, jetzt und dann will ich ein wenig kleinlich, also sagen wir 5% Patty jetzt. Natürlich müssen wir tatsächlich importieren sind Stylings, Überschwemmungen, Import App Dot CSS und da gehen wir. Unser Styling gilt. Als Nächstes ändern wir die Suchleistenkomponente nach oben. Es sieht jetzt irgendwie hässlich aus. Es sagt nicht einmal, wie wir es wollten. Egal, wir werden ein paar Dinge aus einer praktischen Dandy-Reaktion importieren. Bootstrap-Bibliothek, importieren Sie die Formulargruppenkomponente, verformen Sie die Steuerkomponente. Eine Eingabegruppe sowie die Klippensymbole von reagieren. Bootstrap. Und jetzt werden wir die ganze Suche weit ändern. Also lassen Sie uns voran und löschen Sie es einfach. Lassen Sie uns es mit einer Formulargruppenkomponente platzieren und dann innerhalb der Formulargruppe werden wir genau wie ein Eingabefeld haben, ein Formular-Steuerelement angetrieben und dieses Formular-Steuerelement wird sich selbst schließen. Also brauchen wir eigentlich nicht zu besteuern. Sein Typ wird Text sein und der Platzhalter wird auf Künstler gesucht. Jetzt muss dies tatsächlich mit einer Eingabegruppe selbst eingeschlossen werden, Gruppe Lassen Sie uns dieses Formular-Steuerelement übernehmen . Platzieren Sie es innerhalb der Eingabegruppe. Und schließlich, der Grund für diese Reaktion Duceppe Code ist, dass wir wollen, dass diese Knopfzehen ein wenig aussehen. Es wird eine Ikone haben. Ich habe eine Lupe, die wie eine Suchleiste aussieht. Also ist es in der Eingabegruppe und an, und innerhalb dieses Add-on wird ein Glitch-Symbol haben. Und dann wird diese Klippe einfach sagen, suchen und nie gehen. Sieht das nicht schön aus? Jetzt können Sie alle Glitz-Symbole in der React Bootstrap-Bibliothek durchsehen. Es gibt eine ganze Tonne von ihnen. Außerdem ist es Lupe für Pluspunkte. Profilbenutzer , etc. Lassen Sie uns weiter unsere Anwendung stylen, bevor wir weitermachen. Ich habe das Gefühl, es könnte eine nette Idee sein, das Gesamtthema unserer Anwendung zu überdenken. Auf diese Weise können wir es von den anderen unterscheiden, die neu aufbauen. Lassen Sie uns voran und zielen Sie den ganzen Körper und ändern Sie den Hintergrund Ablenkung, die 000 unzugänglich ist. Sie müssen nur sicherstellen, dass die Farbe noch erfunden ist. Also machen Sie es f f f f oder weiß. Und wie wir speichern ihre das Thema ändert sich von heute Nacht, das letzte, was wir wollen, ist ein größerer Appetit. So werden wir die Bootgröße um 2 26 Pixel erhöhen. Großartig. Wir haben ein ziemlich gepflegtes Anwendungsdesign für uns, das jetzt vorwärts geht , damit wir weiter davon aufbauen können. Lasst uns weitermachen 6. Suche für Künstler:innen: lassen Sie uns eine Suchmethode zu dieser Anwendung verbinden. Unsere Suchmethode wird sich vorerst einfach beim Konsul anmelden, egal welcher Textbenutzer innerhalb des Eingabefeldes . Erinnern Sie sich, dass Eingabefelder in reagieren eine Nicht-Änderungsfunktion haben, die es uns ermöglicht, den Zielwertinhalt seiner Daten zu erfassen . Also müssen wir zuerst einen Zustand einrichten, in dem der Benutzer seinen Steinbruch kontrollieren kann, um zu suchen. Lassen Sie uns jetzt einen Konstruktor für diese Klasse definieren. Denken Sie daran, das Requisiten-Argument zu übergeben, und dann in der ersten Zeile wollen Sie immer Super-Requisiten. Als nächstes wollen wir das Zustandsobjekt von dieser Klasse deklarieren. Moment haben wir eine Schlüsselabfrage, und dies wird unabhängig vom Benutzer mit Eingabefeld sein. Lassen Sie uns es vorerst auf eine leere Zeichenfolge setzen. Großartig. Lassen Sie uns die Werteigenschaft dieses Eingabefeldes nicht auf ST dot kwehr ändern. Also direkt unter dem Platzhalter ist die Abfrage gleich diesem Punktstatuspunkt queer genial. Und jetzt können wir das auf Änderungsfunktion verwenden. Denken Sie daran, wir hatten einen Griff auf Ereignisvariable. Dann setzen wir einfach den Zustand von der Abfrage auf den Ereignispunkt-Zielwert. Ehrfürchtig. Jetzt brauchen wir eine Möglichkeit zu testen, ob das tatsächlich funktioniert. Für jetzt, lassen Sie uns eine Suchmethode verbinden. Und dann lassen Sie uns in dieser Suchmethode den Zustand protokollieren. Also ist es Konsul Dot Log. Wir werden sagen, dass dies nicht in diesem Punktzustand ist, also wissen wir, worauf es sich tatsächlich bezieht. Perfekt. Schließlich müssen wir den Aufruf der eigentlichen Suchmethode über die Schaltfläche hinzufügen. Klicken Sie auf. Also genau hier auf der Eingabegruppe Punkt Fügen Sie auf diesem saß auf Klick-Funktion innerhalb des Tags hinzu, und wir müssen anonyme Pfeilfunktion hier verwenden. Sie nennen diese DOT-Suche und versehentlich gelöscht, dass Adam so hoffentlich sie funktionieren sollten. Lassen Sie uns das eigene untersuchen. Und das, anstatt Query zu sagen, sollte eigentlich Wert sagen. Und los geht's. Suchen wir nach einem Künstler. Frank Sinatra. Vielleicht gehen wir da hin. Die Abfrage ist Frank Sinatra. Eine letzte Sache In der letzten Anwendung hatte Countdown Champ eine Herausforderung, Funktionalität hinzuzufügen, indem es dem Benutzer erlaubt, seine Anfragen durch Drücken der Eingabetaste zu senden . Wir können diese Funktion erreichen, indem Sie die Tastendruck-Funktion des Eingabefeldes verwenden. In ähnlicher Weise müssen wir bei der Änderung die Ereignisvariable hier behandeln. Wir müssen die Ereignisschlüsseleigenschaft überprüfen. Also lassen Sie uns voran und Konsole Protokollieren Sie das für jetzt. Also werden wir sagen, auf Tastendruck gleich die Ereignisvariable zu behandeln. Das ist Konsul Dot Log, dass sogar Ducky für Nein, nur um zu sehen, wie es aussieht. Wie ich sage, wie ich hier drin bin, ist die venti a d f. Aber wenn ich Return drücken oder Enter, sogar Esel ist eingeben. So können wir jetzt einfach die Suchfunktion aufrufen. Wenn Ereignis Daki jemals eingeben entspricht, lassen Sie uns diese Logik jetzt hinzufügen, in einer einfachen if-Anweisung müssen wir die ganze Sache umarmen. Wir werden überprüfen, ob, wenn Ereignis Hockey gleich eingeben ist und wenn ja, würde dies nicht suchen. Suchen wir nach. Frank Sinatra. Drücken Sie nicht die Eingabetaste Da gehen wir. Wir trösten. Melden Sie sich nicht mit diesem Startstatus an und ich weiß, dass die Suche aufgerufen wurde, weil das ein Konzert lang ist , das wir verwenden. Großartig. Jetzt, da wir eine funktionierende Suchmethode haben, lassen Sie uns weiter bauen Musik Master 7. Vorbereitung einer Webanfrage: Wir haben eine Suchmethode an eine Befürwortung angeschlossen, aber wir wollen tatsächlich, dass Methoden ziehen einige Daten, um eine Information über Künstler greifen wird die awesome Spotify Öffentlichkeit ein p verwenden Ich gehe voran und zu einem neuen Browser oder Tad und suchen Spotify BP Haben Sie einen der ersten Links als Web-API I Spotify Entwickler gesehen? Sie möchten ihre Endpunktreferenz unter Web-API I A p i n Punktreferenz finden. Suchen Sie dann nach der Suchfunktion. Wie Sie sehen können, können wir bei der Suche nach einem Punkt einfach Spotify-Kataloginformationen über Künstler, Album-Tracks oder Playlist abrufen Künstler, . Diese magische Abfrage, die forscht. Zum Glück, um dies und Punkt zu verwenden, brauchen wir keine A P I Taste, damit wir fortfahren und einfach diesen Link für den Moment kopieren können. Zehe schon. Beginnen Sie es zu benutzen. Du brauchst keinen Teil zu bekommen. Gehen Sie in Ruhe es innerhalb Ihrer Suchfunktion. Großartig. Lassen Sie uns das jetzt als Basis erklären, Sie sind draußen. Lassen Sie uns nun die Spotify a p I für ein paar Augenblicke erkunden. Wie Sie sehen können, haben sie Abfrageparameter. A B Eis wird in der Regel Parameter für jeden ihrer Endpunkte haben, damit wir die Art der Informationen angeben können, die wir wollen. Wenn Sie jemals bemerkt haben, Links, die Sie verwenden, manchmal haben Schlüssel oder Wörter vor Ungleichheitszeichen, die zu einem Wert zugeordnet ist, der eine die genauen Informationen angeben , die die Webanwendung auf der Seite zeigen sollte und Punkte funktionieren auf die gleiche Weise , um eine Spotify-Suchfunktion zu erhalten. Wir geben unsere Abfrage oder das Wort, das wir suchen, indem wir die cuchi verwenden, damit wir Q gleich Frank Sinatra verwenden können , zum Beispiel. Also lasst uns einen neuen Abruf deklarieren. Ihre, Ich werde sagen, ist gleich der Basis, die Sie aus plus que gleich sind. Was auch immer der Status unserer Abfrage ist, wir möchten auch einige weitere Parameter nutzen, zum Beispiel den Typ und das Limit. Ich möchte auch unseren Typ auf Künstler beschränkt haben, also fügen Sie einen zweiten Parameter hinzu. Wir brauchen dies und signieren es wird sagen, Typ Leute Künstler und ein weiterer Parameter sind Limit wird ein Künstler für jetzt sein. Bevor wir irgendetwas anderes tun, ist das Konsul Dot Log dieser Abruf Sie sind ich um zu sehen, wie es aussieht. Ich werd sehen. Gehen Sie und navigieren Sie zurück zu Ihrer Anwendung, und Sie brauchen eigentlich keine Klammern. Ihr Jungs habt wahrscheinlich gefangen, dass in Bezug auf die Variable gespeichert und neu geladen wird. Und da funktioniert alles gut. Also schauen wir uns Frank Sinatra Jetzt, wie ich das sehe, u R l Ich bemerkte, dass vor dem Q-Zeichen eine Sache fehlt. Wir wollen eigentlich eine Fragearbeit haben. Das Fragezeichen initialize sind Abfrageparameter, nach denen es kommt, daher ist es sehr wichtig. Ich werde uns jetzt retten. Und schauen wir mal wieder Frank Sinatra nach. Hier haben wir unsere eigentliche Abholung, Earl. Wechseln Sie zum neuen Browserangriff. Tempo es rein und da gehst du. Hier finden Sie eine Menge Informationen über Frank Sinatra. Er hat externe l's, seine Anzahl von Anhängern Genres, dass er einige Bilder über ihn macht, so dass wir einige Profile haben können . Es ist dieses riesige Jason-Objekt, das Spotify uns erlaubt, innerhalb unserer Anwendung zu verwenden. Endlich, bevor wir weitermachen, können wir diesen Abruf machen. Sie sind alle Code prägnanter, indem Sie Vorlagenzeichenfolgen in Essex JavaScript nutzen anstatt Pluszeichen oder plus Gleichheitszeichen mehr zu verwenden . Wir können diese ganze Sache sehr schön in einer Schnur halten, indem wir sie in hintere Zecken einwickeln. Sagen wir stattdessen, dass wir diese ganze Sache in hinteren Ticks haben, und dieses Zeichen befindet sich direkt neben der einen Taste auf der Tastatur und alle unsere Variablen werden eingewickelt. Umarmungen durch ein Dollarzeichen und, wie Sie sehen können, sind variabel ist jetzt in einer anderen Farbe hervorgehoben, und jetzt brauchen wir das Plus nicht mehr oder das Zitat funktioniert. Also hier haben wir eine andere Variable und wir können diese unnötigen Zeichen jetzt loswerden. Wie Sie sehen können, ermöglicht die Essex uns, prägnantere Strings mit Template-Strings zu haben. Es liegt wirklich an Ihnen, was auch immer verwendet werden soll. Aber wissen Sie nur, dass mehr und mehr Temple Strings in dem Job-Skriptcode erscheinen, den Sie in der Zukunft sehen. Lassen Sie uns alles noch einmal testen. Ich werde das retten. Gehen Sie zurück zur React-Anwendung und suchen wir die Beatles. Hier ist unsere holen Sie Ihr L für die Beatles. Da gehen wir hin. Wir haben noch ein Jason-Objekt. Sie sind bekannt für britische Invasion, klassischen Rock, Mercy Beet, Proto Punk, psychedelischen Rock und Rock großartig. Es funktioniert immer noch, also gehen wir zum nächsten Abschnitt über, in dem wir tatsächlich Code implementieren, um die Daten in Reaktion zu erfassen 8. Daten mit einer Url fließen: da wir eine funktionierende Fetch Ihre Hilfe erstellt haben. Die Daten über Künstler von Spotify Eyes a p I. Wir müssen einfach den Code implementieren, der diese Daten in unserer React-Anwendung erfasst. Wir können Essex Java-Skripte nutzen. Fetch-Funktion, die Anfragen in JavaScript Coat behandelt, müssen wir einfach angeben sind Fetch Terrell als ersten Parameter und dann ein Objekt als zweiter Parameter in Bezug auf einen Methodenschlüssel und die Methode, die verwendet wird und wo. Anfrage beschäftigen wir uns hauptsächlich mit Postmethoden und erhalten Methoden. Post-Methoden senden Daten an einen Server oder eine Unternehmensdatenbank, je nachdem, was der Benutzer auf einer Webseite bereitgestellt hat. Allerdings erhalten Anfragen Daten über das Web abrufen, und unser Fetcher L ist ein Beispiel für diese get-Methode. Lassen Sie uns also die Methode mit der Fetch-Funktion auslesen. Also zuerst wird die Fed Null angeben. Dann wird unser zweiter Parameter dieses Objekt sein. Wir werden einen Schlüssel der Methode haben und sagen, get now. Diese Daten allein werden sich nicht ausreichend erweisen, um die Fetch-Methode in JavaScript zu greifen , gibt Versprechen zurück und ein Versprechen in JavaScript ist einfach Code, der von einer Funktion zurückgegeben , die Daten darstellt, die jetzt verfügbar sind oder nie. In diesem Fall überprüfen wir nach dem Versprechen in einer sogenannten Callback-Funktion in JavaScript mit einer anonymen Pfeilfunktion. Also hier ist unser Anruf. Zurück in einer damaligen Aussage, werden wir eine Antwort haben. Variabel. Und hier kommt unsere anonyme Pfeilfunktion, und im Moment, das ist Council dot log diese Antwort, um zu sehen, wie es aussieht. Ich frage mich, ob das genug sein wird. Sagt er, dass es neu geladen wird? Und schauen wir uns die Beatles an. Jetzt hier haben wir eine Antwort. Wir haben einen Euro. Das ist wahr, ein Status, der in Ordnung ist, also haben wir sicherlich Informationen bekommen und hier ist unser Körper, aber es sieht nicht so aus, wie wir früher mit unserem riesigen Jason-Objekt gesucht haben, als wir unseren Endpunkt eingegeben haben . Das liegt daran, dass wir noch ein weiteres Versprechen einschließen müssen. Wir müssen die Antwort zurückgeben. Jason-Funktion aus dieser Versprechensvariablen. Dann haben wir in dieser Zeit noch eine Dell-Aussage. Das ist Consul Log der Jason, der zurückgegeben wird, wenn ich rette. Ich denke, wir werden Whitney durchsuchen. Benutze es. Es ist dein hier. Wir haben ein Künstlerobjekt, und da gehen wir. Sieht das nicht aus wie das Jason-Objekt, das wir vorher mit den Anhängern Extern gesehen haben, Ihr l ist ihr I d. Einige Bilder. Großartig. Wir haben gerade Fetch in Essex implementiert. JavaScript. Nun, da wir Daten in unserem Code erfassen, lassen Sie uns mit diesen Informationen ein Profil erstellen. 9. Das Künstlerprofil erstellen: mit den Abrufdaten aus diesem Jason können wir den resultierenden Artist-Tour-Status für die Anwendung hinzufügen, da wir unsere Anfrage auf immer einen Künstler beschränkt haben, das Künstlerobjekt innerhalb des J Song immer nur einen Gegenstand in seinen Artikeln hat. Schlüssel des Objekts des Künstlers. Also lasst uns seine geschweiften Klammern ändern, damit wir anfangen konnten, den Jason in mehr als einer Zeile zu manipulieren und dann den Künstler als Jason zu erklären. Die Künstler, die Items Nullkomponente in diesem Artikel rechts. Aber Rat protokolliert nicht den Künstler für jetzt, um zu sehen, wie es aussieht. Wie sie sagen, wird die Anwendung neu geladen. Schauen wir uns einen Bruno Mars an, und hier haben wir Künstler. So können wir jetzt einfach den Zustand unseres Künstlers auf Künstler setzen oder eine Musikkürzel verwenden, wenn der Schlüssel im Wert gleich ist. Und dann, natürlich, müssen wir Künstler initialisieren, um sehr wichtig zu wissen, dass Sie es als Nein im Ausgangszustand haben . Also lassen Sie uns speichern und die Künstler und aktualisieren. Jetzt wollen wir ein Profil für diesen Künstler erstellen. Lassen Sie uns an einer Profilkomponente zur Quelle weitergehen. Vollständig neues Dateiprofil dot gsx. Wir werden voran bei der Standardantwort gekocht, also ist es Import reagieren und die Komponente von reagieren, um uns im Voraus vorzubereiten. Lassen Sie uns das importieren, sagt er. Lassen Sie uns unsere Komponente auf der Profilklasse Erweitert Komponente erweitern Bevor wir etwas anderes tun , lassen Sie uns dieses Profil als Standard exportieren. Jetzt gehen wir voran und Orender Return genäht JSX für jetzt mit einem Diff, das nur Profil sagt. Nennen Sie einen anderen, der Profilfollower sagt. Das nächste, was wir tun müssen, ist die Standard-JSX, die wir zuvor für das Profil hatten, durch die tatsächliche Profilkomponente zu ersetzen , die wir gerade erstellt haben. Lassen Sie uns den Beweis von aus Profil importieren und es scheint, als hätte meine sofort funktioniert. Nun könnten einige von Ihnen eine fehlende Modellluft bekommen. Wenn Ihnen das passiert, gehen Sie zurück zu Ihrem Terminal, um den Server neu zu laden. Nein, ich bekomme nicht die Luft, aber ich bekomme eine Warnung, dass ich das Profil nicht benutze. Lasst uns weitermachen und es benutzen. Und jetzt und das nächste, was ich werde es tun. Nur argumentieren, um das Profil hat Requisiten Künstler Requisiten des Staates des Künstlers cool, so wie das speichert die Warnung verschwindet, Ich werde Profilname Profil Anhänger, was wir hier und in unserer Rendermethode angegeben. Lassen Sie uns voran gehen und Orender diesen Stopp Ernte, damit wir sehen können, ob der eigentliche Künstler da ist, wenn wir vorher einreichen. Ordnung, also hier haben wir in unseren Requisiten, Künstler ist nein. Aber sobald ich Bruno Mars vollständig betrachte, sehen wir, dass der Künstler nicht weiß, dass wir ein komplettes Objekt mit unseren Künstlern haben. Informationen. Großartig. Also für jetzt soll ich ein Künstlerobjekt deklarieren. Ich werde sagen, sein Name ist leer und hat eine Follower-Anzahl von insgesamt, die Blake ist. Und dann, wenn dieser Requisitenkünstler jemals nicht weiß, werden wir den Künstler in den Stock Requisiten Künstler wechseln. Also im Wesentlichen, was passiert hier? Künstler ist in der Regel nicht in Requisiten, aber sobald Render sieht, dass unsere nicht nein ist, anderen Worten, dass es Daten in Requisiten hat. Wir werden seine anfänglichen Künstler zu diesem Requisiten Künstler ändern und jetzt können wir dies auf die Standardkünstler ändern Nicht in diesem einen auf die Standard-Künstler bis Follower nahm Let's save. Nehmen wir diesen Teil hier raus. Nein, wir werden Bruno Mars durchsuchen und dann, sobald es nicht weiß, sehen wir Bruno Mars als Namen auftauchen und dann scheint seine Anzahl von Followern ungefähr 5.300.000 zu sein. Also keine große Sache. Ich muss wohl, aber gib mir ein paar Monate und erreiche die gleiche Nummer. So großartig, wir haben einige grundlegende Informationen unten, also lasst uns weiter auf dieses Profil im nächsten Teil erweitern und es gut aussehen lassen. 10. Gestalten neuer Komponenten mit CSS: Lassen Sie uns auf die Profilkomponente erweitern. Wir möchten ein Profilbild einschließen. Natürlich. Lassen Sie uns den Namen blockieren, wie es ein Follow-Konto war, und dann werden wir auch eine Liste ihrer Genres hinzufügen. Bevor wir dies tun, jedoch können wir jedochdas oben genannte verkürzen. If-Anweisung mit Turner-Ausdruck. Lasst uns einfach nachsehen. Der Künstler hat es nicht gewusst. Wenn nicht, schicken wir es hierher. Stopp Requisiten der Künstler. Sonst haben wir es als ernsthaft selbst. Wir können es noch weiter verkürzen, indem wir dieses ganze Objekt herausnehmen und es durch den Künstler hier drüben ersetzen . Aber ich habe das Gefühl, dass eine Zeile viel zu lang sein würde, und es sieht eigentlich einfacher aus mit diesen beiden Zeilen hier drüben. Jetzt werden wir mit einem Profilbild umgehen. Also noch einmal, lassen Sie uns Benutzer oder einen Künstler suchen. Bruno Mars. Wir konnten eines ihrer Profilbilder sehen, indem wir zu Bildern im ersten Objekt gehen, und dass Sie waren. Wir wollen immer dem Muster folgen, das sie für Sie im Jason-Objekt zur Verfügung stellen. Auf diese Weise ist es einfacher, weil das ein Muster ist, das wir verwenden. Also Bilder sind kein Array und dann Hüte, Objekte, Objekte, also initialisieren Sie hier ein leeres Objekt und dann haben wir ein Europa, das jetzt Anti ist. So können wir das jetzt nutzen, indem wir hier ein Bild mit einem normalen Bild haben. HTML oder einfach nur Bilder extrahieren und JSX haben immer eine Alternative für den Fall, dass kein bereitgestelltes Bild für alternative Profil sein wird. Wir werden ihm einen Klassennamen geben, damit wir später sein eigenes Styling des Profilbildes geben können . Und dann sind unsere Quelle Künstler Punktbilder und das Null-Objekt und es ist Sie. Also ist es sicher. Schauen wir uns Bruno Mars noch einmal an und dass es ein riesiges Bild von Bruno Mars gibt. Also offensichtlich müssen wir noch etwas Styling hinzufügen. jedoch Lassen Sie unsjedochdie Komponente des Genres erstellen. Jetzt wirkt das Genre wie in Ordnung. Es ist eine Liste, also muss jemand über das Array des Jonahs auf so einfache Genre-Artikel in ihm abbilden. Also, Genres, wie Sie sehen können, ist er in einem Wrack. Lassen Sie uns hier ein leeres Array innerhalb unseres ursprünglichen Objekts deklarieren, und dann müssen wir über die Genres innerhalb dieser Funktion abbilden. So glücklicherweise JavaScript-Schiffe der Matte-Funktion für eine Erhöhung, die uns erlaubt, über sie für jetzt Karte einfach über jedes Genre mit einer anonymen Zeitfunktion abbilden. Sie werden das Genre innerhalb einer Spanne umwickeln, nur extrahieren, um zu sehen, wie es aussieht. Spender ist nicht definiert. Das ist, weil wir Künstler Sprünge Genres wollen. Es ist also wie jemand anderes. Die Deals. Es gibt wieder ein riesiges Bild von ihnen, und der Grund dafür ist, dass wir vergessen haben, sogar den J-Sex zurückzugeben. Es ist genau so, als ob die Rendermethode den J-Sex zurückgeben muss. Die Map-Funktion muss auch die JSX zurückgeben, wie sie von dieser Luft genau hier angegeben wird, wobei erwartet wird, dass sie einen Wert in dieser Funktion zurückgeben. Also, wenn Sie sparen, versuchen wir die Beatles noch einmal. Ehrfürchtig. Hier können Sie alle ihre Genres sehen, die noch nicht suchen müssen. Und hier haben wir eine Warnung. Jedes Kind, in einem Seltenheitsbelüfter, sollte eine einzigartige Schlüsseleigenschaft haben, so dass es erwartet, dass jeder Schlüssel oder jede Spannweite eine bestimmte Eigenschaft hat. jedoch nicht unbedingt wissen, Wir könnenjedoch nicht unbedingt wissen,dass alle Genres einzigartig sind, so dass Sie das Genre nicht nur als Genre haben können , aber zum Glück kommt sogar diese Funktion mit dem Abschnitt optionalen Argument des Index und wir könnten dies alles nennen, was wir Indexschlüssel genannt werden wollen oder ein wir nennen es einfach K kurz. Dann haben wir den Schlüssel beim Kick. Wir speichern es Nachladungen. Schauen wir uns noch einmal die Beatles an und da gehen wir. Diese Warnung verschwindet jetzt. Wir wollen natürlich einige Abstände dazwischen, und wir wollen wahrscheinlich ein paar Kommas dazu. jedoch nicht, Wir möchtenjedoch nicht,dass ein Komma am Ende der Liste erscheint, also können wir nicht einfach ein Leerzeichen in einem gemeinsamen hier machen. Um es zu beheben, müssen wir Vaterschaftsausdruck verwenden, um zu überprüfen, ob das Genre nicht das letzte Element innerhalb des Arrays ist . Denn wenn nicht, fügen wir ein Komma hinzu. Wenn dies der Fall ist, werden wir kein Paar hinzufügen. Wir fügen einfach ein Leerzeichen hinzu, damit es ein Genre gleich ist. Wir prüfen, ob das Genre nicht das letzte in der Liste ist. Suchen Sie also den letzten Indexwert. Wir finden den letzten Indexwert, indem wir einfach die Länge minus eins betrachten, die immer der letzte Indexwert sein wird. Es ist also nicht der letzte nächste Wert gut, in einem Raum mit dem Genre. Hier kommt unsere Schrumpfvorlage hatte es comin. Ansonsten haben wir einfach und Aussage für unsere letzte im Genre selbst. Und mal sehen, wie das aussieht. Genres ist also nicht definiert. Wieder einmal wollen wir Künstler Dot Genres einen Künstler. Dutch ehrt hier. Also schauen wir uns die Beatles an und die Luft des Genres sieht eigentlich ziemlich schön aus. Also lassen Sie uns dieser ganzen Sache etwas Styling hinzufügen. Gehen wir weiter und wickeln Sie alle diese Textinformationen in ein separates Ttiv. Es wird Miss Ttive Profilinfo nennen. Lassen Sie uns jede dieser Klassennamen als auch geben, so dass dieser ein tiefer Name sein wird. Dieser wird Profilfollower sein, und dieser wird Profilgenres pro Datei sein. Und jetzt können wir anfangen, das CSS anzugehen. Lassen Sie uns einen neuen Abschnitt für Profil hinzufügen und ich drücke Befehl Slash, um das zu tun. Automatisches Kommentieren unseres Profilbildes. Das erste, was wir tun werden, ist eine Anzeige von Flex für unseren Verkauf hinzuzufügen. Wir nutzen Flex. Es erlaubt uns, Teile des Bildschirms bestimmten Elementen zuzuweisen, so dass sie sich in Bezug zueinander erweitern können , basierend auf ihren Flex-Nummern und Anliegen der verschiedenen Gerätegrößen und -formen. Es ermöglicht auch eine sehr einfache Ausrichtung in Bezug auf Achsen, die durch die just by content , property und align items -Eigenschaft gesteuert , werden. So ist es wirklich einfach, Dinge zu zentrieren. Lassen Sie uns sehen, wie flex funktioniert, wenn wir Ihr Profil ändern. So haben wir ein Display Flex nur nach Inhalt, alles in die Mitte. Ein Profilbild natürlich ist natürlichviel zu groß. Aber wir können das beheben, indem wir ein innerhalb der Höhe zuweisen, und wir werden es 150 Pixel für jetzt machen. Auch wie die Dinge eine Grenze zu geben, um ihn hervorzuheben. Dies ist eine persönliche Präferenz von mir, aber Sie können voran gehen und eine andere verwenden, wird es weiß oder einen Text machen. Ein Dezimaläquivalent, das F f f und der Randradius ist, da ich ein Kreis sein möchte, wird genau die Hälfte der innerhalb der Höhe sein. Also senden Sie fünf Pixel und dann werden wir sein Objekt fit zu decken. So sieht es schön aus wie ein Bild. Also ich, die Beatles und sehen, dass es schon beginnt, wirklich schön aussehen. Wir müssen nur diesen Text hier rüber sprengen. Lassen Sie uns den Profilnamen ändern wird seine Schriftgröße größer und erhöht auf 26 Pixel . Auch die Profilfollower. Ich wollte eine anständige Telefongröße haben, die nicht so groß ist wie der Name, aber immer noch signifikant ist. Nehmen wir an, 18 Pixel sowie die Genres werden eine Größe von 18 Pixel haben, um sicherzustellen, dass ich Dinge richtig buchstabiere und Profil-Genres. Da gehen wir. 40 sehen viel besser aus. Das Letzte, was ich tun möchte, ist im Grunde zentriert. All diese Profilinformationen ein wenig besser, also gehen wir zum Profil-Info-Tag. Wenn ich das Profil öffne, wird Info ihm einfach einen Rand von 10 Pixeln geben, weil wir Text, alles nach links ausrichten und nicht wollen, dass es das Profil berührt, und das sieht gut aus. Jetzt. Das nächste, was Sie tun möchten, ist, dass dies Anhänger hat. Sieht vorerst wie eine Zufallszahl aus. So sagte ich, Anhänger hier drüben. Noch einmal, schauen wir uns die Beatles an und cool. Wir haben vorerst ein sehr gut aussehendes Profil. Lasst uns weitermachen 11. Die Fetch erweitern: Da wir eine funktionierende Profilkomponente haben, wollen wir diese Künstlerinformationen erweitern, indem wir eine Liste ihrer beliebtesten Tracks erfassen und sie spielbar machen. Bevor wir das tun, jedoch können wir unseren Code jedochein wenig für einige Korrekturen der Benutzeroberfläche ändern und nur um ihn lesbarer zu machen . Zunächst einmal, lassen Sie uns etwas von unserem Code im Profil Dajae-Sex reformieren, um es sauberer zu machen. Ich werde das erfinden, weil es online ziemlich groß aussieht, wie immer, mein Harnausdruck. Ich werde dieses Fragezeichen mit dem Gleichheitsprüfungs-Check in Einklang bringen, und das sieht schon besser aus. Lassen Sie uns auf seinem Gesicht nach den Anhängern vor den Followern und kühlen Sie jetzt mit einem app dot jsx . Ich möchte diese Vorlage nicht sehen, bevor er überhaupt nach etwas gesucht hat, so dass das temporale im Profil und in der Galerie gemacht wird. Lassen Sie uns das hier drinnen platzieren, und dann zeigen wir es erst, wenn der Zustand des Künstlers es nicht ist. Nein, es ist also nicht sicher, dass wir das Profil zeigen. Wenn es Nein ist, zeigen wir, dass es getan hat. Das hat nichts dabei. Lasst uns retten. Hier ist die Sache mit nachfolgenden Dibs, die wir in Dave einwickeln müssen, in einander oder in einem anderen Tod. Auf diese Weise haben wir nicht reagiert, wenn wir uns beschweren. Und wenn wir sparen, ist alles in Ordnung. Jetzt, wenn ich nach einem Künstler wie Bruno Mars suche, erscheint das Template ing erst dann, wenn der Künstler gültig ist. Cool. Jetzt können wir einen Künstler holen. Top Tracks. Gehen wir zurück zum Profil und auch innerhalb eines anderen Browsers oder Tabs. Navigieren Sie zurück zum Spotify a p I. Dieses Mal werden wir die Informationen aus dem Spotify im Artist Bereich wollen. Sie wollen in Punkt finanzieren, der sagt, Künstler Top-Tracks bekommen. Also, was für ein P ich bekomme Künstler Top Treks. Wie Sie sehen können, funktioniert der Endpunkt ziemlich einfach, genau wie zuvor. Wir müssen eine HTTP-Get-Anfragen verwenden, um die Jason-formatierten Daten für einen Künstler zu greifen . Top Tracks innerhalb unserer l. Wir geben einfach das I D der Künstler an, die wir bekommen möchten, also wird es diesen Endpunkt hier drüben kopieren. Gehen Sie zu Ihrer Suchfunktion. Pace es als das Album, das du warst. Ich werde es Alba Mural Constant nennen. Das war es. Nehmen Sie das Ende hier rüber, also geht es jetzt bis zum Künstlerbereich. Zum Glück, wenn wir Künstler hier drüben deklarieren, hat es bereits eine I. D-Eigenschaft, so dass wir das nutzen können, um nach ihren Top-Tracks zu suchen. Also, nein, wir können diese Wette ändern, du warst ich, um ein paar Alben zu holen. Wir haben wieder einen Tipp, der uns vorhält. Unser 1. 1 wird Album Euro Schrägstrich dann der Künstler, dass ich d. Dann wollen wir Ihre Stärke beenden wird Top-Tracks sagen. Und schließlich ist der notwendige letzte Teil der Ländercode. Und im Moment können wir einfach die USA benutzen und der Grund Grund, warum es erforderlich ist, ist, weil Spotify und macht es erforderlich. Wenn Sie also außerhalb des uns sind oder Anfragen aus einem anderen Land erhalten möchten, gehen Sie weiter und klicken Sie auf diesen Link hier. Es verlinkt zu einem Wikipedia-Artikel. Wo sind alle relevanten Ländercodes vorhanden? Jetzt? Wir müssen einfach die Suchfunktion verwenden, wenn alle das gleiche Muster wie zuvor, von Versprechen ein Versprechen, den Jason zurückzugeben, die wir brauchen. Also holen wir auf dem Abruf Null. Unsere Methode ist natürlich natürlich noch und dann werden wir eine Antwort zurückgeben, und wir deklarieren im Grunde die Variable. Und dann geben wir den Jason zurück, den wir wollen. Hoffentlich werden dies die Künstler, Künstler, Künstler, Top-Tracks und Jason sein. Also lassen Sie uns überprüfen, ob das tatsächlich funktioniert. Gehen wir zurück, um die Anwendung in unserem fünften Jahr zu reagieren. Ich erinnere mich, dass wir als konstante Gut erklärt haben, da wir es deklarieren, sollten wir ein Let deklarieren. Auf diese Weise ist es modifizierbar. Es ist Nachladen. Schauen wir uns Bruno Mars an. Und wie wir mit diesem holen Null sehen können. Ich habe hier einen zusätzlichen Schrägstrich hinzugefügt, also lasst uns diesen Schrägstrich herausnehmen, den ihr wahrscheinlich erwischt habt. Versuchen wir es noch einmal. Bruno Mars und großartig. Sieht aus, als hätten wir ein paar Top-Tracks und hier sind sie alle. Sie haben eine Vorschau aus und ich d. Der beste Teil ist, hat ein Album Objekt, wo wir einige spielbare Dateien finden können. So groß jetzt, dass wir Tracks Logging, lassen Sie uns vorbereiten und sagte, dass diese Spur so lassen Sie Spuren eher, Const. Tracks gleich Jason Tracks und wir werden Sepa Zustand der Spuren. Zwei Spuren. Denken Sie daran, wir können eine theistische Abkürzung verwenden. Es war natürlich an den Tresor zwei Spuren . Er möchte, dass Sie Spuren zu einer Anti Vergewaltigung initialisieren und dann endlich, hier ist ein weiterer Jahr sechs-Trick, wenn der Variablenname und der Schlüssel, auf den wir innerhalb einer Funktion oder einem Objekt zugreifen möchten , genau der gleiche ist. Wir können hier nur sehen, dass Spuren Jason Now gleich sind. Dies ist besonders nützlich, wenn Sie mehrere Variablen gleichzeitig deklarieren, wenn Sie versuchen, mehrere Schlüssel eines Objekts zu greifen. Also, zum Beispiel, wenn ich Tracks und Alben Künstler hier und Jason hatte jede dieser Schlüssel, würden wir alle drei dieser Variablen auf einmal deklarieren. Wir bekommen nur einen, , also sagen wir einfach,Tracks zu speichern. Schauen Sie sich die Beatles für eine Abwechslung an. Da also alles funktioniert, können wir fortfahren, eine Galerie für all diese Tracks zu erstellen und natürlich sie natürlichspielbar zu machen. 12. Eine Galerie erstellen: wir haben Spuren Interstate für die Anwendung. Daher können wir sie an eine neue Komponente weitergeben, die sie rendert. Wir nennen diese Komponente unsere Galeriekomponente. Lassen Sie uns eine neue Galerie Punkt JSX Datei in unserem Quellordner Galerie dot jsx erstellen. Lassen Sie uns nun den Standard-Komponentencode reagieren und folgen Sie dem gleichen Muster, das wir unsere Komponenten haben , bevor wir reagieren und die Komponente von reagieren, werden wir bei Punkt CSS importieren. Wir werden die Galerie-Klasse deklarieren und Komponente erweitern. Selbstverständlich exportieren wir den Katalog standardmäßig als Standardkomponente. Jetzt ist es auf dem Bildschirm rendern und zurückgeben, was JSX wir für Nein brauchen, lassen Sie uns eine Galerie tun und dann auch Council Dot protokollieren die Galerie Requisiten. Cool. Lassen Sie uns die Galerie jetzt nach Profil Importieren Galerie von und stellen Sie sicher, dass Sie es in der Zeichenfolge aus Galerie tun . Lassen Sie uns das nicht durch unsere eigentliche Galerie ersetzen und sagen, dass wir wollen, dass die Spuren als Requisiten durch diesen Anwendungszustand übergeben werden . Los geht's. Schauen wir uns einen Künstler an. Wie wär's mit Billie Joe? Also Galerie-Requisiten. Wir sehen ein paar Tracks und da gehen wir, und auch ich merke etwas Styling. Manchmal zerquetscht werden, also lasst uns das jetzt reparieren. Eine einfache Lösung besteht darin, zu den Profilinformationen zu gehen. Gib ihm einen Flex, erkläre es. So hat es immer eine gewisse Dimensionierung. Da gehen wir. Aber jetzt macht es für ein wenig sq. Wir müssen die Flex-Richtung jetzt in Collender ändern, da es standardmäßig Zeile ist, die umgekehrt ausgerichtet ist. Schließlich betrachten wir die Dinge ein wenig besser mit dem rechtfertigen Inhalt des Zentrums. Schön. Gehen wir zurück zur Galee-Komponente jetzt, da wir Requisiten haben, die sich nach uns sehnen, um all diese Requisiten im Array zu rendern, mussten wir die JavaScript-Map-Funktion wieder nutzen. zunächst Lassen Sie unszunächsteine Konstante von Spuren festlegen, die diesem entsprechen. Requisiten, die Tracks Erinnern Sie sich an den Essex-Trick, den wir vom letzten Wir können dies verkürzen, indem wir nur Spuren innerhalb einiger Klammern machen es auf diese Stopp-Requisiten setzen. Dies wird nützlich sein, wenn wir andere Schlüssel und Variablen hatten, auf die wir als Requisiten zugreifen und in einer Zeile deklarieren wollten . Jetzt können wir über die Gleise kartieren und wir können dies eine Spur nach dem anderen machen. Wir stellen sicher, dass wir unseren Index als K oder bereit haben, verwenden wir diese anonymen Pfeilfunktionen in der Steuer. Für jetzt, lass uns insgesamt zurückkehren, Dave mit einem Schlüssel. Okay, es ist Klasse. Name soll Trek sein. Dann haben wir ein Bild drinnen. Jetzt, mit einem Selbst im schließenden Tag, wird seine Quelle Spurbild sein. Es wird auch einen Klassennamen des Spur-Dash-Bildes geben. Ein Abwechsler. Allerdings müssen wir dieses Spurbild deklarieren. Jetzt. Ich werde sagen, dass die Kosten Frank Bild gleich Track Dot Album Die Bilder Erstes Element nicht Ihre eigenen. Bevor wir dies speichern, denken Sie daran, dass wir all dieses JSX innerhalb der Kartenfunktion zurückgeben müssen, obwohl wir es bereits hier, aber in der Renderfunktion zurückgeben, da dies eine Bevor wir dies speichern, denken Sie daran, dass wir all dieses JSX innerhalb der Kartenfunktion zurückgeben müssen, obwohl wir es bereits hier, aber in der Renderfunktion zurückgeben, völlig neue Fertigkeit weiterzuziehen. Wir wollen auch die Namenseigenschaft. Lassen Sie uns ein P-Tag für Absatz deklarieren. Der Klassenname wird Trek-Text sein und dann greifen wir auf den Tracknamen zu. Alles klar, lass es uns testen, noch mal einen Bruno Mars haben, und sieh dir all diese Tracks an, die so riesig sind, dass wir sie definitiv etwas besser stylen können. Also ist es Kopf Zehe App Punkt CSS für einige Styling-Änderungen. Jetzt sind wir in den Pantry Komponenten Ich werde Befehl Schrägstrich machen, um zu kommentieren oder zu verfolgen. Er wird etwas Styling haben. Zuerst war es, die mit 2 220 Pixel sowie einer Höhe zu ändern. Haben Sie unter 20 Pixel? Wir geben ihm einen Rahmen von drei Pixeln, massiv und weiß, das ist F F F und Hexi Dezimal. Wir geben ihm einen Grenzradius um die Dinge herum. Ein bisschen von drei Pixeln. Wir werden es einige Polsterung von 10 Pixeln geben. Lassen Sie uns alle seinen Text links ausrichten. Hier ist ein ordentliches Feature später auf einem, um es klickbar zu machen. Also bei einer Cursorkomponente von Pointer jetzt unser Track-Bild, es wird immer noch so groß sein. Ich wollte nur so groß sein wie die Strecke. So wird die gleiche Breite und Höhe erben. Machen Sie beide 220 Pixel breit und 2020 Pixel. Ton. Dieser wird die gleiche Grenze haben. Die drei Plektren solide. Warten Sie, es ist Grenze Radius wird drei Pixel. Kurs wird es Objekt machen. Ausgewählt, um zu decken, so sieht gut aus und seine Position wird absolut sein, bevor wir weitermachen. Lassen Sie uns alle diese Spuren relativ machen, so dass sie Seite zu Seite ausrichten, so sieht schön aus. Unsere Wanderung muss eine Anzeige von In-Line-Block haben, der ziemlich gut aussieht, und die Dinge sind ein wenig außerhalb der Mitte Haken. Nun, anstatt ein Klopfen auf der Innenseite zu haben, geben wir ihm tatsächlich einen Rand auf der Außenseite. Also die Dinge Luft zentriert und verteilt. Außerdem bin ich mir nicht sicher, ob sie einen Grenzradius auf der Außenseite für die Strecke benötigen, geschweige denn die Grenze, und das sieht eigentlich perfekt aus. geschweige denn die Grenze, Cool. Ich glaube, es ist auch ansprechbar, also lasst uns weitermachen und die Größe ändern. Und da gehst du. Sie können alle ihre Spuren sehen. Schön. Suchen wir einen Künstler mit einigen dunkleren Albumcover wie Michael Jackson. Dort dieser weiße Hintergrund wirklich gut aus. Nun kümmern wir uns um den Tracktext. Wir wollen den Namen sehen. Natürlich kurze Track-Text. Wir haben eine Hintergrundfarbe von Schwarz, die Farbe von Weiß, und was wir tun werden, ist, dass wir den Text über dem Bild mit einem schwarzen Rechteck dahinter zeigen . So steht es auf, dass hintere Reihe benötigt 75% Kapazität mit 220 Pixeln und was nimmt eine Linie es in die Mitte. Und so zeigt es sich über die relativen Spuren wird seine Position absolut machen. Mal sehen, ob das nah genug ist. Jetzt sieht es ziemlich gut aus. Es ist auch ein bisschen warum, obwohl ich nicht will, dass es die ganze Grenze bedeckt. Also, wenn Sie es 214 machen, ist es sicherlich kleiner, aber wir müssen es noch eine Marge geben. So ist es eigentlich von drei Pixeln zentriert. Süß und dann will ich das nicht oben auf der Unterseite sein. Also, als ich sagte, es ist die untere Ausrichtung auf Null Great, das sieht besser aus. Mr. Bruno Mars, nur um zu sehen, wie er aussieht. Sehr cool. Alles klar, das war eine Menge CSS. Noch eine Sache, wenn wir uns nur etwas Polsterung geben, damit wir sehen können, dass Regie ein wenig besser. Alles klar, das sieht ziemlich nett aus. Lassen Sie uns fortfahren, um diese Tracks tatsächlich spielbar zu machen 13. Audio-mit JavaScript spielen: Jetzt, da wir alle unsere Spuren auf dem Bildschirm rendern, lassen Sie uns tatsächlich spielbar machen. zuerst Lassen Sie unszuerstdieses Council Dot Log für die Galerie entfernen. Stattdessen gezupft. Lassen Sie uns jede Spur in die Konsole einloggen. Überprüfen Sie seinen Inhalt so Rat Punkt Protokoll Spur Spur. Lassen Sie uns die Suche nach einem neuen Künstler oder dem gleichen speichern. Wir haben nach brutalen Jungs gesucht, und wie ihr hier sehen könnt, hat jeder Track eine Vorschau. Dies ist eigentlich eine Sounddatei, die wir durch das Pacing des Links in einer Vorschau anzeigen können. Wie Sie sehen können, kommt jeder Track mit seinem eigenen Süden. Jetzt können wir JavaScript-Audio-Objekt Toe nutzen, tatsächlich den Soundbiss aus unserer Anwendung abspielen. Alles, was wir tun müssen, ist ein neues Audio-Objekt zu deklarieren, argumentierte es. Die Vorschau wird als erstes Argument ausgegeben. Lassen Sie uns eine neue Hilfsmethode innerhalb unserer Galerie-Klasse erstellen. Wir nennen diese Pest Audio, und wir werden ein Argument haben, das ist die Vorschau Ihrer anderen. Lassen Sie uns ein neues Audio-Objekt Capital Audio erklären, argumentierte er. Die Vorschau u R L als Konstrukt. Dann rufen wir einfach Audio Dot Play an. Oh, lasst uns diese Methode zwei anhängen. Immer wenn der Benutzer auf einen der Spuren klickt. Denken Sie daran, dass wir eine anonyme Zeitfunktion verwenden müssen. Wir nennen dies kein Audio auf die Spuren abspielen. Vorschau. Du warst draußen. Mal sehen, ob dies als ein sparendes Nachladen funktioniert. Es ist noch einmal wie ein Bruno. Lassen Sie uns auf dem Boden nach Sotschi suchen. Awesome! Wir haben Sound los, aber nur gestoppt, weil ich mein System stummgeschaltet habe. Lassen Sie uns also darüber nachdenken, im nächsten Video zu pausieren und wiederzugeben. 14. Eine Spuren anhalten: Jetzt, da wir spielbare Tracks haben, sollten wir in der Lage sein, pas um, für den Fall, dass ein Benutzer möchte einen anderen Titel spielen oder einfach stoppen, den aktuellen Track von Zulassung Ton. Zunächst einmal, lassen Sie uns die Umschaltung Ihrer anderen zu implementieren, so dass wir immer eine aktive spielen Ihre L in Zustand als spielen Ihre Gesundheit. Also lassen Sie uns hier einen Konstruktor hinzufügen. Da wir jetzt Zustand innerhalb unserer Galerie brauchen, Lassen Sie uns unser Zustandsobjekt löschen und wir werden sagen, dass Ihr L jetzt spielen ist eine leere Zeichenfolge. Großartig. Jetzt müssen wir wirklich erkennen, ob wir etwas spielen. Wenn wir auf einen LKW drücken wird verfolgen, wie auch das Audio-Objekt derzeit in Zustand zu halten. So ist es ein Audio jetzt ist nein. Außerdem müssen wir überprüfen, ob etwas tatsächlich gespielt wird. Also haben Sie eine Spielfliege. Und natürlich natürlich am Anfang nichts, spielt am Anfang nichts, also ist das Spielen falsch. Zunächst werden wir überprüfen, ob es momentan nichts spielt, denn wenn es nichts spielt, erstes wollen wir das auf Sie spielen. Lassen Sie uns die erste Audiowiedergabe entfernen, dann wollen wir einen Zustand aktualisieren. Wir werden sagen, dass Nun, jetzt tun wir tatsächlich etwas, damit die Flugzeugfliege zur Wahrheit geschickt wird. Nun, sagte die aktuelle spielen Sie sind aus, um das Vorjahr. L im Argument, und dann werden wir das aktuelle Audio-Objekt auf dieses Audio-Objekt setzen. Denk dran, ich benutze Essex-Kurzschrift. Andernfalls können wir davon ausgehen, dass das Audio bereits abgespielt wird. Es gibt zwei Szenarien, die zu berücksichtigen sind. Wir wollen verhindern, dass das gleiche Audio abgespielt wird oder wir wollen das Audio wechseln. Also, wenn die Vorschau oder L ist gleich dem Zustand des Flugzeugs, Ihre l, können wir davon ausgehen, dass wir das Audio pausieren sollten. Das Audio wird unter diesem Gedanken gespeichert. Geben Sie das Audio an. Also lasst uns bei diesem Start eine pas Funktion verwenden. Bleiben Sie das Audio und dann gut, sagte der Zustand spielen Es ist eine falsche Andernfalls, In diesem Fall, wir sind einfach stoppen die aktuelle Audio und dann spielen die nächste. Wir stoppen also das aktuelle Audio, indem wir es pausieren , das nächste abspielen , das nächste abspielen und dann den Zustand aktualisieren. Also ändern wir unsere Spielvorschau Your Alatorre. Deine ich spiele ist jetzt wahr, natürlich, und dann schicken wir wieder unser Audio-Objekt. Lassen Sie uns die Reihenfolge wechseln, um das oben zu speichern würde. Wir haben eine neue Logik hinzugefügt. Also lasst uns gehen und es testen. Mal sehen, ob es immer noch spielt und es tut. Können wir es pausieren? Und da gehen wir hin. Es ist pausiert. Hier ist noch eine. Was ist, wenn wir sofort wechseln? Großartig. Es scheint, als würde alles funktionieren. Jetzt, da wir volle Pause- und Wechselfunktionalität haben, fügen wir einfach einige Animationen zur Anwendung und etwas Styling hinzu, um das Ganze zusammenzubinden . 15. Animiertes Styling: nie hatten wir Pause, Abspielen und Stoppen von Audio. Es wäre schön für den Benutzer, mehr Feedback über die genaue Funktionalität jeder Spur zu haben , wie es geht nach oben Prozess Symbol schwebt über jede Spur ohne eine wirklich schöne Funktion , auch, so dass jeder Track ist spielbar. Und warum nicht in Animation geworfen, um die Anwendung um so dynamischer zu machen? Machen wir das jetzt. Wir müssen ein zusätzliches div innerhalb der Spur hinzufügen. Dieser Dave wird Track Plane genannt. Wir werden ein weiteres DIV in das Innere einwickeln. Dieser wird Track Plate Dinner genannt werden, und dann werden wir ein kurzes Unicode-Symbol für jetzt von einem hat 9654, die im Wesentlichen wie ein rechtes Dreieck Play-Button aussieht . Großartig. Nichts wird noch angezeigt, weil wir noch die App CSS bearbeiten müssen. Lassen Sie uns einfach voran gehen und die Position der Spur spielen wird absolut sein und haben eine mit 220 Pixel und Höhe von zwei der 20 Pixel, genau wie das Bild und die Spur. Attraktiv innere hatte auch eine absolute Position, und dies steuert das Dreieck, das wir später sehen werden. Wir werden alles ins Zentrum bringen. So ist es in der Mitte, macht Spaß. Die Größe wird ein wenig größer sein. Wir wollen keine kleine Ikone, und sie werden eine BRAC um Farbe geben, weil wir einen schwarzen Kreis in unserem Dreieck eingeschlossen haben . Der Randradius dieses Dreiecks wird 30 Pixel betragen, da die Breite und die Höhe beide 60 Gurken schließlich seine Farbe weiß machen. Wir geben ihm etwas Polsterung oben von 13 Pixeln, und dann müssen wir ihm einige Ränder geben. So ist es immer noch zentriert von 80 Pixeln in einem oberen Rand von 80 Pixeln. Das sollte also für jetzt genug sein, um einen Play-Button auf dem Bildschirm zu bekommen. Also Text ausrichten. Wir müssen angeben, dass es zentriert. Ihr habt das wahrscheinlich erwischt, als ich für euch programmierte. Lass uns Bruno Mars sehen und da gehen wir. Wir haben jetzt einen Play-Button. Wir wollten nicht immer auftauchen. Wir wollten wahrscheinlich nur auftauchen, wenn wir den Mauszeiger über die L bewegen. Also für jetzt setzen wir die Kapazität auf Null. Also sei hoch das Element. jedoch Wenn wirjedochden Mauszeiger über das Omen bewegen, machen wir die Deckkraft. Gibt es einen Hinweis? Mal sehen, wie das aussieht. Wenn ich also schwebe, erscheint es. Aber wir können die Vorteile einer CSS drei Animation Keyframes Funktion nutzen, um ein wenig verblasstes Civil Call hinzuzufügen . Ein Keyframes verblassen in Zukunft. Es ist sehr einfach. Alles, was Sie getan haben, ist, einen vom Objekt aussehenden Syntaxschlüssel zu deklarieren und von Null Opazität zur Kapazität zu gehen , ist Ihr Zeiger. Und jetzt können wir spezifizieren. Der Animationsname für diese Hover-Komponente wird ausgeblendet, wie Sie hier deklariert haben. Aber dann müssen wir diese Animation Dauer oder Zeitspanne geben, die sie hier auf dem Bildschirm geliefert hat. Wir sagen eine halbe Sekunde und überprüfen es hier. Wir verblassen nicht auf dem Bildschirm. Es gibt noch eine Sache. Wenn ich Track spiele, okay, wir sollten den Play-Button nicht mehr sehen können. Wir sollten eine Pause-Taste sehen, damit wir diese Funktionalität hinzufügen können. Jetzt. Ganz einfach, wir haben hier einen Turner-Ausdruck und überprüfen einfach, ob der Zustand des Flugzeugs, dem Sie geholfen haben. Es ist Eagle zu verfolgen Vorschau Europa. Wenn es so ist, dann können wir davon ausgehen, dass wir das aber pausieren müssen. Und eine Pause-Taste sah implizit aus wie zwei vertikale Balken, die das Zeichen direkt neben den Klammern ist. Andernfalls haben wir unser normales Playbook, das Hash endet. 9654 Und noch eine Sache. Dieser Text allein wird nicht funktionieren. Wir müssen diese in Span-Tags einbinden, also verbringen wir handeln werden vergessen, dass zusätzliche Schließzeit sparen würde und überprüfen Sie es noch einmal, wenn ein JSX neu lädt. Also sieh es dir an. Wir spielen jetzt. Es ist möglich, dass wir aus dem Himmel gesperrt spielen. Wir müssen posten und großartig. Das sieht wirklich nett aus. Damit hatten wir fertig, Musik-Meister zu bauen. Ausgezeichnete Arbeit, und wir haben eine ziemlich lustige Bewerbung an ihren Händen. Ich muss sagen, wir haben alles über das Abrufen von Anfragen in React gelernt und wie man mit Daten auch über das Web umgeht. Einige neue Konzepte mit Essex Codierung und CS hat drei Animationen in den nächsten Abschnitten werden unser React-Wissen mit der Redux Library kombinieren, um das Design unserer Anwendungen zu verbessern . Auch im nächsten Teil finden Sie eine Zusammenfassung dieser Anwendung und die Konzepte, die wir gelernt sowie einige Herausforderungen. Wenn Sie sich weiter darauf ausdehnen wollen, ehrfürchtiger Job. Lass uns Cody behalten