Einführung in React: Eine Galerie erstellen

1. Einführung: Hallo, mein Name ist Travis Arnold. Ich bin Designer und Entwickler seit über 10 Jahren. Ich wurde vor ein paar Jahren zum ersten Mal in React eingeführt, und ich habe mich sofort in sie verliebt. Ich habe mich in React verliebt, weil es so gut auf die Design-Tools abbildet , die ich seit so vielen Jahren verwende. Diese Lektion ist großartig für jeden, der ein Interesse an React hatte, aber vielleicht ein bisschen Angst davor hat, sich darauf zu befassen. Wir beginnen mit dem, was React ist, warum wir es überhaupt nutzen wollen und wie es uns bei unserer Entwicklung helfen kann. Als nächstes werden wir in ein Beispiel aus der realen Welt springen und eine kleine Galerie-App erstellen, um zu sehen, wie React sein volles Potenzial ausschöpfen kann. Am Ende dieser Klasse haben Sie ein grundlegendes Verständnis dafür, wie React funktioniert, wie wir Bibliotheken von Drittanbietern einbinden und einige neuere JavaScript-Funktionen verwenden können . Bevor Sie diese Klasse nehmen, sollten Sie ein grundlegendes Verständnis von HTML, CSS und JavaScript haben. Keine Sorge, wir werden alles Zeile für Zeile durchlaufen um sicherzustellen, dass Sie das Projekt selbst abschließen können. Wir sehen, dass React jeden Tag mehr und mehr verwendet wird. Ich kann es kaum erwarten, Ihnen die Grundlagen zu zeigen, also fangen wir an. Wir sehen uns im Unterricht. 2. Was ist React?: Willkommen zu einer Einführung in React. Danke, dass Sie an diesem Kurs teilgenommen haben. Was ist React? React ist eine JavaScript-Bibliothek, die uns hilft, interaktive Benutzeroberflächen zu erstellen. Es wurde von Jordan Walke erstellt, einem Software-Ingenieur bei Facebook, und es wird noch heute von Facebook unterstützt und gepflegt. Anstelle von Schritt-für-Schritt-Anleitungen beschreiben wir, wie unsere App aussehen sollte und React kümmert sich um die Aktualisierung des DOM für uns. Zuerst werden wir mit einigen High-Level-Konzepten beginnen und dann springen wir direkt in den Code, damit wir lernen können, wie React funktioniert. React verwendet ein Konzept, das virtuelle DOM genannt wird. Es ist eine Darstellung unseres aktuellen UI-Status. Wie Sie hier sehen können, haben wir zwei verschiedene Zustände. Sie können sich vorstellen, ob Sie ein div mit zwei Tasten und einem span Tag hatten, und wir wollten eine Zahl inkrementieren oder in der Lage sein, zu dekrementieren. Nun, so könnte es aussehen, wenn wir vielleicht sagen würden, auf den Plus-Button klicken und die Zahl erhöhen wollen. React wird den zweiten Zustand sehen, zu dem wir wechseln müssen, und es könnte die Änderungen effizient div und dann in den nächsten Zustand übergehen und unser DOM für uns aktualisieren. Dies ermöglicht es uns auch, auf mehrere Ziele wie Web, Mobile, VR und jede andere Plattform zu rendern . Wie kommunizieren wir mit dem virtuellen DOM? React bietet uns eine Create-Elementfunktion, um diese Elemente zu erstellen, um mit dem virtuellen DOM zu kommunizieren. Es ist im Grunde eine Beschreibung dessen, was wir auf dem Bildschirm sehen wollen. Wir können einen Typ übergeben, der im Grunde nur ein HTML-Tag ist, oder es kann eine Komponente sein, über die wir in ein wenig lernen werden. Dann können wir Requisiten übergeben, die Dinge wie OnClick, OnKeyDown und viele weitere Ereignisse enthalten können . Endlich können wir Kinder passieren. Dies kann Text und andere CreateElement-Aufruf oder sogar eine Funktion enthalten. Es gibt einige kleine Nuancen wie die Verwendung von ClassName anstelle von Klasse und Stil , die als Objekt anstelle einer Zeichenfolge übergeben werden müssen, da wir uns in einer JavaScript-Umgebung befinden. Wenn Sie jemals zuvor reagieren gesehen haben, haben Sie wahrscheinlich diese HTML-ähnliche Syntax gesehen. Dies wird JSX genannt. Wir verwenden ein Tool namens babel, das diese JSX versteht und es zu etwas kompiliert, das der Browser verstehen kann. Babel ist ein JavaScript-Compiler, der Code nimmt, ihn transformiert und den JavaScript-Code und ein anderes Format zurückgibt. Wie wir hier sehen können. Wir transformieren es von einem h1-Tag, das wie HTML in einen Funktionsaufruf mit create Element aussieht . Wenn wir hier einige Requisiten wie vielleicht Stil, Farbe Orange übergeben würden, können wir sehen, wie dies in Echtzeit umgewandelt werden wird. Sie können babeljs.io besuchen, um mit diesem Live-Beispiel herumzuspielen und selbst ein Gefühl dafür zu bekommen. Wir können jeden gültigen JavaScript-Ausdruck innerhalb von geschweiften Klammern in JSX verwenden. JSX selbst ist ein JavaScript-Ausdruck, aber denken Sie daran, dass es nur [unhörbar] oben auf dem Create-Element ist. Manchmal, wenn wir mit JavaScript unterbrechen müssen, können wir. Wir können hier sehen, wir haben eine Namensvariable, die wir deklarieren, und dann in unserer Elementvariablen können wir tatsächlich diese Namensvariable verwenden. Das würde sich entschließen, Travis zu begrüßen. Beim Mapping über Sammlungen müssen wir jedoch daran denken, eine Schlüsselstütze für React zur Verfügung zu stellen. Keys helfen zu reagieren, um zu identifizieren, welche Elemente geändert , hinzugefügt oder entfernt wurden. Schließlich können wir über Komponenten sprechen. Komponenten sind der Grundbaustein von React. Es ermöglicht uns, unsere Benutzeroberfläche in unabhängige, wiederverwendbare Teile zu teilen. Wir können mehrere Komponenten zusammenstellen, um noch mehr Komponenten zu schaffen. Wir verwenden Funktionen für zustandslose Komponenten und ES2015-Klassen für stateful Components. Stateful Komponenten bieten uns auch Lifecycle-Hooks, die es uns ermöglichen, bestimmte Teile des Rendering-Prozesses einzuhaken. Schauen wir uns an, wie das funktioniert. Wie Sie sehen können, haben wir eine zustandslose und statusbehaftete Komponente. Zustandslose Komponenten sind sehr einfach. Sie sind nur eine Funktion, die ein reagierendes Element zurückgibt. Wie Sie hier sehen können, ist es das Gleiche wie zuvor. Wir sagen nur hallo, Name. Welcher Name wird als Variable über Travis deklariert, so dass dies zu Hallo Travis führen würde. Dinge werden interessant, wenn wir zu einer stateful Komponente wechseln. Wir beginnen mit einer ES2015-Klasse und dann erweitern wir von React.Component, die von React kommt. Durch die Erweiterung von React.Component erben wir einige Methoden und andere Eigenschaften, die wir verwenden können und React wird verstehen. In diesem einfachen Beispiel deklarieren wir nur eine Statuseigenschaft, die eine andere Namenseigenschaft namens Travis enthalten wird. Dann haben wir eine Rendermethode, die React aufruft und Hallo, this.state.name zurückgibt , die Travis sein würde. Es ist auch hilfreich zu beachten, dass eine Rendermethode für Klassen erforderlich ist. Beide Komponenten führen zu der gleichen Sache, aber sie sind auf zwei verschiedene Arten geschrieben. Lassen Sie uns herausfinden, wie der Staat uns in unseren Anwendungen helfen kann. State gibt uns die Möglichkeit, unsere Apps interaktiv zu machen. Es kann ein Objekt von allem sein, einschließlich Strings, Arrays und sogar Funktionen. Wir können eine Komponente aktualisieren, wenn neuer Zustand, indem wir die Set-Statusmethode verwenden , die wir geerbt haben, wenn wir von React.Componet erweitert. Es ist hilfreich zu beachten, dass React uns hilft, indem wir uns an einen unidirektionalen Datenfluss halten. Sie können sich immer vorstellen, dass der Zustand von oben kommt und auf untergeordnete Komponenten herabläuft und ihnen diesen Zustand verleiht. Wie Sie hier sehen können, haben wir eine Komponente mit einer Klasse namens Zähler deklariert. Wir erweitern von React-Komponente wie zuvor, und wir deklarieren einen Anfangszustand namens count. Die Zählung beginnt bei Null und wir wollen erhöhen oder dekrementieren, die Anzahl basierend auf der Schaltfläche, auf die wir geklickt haben. Wie wir bereits besprochen haben, müssen wir die SetState-Methode aufrufen, um den Zustand zu ändern. SetState kann entweder ein Objekt mit dem neuen Zustand annehmen, oder es kann eine Funktion annehmen, die den aktuellen Zustand empfängt und dann seinen neuen Zustand zurückgibt. Das ist es, was wir hier machen. Wenn Sie diese Inkrement- und Dekrementfunktionen sehen können, haben sie den Status empfangen und sie fügen entweder einen zum aktuellen Zustand hinzu oder sie subtrahieren einen vom aktuellen Zustand. Wenn wir auf diese Schaltfläche ein paar Mal klicken, können wir sehen, dass wir den Zustand tatsächlich erhöhen. Ebenso, wenn wir auf das Minus klicken, dekrementieren wir den Zustand und gehen nach unten. Wie wir zuvor mit dem virtuellen DOM gesehen haben, jedes Mal, wenn wir den Zustand entweder dekrementieren oder inkrementieren, wird jedes Mal, wenn wir den Zustand entweder dekrementieren oder inkrementieren, die Änderungen div und die Komponente entsprechend aktualisieren. Da wir diese state.count verwenden, wird es dynamisch aktualisiert werden, wie wir unten sehen können. Wenn wir diese Gegenkomponente wiederverwenden wollten, wie könnten wir das tun? Nun, halten wir einfach den Zustand und verwalten ihn selbst? Was wäre, wenn wir einen Anwendungsstatus hätten, der von woanders kommen musste und ihn diesem Zähler zur Verfügung stellen musste. Schauen wir uns an, wie wir einen Begriff namens Requisiten verwenden können, um dies zu erreichen. Requisiten sind im Wesentlichen Optionen, die wir unseren Komponenten zur Verfügung stellen können. Sie sind ähnlich zu behaupten, dass Requisiten alles sein können. Wir verwenden Requisitentypen zur Validierung und stellen sicher, dass Requisiten wie beabsichtigt verwendet werden. Wir können auch Standard-Requisiten bereitstellen, die für Requisiten verwendet werden, die nie übergeben werden. Schauen wir uns an, wie wir das Gegenbeispiel vorher nehmen und es in wiederverwendbares Stück herausziehen können. Stateless Komponenten erhalten Requisiten als Argument, und stateful Komponenten erhalten Requisiten als Eigenschaft, auf die unter diesem Punkt Requisiten zugegriffen werden kann. In diesem Fall geben wir keine Requisiten an unsere App weiter, und so werden wir uns nur um den Zähler und die Requisiten kümmern , die darauf zurückkommen. Wenn wir sehen können, dass wir eine Zählerkomponente haben, übergeben wir Requisiten, die auf Dekrement und Inkrement genannt werden. Wir halten Zustand obwohl in unserer App jetzt. Wir halten das nicht in der Gegenkomponente selbst. Diese Zählerkomponente ist nun unabhängig von ihrem Zustand und kann auf viele verschiedene Arten verwendet werden. Es muss nicht wissen, woher sein Zustand kommt. Dies ist eine Grundidee, wie Requisiten funktionieren. Wir werden hier nicht auf die Details von Requisitentypen oder Standard-Requisiten eingehen. Aber ich empfehle dringend, dass Sie sich die React-Dokumentation ansehen und mehr davon lesen. Schließlich schauen wir uns an, wie wir Dinge auf dem Bildschirm rendern können. Wie das React-Paket gibt es separate Pakete für verschiedene Renderer, über die wir vorher gesprochen haben. Denken Sie daran, wir sagten, wir könnten entweder auf einer nativen Plattform oder auf VR oder im Web rendern. Heute werden wir React DOM und ihren Renderer verwenden. Das wird als separates Paket zur Verfügung gestellt. Wir verwenden das React DOM-Paket, das uns eine Rendermethode bietet, und es ist sehr einfach. Alles, was wir tun, ist unsere Komponenten zu nehmen, die wir definiert haben, wir werden das als erstes Argument übergeben, und im zweiten Argument übergeben wir einfach einen gültigen DOM-Knoten. In diesem Fall werden wir den DOM-Knoten mit GetElementById erhalten. Dies ist nicht das gleiche wie unsere Rendermethode. Dies wird tatsächlich in das DOM gerendert. Anstatt nur unsere Komponenten jedes Mal mit einem Rendern zu aktualisieren, wurden tatsächlich in das DOM gerendert und das DOM jedes Mal aktualisiert, wenn dies aktualisiert wird. Das war ein hoher Überblick über React. Wir haben gelernt, wie das virtuelle DOM funktionierte, was es ist, wie wir react.create Element verwenden können, um mit dem virtuellen DOM zu kommunizieren. Wie wir JSX verwenden, die eine HTML-ähnliche Syntax ist, die zu React kompiliert, erstellen Element. Als nächstes haben wir gelernt, wie Komponenten zu bauen und wie wir state verwenden können, um die Dinge dynamisch zu machen, und dann, wie wir Requisiten verwenden können, um Dinge nutzbar zu machen. Schließlich haben wir gelernt, wie wir React DOM verwenden können, um Dinge auf dem Bildschirm im Web zu rendern. Lassen Sie uns in ein Beispiel der realen Welt springen und sehen, wie diese Dinge alle zusammen funktionieren. Wir sehen uns dort. 3. Programmieren im Browser: CodeSandBox ist ein Online-Code-Editor und ist eine der einfachsten Möglichkeiten, um mit React zu beginnen. Das ist, was wir heute verwenden, um unsere Galerie-App zu erstellen. Sie können diese Webseite besuchen, indem Sie in codesandbox.io gehen. Erstellen Sie ein Konto, damit Sie Ihren Fortschritt speichern können wir weitergehen und dann zu diesem Video zurückkehren können. Sobald Sie ein Konto haben oder sich angemeldet haben, beginnen wir, indem Sie auf die Schaltfläche „Reagieren öffnen“ klicken. Dies wird eine Sandbox für uns mit einer einfachen React-App erstellen, die einsatzbereit ist. CodeSandBox verwendet ein Tool namens Create React App von Facebook entwickelt. Es gibt uns einen Vorsprung beim Erstellen React-Anwendungen, indem wir uns um Einrichtung und Konfiguration kümmern. Traditionell müssten wir einen Server und Werkzeuge wie Babble einrichten, um unsere JSX zu transformieren, um ein Element zu erstellen, wie wir zuvor gesprochen haben. Aber Create React App behandelt all dies für uns. Sie können mehr über Create React lesen, indem Sie das Repo besuchen, wenn Sie interessiert sind, daran, das ist, was CodeSandBox unter der Haube verwendet, um unsere Entwicklungsumgebung zu versorgen. Wir können sehen, dass wir mit einer grundlegenden index.js Datei beginnen. Wir importieren React und React DOM sowie einige CSS-Dateien für grundlegende Styling. Dann haben wir eine einfache funktionale Komponente für unsere App, die dann mit React on Render in den Browser gerendert wird, wie wir im vorherigen Video gesehen haben. Du fragst dich vielleicht, woher React importiert wird. Es kommt tatsächlich aus unserer package.json-Datei. Dies beschreibt, welche Bibliotheken Sie von npm verwenden möchten, sowie einige andere Konfigurationsoptionen, die Create React App verwendet. Wenn Sie noch nie von einem npm gehört haben, ist es ein JavaScript-Paketmanager, der uns hilft, Bibliotheken von Drittanbietern wie React zu verwenden. Wird auf dieses Thema in einem späteren Video zurückkommen und erfahren, wie wir in anderen Bibliotheken ziehen können , die wir zu unserem Vorteil nutzen können. Wenn wir zurück zu unserer index.js Datei und wir speichern Befehl S Wir werden sehen, dass wir jetzt mit einigen anderen Optionen präsentiert werden. Wir können zu Project Info Tab gehen und lassen Sie uns unsere Anwendung in React Galerie umbenennen. Auf diese Weise können wir es leichter finden, wenn wir in unseren Projekten darauf zurückkommen. Eine letzte Sache zu beachten ist, wenn wir einige Codeänderungen vornehmen und unsere Datei speichern, werden wir feststellen, dass der Code neu formatiert wird. Wenn ich hier Tab tun, drücken Sie Befehl als, wir werden sehen, dass es wieder an Ort und Stelle kommt. CodeSandBox verwendet ein anderes Werkzeug namens hübscher. Prettier erzwingt einen konsistenten Stil in unserer Codebasis und ermöglicht es uns, uns auf das Schreiben von Code zu konzentrieren, anstatt wie unser Code formatiert ist. Wir sind bereit, unsere Galerie-App zu programmieren. Lassen Sie uns lernen, wie wir Daten von einer API abrufen können und sehen Sie ein echtes Beispiel dafür, wie Zustand in React verwendet werden kann. 4. Daten von einer API abrufen: Bevor wir damit beginnen können, Daten in unsere App zu bringen, müssen wir unsere zustandslose Komponente in eine zustandsbehaftete Komponente umgestalten. Denken Sie daran, dass dies die einzige Möglichkeit ist, den Status zu halten und unsere Apps zu aktualisieren. Lassen Sie uns hier Klasse machen, wir werden es App nennen, wir werden von react.component erweitern, eine Rendermethode bereitstellen und ein einfaches div für jetzt zurückgeben. Wir können ihm auch einen Namen geben. Wir rufen zwischen H1 an. Wir können es Pixel nennen. Dann können wir hier sogar ein kleines Emoji zum Spaß hinzufügen. Fügen Sie diese kleine Kamera hinzu, tun Befehl S. Jetzt sind wir gut zu gehen und wir haben Zugriff auf Staat. Mal sehen, was wir hier tun können, haben wir einen Zustand hinzugefügt, den wir die Eigenschaft des Bildes hinzugefügt haben. Wir verwenden dort vorerst ein leeres Array. Lassen Sie uns herausfinden, wie wir eine API verwenden und einige Daten in die App zeigen können , jetzt, wo wir bereit sind, einen Zustand zu halten und sie zu aktualisieren. Wie holen wir Daten von einer API ab? Heute wird eine Pixel-API verwenden, da es für die Öffentlichkeit zugänglich ist, müssen wir uns keine Sorgen über die Authentifizierung machen. Beachten Sie, dass APIs manchmal Authentifizierung erfordern und einen Entwicklerschlüssel benötigen, um ordnungsgemäß zu funktionieren. Ich werde auch einen Link zu einer Liste anderer APIs hinzufügen, die Sie unten verwenden möchten. In unserem Fall ist die Pixel-API öffentlich und wir können tatsächlich die URL besuchen, die wir heute verwenden werden, um Daten zu erhalten. Wir scrollen hier nach unten, wir können sehen, dass sie uns einen Endpunkt geben, den wir verwenden können. Lassen Sie uns das besuchen und sehen, was wir zurückbekommen. Wir erhalten eine Liste von Bildern zurück. Cool. Wie bekommen wir das in unsere App? Nun, wir können etwas namens Fetch benutzen. Fetche ist eine Methode, die uns im Fenster zur Verfügung steht und ermöglicht es uns eine Ressource zu erreichen und uns eine Antwort mit einigen Daten zu geben. Sie verwenden ein Versprechen. Wenn Sie nicht wissen, was ein Versprechen ist, heißt es im Grunde, dass wir versprochen haben, diese Sache zu tun. Wir sagen, wir werden etwas tun, und dann wollen wir etwas anderes tun. Es ist von Natur aus asynchron. Anstatt zu denken, wie Code synchron ausgeführt wird, so dass Sie etwas aufrufen, passiert etwas anderes. Wir wissen nicht wirklich unbedingt, dass man verspricht zu lösen, ähnlich wie in diesem Fall eine HTTP-Anfragen, bei denen wir gehen wollen, holen einige Daten und etwas zurück. Wir gehen hier runter, wir können sehen, dass wir ein Versprechen bekommen, das sich zu einem Antwortobjekt auflöst. Schauen wir uns dieses Antwortobjekt sehr schnell an. Das Antwortobjekt enthält einige Eigenschaften und Methoden, die wir darauf aufrufen können und wir sind heute nur an einem interessiert. Richardson in diesem Körper. JSON. Wir wollen das anrufen, wenn wir eine Antwort erhalten, die ein weiteres Versprechen zurückgeben wird. Dann können wir schließlich unsere Daten von dieser Antwort abrufen. Gehen wir zu unserer App und sehen, wie es funktioniert. Jetzt möchten wir einige Lebenszyklusmethoden nutzen. Einer ist insbesondere ComponentDidMount. Dies wird aufgerufen, wenn die Komponente zum ersten Mal auf dem Bildschirm mountet, so dass wir jetzt beginnen können, einige Daten zu holen. Wir rufen „Fetch“ an. Wir werden ihm die URL übergeben, von der Sie die Liste der Bilder erhalten können. Denken Sie daran, dies gibt ein Versprechen zurück, so dass wir es dann nennen können, und wir erhalten eine Antwort. Diese Antwort können wir eine JSON-Methode aufrufen, die ein anderes Versprechen zurückgibt. Dann können wir sie wieder anrufen, und jetzt haben wir tatsächlich Daten, mit denen wir arbeiten können. Öffnen Sie dies in eine Funktion. Wir verwenden hier nur eine fette Pfeilfunktion. Dann gehen wir in diesen Set-Zustand. Wir wollen unsere Bilder jetzt unsere Images Eigenschaft ändern und wir werden es jetzt die neuen Daten zurückgeben, die wir gerade bekommen haben, tun Befehl uns zu speichern. Mal sehen, ob wir unseren Staat ausloggen, wo wir zurück sind. Wenn wir unsere Konsole öffnen, können wir jetzt sehen, dass wir zwei Objekte haben, die wir geliebt haben. Denken Sie daran, rendern wird aufgerufen, wenn die Komponente zuerst mounts und dann, wenn wir es aktualisieren und dies im Zustand aufrufen oder wieder mit dem aktualisiert werden, was wir wollen. In diesem Fall haben wir Bilder mit einem leeren Array, die wir hier sehen können, begannen wir mit einem leeren Array Bilder in unserem Zustand. Aber dort nennen wir diesen Set-Zustand mit den Daten, die wir von dieser API zurückbekommen haben, die wir hatten. Nun, wenn wir uns anmelden, öffnen wir diese App, wir können sehen, dass es funktioniert, wir haben alle unsere Bilder ziemlich cool zurück. Jetzt können wir diese App öffnen. Es ist nur eine Reihe von Daten, wie wir sahen, wenn wir hierher zurückkommen und wir uns all diese Daten ansehen, die wir bekommen haben. Jetzt haben wir Zugang dazu, wir können etwas damit machen. Lassen Sie uns das schließen und sehen, wie wir das nutzen können. Jetzt, wo wir diese Daten haben, wie können wir sie auf dem Bildschirm bekommen? Denken Sie daran, dass wir JavaScript-Interpolation verwenden können. Öffnen wir es hier und wir greifen auf Bilder zu. und dann werden wir map verwenden, weil es eine Funktion des Arrays ist. Wir können über jedes Bild abbilden und etwas damit tun und ein neues Array zurückgeben. In diesem Fall werden wir Bildquelle tun. Was können wir es an die Quelle weitergeben, wo wir die Quelle übergeben? Lassen Sie uns schauen, es würde einige gibt uns zurück in unserem API-Aufruf auswählen. Denken Sie daran, dass wir all diese Daten zurück haben, also was können wir sie übergeben, um ein Bild zu erstellen. Sieht nicht so aus, als würden sie uns die Quelle eines Bildes geben, aber wir bekommen die ID jedes Bildes. Das ist komisch. Wie funktioniert das? Wie würden wir eine Bild-URL erhalten? Nun, so funktionieren APIs. Manchmal geben sie uns ein wenig Daten und dann können wir diese nutzen, um noch mehr Daten aufzubauen. Also in diesem Fall haben wir die Bild-ID und lassen Sie uns sehen, ob sie uns einen Weg geben , eine bestimmte ID zu bekommen. Oh, hier, perfekt. Wir können ein bestimmtes Bild erhalten, indem wir zu dieser URL gehen und ein Bild greifen. Wir werden sehen, wie das funktionieren könnte. Wenn wir zurück zu unserer App gehen, fügen Sie diese in, erneuert die JavaScript-Interpolation hier. Cool, jetzt bekommen wir ein paar Bilder zurück, aber es ist nur das gleiche Bild. So cool ist das nicht. Lassen Sie uns etwas Interpolation verwenden. Wir können unser Bild verwenden, das wir jetzt haben, wo wir Zugriff haben und wir werden seine ID bekommen. Cool, sieht aus, als hätten wir jetzt Bilder, also jetzt sind wir Rendern von Bildern auf dem Bildschirm ist ziemlich cool. Sieht nicht so schön aus, aber zumindest haben wir unsere Bilder kommen durch und Rendern auf den Bildschirm. Lasst uns herausfinden, wie wir das ein bisschen schöner machen können. Bevor wir es tun, müssen wir einen Schlüssel hinzufügen, um diese erinnern, Reactor wird sich beschweren, wenn wir keinen Schlüssel haben und zum Glück haben wir hier eine ID. Da es einzigartig ist, müssen wir das verstehen und glücklich sein, speichern Sie das, cool. Sieht gut aus. Eine Sache, die wir wirklich schnell machen sollten, ist, wenn wir uns unsere Daten hier ansehen, müssen wir eine Slice-Methode hinzufügen, weil wir gerade zu viele Fotos greifen. Wir packen etwa 1000 Fotos, also sollten wir nur etwa 30 schnappen. Lass uns das einfach schnell machen. Dann können wir jetzt sehen, dass wir nicht so viele Fotos schnappen. Dies wird ein wenig einfacher zu laden, cool. Jetzt sind wir bereit, die App zu starten. 5. Styling in React: Wie starten wir jetzt unsere Bewerbung? Wir können sehen, dass wir die CSS-Datei hier oben importieren. Gehen wir schnell da rein. Dies sind einige Stile, die zuvor eingerichtet wurden. Wir wollen kein Text-Align-Zentrum und wir verwenden keine App mehr, so dass wir einfach unseren Körper anvisieren können. Das sieht gut aus. Jetzt sind unsere Schriften verwenden eine san serif sieht ein bisschen schöner aus. Wenn wir zu unserer Index-Datei kommen, jetzt, wie tun wir, sollten wir einfach ein Stylesheet wie vor Social verwenden, gehen wir zurück in styles.css. Wir können das tun, aber da React nur JavaScript ist, haben wir viele verschiedene Möglichkeiten, wie wir unsere Anwendungen stylen können. Wir könnten Inline-Stile verwenden, indem wir ein Objekt bereitstellen, obwohl dies aus den Leistungskosten kommen könnte, können wir traditionelle CSS verwenden, indem wir Klassennamen und ein Stylesheet verwenden, oder wir können einen Begriff namens CSS und JS verwenden , der was wir heute verwenden werden. Es gibt eine Tonne von Bibliotheken, die CSS und JS unterstützen , die alle mit einer anderen Funktion ausgestattet sind. Aber heute werden wir eine Bibliothek namens Emotion verwenden. Emotion unterstützt CSS-Styling-Fähigkeiten in JavaScript. Ich persönlich mag Objekte, aber Sie können auch einen Begriff namens Tag-Vorlagenliterale verwenden , um vertrautere CSS in eine Zeichenfolge zu schreiben. Mal sehen, wie es hier funktioniert. Wir importieren die CSS-Funktion aus Emotion. Wir können unsere CSS-Zeichenfolge aufbauen und anwenden. Dies wird einen Klassennamen erstellen, und wir können diesen Klassennamen auf unsere Domäne anwenden. Wir können hier sehen, dass wir eine zusätzliche Bibliothek installieren müssen, um sie mit reagieren zu verwenden. Das ist das, was an Emotionen cool ist. Es kann mit oder ohne reagiert arbeiten. Es funktioniert mit vielen verschiedenen Plattformen. Dies ist die Tag-Vorlagenliterale, Zeug, über die ich gesprochen habe. Wir können hier sehen, dass wir eine App haben. Wir übergeben einen Klassennamen genau wie normal, wie wir jeden anderen Klassennamen übergeben würden. Es wird richtig aufgelöst. Wir müssen uns keine Sorgen um die Verwaltung eines separaten Stylesheets oder so etwas machen. Wir können alle unsere Stile behalten und zusammen lokalisieren. Das ist wirklich schön und wir werden sehen, wie das funktionieren kann. Kommen wir zurück zu unserer App und beginnen, sie zu stylen. Zuerst müssen wir unsere neuen Abhängigkeiten installieren. Denken Sie daran, dass wir zu unserer package.json zurückkommen. Wie machen wir das in Code-Sandbox? Wird es uns einen wirklich einfachen Weg geben, es zu tun. Wir können einfach Abhängigkeiten hier mit dieser Schaltfläche hinzufügen, wir werden klicken, die nach Emotionen suchen und da ist es. Wir installieren das. Wir sehen, dass unsere Abhängigkeiten hinzugefügt wurde. Aber denken Sie daran, dass wir in Reaktionen arbeiten, also müssen wir die emotionale Reaktion Abhängigkeit hinzufügen. Bewegung reagieren, da gibt es. Cool. Wir sind bereit zu gehen. Wir haben wieder zu unserer index.js. Wir können stilisiert von reagieren Bewegung importieren wird sehen, dass. Jetzt sind wir bereit, unsere App mit CSS und JS zu stylen, wir müssen nicht zu einem Stylesheet zurückkehren. Normalerweise halte ich Stylesheets immer noch, damit ich meine globalen Stile verwalten kann. Sie können dies mit Emotionen tun, aber es hängt nur davon ab, was Sie tun möchten. Ich mag es, nur eine normale CSS-Datei für globale Stile zu haben und das CSS und JS zu verwenden , um meine anderen Komponenten spezifischen Stile gemeinsam zu halten, was wirklich schön ist. Motion gibt uns diese gestylte Funktion. Wir können es sofort benutzen, Stil machen, und dann können wir ihm eine Zeichenfolge für das Tag übergeben, das wir verwenden möchten. In diesem Fall möchten wir ein Header-Tag verwenden. Dann werden wir eine andere Funktion mit einem Objekt übergeben, und das werden die Stile sein, die wir ihm geben möchten. Wir werden etwas Polsterung machen, damit es ein bisschen schöner aussieht. Geben Sie ihm 16 Pixel Polsterung. Dann könnten wir wieder um Farbe tun, Ich mag HSL zu verwenden, das ist Farbton Sättigung und Konnosation. Es ist nur eine einfache Möglichkeit, sich an Ihre Farben zu erinnern, ohne sie wirklich betrachten zu müssen. Wir werden null Prozent für Sättigung tun und dann Frading wir tun wollen wir tun, wie ein dunkler oder wie ein hellgrau. Wir machen 94 Prozent. Wir werden sehen, wie das funktioniert. Jetzt haben wir diese Komponente, die für uns erstellt wurde und den Stil, der Klassenname wurde bereits für uns erstellt, so dass wir uns keine Sorgen machen müssen, um zu einem Stylesheet zu gehen. Alles ist genau hier, was wirklich schön ist. Wenn wir hier nach unten gehen, wird unser Titel in eine Kopfzeile einwickeln und dann sehen, ob es funktioniert. Da gehen wir, Sie können sehen, es ist ein wenig hellgrau, aber wir haben einige andere Stile, die kollidieren. Wir haben Standardmarge in unserem Körper, also lasst uns das loswerden. Dies ist nur von den Standardstilen des Browsers. Es sieht so aus, als würde unser H1 etwas Stil erben. Deshalb mag ich es, die Dinge einfach aufzuräumen. Wir könnten sogar wichtig normalisieren oder etwas hier, um alle Stile zurückzusetzen. Aber in diesem Fall machen wir es einfach selbst und machen keinen Spielraum auf unserem Header. Nun, jetzt sieht es ein bisschen besser aus. Jetzt lasst uns unsere Fotos holen und sie in ein Raster stellen und sie ein bisschen schöner aussehen lassen. Wir können const tun, wir werden diese TileView nennen. Dann können wir unsere gestylte Funktion wieder verwenden und das wird jetzt nur ein div sein. Dann werden wir eine andere Funktion mit einem Objekt übergeben und wir werden Display Raster verwenden. Dann wollen wir in der Lage sein, Requisiten an dieses Stilelement zu übergeben. Vielleicht ändern Sie es variabel, so dass wir es basierend auf verschiedenen Optionen ändern können. Was an Emotion cool ist, ist, dass es uns erlaubt, hier Requisiten weiterzugeben. Wir werden dieses Objekt in Parens wickeln, weil wir implizit zurückgeben wollen. Ansonsten denken sie, wir wollen eine Funktion, die wir brauchen, um eine Rückkehr zu tun. Dann werden wir fragen, dass sie oft Polsterung sagen, Requisiten Abstand, und dann werden wir Gitterlücke tun. Requisiten beginnen auch den Abstand. Dies wird Abstände um alle unsere Zuschüsse hinzufügen oder sehen, ob das funktioniert. Wir können einfach unsere Zeitsicht nehmen, hier runter kommen. Wir werden alle unsere Bilder dort einpacken und sehen, ob es aussieht, als ob es funktioniert, speichern wir das. Sieh nicht so aus, als würde es funktionieren. Mal sehen, was los ist. Wir geben keinen Abstand dazu. Vielleicht können wir hier Standard-Requisiten einführen. Wir übergeben keine Requisiten nach oben, aber vielleicht waren wir kein Abstand, um eine Standard-Requisite zu sein. Wir können hier gehen und wir können TileView tun. Wir haben diese Komponente und wir können die Eigenschaft Standard-Requisiten darauf zugreifen, und jetzt können wir Abstand passieren. Wir können sagen, weg 16 Pixel als Standardabstand. Cool, jetzt funktioniert es. Wenn Sie nun keinen Abstand übergeben, werden wir nur auf 16 Pixel vorgegeben. Sonst können wir hier reinkommen. Wir können Abstände sagen, vielleicht etwas Unerhörtes wie 60. Gut cool, damit es funktioniert. Das ist zu viel Abstand. Wir bleiben nur mit dem Standardabstand, den wir eingerichtet haben. Wir können dies tatsächlich überprüfen und sehen, dass es funktioniert und wie Emotion alles in einen Klassennamen verwandelt. Es ist ziemlich cool. Wir sehen hier, wir sehen diesen kleinen Klassennamen, den wir bekommen, und er löst sich genau hier auf. Wir erhalten angezeigt Rasterauffüllung 16 Pixel, Rasterabstand 16 Pixel. Ziemlich cool. Lass uns noch ein paar Sachen hinzufügen, um das aufzuräumen. CSS-Grid ist extrem mächtig, also lassen Sie uns davon profitieren. Wir können etwas als Rastervorlagenspalten verwenden. Dann werden wir ein String-Template-Literal übergeben, und wir können sagen wiederholen. Wir gehen automatisch zu füllen. Dann können wir eine Minmax-Funktion in CSS verwenden. Wird hier Interpolation gehen und wir sagen Requisiten. Wir könnten min Zellenbreite gehen. Wir werden nur einen Bruchteil haben. Im Grunde ist dies zu sagen, versuchen Sie, das Ansichtsfenster mit so vielen Zellen wie möglich zu füllen, aber halten Sie sie auf dieser minimalen Zellenbreite. Was wirklich verursacht wird, erhalten wir standardmäßig eine Responsive Funktion. Wir müssen uns keine Sorgen darüber machen, Breakpoints oder so etwas einzurichten. Wir werden eine Standard-Mindestzelle mit übergeben. Wir gehen vorerst 3-20. Wir müssen uns auch daran erinnern, dass wir ihm einen Pixelwert übergeben müssen. Also, während Pixel hier, mal sehen, ob das funktioniert. Für die Aussparung des Ansichtsfensters sollten Zellen enthalten, die einen Stapel erhalten haben. Cool. Da gehen wir. Es sieht so aus, als würde es funktionieren. müssen immer noch unsere Bilder aufräumen, das machen wir als nächstes. Aber jetzt haben wir ein Auto responsive Design, das ziemlich cool aussieht. Lassen Sie uns unsere Fotos etwas aufräumen. Sie passen nicht sehr gut in das Ansichtsfenster. Wir werden hier eine weitere Komponente erstellen. Wir nennen es Foto gleich gestylt. Sie wollen es in Bild übergeben. Jetzt geben Sie wieder eine Funktion mit unseren Stilen aus. Wir gehen mit 100 Prozent. Wir wollen auch angezeigten Block zu tun. Wenn Sie Blockbilder nicht anzeigen, haben standardmäßig die Inline und wie dieser seltsame Rand am unteren Rand von ihnen, Anzeigeblock hilft dabei. Wir werden Objekt-Fit-Abdeckung gehen, wodurch sichergestellt wird, dass das Bild sich wie sein eigenes kleines Ansichtsfenster erstreckt, in dem es sich so die Zellen in unserem Fall befindet. Wir haben diese Komponente, gehen wir hier runter. Aber wir sollten auch unsere Minzelle ändern. Nun, das ist ein bisschen zu groß. Ich denke, unser Ansichtsfenster ist jetzt etwa 300, also werden wir es 240 einstellen, die eine schöne Breite haben könnte. Wir gehen hier runter. Wir ersetzen das und es sollte nur funktionieren, weil es aussieht, als würde es funktionieren. Diese Bilder sind ein wenig lang. Lassen Sie uns ein quadratisches Bild tatsächlich so wird ersetzt mit, wir werden tausend tun, so haben wir einige schöne Qualität. Es ist schön über die Pixel-API. Es ermöglicht uns, Bilder wirklich einfach zuschneiden. Jetzt habe ich ein paar quadratische Bilder. Wir sehen ziemlich gut aus. Unsere Bilder in einer Reihe. Sie haben ein paar schöne Abstände um sie herum. Lassen Sie uns herausfinden, wie wir dieses kleine interaktive machen können und vielleicht klicken Sie darauf, um die Ansicht zu erweitern und einige zusätzliche Informationen anzuzeigen. 6. Interaktion hinzufügen: Bevor wir hierher ziehen, lassen Sie uns unsere Akten etwas aufräumen. Sie kommen so weit, dass sie ein wenig aufgebläht werden. Wir können dies bereinigen, indem wir eine intuitive aus Datei verschieben. Zuerst kopieren wir einfach alles. Das ist, was ich tue, ich kopiere immer alles und erstelle dann eine neue Datei. Wir rufen Komponenten an. Je nachdem, wie viele Dateien Sie haben, möchten Sie vielleicht einen Ordner mit mehr Dateien in diesem erstellen. Aber in unserem Fall ist das ziemlich einfach, also werde ich es ziemlich einfach halten. Wir brauchen nur gestylt, und dann können wir das sehen. Wir wollen auch diese alle exportieren, so können wir sie greifen. Dann werden wir Kosten TileView erkunden, und dann werden wir Foto exportieren. Jetzt sollten wir in der Lage sein, diese zu importieren, so dass Sie all diese loswerden können und wir werden einige Fehler bekommen, aber das ist okay. Wir werden die Dateien jetzt importieren. Wir brauchen nicht mehr gestylt. Jetzt können wir zum Import gehen, und wir können diese einzelnen Komponenten aussuchen, die wir gerade exportiert haben, also sagen wir für Komponenten, und dann gehen wir Header, TileView und dann Foto. Sieht gut aus. Gehen wir zurück zu unserer Komponentendatei. Jetzt wollen wir auf ein Foto klicken und es erweitert haben, also wie können wir das tun? Unsere Galerien sind jetzt auch ein bisschen groß. Wir sehen, ob wir das nur ein wenig verkleinern können, also gehen wir vielleicht 120. Da gehen wir. Wenn wir das öffnen und schließen, ja, dann gehen wir. Wir bekommen ein bisschen bessere Sicht. Wenn wir uns erweitert haben, macht es wirklich Sinn. Jetzt wollen wir diese Fotokomponente nehmen und wir übergeben Requisiten, aber ich benutze gerade nicht einmal die Requisiten. Wenn wir unsere Stile erstellen, ziehe ich gerne meine Stile. Ich mag vielleicht würde ich kein Stylesheet und so sagen, wir können ThumbnailStyles sagen, also das ist, wenn es klein ist. Dann machen wir FullScreenStyles, wie wir es so nennen. Das wird auch ein Objekt von Stilen sein, also möchten wir, dass sie standardmäßig die sind, die wir deklariert haben, also ist Thumbnail diese. Dann, wenn es im Vollbildmodus ist, werden wir die Position fixieren. Oben Null, rechts Null, links Null, unten Null. Dies wird, wenn wir alles über das gesamte Ansichtsfenster erweitert haben, möchten wir ihm eine minimale Höhe geben, damit es nicht zu groß ist. Wir geben ihm ein wenig Atemraum, also machen wir 80 Ansichtsfensterhöhe, und dann können wir auch Marge Auto tun, um es auf dem Bildschirm zu zentrieren. Jetzt können wir diese Stile nehmen, die wir gerade definiert haben, und wir werden das loswerden. Wir können sagen, da wir Requisiten zurück bekommen, sagen wir Requisiten, wir nennen diese Requisite IsActive, und Sie können sagen, wenn es IsActive, wir wollen die ThumbnailStyles verwenden, aber wir werden FullScreenStyles verwenden, wenn sagen aktiv, und andernfalls verwenden wir die ThumbnailStyles, damit wir das speichern können. Ich denke, wir können jetzt gehen. Nichts wird passieren oder absolut sieht gleich aus, also ist das gut. Lassen Sie uns herausfinden, wie wir ein Foto sagen können, ob es aktiv ist oder nicht. Wir können hier einen neuen Zustand einführen, da wir unsere App ändern möchten , wenn wir auf etwas klicken, und so werden wir sagen, wir werden eine CurrentPhotoID halten, die standardmäßig null sein wird. Dann, um festzustellen, ob etwas aktiv ist, werden wir tun, ist in diesem Zustand aktiv CurrentPhotoID gleich diesem image.id. Wie bekommen wir CurrentPhotoID? Nun, denken Sie daran, dass wir über OnClick gesprochen haben, damit wir eine Veranstaltung passieren können. Wir könnten OnClick sagen, und wird eine Funktion übergeben, und dann werden wir diese SetState sehen, und wir werden die CurrentPhotoID erhalten. Wir setzen es auf diese image.id, auf die wir klicken. Wir schleifen uns durch, wir hängen diese Ereignisse an und wir sehen, wenn wir auf dieses Foto klicken, wollen wir das Foto, auf das wir gerade geklickt haben, auf die CurrentPhotoID setzen, und dann werden wir jetzt unseren Zustand aktualisieren und wieder runter kommen, und so jedes Mal, wenn es durch jedes Bild geht, wird es sagen, Ist dieses aktiv? Ist das aktiv? Ist das aktiv? Schließlich kommt es überall dorthin, wo wir geklickt haben, was auf die CurrentPhotoID gesetzt ist. Mal sehen, ob das funktioniert hat. Es sieht so aus, als ob es funktioniert, also können wir jetzt auf einige Fotos klicken und erweitert und das sieht nicht zu gut aus, aber wir werden das hier sehr schnell beheben. Wie könnten wir das schließen? Wenn wir auf ein Foto klicken, passiert nichts anderes nur, um es auf die Bild-ID zu setzen, richtig? Also könnten wir hier sagen, wir könnten das wieder rausziehen. Dies vielleicht, wenn Sie das in eine Funktion hier oben ziehen möchten. Manchmal mache ich das, anstatt eine implizite Rückkehr zu machen, werden wir eine explizite Rückkehr machen, also werden wir das zurückgeben. Jetzt können wir Variable hier oben speichern, genannt IsActive, und dann können wir sagen, wir werden IsActive hier unten jetzt übergeben, also werden wir nur die Dinge ein wenig aufräumen. Jetzt können wir sagen, wenn wir IsActive sind, wollen wir, dass es auf Nein gesetzt wird, anstatt auf das Bild zu setzen. Id, also sollte das Bild schließen, weil es einfach durch Nein zurückgeht und dann wird es jetzt nicht mehr gesetzt werden, also speichern wir das. Jetzt sollten wir in der Lage sein, auf ein Foto zu klicken und dann wieder darauf zu klicken, und das funktioniert jetzt, also setzt es zurück. Mal sehen, wie wir unsere Styles ein wenig aufräumen und sie ein bisschen besser aussehen lassen können . Als nächstes wollen wir ein Rahmenkomponenten hinzufügen, damit wir unser Foto ein bisschen besser sehen können und wir keine Zerstörung hinter uns haben , also lasst uns das tun. Was sind die Komponenten? Wird const Frame gleich formatiert exportieren, und dies wird nur ein div sein und seine eigenen Stile übergeben , wenn Sie hier eine ähnliche Stile verwenden, als Vollbild-Stile, werden wir diese einfach einfügen. Wir werden Hintergrundfarbe machen. In diesem Fall werden wir jede hsla tun, die ein Alpha-Kanal ist. Das ist wirklich seltsam. Das ist, was mir das in den hsla und hsla nicht gefällt, aber wir müssen jetzt Kommas verwenden. Denken Sie immer daran, dass, wenn wir hsla und jede hsla verwenden, wir Kommas mit dem hsla und nicht Kommas mit dem hsla verwenden müssen. Es ist ein wenig verwirrend, und so, was die Null Prozent, wollen wir 100 Prozent für Weiß. Dann machen wir hier einen Alpha-Kanal, also wird es uns ein bisschen Transparenz geben. Wir machen 96, also sollte das gut für unsere Rahmenstile sein. Wird diese Kopie des Rahmens speichern und zurück zum Index, wird es importieren, und dann werden wir es einfach hier unten kleben. Da diese Position fixiert, sollte es einfach auftauchen. Wie bringen wir das zum Ein- und Ausblenden? Was wir hier coole Sachen machen können. Denken Sie daran, dass wir nur sind, können wir mit JavaScript unterbrechen. Wir können this.state.currentPhotoid sagen und wenn es da null wahr ist, ist der IRF ein falsy Wert wird sagen, wenn es eine currentPhotoID, zeigen Sie diesen Rahmen. Sonst zeig es einfach nicht. Dies würde als wahr ausgewertet, und dann wird es einfach dieses ausführen, was Element erstellen und unseren Rahmen rendern würde , also speichern Sie das. Wenn wir jetzt klicken, sollten wir einen Rahmen haben, der auftaucht. Da gehen wir. Das ist ein guter Grund. Obwohl currentPhotoId null ist falsch, CurrentPhotoId kann nicht Null sein. Das haben wir gesehen, als wir auf den ersten geklickt haben. Komm zurück hierher und wir werden sagen, ist nicht gleich null. Manchmal kann man auf ein Problem wie dieses stoßen. Achten Sie einfach darauf, wenn Sie etwas haben, wo Sie es vergleichen und es ist Null, dann ist es vielleicht nicht wahr, also klicken wir darauf. Das sollte gut sein. Können wir jetzt unser Bild nicht mehr sehen. Lass uns das auftauchen. Komm hier runter, warum ZindeX denn gerade jetzt sitzt das oben, im Grunde, weil es die Reihenfolge der DOM und wünschte Sets sitzt, also werden wir sagen, dass dies der ZindeX von fünf ist. Hier fangen wir an, mit unseren ZindeX-Wörtern zu spielen, oder? Und dann ist CIndex 10, also klicken wir jetzt darauf. Klicken Sie nun darauf. Wir sehen, dass wir einen Rahmen hinter uns haben. Wir können darauf klicken und schließen, öffnen, schließen. Ziemlich süß. Lassen Sie uns Stile ein wenig für dieses Foto aufräumen. Vielleicht, Höhe 80 Viewport war nicht gut. Lassen Sie hier Breite tun, wir werden Breite tun und wir tun 80 Ansichtsfenster Breite. Da gehen wir. Wir sehen gut aus. Wir fügen hier noch eine Sache hinzu. Mal sehen, ob wir gehen zu Requisiten aktiv ist, lassen Sie uns einfach einen Cursor hier hinzufügen, so dass wir unseren Cursor ändern, wenn wir mit dem Mauszeiger über und sagen, und es ist Vollbild, wir wollen zoomen, und dann, wenn Es ist ein Thumbnail, wir wollen tatsächlich hineinzoomen und sehen, wie das aussieht. Nun, es tut es. 7. Schlussbemerkung: Wir lernen, wie man Daten aus einer API abruft, wie Styling funktioniert und reagiert. Wie wir Requisite-APIs um Dinge wie CSS-Grid erstellen können. Wie man einige Interaktivität hinzufügen, indem man auf ein Bild und erweitert.Ich wollte diese Lektion kurz zu halten, aber denken Sie daran, es gibt eine Menge mehr, die wir mit diesem tun konnten.Wenn wir dieses Bild öffnen, zum Beispiel, ist es ein wenig groß.Wir kann das Ansichtsfenster messen und sicherstellen, dass das Bild immer passt oder richtig zugänglich ist, indem Sie Tastatur-Steuerelemente anschließen oder sogar einige schöne Animationen hinzufügen. Ich ermutige Sie sehr, in Ihren Projekten über und darüber hinaus zu gehen , wenn Sie für die Herausforderung bereit sind. Dies war ein ziemlich hoher Überblick darüber, was mit React in der Lage ist . Ich ermutige Sie, weiter durch die React-Dokumentation zu lesen, Lernen Sie Vanille JavaScript und nehmen Sie React-Kurse, bitte posten Sie Ihre Projekte und wir können alle Probleme, die Sie zusammen haben, bearbeiten. Vielen Dank, dass Sie diese Klasse besucht haben. Es war mir eine Freude, Ihnen einen Einblick zu geben wie React funktioniert und wie wir es nutzen können. Ich kann es kaum erwarten zu sehen, was Sie schaffen.