Vollständige CRUD-Anwendung erstellen mit Redux-thunk und JSON Fake Server | Saumitra Vishal | Skillshare

Playback-Geschwindigkeit


1.0x


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

Vollständige CRUD-Anwendung erstellen mit Redux-thunk und JSON Fake Server

teacher avatar Saumitra Vishal, Front End Developer

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

    • 1.

      Einführung

      6:05

    • 2.

      Verstehe Redux, Redux-thunk und es ist ein Flussdiagramm

      3:59

    • 3.

      Reagierendes Projekt

      1:31

    • 4.

      Pakete und JSON Server installieren

      2:11

    • 5.

      JSON Server in der React App einrichten

      3:38

    • 6.

      Ordnerstruktur erstellen

      0:31

    • 7.

      Redux & Route einrichten

      8:10

    • 8.

      Arbeiten mit Tabelle auf der Startseite

      7:08

    • 9.

      Unsere erste Redux und -reduzierung zu schreiben, um Benutzerdaten von JSON zu erhalten

      5:25

    • 10.

      Versenden einer Aktion, um Benutzerdaten auf der Tabelle zu erhalten

      4:49

    • 11.

      Hinzufügen von Schaltfläche Löschen und Bearbeiten auf der Tabelle

      4:03

    • 12.

      Arbeiten an Action & Reducer löschen

      2:09

    • 13.

      Versenden der Aktion zum Entfernen von Benutzerdaten aus der Tabelle

      4:11

    • 14.

      Arbeiten an Formularkomponenten

      17:00

    • 15.

      Arbeiten am Hinzufügen von Action & Reducer zum Hinzufügen von Benutzern in Reducer

      2:05

    • 16.

      Versenden einer Aktion zum Hinzufügen von Benutzerdaten

      6:50

    • 17.

      Arbeiten an Formular bearbeiten

      2:03

    • 18.

      Bestehender Wert im Bearbeiten Formular mit Action auffüllen

      9:28

    • 19.

      Versenden einer Aktion zum Aktualisieren der Benutzerdetails

      3:54

    • 20.

      Schlussbemerkung

      0:31

  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Jedes Niveau

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.

186

Teilnehmer:innen

--

Projekt

Über diesen Kurs

Werde ein anspruchsvoller Frontend-Entwickler indem du die highly-demanded in dein React einfügst. Du wirst einen leichten Rand gegenüber jenen Leuten haben, die nur das Wissen über React haben.

Dieser projektbasierte Kurs wird dich sofort programmieren. Die Anwendung mit Hilfe von React und Redux in diesem Kurs wird deine Fähigkeiten in der modernen Webentwicklung verschärfen.

Mit Redux-thunk Middleware wirst du wissen, wie du mit api in der React Anwendung arbeiten kannst. Und ich bin sicher, nachdem du diesen Kurs absolviert hast, wirst du Meister für Redux in einer deiner React in die Tat umsetzen.

Grundlegende Anforderungen

  • Es ist eine Art HTML-, CSS- und JavaScript-Kenntnisse erforderlich.
  • Grundlegendes Verständnis des ES6-Moduls
  • Basic React Wissen wird einen Vorteil hinzugefügt.
  • Redux sind ein bisschen erforderlich, aber ich werde es von Grund auf erklären.
  • Keine vorherigen Arbeitserfahrungen mit JSON erforderlich.

Software-Anforderungen

Jetzt lasst uns in React JS und Redux eintauchen. Und mit der Codierung beginnen!

Triff deine:n Kursleiter:in

Teacher Profile Image

Saumitra Vishal

Front End Developer

Kursleiter:in

I am front-end Web developer, specialize in the area of React JS

I have a bachelor degree in Computer Science from KIIT University. 

Will be happy to share my knowledge and create great content for everybody who wants to join my classes.

You can also join me on my YouTube platform, I have more than 8k subscriber on my Youtube Channel.

Let's build awesome things together :)

Vollständiges Profil ansehen

Level: Intermediate

Kursbewertung

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

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 auf 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. Einführung: Hallo Leute, wie es läuft. Mein Name ist Michelle und ich habe eine mehr als 50 Jahre Berufserfahrung, dass Trenton und Entwickler in seiner Software-Industrie. Und heute werde ich Ihnen beibringen, dass, wie Sie den Leser verwandelte sich in eine React-Anwendung integrieren und alle Lesevorgänge mit Hilfe von Geschenken und für immer durchführen können. Gehen wir also zur Folie über. Also, was Sie in dieser Partitur lernen werden. Sie werden also eine React-Anwendung von ihrem Wappen erstellen. Und wir werden eine React-Komponente mit Hilfe der Material-UI erstellen. Und in dieser React-Anwendung über gehen auf alle aktuellen Betrieb mit Hilfe von angrenzenden für immer. Und Sie müssen keinen Back-End-Code schreiben, um mit der API zu arbeiten, die gelesen, gelöscht, aktualisiert und erstellt wird . Also absolut, Geokodierung erforderlich, um mit der API zu arbeiten. In dieser Anwendung. Wir verwenden auch, um den Anwendungsstatus zu verwalten. Und wir werden eine, eine Redex Middleware verwenden , um eine API-Anfrage mit unserem JSON zu machen. Welche Fähigkeiten sind also für diesen Kurs erforderlich? Sie müssen also ein grundlegendes Verständnis von HTML hier und JavaScript haben. Sie benötigen auch ein grundlegendes Verständnis von ES6 und es ist gut, eine Art React-Wissen zu haben. Aber wie auch immer, ich werde alles von Grund auf erklären , wenn Sie nichts über die Tat wissen. Und es ist auch gut, ein wenig Verständnis für Redox zu haben. Aber nochmal, ich werde alles von Grund auf erklären. Und Sie benötigen keine Erfahrung, die mit dem JSON-Server erforderlich ist. Nun, was kühlt und Technologie ist, werden wir in diesem Projekt verwenden. Sie müssen also einen Visual Studio-Code haben, um den gesamten Code im Zusammenhang mit Reactant, einem Redex, auszuschreiben. Und darüber hinaus müssen Sie Node auf Ihrem System installiert haben. Und sobald Sie diesen Knoten installiert haben, haben Sie Zugriff auf den NPM. Damit wir mit Hilfe von npm einige Abhängigkeiten in unserem Projekt installieren werden. Weil Kunstprojekt auch den React Router dom unterstützen wird. Und wir werden diese Abhängigkeit installieren, Redox Tank x hier, Material, UI und React Router, dom sowie Acks, ja. Wenn Sie nicht bewusst von Überschuss, Überschuss ist uns helfen, die HTTP 2 a und Material zu machen. Sie, ich habe bereits gesagt, wo der Anfang, dass wir eine Komponente in dieser Anwendung mit Hilfe von Material USO bauen werden. Und wir werden im Grunde, er schreibt hier, in diesem Kurs. Deshalb habe ich Material UI verwendet. Also lasst uns die Anwendung demonstrieren. Also werden wir alle Lesevorgänge eins nach dem anderen mit einem Hunk und angrenzend durchführen, jedoch in unserer React-Anwendung. Lassen Sie uns also jede Lesevorgänge einzeln erkunden. Geben Sie also die höchste Operation an. Awared bin in der Lage, den gesamten EU-Haushalt vom JSON-Server zu laden. Und wir fügen auch den Akzent hinzu, dass Sie sehen können, dass wir die Datensammlung hinzufügen, vergessen Sie alle hier Daten vom Server. Jetzt werden wir die zweite Operation namens Zeitraum Hinzufügen der durchführen, Sie erhalten in die benachbarte Seite eines. So werde ich nämlich Änderung geben. Und dann lese ich gmail.com etwas zufällige Kontaktnummer und Adresse wird ein Fehler sein. Und ich werde das im Detail zugeben. Und ich werde hier aktualisierte Tabelle mit den aktualisierten und Daten erhalten. So haben wir auch auf die Schaffung Operation wie, wie das Hinzufügen der EU bekommen in die angrenzenden für immer. Jetzt besteht der nächste Vorgang darin, den Benutzer zu löschen. Also werde ich diesen einen Hallo löschen. Jetzt sind wir auch in der Lage, eine löschen Sie die Daten aus der Tabelle und lesen Sie einen Text und auch angeheuert, um ein Element aus der Tabelle zu löschen. Die nächste Sache ist live, um das Detail zu aktualisieren. Also klicke ich auf Update und lande in das Idiotenheim, okay? Und ich werde nur den Namen hier aktualisieren und einfach auf unsere Schulden klicken. Wir sind auch in der Lage, auf die Update-Operation mit den Injektionen Harvard und dort hätten Sie Zeit. Also schulde ich Ihnen die ganze Funktionalität mit GFF-Hafen und einem Leser. 2. Redux, Redux-Thunk und das Durchflußdiagramm verstehen: Also Leute, bevor ich anfangen wollte, irgendwelchen Code auf React zu schreiben, und nur wollte ich dir einen Überblick über den Leser geben. Also, was ist ein Redox? Redox? Ist es vorhersehbar, ist gut und Tenor, oder eine JavaScript-Anwendung, verwaltet es im Grunde Ihre gesamte Anwendung, den Zustand, und es wird häufig mit einer Bibliothek namens React oder Angular Snow verwendet, drei Prinzipien gefolgt von einem Leser, der eine einzige Quelle der Wahrheit ist, ist ein nur lesen angegeben. Und was auch immer Änderungen, die wir in jedem Zustand gemacht haben, Wir verwenden Ihre Funktion und das ist die Komponente von x und der Reduzierer ist zu sehen. Um also den Statin-Reducer zu aktualisieren, haben wir azyklisch eine Aktion erstellen. Und die Aktion wird von der Komponente ausgelöst und gespeichert wird, hält grundsätzlich den gesamten Anwendungsstatus. Und Blick ist nichts anderes als unsere React-Komponente. Also, jetzt lasst uns verstehen, was für ein Redox. Also lesen Sie f, danke. Die Middleware, mit der Sie einen Akzent-Ersteller aufrufen können , der eine Funktion zurückgibt, ist anstelle von Aktionsobjekt. Und diese Funktion erhält die Shop-Dispatch-Methode, die dann verwendet wird, um regelmäßige synchrone Aktion innerhalb eines Funktionskörpers zu versenden, war der asynchrone Vorgang abgeschlossen wurde. Also, warum brauche ich diese Zeit? Da Middleware die Verfügbarkeit im Geschäft erweitert und Sie eine Logik schreiben können, die mit dem Store interagiert. Also, was ist der Drehpunkt hier? Also ein Tank, ein anderer, welcher Teil der Funktion, aber es ist nicht nur eine alte Funktion. Es ist ein spezieller Name für eine Funktion, die von einer anderen zurückgegeben wird. Und so werden Sie mehr Verständnis über den Tank bekommen oder sobald wir anfangen, den Code in unserer Anwendung zu schreiben. Lassen Sie uns also das Flussdiagramm des gesamten Redox verstehen. Also Leute, dieses Datenflussdiagramm, und das können Sie hier sehen. So hier können Sie sehen, dass bei, unten, wir haben eine Komponente. Eine Komponente ist ein Dispatch eine Aktion. Und hier hat die Aktion keine Logik, um den Begriff zu aktualisieren. Und es handelt sich nur um einen Boten. Es ist also eine Reichweite zur Middleware. Aber hier, die mittlere verschiedene optionale und Middleware könnte alles wie Hancock, Saga sein. Und in diesem Kurs verwenden wir Redex Zunge. Dann erreichte es, wo der Reduzierer und aktualisieren Sie die Escaped. So ersetzt Reducer im Grunde das älteste Datum mit dem neuen Zustand. Die Image-Tour unveränderlich. So haben wir noch Mittellinie ist wiederum, wo wir speichern alle Anwendungsgebiete und aus dem Laden es vorbei an den aktualisierten Zustand als die Refs, die der Beschwerdeführer. Also 1 Fünftel nach der Aktualisierung, wenn das seinen Trigger reibt, das erneute Rendern Ihrer UI-Komponenten. Die Komponente wird also Halterinhalte mit dem aktualisierten Zustand oder L0 bemerken. So sagen sie das Gesamtkonzept von Redex und sein Flussdiagramm. Und ich hoffe, du verstehst dieses Konzept von Redox und du verstehst auch das Flussdiagramm. Und im nächsten Video werden wir das Projekt reagieren, um mit der Arbeit an dieser Anwendung zu beginnen. 3. Einrichten von React: Ich werde Material UI verwenden, um dieses Kabel Home-Taste zu vergraben. Also werden wir mit Material UI arbeiten und Sie müssen auch Jenkins Leiter eines global installiert. Ich hoffe, dass Sie sich dessen bewusst sind. So wurde eine Rate APA und ohne Codierung zur Verfügung gestellt. Sie müssen also nicht, also müssen Sie keinen Code schreiben, um die Injektionen für immer auszuführen. Du musst alles nochmal nachsehen. So haben Sie alle verschiedenen npm installieren minus g, JSON iRobot. Lassen Sie mich also anfangen, die Anwendung zu erstellen. Also werde ich in mein Verzeichnis gehen und ich werde diese chaotische Utensilien öffnen. Und ich werde die Anwendung bekommen. Also gebe ich den Pflichtnamen und das Textfeld an. Und der Name der Anwendung wird sehr Schauspieler JSON sein, dass Rudolf, die Bundesverpflichtung Name. Es wird also einige Zeit dauern, um alle Abhängigkeiten zu installieren , und ich werde wieder alle Abhängigkeiten sein, wenn deinstalliert werden kann. Also Leute, ich bin wieder da und es scheint, als wäre alles abhängig installiert. 4. Pakete und JSON Server installieren: Also, bevor npm zu tun ist, werde ich einige Pakete installieren. Also lassen Sie uns in den Projektordner gehen, den ich erstellt habe, wie UD, reagieren j, dann lesen Sie aus. Und bevor Sie n Timess Start, Ich werde es speichern. Ich verstehe es hier wie React Redux. Also muss ich diese Anwendung erstellen. Und jetzt beeilte sich. Dann geschärft Lava schweren Tank. Dann brauchen wir uns Material mit dem Bauteil in unserem Projekt. Bisher jetzt so viele Pakete in unserer Anwendung benötigt, um eine ganze Spread-Anwendung in einer Reaktion mit j von Harvard zu erstellen. Ich lese mal Middleware. Warten wir auf die Installation. Das Paket ist installiert. Jetzt müssen Sie auch diesen JSON-Carver installieren. Also habe ich den JSON-Server bereits auf meinem Computer installiert. Also zeige ich Ihnen nur, wie Sie das JDK in der Maschine installieren. Also musst du das tun. Sie haben Farbe auf der Injektion jedoch Beweise. Lassen Sie uns also auf die Paketinstallation warten. Und ich habe auch ein Projekt in VS Code geöffnet. So öffnet sich das Jahrzehnt in VS Board Adder. 5. Einrichten von JSON Server in React App: Jetzt müssen wir eine Variable für feinste militärische db.json erstellen , um mit der JSON Haraway zu arbeiten. Und nicht hier. Lassen Sie uns das löschen. Wir müssen hier eine Datei erstellen. Es wird db dot JSON und eine weitere Datei, dot ENV-Datei sein. Also lassen Sie uns das Add-on auch, dot ENV-Datei. Aber mit Italien wird uns die API hier gesagt. Und du willst das hier nicht, ohne Titel. Jetzt werden wir mit der React-Entwicklung beginnen, eine Art Netzkurve. Sie befinden sich im Verzeichnis. Irgendwas stimmt pro Reaktion nicht. Aber sie nehmen den Ordnernamen. Und ich werde tun und Tim Star. Und in der Zwischenzeit, gleich am Tag beginnend, werde ich hier einen hinzufügen. Um dich für immer in Jacob anzufangen. Ich werde hier ein Kohlenstoffderivat hinzufügen. Also innerhalb einer, innerhalb dieser Startanwendung ist ein Start. Gehen wir also in den VS-Code und fügen Sie das Skript hier hinzu. Obwohl es wird beobachten db.json Datei. Sie haben das Hilum getroffen, das wir hier gegeben haben. Und es wird auf dem Platz laufen. Ich 100 wieder. Und ich werde sie einfach und die Medien-Registerkarte hier einfügen. Also sagen sie, dass Dummy-Daten, ich bearbeite nur die David- und JSON-Datei. Also haben wir hier einen Re-Datensatz, okay, in unserem db.json, können Sie auch die Daten im Browser asic lesen. Also, um die Daten im Browser zu lesen, müssen Sie die Höhe eines ausführen, die wir gerade hinzugefügt haben. Also gehe ich einfach hierher, und ich werde den NPM-Lauf aus uns laufen lassen. Und Sie können sehen, dass unsere Hardware läuft auf dieser URL. Also kopiere ich einfach diese URL. Und ich werde einfach in die Schranke gehen und es hier kleben. Also, das ist jetzt ein nützlicher. Aber Sie können sehen, was auch immer die Daten in unserem db Punkt sind. Ich lade im Browser, wie es. Und Sie können auch lesen, die Daten liegen, wenn sie gefälschte ID. So können Sie das auch tun. 6. Ordnerstruktur erstellen: Lassen Sie uns also anfangen, an der App-Anwendung zu arbeiten. Also werde ich in meinen VS-Code gehen und ich werde einige ältere noch hinzufügen. Also werde ich die Seiten haben. Dann. Ich werde vier loslassen. Und du sagst die Seiten. Und ich habe noch einen Ordner namens Redox. 7. Redux und Route einrichten: Also lasst uns das machen. Und du schaffst es auf. In unserer Verpflichtung. Ich werde hier eine Datei erstellen, Node.js und Aktion. Und dann Punkt js. Dann wird es einen Wurzelknoten geben. Und letztendlich ist die Zehe ein wenig größer. Also zuerst müssen wir den Laden leiten. Also würde ich einige Sachen aus den Daten importieren, ausführlich durchführen. Also lassen Sie uns aus Redex importieren, erstellen, speichern, Middleware anwenden. Und dann das nächste, werden wir den Logger importieren, Logger. Logger, um im Grunde den Anwendungszustand zu ziehen. Und der nächste Zustand. Dann müssen wir importieren. Und weißt du, wir brauchen auch Wurzellesung. Sagen wir unsere, lasst uns die Rubrik importieren, die wir noch definieren müssen. Jetzt. Wir werden es haben, Middleware, Middlewares. Und darin werde ich sie jeden Tag hineinlegen. Jetzt. Ich werde in Prozess JK überprüfen, Prozess, Prozess Punkt a und a, Bewachung AN a und B, dass zu Nebel. Und dann für diese Lava in die Gegend. Jetzt werde ich den Logger wirklich schieben. Jetzt. Definiert den Speicher, ihren Speicher, aber es wird ein Geschäft zu erstellen. Du würdest es reduzieren. Anwendung von Middleware Middleware bei Ford Standard, sorry, Export Standard Shop. Nun, gehen wir zurück zum Wurzelreduzierer. Also brauchen wir die Messwerte, die ich früher. Aber lassen Sie uns zuerst den grundlegenden Anfangszustand des Reduzierers definieren. Geh. Hier wird es, Sie werden uns in jeder Pille helfen. Ich fordere die erste Bewerbung. Es wäre also wie Yuja. So werden wir eine Menge YuJA haben und werden auch mit dem Winkel arbeiten Sie, dass. Also Single normalerweise wird es nur auf einem Objekt sein und es wird noch ein Bein laden. Es wird also falsch sein. Und ich werde Wurzel passieren, nicht Rotor. Geben Sie ihm den Namen wie Ihren. Reduzieren. Ok. Nein. Ich werde die Pfeilfunktion noch verwenden. Und ich werde dies dem Ausgangszustand zuweisen, wird eine Aktion sein. Bühne zurück. Und füge das jetzt hinzu, ich werde einfach zurückkehren, der Standard ist tot. Ich denke, komplex addieren sich jetzt. Und ich werde Standard-Benutzer exportieren. Jetzt. Ich werde zur Wurzel gehen. Und hier werde ich die drei kombinieren, sie von der Tiefe reduzieren. Also importiere ich das kombinierte und es ist da. Dann werde ich die Straßenbewertungen definieren und heute sagen experimentelle kombinierte Lektüre Sara. Und ich werde, Bereitstellung der Schlüssel hier, Benutzer zugreifen. Übernehmen Sie die Führung für die Stunde, Sie reduzieren es auch. Also ja, sagte er, und ich füge die Eugenik in den UV-Editor ist hier. Also mit Hilfe von haben Sie p bekommen, werde ich in der Lage sein zu handeln, wie die Seitentabelle aus den Daten gespeichert wird. Also lassen Sie Port, nicht reduzieren m. Jetzt haben wir Rotor zu sagen, hier ist wichtig in einem Geschäft. Und lassen Sie mich zum Index gehen, nicht in JS-Datei. Also in der Datei index.js brauchten wir einen Anbieter auf dem React-Buch, das direkt zur Verfügung gestellt wurde, um im Grunde den Zustand insgesamt die Anwendung zur Verfügung zu stellen. Auf diese Weise haben wir Provider für diese Anwendung verwendet, kann auf einen Zustandsspeicher für diesen durch seinen Namen zugreifen. Wie Anbieter, obwohl es die Anwendung zur Verfügung stellt, ist auf unsere gesamte React-Anwendung zugeschnitten und gespeichert. Jetzt brauchen wir auch einen Browser-Router, um die Routing-App jeden Tag in unseren Verpflichtungen zu haben . Also werde ich auch von React Router Punkt I wichtig und ich denke, wir haben nicht den React Router dot o installiert. Lassen Sie es alles, dass Paket, NPM installieren React Router, dom. Also vergesse ich, den Skype-Gast zu installieren. Also in der Zwischenzeit installiert wird, werde ich einfach React Router überhaupt importieren. Und das Paket wird sein, ich bin in der Vergleichbarkeit, der Browser-Router. Und wieder werde ich die Anwendung mit ihnen umschließen Die andere mit unserer Anwendung haben jetzt die Routing-Fähigkeit. Ja, ja. Jetzt haben wir eine Route und ein Geschäft in unserer Anwendung zur Verfügung gestellt. 8. Arbeiten mit Tisch auf der Homepage: Also lassen Sie mich die Breite PDF hier starten, obwohl ich es Feist Homepage tragen werde, die home.html. Und ich werde reaktive Snippets verwenden, um ein n-Bit zu generieren. Also, wenn Sie nicht, wenn Sie nicht wissen, dass dies als Snippets. So können Sie diese Spannung oder Reaktor redex und grok installieren, obwohl dies dazu beigetragen hat, ein Snippet zu erzeugen. Also verwende ich diesen Text, den ich in meinem VS-Code senden kann. Also lassen Sie uns entweder geben. Es ist nicht nur alles. Und ich werde diese Route hier in unserer app.js Datei registrieren. Ich werde dieses Zeug verschieben und ich werde React Router dom importieren, ich werde React nicht nur die Sache importieren, es gibt ein Problem. Also denke ich, es speichert es nicht in diesem Park. Also eigentlich aus Versehen, es wird in R gespeichert, Also müssen wir in diesen Ordner gehen. Also kann ich einfach in diesen Ordner gehen. Du reagierst. Ja. Aber du hättest und jetzt werde ich das Ende installieren alle reagieren Router nach unten. Stellen Sie sicher, dass Sie sich in diesem Ordner befinden, um die zusätzliche Unabhängigkeit zu installieren. Obwohl. Zwischenzeit werde ich Switch und Route importieren. Ich benutze Tonhöhe. Dann die aus, lassen Sie eine Handlung. Und ich werde den Weg geben, dass ich jetzt zu Hause bin. Und die Komponente wird das Zuhause sein. So wird es automatisch importiert. Vf Corp Wasserstoffkilometer oder zu importieren. Lassen Sie uns also warten, bis die Iteration überreagiert auto Dom in unserer Verpflichtung installiert ist. Also lasst uns in den Browser gehen und aktualisieren. Jetzt sind wir in der Lage, die Homepage zu laden. Obwohl von nun an, was werde ich auf die Material-UI verweisen um die Tabellen in unserer Anwendung zu erstellen. Also werde ich hier einfach zur Komponente gehen und nur herausfinden, wo eine Aktientabelle in der Datenanzeige sein sollte. Ja. Also hier ist der Tisch und ich benutze diese Tabelle. Ich zeige es Ihnen, indem Sie diese Tabelle verwenden. Also fünf Mal werden all diese sein. Also ihr Jungs öffnet auch einfach diesen Link und kopiert die ganze Geschichte. Und ich werde meinen VS-Code einfügen. Das ist also zu Hause. Also habe ich die ganze Datei aktualisiert, ja, ich meine den ganzen Import. Jetzt. Ich brauche das alles, was ich brauche. Also werde ich Peak nennen. Ich werde alle diese jetzt kopieren. Also lasst uns auf die Homepage gehen. Ich muss hier nicht die Anheuerung kopieren. Ich kopiere das Ding einfach außerhalb der Komponente. Okay, also habe ich Mohnöl, dieses Ding out Header Komponente. Und dann werde ich das ganze Ding kopieren. Also stellen Sie sicher, dass Sie auch mit mir kommen. Also ja, ich bin ein verwandtes Zeug. Also Paige hat sich in den VS-Code geklebt. Nun, ich füge das da rein und füge hinzu, nein, ich habe nicht die Rohdaten. Also werde ich das einfach kommentieren. Und ich wende einige Styling Mine auf meine eigenen es Fliesen. Also gab ich Ihnen meinen mit 900 und Marge Top Schnäppchen Power Play, ein 100. Plötzlich Styling und geben meine eigenen und wir müssen die Firma kopieren, um den Stil anzuwenden. Ja. Nein. Also und ich habe es jetzt einfach verlassen. Und nur p und dann die URL, wo wir in der Lage sind, die Tabelle zu sehen oder nicht. So sind wir in der Lage zu sehen, dass sie eine Menge Geld haben, um Zeile zu löschen. In unserem Fall. Was wir haben, haben wir keinen Tag ohne Namen zu haben. Dann wird er dann Kontakt aufnehmen und dann Name, E-Mail, Adresse und die letzte. Und hier haben wir eine Aktion. Und alles sollte die Standardlinie sein. Also gebe ich dir nur ein Zentrum. Und lasst uns in den Browser gehen. Also jetzt haben wir eine richtige Überschrift in der Tabelle. Und jetzt, um die Daten zu erhalten, obwohl wir zunächst bereits Daten und ihre db.json-Datei haben, aber wir brauchen die Daten in der Tabelle. 9. Unsere erste Redux Action und Redux: Wir werden eine und redact Fraktion schreiben. Also werde ich die Asche geben, die hier tippen kann. Wieder. Du bist einfach nur OK. Und jetzt kommen, kommen Sie, um hier in Untätigkeiten Datei zu arbeiten. Ich werde mal importieren. Ich kann tippen und ich werde einen geben. Normalerweise werde ich hier definieren, was für eine Aktion hier. Holen Sie sich Benutzer. Und D Wenn Sie in der Regel bewohnbar haben. Daher wird diese Aktion den EU-Haushalt als Argument haben. Und jetzt werden wir eine Dividende in Tech Fee oder eigentlich ein bisschen Typen schreiben. Und dann geben Sie dot ein. Und die Nutzlast werden Sie sein. Ja. Ok. Also sagen sie den Akzent. Jetzt müssen wir eine Akzenterweiterung als Live-Load schreiben. Sie nur und es wird Export tatsächlich gehen für Kosten niedriger tun ja. Also, bevor Sie den Akzent-Dispatcher schreiben, aber stellen Sie sicher, dass Sie APA hinzugefügt haben. Ja. Oh, zuerst werde ich die APA React App-API hinzufügen. Und die API wird diese sein. Ok? Also in dieser API brauchen wir hier. Und daher habe ich die Umgebung hochgradig aktualisiert. Also muss ich mit Herbert Eye anfangen. Ich werde über diesen Knoten kommen. Ich habe gelehrt, dass die Entwicklung dieses Ding, das wir tun müssen, wenn Sie mit der Umgebungsvariablen arbeiten. Jetzt komm zum Taxan. Und in der Zwischenzeit werde ich den Unfall zu einer Zeit Funktion schreiben. Es öffnet sich also im Browser. Inzwischen schreibe ich einfach das Bild, weil es einige Zeit dauern wird, um in den Browser zu laden. Und wir brauchen das Kit auch. Also, wenn ich die Kinder setze, importiere ich die Acks. Ja. Kommen wir herüber und machen X. Ja, das tat ich. Und hier werde ich Prozess und, oder T und V Punkt PNG API verwenden. Danach werde ich in der tun, dann lassen Sie es sein, dass als Bar. Und danach werde ich defäktieren und die Handlung wird gelegt. Holen Sie sich es als POME-Daten. Und ich würde auch ein Konsolenprotokoll noch setzen, dass wir nehmen können, ob wir in der Lage sind, die Daten von Anfang an zu bekommen, sind es jedoch nicht. Und wenn Sie Luft haben, dann werden wir hier fangen. Und so lange, nicht auf dem Weg. Also kommen Sie jetzt zu dieser Akte. Und hier werde ich den K-Typ hinzufügen. Aber wir müssen auch die Typen hier importieren. Also kopiere ich das einfach. Und ich werde hier einfügen. Und Typen Punkt bekommen noch. Und im Gegenzug werde ich nur den Staat ausbreiten. Und der Zustand wird bei Chandon Nutzlast und Anfangswert sein, es wird das blaue sein. Jetzt. Es wird falsche Blähungen sein. 10. Verschieben, die Benutzerdaten auf dem Tisch erhalten: Also haben wir die Aktion gefahren, um zu entsenden. Jetzt gehen wir auf die Startseite. Aber das in die Homepage. Und von hier aus werden wir abschicken und ich kann so von React Redux mitbringen. U ist ausgewählt. Und du hast doch Eltern getan. Ich importiere die US-Silizium- und USDA-Mitarbeiter. Und, und brechen Sie diesen Weg und Aktion. Und p, ob wir in der Lage sind, den Benutzer zu speichern, können Schwanz in den Leser mit, dass nicht tun. Nun, ich werde es auf einer Versandvariablen behalten. Und ich werde hier einen Rieseneffekt verwenden. So wichtig für Sie auf der Messe, dann ist das wirklich weit verbreitet. Führen Sie normalerweise einen API-Aufruf durch. Es ist kartiert. Und hier sind wir zurück, um niedrigere YuJa zu versenden. Also, wenn wir Aktien mich automatisch identifizieren , obwohl ich Schreibtisch wichtig und auch sicherstellen, dass es wichtig ist wie die Spitze. Also ja, der Importeur, Sie senken den Benutzer. Also haben wir diese Prüfung, der Herr. Jetzt sind wir auf dem Browser. Ersetzen Sie einfach die Anwendung. Und sogar im nächsten Semester, ob wir im Stande sind, unsere narc weiter zu erzählen. Und hier bekommen wir den ganzen Benutzer, den wir in unserer db.json-Datei haben. Das ist also die db.json-Datei und alle Daten, die wir in unserem Brief haben, sagen Sie? Also lassen Sie uns gehen und alle Details hier anzeigen. Also, was ich tun werde, die holen Sie den Staat aus dem Laden. Ich habe zwei Einheiten einen riesigen Selektor in der Home-Komponente. Also werde ich Struktur sein und ich werde sanitäre Ära benutzen. Und der Staat ist, nehmen Sie die Artesia unten, wie Sie die Wurzel reduziert und das Reduktionsmittel dünn können. Fügen Sie den Schlüssel hier hinzu. Also werde ich sie benutzen. Ted-Punkt-Benutzer. Und von der data.txt werde ich die Benutzer strukturieren. Ich hoffe also, dass es kein Land und keine Mühe machen wird, ungepaart zu machen. Dann werde ich das einfach ändern. Also mache ich nur die Daten noch, wenn Sie irgendwelche Verwirrung haben. Also, jetzt, was ich jedes Jahr tun puja ist tf.data und alle Familien, Ted dot Daten, ich werde Ihnen beschreiben, ja. Also hier werde ich Textur geben. Und hier, was ich tun werde, werde ich nur kommentieren und auskommentieren. Und ich werde tun, du wirst bekommen und du gehst einfach, wir bekommen keine Ära, indem wir die Sache tun. Also werde ich noch alles ändern. So wird es Saftpresse sein. Für Schlüssel. Ich gebe einen Naught Rho Dot Namen wie User.name ordentlich, den ich hier gebe. Und hier gebe ich dem Benutzer Punktnamen, Punkt, was haben wir? Und dann kann ich ihn anrufen. Also haben wir E-Mail, aber wir müssen einfach alles kartieren. Und hier wird es der Kontakt sein, und hier wird es der Anker aussehen. Und hier müssen wir im Grunde den Button hinzufügen, um tatsächlich, na ja, ich werde verlassen, wie ich weiß. Und dieser wird einen großen Hit bekommen. Und stellen Sie auch sicher, dass die Ausrichtung 1010 ist und alle Daten und geben Sie ein. Also lasst uns in den Browser gehen. Nachladen. Jetzt sind wir in der Lage, alle Daten in der Tabelle aus dem Speicher zu laden. 11. Knopf auf dem Tisch hinzufügen: Also die nächste Operation, die wir ausführen werden, löschen n. Dafür müssen wir addieren um 10, um die Schaltfläche hinzuzufügen. Und ich gehe wieder zu unserer Material-UI, und ich werde auf die Tasteneingaben achten. Das ist also die Tasteneingabe. Und, und ich werde diesen Knopf benutzen, okay? Also werde ich tatsächlich die Tastengruppe treffen, also werde ich diese verwenden. Ich werde es einfach kopieren. Und ich gehe zum VM-Code. Und Sie fügen es einfach ein. Und lassen Sie mich das hier entfernen. Und wir gaben das hier, löschen. Und das tat es. Und ich werde die Farbe von der primären hier entfernen. Primär wird so sein, und dieser wird der zweite Tag sein. Nun, ich gebe das zweite Gehirn. Ich und wir müssen auch die Schaltflächengruppe importieren. Also öffne ich einfach alles. Und ich werde diese beiden Dinge importieren. Also werde ich es einfach kopieren und einfach hier setzen. Und wir brauchen auch gab seinen Stil. Ok. Also lassen Sie uns das kopieren und es oben einfügen. Und riesige tally die bereits genommen. Also werde ich hier geben, eine Botaniker-Kachel benutzen. Und ich brauche diese botanische Kachel und den Boden. Also hier brauche ich meine winzigen Fliesen und verwenden, aber jederzeit. Und jetzt werde ich diesen Tastenstil verwenden. Und drittens, ja. Lass uns noch einmal eingehen, wie sie dich haben. Also haben sie eines Tages hinzugefügt, indem ich einfach die Dateien kopieren werde. Und ich schätze, schließen Sie das hier wieder. Und wir haben keine Klasse oder Tisch, wo wir bhutanische Fliesen haben. Und wir haben ein Problem. Also lasst uns zur Anzeige gehen. Und wir haben ich denke, wir haben importiert reagieren zweimal. Ja, also ja, du kennst einen wichtigen. Gehen Sie jetzt zum Browser. Jetzt haben wir unsere löschen alle beta1. Und das nächste, was wir tun werden, ist und bieten auch etwas Raum dazwischen. Aber ich bin, also ist es schön, eine Lücke zwischen verschiedenen zu haben, aber ich weiß, was ich tun werde. Ich werde keine CIMP Thailand-Datei schreiben. Ich bin alle bereit, den Inline-Stil zu bieten. Es wird wie von I bis J. und ich werde meinem Pixel geben, dass wir etwas Platz haben können. Ja, jetzt haben wir den Platz. 12. Arbeiten mit der Action von Handlung und: Also jetzt haben wir auf den Löschvorgang gesetzt. Also werden wir wieder den Akzenttyp schreiben. Vintage-Zeit werden Warteschlangen gelöscht, ja, wir löschen. Eine Gewerkschaft wird dazu führen, eine UGA zu löschen. Und ich rufe Charisma an. Und ich gehe zu den Akzenten. Und ich werde dieses einfach kopieren wegen der Treue reden mehr über das Ding wird es in diese Gleichung hinzufügen, eine Kettenlänge von Tor zu löschen. Und es wird die ID erhalten. Ich werde den Namen ändern, dich dort löschen. Es wird ein paar ID hinzufügen, ich werde die ID hier hinzufügen. Und ich sage voraus, dass verschiedene Aktionen pro Zeit. Lassen Sie uns also die Aktion bereitstellen, die der Benutzer gelöscht hat. Ok? Es wird also keine Argumente haben. Aktion mit einem Typ, entweder ein Typ löschen. Also werde ich das verschieben. Löschen Sie beides. Töte dich nicht auch. - Ja. Ich meine, du löschst dann. Haben Sie gelebt gelöscht. Gehen Sie jetzt zu einem Reduzierstück. Und hier werden wir diesen Fall hinzufügen. Also wird es sehr backen kf hier. Löschen Sie und machen Sie es einfach stattdessen und machen Sie die Ladebalken. Also haben wir mit der Löschaktion getan. 13. Dispatch zur Entfernung von Benutzerdaten aus Tabelle: Kommen Sie nun auf die Homepage und drücken Sie einfach die löschende. Also, was ich tun werde, werde ich einen onclick schreiben. Und bei Klick haben wir einen Handle, Löschmethoden. Und löschen. Und der Tod wird das Parken der ID sein, Benutzer. Id. Jetzt erstellt diese Handler außerhalb , die eine erstellen die Datei zurückgeben. Und es wird die ID besiegen. Und, und ich werde es schlank machen, ein Fenster zur Verfügung stellen. Und Formeln, wenn du hey, löschst das. Also wollte ich den Benutzer nur mythisch warnen. Aber trotzdem wollte ich Sie entfernen, dass, wenn die Rechnung nicht hier ist, ich dem Fenster ein Warndialogfeld zur Verfügung stellen werde, und es wird eine Methode gelegt haben. Sie möchten die eine Umkehrung löschen. So können wir das Dialogfeld mit der window.com bar generieren und wir können einen See oder eine gemeinsame geben. Wolltest du das Jahr dann wirklich löschen? Die Datenkarte ist und klicken Sie auf OK, dann wird es unterhalten, dass, wenn Zustand und dort gefunden, Ich werde zu senden löschen Sie die und Verdünnung Anhörung automatisch aus dem VS-Code importiert. Sie können oben sehen, VS Code schlägt mich in meinem MDF Board. Also lassen Sie Pfad, wenn Id nicht Jahre. Also ich denke, ich irrtümlich, Sie würden den Griff bekommen, der außerhalb der Komponente zu handeln. Wir müssen die äußere Komponente nicht erstellen. Wir müssen das intakte die Komponente erstellen. Grundsätzlich außerhalb der Rückkehr. - Ja. Ted hier. Und wir müssen den Ausweis übergeben. Und eine Sache sorgt dafür, dass es in der Aktion. Sobald Sie löschen, müssen Sie auch die aktualisierten Daten aus dem GitHub benötigen. Also hier werde ich wieder die Last YuJA versenden, um die aktualisierten Daten aus dem JSON P zu bekommen , wo immer es funktioniert oder nicht. Also werde ich den letzten Datensatz löschen, löschen, und ich werde auf OK bezüglich unseres Löschens klicken. Also kein Problem. Jetzt haben wir Probleme mit dem kann binden. Also ist es hier in Ordnung. Ok. Ich habe hier Labyrinth, FlatMap, das ist nicht zu löschen. Also lasst es uns noch einen Versuch hier machen. Also wieder, gehen, um den letzten Datensatz zu löschen. Und jetzt sind wir in der Lage, den Datensatz zu löschen. Wir haben von allen Lese- und Löschvorgang mit NADH und FADH über n. jedes Deck. 14. Form: Also als nächstes werden wir an der Formularkomponente arbeiten. Um also an der Formularkomponente zu arbeiten, müssen wir oben eine hinzufügen, um den Benutzer hinzuzufügen. Also lassen Sie uns die Schaltfläche hinzufügen. Also gehe ich zur Home-Komponente. Hand hier. Und wir werden einen Knopf hinzufügen. Hier, ich bekomme den Knopf. Und dann kovariant. Ich kopiere nur einen Knopf. Eigentlich haben sie WO nur diese kopieren und einfach hier einfügen. Und es wird eine Variante sein. Variante enthalten und wütend. Und es wird der Name Bein Sie dort sein. Und ich werde das an einem Tag ins Bataillon bringen , weil ich hier einen Klassennamen anwenden muss. Also male ich nur im div. Und der Klassenname wird nicht der Stilklassenname sein. Also haben wir Knopf-Ziegeldach. Also lassen Sie uns im Browser sehen. Also, jetzt bekommen wir die Anzeige, die Sie im Laufe der Zeit. Also klicken Sie auf Get Data Route. Also, was ich tun werde, werde ich das Bild h3 vom Reaktionsrouter dom 0 bringen. Es wird h3 verwendet und unten kommen. Und wenn Sie die t-Variable behalten, riesigen Baum. Und genau das, was Sie tun müssen, wenn Sie klicken, hey, x3, dot push. Also werde ich auf den Turm drücken, um diese Route zu gehen. Wenn nicht, testen Sie. Also lassen Sie uns diese Route hinzufügen. Also hier in app.js, nach Zeitraum die Seite an dir, sie sind nicht ds. Und erstellen Sie einfach eine Daten, die ab sofort vermittelt werden. Die Gesamtsumme beziehen sich auf die Anzeige Sie dort. Und ich bin nicht auf diese Route gekommen. Und ich werde diesen Namen wie Add User zur Verfügung stellen. Und das komprimierbare fügen wir Ägypten hinzu, so dass es automatisch in meinem VS-Code importiert. Und jetzt und klicken Sie einfach auf die ADA Sie, dass jetzt sind wir Lage, Adi zahlen dann und dort Ausfall auch immer Kette zu bewegen. Also fangen wir an, an dem Add Bereich zu arbeiten, obwohl wir hier mit dem Herbst arbeiten müssen. Aber wieder gehe ich zur Material-UI und ich werde das Textfeld verwenden. Dies ist also das sehr einfache Textfeld. Ich werde sagen, das hier werde ich zu dir gehen. Also schätze ich, wie gut es war. Öffnen Sie auch diesen gesamten Quellcode. Lassen Sie diese beiden Dinge importieren. In diesem oberen Jahr ab jetzt. Und jetzt, was wir haben, kopieren. Vielleicht müssen Sie das Zeug kopieren. Und fügen Sie einfach hier hinein und entfernen Sie die ersten beiden. Aber nur brauchen und kopieren Sie diese Krawatte. Ja, ich habe ein Exemplar. Und hier bin ich, wo Sie eine Breite erstellen können, aber was, wenn ich trage, okay, jetzt von 25 bis 45, schlecht. Und angesichts dessen, dass mit Lasst uns gehen und auschecken. Also bekommen wir das Richtige. Eingangshauptseite. Ok. Oh, lassen Sie andere Eingaben hinzufügen. Will Papa ging, Oh, ich werde nur Apala oder Zeit kopieren, weil dort drüben und ich werde einen Wert hier zur Verfügung stellen, lasst uns versuchen, einen Zustand der Anwendung zu finden. Wir müssen also auch den Wert für das Eingabefeld bereitstellen. Also brauche ich dich stattdessen. Und ich werde den Staat hier definieren. Geben Sie an, dass Steak Sie aufgelistet und was wir Wert auf späten Namen, E-Mail, und kontaktieren Sie dann. Und dann haben wir großartig gehabt. Also ist alles in hübschen entweder jetzt. Und sofort werde ich bekommen, aber wir müssen nicht wie head.next test.html in den Wert schreiben. Also Name, E-Mail an Deck, Adresse. Nun wird der Wert hier benannt. Und das Etikett, das wir Fahrspuren Namen ändern werden. Und ich werde dort sein. Und wir werden eine Pause geben. Jetzt. Und mehr Gehirn hier. Hier. Und hier werde ich zoomen, in MPF und hier. Und ja, stecken Sie diese beiden Ding. Es wird sein, es wird eine E-Mail sein. Ja, also lasst uns engagieren und das hier per E-Mail senden. Und die E-Mail und das Etikett werden jetzt zufrieden sein. Wert wird Kontakt sein. Und das wird die Nummer sein. Und dieser hier wird die Adresse sein. Und wertvoller V. Drift wird der Text sein. Und lassen Sie Wut, aber ein Durchschnitt. Also, ich schätze, kopieren Sie einen Knopf von hier. Lassen Sie uns kopieren und fügen Sie es einfach hier ein. Also brauchen wir nicht onclick. Kann sogar Typ, aber Typ Millimeter Gipfel. Und mit rechtzeitigen Variante zusammenzuarbeiten und die Fliese wird so wichtig sein, tatsächlich, wir lassen uns nicht Ideation für weniger wichtige Schaltflächen jetzt, ja, kooperative Importaussage. Und ich werde es einfach hier einfügen. So ist die Aussage gemalt. Und geben wir ihm hier einen Titel. Also Stil im Grunde wollen wir nur ein wenig von der Schaltfläche hinzufügen. So wird es die 100 Pixel sein. Und, und geben Sie ihm einfach der Name wird etwas Hals sein. So einiges davon. Und das nächste, was wir tun werden Bein. Gehen wir zum Arzt. Wir bekommen hier das Formular. Jetzt. Was wir tun könnten, könnten wir hier etwas Styling machen. Lassen Sie uns etwas Marge an der Spitze bekommen. Also werde ich Marge Talk hinzufügen. Und ich werde Ruhe geben. Ich habe noch keine Show ist auf den Rajah verbrannt. Ja, jetzt werde ich eine Überschrift geben. Also hier brauchen wir eine Überschrift, legen Sie Benutzer hinzufügen. Okay, also die Toten auf dem Weg. Und wir brauchen und wir brauchen auch einen Knopf. Also, wenn du wieder reingehen wolltest, werde ich den Knopf kopieren. Also lassen Sie uns kopieren unterscheiden. Ich kopiere das Ganze und füge es einfach ein. Und dieses Farbrad mit einem sekundären. Also gebe ich zweitrangig. Moderne Marketing-Stadt wird Marge sein. Top, wird epischer Film sein. Und es bleibt Thema. Und in onclick, lassen Sie uns den Buttonnamen agil ändern. Und onclick. Wir gehen zurück auf die Homepage. Also müssen wir hierher bringen ist vom React Router runter. Lassen Sie uns Tag enthalten ist Router dom zu reagieren, riesige HJ, und Wiederherstellung der drei Variablen. Und Geschichte. Nun, du behältst die Variablengeschichte. Und ich werde es einfach ändern, wie Geschichte, Geschichte , Punktdruck, und entfernen Sie einfach den Typ davon. Aber klingen Sie nicht mal 100, wir haben niedrige, wir haben keine Show. Nun, lassen Sie uns in den Browser gehen und überprüfen. Ja. Jetzt geh zurück. Es funktioniert also. Also lasst uns die Schaltfläche unter Funktionalität starten, wird jeder Eingabefehler die onchange haben und so weiter. Können Sie hier ein Ion definieren? Ich werde diese Aussage abseits des Netzes fordern. Und Eingangsänderung. Und das wird sein, es wird FEV. Und ich werde Lambda e Punkt Ziel erfassen. Und dieses Ziel, ich brauche Namen und Wert und ich werde den Staat, den Staat, den Namen festlegen. Und so muss ich bei jedem Tastendruck den Wert in einem Zustand speichern, der sehr einzigartig ist, um Eingangsänderungen zu behandeln. Und ich werde es anwenden, wenn Eingangsänderung in allen Eingängen nacheinander behandelt wird. Also werde ich nur diese Punktänderung bereitstellen und sie werden Änderungen eingeben. Also denke ich, während PDS jetzt hier basiert, werde ich hier einfügen, und ich werde hier einfügen. Also haben wir mit der und getan, und die Formularebene. Wir brauchen auf einige es Griffe, ich werde definieren, wird in irgendeiner Weise behandelt. Also lassen Sie uns definieren. Und ich denke, wir haben mich auch und wir werden das Standardverhalten von Roger am Schreiben aller Verstärkung verhindern, also müssen wir nur u dot default schreiben. Und hier, um in den Griff Gipfel zu gehen, müssen wir die Axiale hinzufügen. Aber vor dem Schreiben und ich habe gerade durch den Staat hier als auch definiert. Also werde ich auf jeden Fall Empathie müssen Sie dann keine Gottlosigkeit zu ihnen bilden. Und j. also werde ich einen haben Schwanz, Kopf. Und du bist der Staat und das Gleichgewicht der Einladung. Und im Griff vorlegen Vergangenheit, werde ich überprüfen. Also, wenn eine Eingabe in Kartoffel, werde ich nicht erlauben, nur das Formular an den Injektionsserver zu senden. Also lassen Sie uns jede Eingabe geben wird in der nächsten 18 E-Mail und der letzte 20. Kontakt sein. Also werde ich die Fehlermeldung einstellen und alle Eingabehand setzen. Und der LD-Junge, wir werden den Code an jemanden schreiben, der das Watergate bildet. 15. Arbeiten: Handlung und Reducer für die Einfügung von User in JSON: Also lasst uns den Akzenttyp schreiben muss. Also werde ich einfach darin reden. Erstens, Ich füge einen Benutzer hinzu, füge einen Benutzer hinzu. Und fügen Sie einen Benutzer hinzu, sorry, in den Aktionen. Ich muss das einfach kopieren. Paste. Gab dir den Namen Bein ADA da. Und hier werden wir den Filter Sie dort machen. Und ich werde die Anfrage ändern. Wo die Post zu tun. Und ich werde diesen entfernen und ich werde passieren. Und das zweite Argument, er kannte sie, und das wird zu Veränderungen führen. Also lasst uns hier eine Aktion schreiben. Also kopiere ich das einfach. Und ich werde dir ihre hinzugefügt geben, und es wird dich dort hinzufügen. Lasst uns das aktualisieren. Ich werde dich dort sehen. Und wenn nicht, glaube ich nicht, dass wir brauchen, weil wir nach der Bombenabgabe auf die Homepage drängen werden. Also in der Form Summation auch, standardmäßig, laden wir das Sie, dass Detail aus der Lesezelle, so dass wir das eine so lassen können, wie es ist. Ich meine, Sie können jetzt einfach anders kommen und zum Reduzierstück gehen und diesen Fall hinzufügen, damit ich ihn einfach anhängen kann, es hier definiert. Weil es bleibt, füge es hinzu und füge das hinzu. 16. Verschieben, die Benutzerdaten hinzufügen: Der Benutzer wird geleitet. Gehen Sie in Richtung der höheren Komponente, die Sie haben. Und da drinnen, im L-Teil, müssen wir den Code schreiben. Schriftlich. Wir haben die Basispaare nicht mitgebracht. Also können wir den Apfel hochbringen. Wiedergabe von DOM reagieren. Wir haben einen großen Unterschied gemacht. Und wir haben auf die Dispatching eine Variable gedrängt. Also lassen Sie es ist schnell. Aber bis du ihn holst. Und lässt die Statistiken hier nach dem , wenn es keinen Fehler im Fall gibt, wenn alle Eingabefeld von der EU dort zur Verfügung gestellt wird. Also werden wir fette Polster sein. Also werde ich Ethik loswerden. Und ich schätze, dann vom VF-Vorstand. Und ich werde diesen Zustand zur Verfügung stellen. In diesem Staat haben wir also die ganze EU dort. Wieder. Ich werde diesen Zustand zur Verfügung stellen. Und danach werde ich den zusätzlichen Punkt drücken, auf die Homepage schieben. Und auch wir müssen die Empathie aufteilen, wenn es Fehler aufgetreten ist. Und dieses Mal haben Sie dort alle Details in der Eingabe eingegeben, dann müssen wir den Fehler machen. Also lassen Sie uns definieren, der Editor wurde. Also müssen wir den Fehler hier definieren. Also werde ich die Flächenmethode der ADA Sie dort anzeigen. Und hier nehme ich, wenn David ein Fehler, dann werde ich den Bereich anzeigen, der drei Zeit und Stil hat . Und ich gebe nur die Farbe. Wenden wir uns dem anderen zu. Ich lade dieses und nur unwissentlich, ohne noch Details zu geben. Klang gerade. Also bekommen wir das Adenom und es gibt kein höheres. Für jetzt, lassen Sie uns die Eingabe Detail hier. Also lasst uns mit Spielen beginnen. So auf die Verkettung Methode funktioniert nicht. Also lasst uns weitermachen und weitermachen, irgendwie habe ich hier nicht vorgesehen, wir gehen Jungs. Wir vermissen hier ein Attribut. Wir müssen auch ein Namensattribut zur Verfügung stellen. Aber das Versagen nichts hier zu bekommen, nämlich E-Mail enthalten, sorry, vielleicht werde ich Ihren Namen nennen wird E-Mail sein. Und hier Name wird dann Nummer sein, nicht Nummer, ich bin in Kontakt. Und hier wird der Name die Adresse sein. Also lassen Sie es uns jetzt noch einen Versuch im Browser geben. Also werde ich nur einige Details noch geben Spiele, Spiele, gmail.com auf Typnummer, Adresse, die, geben Pläne. Und müde von Ihnen zu unterwerfen, dass auch immer hinzugefügt. Aber wir haben noch keine Daten bekommen. Ich schaue es nicht in der js innerhalb unseres Admins an. So gibt es ein Problem mit ihm, ob Sie es bereits gelesen haben, aber zu VIV, Wir bekommen nicht die aktualisierten Daten. Was die EU dann auf die Homepage umleitet. Lassen Sie mich das Problem beheben. Also, was Sie tun können. Also lassen Sie uns noch eine Daten hinzufügen. Ich bekomme nur etwas. Okay, also mach dich auf und gewinne etwas zufälliges Zeug. Und jetzt lassen Sie das. Aber dieses Mal hinzugefügt. Es könnte also ein Problem geben. Es wurde nicht hinzugefügt. Also, jetzt bekommen wir die Daten. Sobald Sie die Halle finanziert bekommen und dann hier die Daten und immer besser. Also lassen Sie uns eine aktualisieren, unsere Daten. Jetzt komme ich hierher. Wir fügen einen Kontakt unter gmail.com hinzu. Und dieses Mal werde ich Ihnen geben und jemanden schlagen. Die Arbeiten gehen weiter. Jetzt schon wieder. Es wird nicht aktualisiert. Sobald ich also aktualisiere, bekomme ich nur ihre Daten. Also lasst uns eins machen. Also, was unterscheiden sich die Akzente und einfach auskommentieren. Also lassen Sie uns nun den Benutzer hinzufügen. Also wieder, ich werde richtige riesige Fläche geben, das ist TFs Schwanz und der Kopf, gmail.com. Die Zufallszahlenadresse ist der Australier, wenn gut. Und klicken Sie auf Absenden. Jetzt ist kVA richtig und wir sind, und bekommen den aktualisierten Wert unter Ihnen, ihre Navigation. So sind wir mit dem Benutzer fertig. 17. Gestalte mit Edit: Also das nächste, was wir an der Funktionalität arbeiten werden, aber Sie bekommen ein wenig, das kam ein Minuten und wir werden den gleichen Code haben. Wir müssen ein bisschen Code anpassen, okay? Also kopieren Sie den ganzen Kern und erstellen Sie eine Datei, ja. Und geben Sie die Rezension ihnen. Nicht der Fall. Es wird neu für Sie sein, dass Alpha-Kettendisziplin wie Update und ändern Sie den Namen hier werde ich. Und doch steht es allen dort zur Verfügung. Ok. Und lassen Sie uns das aussagen. In der Datei app.js. Durch bloß sperrig. Es wird das It sein. Und ich bin wie ich denke, die ID und eine wichtige Idee, es zu benutzen. So VS-Code automatisch importieren. Jetzt kommen Sie zu Hause Bord, ja. Und in Idiot müssen wir den onclick zur Verfügung stellen. Onclick. Was wird passieren? Als ob es zum Pool gehen wird Sie zu posieren, dass Sie beide Fälle gemacht haben, haben Sie gelebt, wenn Sie ein Ticket kaufen? Und hier werde ich die ID zur Verfügung stellen. Noch einmal, ich muss dir den dunklen Ausweis geben. Also lassen Sie uns es einen Versuch in ihrer Gesamt, dass. Und ich werde klicken, dass sie es getan haben. 18. Einen --: Es jetzt brauchen wir den ganzen Wert hier. Also, was auch immer der Wert, den wir in der Tabelle für diesen bestimmten Benutzer haben. Also brauchen wir alle Details in das Eingabefeld so weit, dass wir wieder an einer Aktion sterben müssen. Also hören wir, dass wir schreiben werden, um den Finger zu bekommen, den Sie einfach gehen, wir brauchen das Ding, wirklich benutzen das hier. Also habe ich dir dort gut gegeben. Entweder. Und geh zu den Aktionen. Und ja, wow, Periode. Aber der Gott, der bekannte weibliche Ausweis. Also sind wir in dir, sie sind einfach gut. Und gehen Sie auf den Desktop und erstellen Sie ein Timesharing. So okay. Verwenden Sie es und ändern Sie die Art der Sache. Nun, du da und ich benutze das entfernen. Wir bringen mich nicht dazu, Ihnen das zu besorgen , und hier müssen wir das als Anleihen übergeben, die Punktdaten übergeben haben. Also müssen wir das, den Angriff an die Daten und an DKA weitergeben . Wir müssen diesen Hybrid-Fall für diese Typen Punktwert dort schreiben. Und ich werde zurückkehren, und ich werde den Staat NTU dort vorlesen, den wir hier haben. Normalerweise dann ich in einem leeren Array, und jetzt wird es Header, Payload sein. Und das Laden werden die Wände sein. Also geh zur DTU dort. Also sind wir hier fertig. Und hast du es benutzt? Wir brauchen den Ausweis. Also, wann immer Sie da sind und navigieren, bekommen wir das Ordentliche, wie wir eine Ordnung bekommen. Also werden wir die Idee bekommen. Sie denken, die US Para 0, wir brauchen das Muster vom Reaktionsrouter. Also brauchen wir Gebrauch, die bin. Und beabsichtigen Sie die Komponente. Hier. Ich werde de Factor dy, Dy. Verwenden Sie also Muster. Nun, wir werden uns nach dem Ausweis verabreden. Nur wenige Dinge, die wir hier anpassen müssen, also haben wir ID und wir müssen den US-Effekt hierher bringen. Sobald wir eine ID haben, die Sie mit Ihnen tun, muss die Komponente die Aktion in der realen Benutzer-ID absenden. Also schreibe ich Ihnen den Effekt hier. Und das nächste, nur gewinnen pro Tag Hand. Ich gehe zu diesem Pastor, der Fraktions-Entsendung, und wir besorgen Ihnen das. Okay. So sagten sie die Aktion, die wir früher geschaffen haben. Jetzt werden Sie wütend. Du siehst aus. Gehen wir also zu einer DTU dort und geben Sie einfach die ID an, weil sie die ID auf der Rückseite akzeptiert und es wird zurückgeben, dass Sie dort eine bestimmte EU verwenden. 2010, dass Asien und die ADA jetzt und gehen Sie einfach in den Browser und gehen Sie zurück und klicken Sie auf den ersten. Aber wir versenden die Aktion und bekommen dort Wert. Und Sie können in diesem Zustand Sie sehen, das undefiniert ist. Okay? Deshalb bringen wir die EU nicht dorthin. Okay, wenn nein, lass uns die Konsole sehen. Also in der Konsole haben wir DU dort, aber irgendwie Sie, dass es kein Warten im Reduzierstück ist. Mythisch, obwohl, in der Konsole haben wir wie in Zeile 54, wenn Sie zu dem Unfall gehen. Also haben wir mit 64 die Kontrolle. Aber es geht nicht in Richtung es getan ist, es wird an die Getty gehen Sie dort und engagiert, um die wir in diesem Jahr zur Verfügung zu stellen haben. Es sind gemeint, Herr. Und er benutzte. Also jetzt lasst uns, oh, lass uns im Browser sehen. Also gehen Sie jetzt zu den Daten. Und jetzt haben wir das u, das hier. Gehen Sie zurück und klicken Sie auf die dritte. Nun, sehen Sie, wir haben die jeweiligen Nutzerdaten oder nicht, aber wir haben diese Daten. Und jetzt, was wir tun werden, werden wir den dänischen Regisseur schlagen. Wenn Sie ein Lambda verwenden, ist Status 0. Lassen Sie uns wegnehmen, dass wir eine riesige ausgewählt oder nicht importiert haben. Also haben wir nicht selektiv verwendet, also müssen wir Selektor verwenden. Und, und verwenden Sie Selektor. Was wir tun werden, wir werden nur Zeiten geben, wenn die EU, der US-Sammler t8, t8 Punktdaten. Jetzt haben wir u, dass okay. Über die nächste Sache haben wir im Grunde gesehen das Detail noch, alle Details, die wir hier vorfüllen müssen, wenn Sie mit der rechten Maustaste auf die wieder. Also ein Teil davon, müssen wir noch einen schreiben. Mythisch verwenden Sie den Pfahl hier. Entschuldigung, benutzen Sie hier die FFT. Also werde ich noch ein Jahr in Kraft geben. Und in der Tat, dass ich es täglich überprüfen, das bedeutet, dass dieser riesige Faktor einen 30 Tag Sie dort laufen wird. Und jetzt nehme ich, wenn es da ist, dann Schritt, beachten Sie, dass Sie dorthin bringen. Also lassen Sie uns in den Browser gehen. Bietet sagen undefiniert. Okay, jetzt kommt es. Gehen wir in den Browser. Und jetzt hier, im Hinblick auf die Daten. Und wir bekommen noch eine Warnung. Gespielt eine Komponente ist eine Steuereingabe auf TV ändern und steuern, wo der Wert verändernde formative Manto undefiniert. Dieser Editor verursacht normalerweise, weil wir noch keinen Wert angegeben haben und die Kette definitiv definieren wir das undefinierte tatsächlich im Komponentenmodus, der Wert ist auf diese Weise undefiniert. Die Warnung wird nicht in der Konsole angezeigt. Also, um dieses L zu vermeiden, werden wir einfach, Sie dachten nur Advocate hier. So ist es entlehnt Gedanken angemessen Bewertung. Sie können das geben und der Editor wird weitergehen. Es ist keine ironische Warnung. Also lasst uns in den Browser gehen, neu laden. Und wir bekommen die Warnung jetzt nicht in der Konsole. 19. Verschieben, die Benutzer-Details aktualisieren: Gehen wir zur DTU, ihrer Komponente. Und in Handle senden, wir müssen das Update zu Ihnen dort zu zerstreuen, Nicht hinzufügen. Es ist so tödlich dort und stellen Sie sicher, dass es importiert wird. So ja. Ok. Das Wichtige, um die ADA Sie zu bewegen, die wir in dieser Komponente nicht brauchen. Und so lassen Sie uns gehen und überprüfen, ob die Parteien schaffen sind nicht. Ich werde es auslassen. Und ich werde Edelsteine und Freiwillige geben und ein Date lassen. Es wird also nicht die Anforderung des Energieproblems aktualisiert , die mit dem Status für undefined nicht gefunden gefüllt ist. Also lasst uns zur Aktion gehen. Also die haben definitiv Problem in der Kette. Also Datenbenutzer. Sehen wir uns nun die Konsolenkonsole an. Die Daten werden ebenfalls nicht aktualisiert. Ich kann ja. Die Konsole auch eine Daten nicht auf Decker. Was ist drei, was kann das Problem sein? Es ist die EU, sie sind aktualisiert. Und geh zum Reduzierstück. Alles sieht gut aus. Gehen Sie zur Bearbeitungsansicht dort und NAD zu Ihnen dort. Das Problem ist also, als würden wir hier nicht die ID angeben. Wir müssen die ID zur Verfügung stellen, weil unsere bin senden, erhalten Sie die tuatara Moment. Sie dort Detail und ID. Also lassen Sie uns in den Browser gehen und ihm noch einen geben. Versuchen Sie es. Es schon wieder. Das hier, ich habe ihnen etwas Verbundenheit gegeben. Mal sehen. Nun, sie Sie, dass Detail wird aktualisiert. Also haben wir ein Formular alle Lesevorgänge hier in React Anwendung wie erstellen, lesen, aktualisieren und löschen. Und ich werde alle Operationen wieder durchführen, damit wir kein Problem haben. Lassen Sie mich also mit dem Buchstaben E beginnen, damit wir alle Daten aus unserem GFF Refugium lesen können. Nun, lassen Sie es löschen. Es war LaCa. Daten werden also empfindlich in treu. Fügen wir die EU dort hinzu. Also nochmal, ich werde hinzufügen, der Benutzer ist Schwanz. Und ich gebe ihnen eine E-Mail, ähm, zufälliger Kontakt. Und das wird klar sein. Diese Dateien doc erstellen Vorgang. So sind wir in der Lage, den Benutzer auch dem JSON-Server hinzuzufügen. Lassen Sie uns gehen und in der Tat die Detail-Adverbien, so Adam, Marcus, und fügen Sie den Kontakt entweder an diesem Grid-Griff. Also gab ich dir und Adam 1, 2, 3, 0. Wie Sie sehen können, dass wir in der Lage sind, die Sie zu aktualisieren, dass Sie entweder 0 sagen. Wir haben eine Form. Die ganze dritte Operation mit Hilfe von React, tun Deck Dankeschön und Verteidigung. 20. Schlussbemerkung: Wenn Sie sich dieses Video ansehen, bedeutet das, dass Sie diesen Kurs abgeschlossen haben. Und ich bin sicher, Sie haben viel Wissen über einen Redex gewonnen. Jetzt können Sie mit dem Redox in jeder React-Anwendung arbeiten. Und auch, Sie haben ein wenig über die Leute, die nur Wissen über React haben. Also danke euch Jungs, dass ihr diesen Kurs genommen habt, und ich werde euch in einem anderen Kursabschnitt sehen.