React Fundamentals – Erstellen wunderschön schnell Websites

1. Einführung: Hi, alle. Mein Name ist Andrea. Ich bin ein selbst erzählter Entwickler, was bedeutet, dass ich gelernt habe, mit Online-Ressource zu programmieren, ist wie dieser Skulpturenkurs. Im Moment arbeite ich als Full-Stack-Entwickler auf dem Aigoo Cloud Framework, dessen Web-Schnittstelle mit Guess aufgebaut ist, was in diesem Kurs reagiert, werden Sie die Grundlagen von Reaktor genug kennen, um den meisten alltäglichen Code zu verstehen und sogar bauen komplexe eine einzelne Seite Anwendungen. Die Konzepte bedeckten Make-up für etwa 90% aus meinem Mantel, und das einzige Vorwissen müssen, um den Kurs zu folgen, ist ein grundlegendes Verständnis JavaScript. Dann sind Sie bereit, am Ende des Kurses zu gehen. Ich werde Sie mit einem Klassenprojekt überlassen, um Ihre Hände vom Code schmutzig zu machen. Und das sind einige Links, um Ihr Wissen zu vertiefen. So sehen wir uns im Unterricht. 2. Das Projekt anlegen: das erste, was wir tun müssen, um ein Loria-Projekt einzurichten, ist die Installation von nota genius. Um das zu tun, gehen Sie einfach über, um die GS zu kennen, die Schrägstrich und Schrägstrich Download sind. Hier finden wir die Installateure für verschiedene Plattformen und auch Anleitungen. Token speichern keine Js von einem Paketmanager, wenn Sie dies bevorzugen. Nachdem wir die Noja installiert haben, , können wir die Create React up toe verwenden,um unsere gesamte Reaktorwebsite einzurichten. Also tippen Sie einfach Ihr Lieblingsterminal und die X drei Hilfe Riak No, gefolgt vom Namen. Wir haben Ihre Unterstützung nicht gegeben. Reagieren Sie Grundlagen, die es betreten und Schöpfer des Kapitals eingerichtet das Ganze für Sie. Wir können sie einfach Stadt in den Ordner, dass der Schöpfer handeln erstellt und der Typ Pentiums Herz oder Garn starten. Wenn Sie Garn verwenden, wird der Entwicklungsserver ausgeführt, die Reaktionsanwendung in Echtzeit aktualisiert, während wir beschichten. Jedes Mal, wenn Sie eine Datei speichern, wird die Seite aktualisiert, ohne dass Sie zu den iranischen Bildschirmen oder gehen etwas. Öffnen Sie einfach die örtliche Austin Spalte 3000 und Sie werden Ihre, äh, Seite sehen äh, , wie es in der Kälte ist. Lassen Sie uns nun einen Blick auf die Dateien, die wirklich top erstellt erstellen. Ja, die Mappe öffentlich. Wir haben den Foul Index dot html. Irgendwas ist der HTML-Code. Scalia kommt aus unserer Anwendung. Sie müssen diese Datei nur selten bearbeiten. Das einzige nützliche Bit ist das Titel-Tag, das Sie hinzufügen können, um den Namen von Ihrer Website im Browser ändern, zum Beispiel reagieren auf die Medikamente. Ich bemerkte auch das Tag, das mit Idee Route entwickelt wurde. Es ist sehr wichtig, die Reaktionsseite zu rendern, also löschen Sie diese nicht. Ich zeige dir später, wo wir es benutzen werden. Der Indexpunkt Js in den Quellordner kriecht importiert einige Bibliotheken, die reagieren und reagieren stumm reagieren, die die Seite definiert oder als reaktive DOMA die Seite rendert. Dann haben wir diese Import in, dass CSS beginnt. Wir können diese Zeile löschen, weil wir den Index der CSS-Datei nicht verwenden werden. Dann wurden wir aufgestellt, äh, die wir später die Akte sehen werden. Dann müssen wir registrieren Service Worker importieren, was nützlich ist, um Offline-Funktionen für unsere Anwendung. Die entscheidende Linie ist, die Kapitulation hinunter zu reagieren. Es rendert das up-Skript im Dokument Don't get element by i d route, was der Dave mit so vorher im Index dot html ist. Und schließlich registrieren Service Worker registriert einfach den Service Worker , wie war unsere Flugfähigkeit? Wir wollen, dass wir den Offline-Aspekt sagen, dass es nur für selbstverständlich ist. Schließlich haben wir die wichtigste Datei, die nach Js ist. Es definiert unsere React-Anwendungsstruktur, aber wir werden alles löschen und von Grund auf neu erstellen . Also das erste, was wir tun müssen, ist Import Maria aus drei sind dank dieser Zeile. Wir können diese HTML wie Notation Sie verwenden Also vorher definieren wir eine Funktion aufgerufen, die zum Beispiel zurückgibt sie Riak Musics war da und wir exportieren diese Funktion. Was reagieren wird, ist, diese Funktion auszuführen und das Rendern Was es ist, gibt in dem Seitenserver-Beispiel zurück , das wir geschrieben haben, so dass es zufällig wird, dass die 3. JSX: HTML in Javascript: Lass uns ein großes Auto haben. Sieh dir die an. HTML wie Syntax, die J s ex genannt wird. Es ermöglicht inländischen HTM A wie in normalem HTML, zum Beispiel. Hier konnte ich, dass Absatz und nach den Absätzen nach oben wie und so weiter und so weiter. Außerdem sehen Sie, dass ich die Datei gespeichert, und wenn ich in die Seite gehe, die Seite sofort aktualisiert, ohne dass ich irgendein Skript aktualisieren zu müssen, können Sie versuchen, etwas wie seine Laura zu tun, wenn Cem und sie dachten, kauen Top-Level blockiert HTML, die von der Funktion zurückgegeben wird. Aber wenn wir versuchen, das zu kompilieren, schlägt es fehl, weil reagieren will Zehe nur ein Top haben. Lello html, uh, Ziel, um das zu umgehen, können wir den Reaktor benutzen. Das Fragment Doug. Es ist kein HTML-Tag, aber das es umschließt unsere verschiedenen HTML-Tags und rendert sie genau wie mit erwarten. Also denken Sie daran, dass, wenn Sie sehr Aktien zurückgegeben haben wollen, Sie verwenden, dass Fragment Onley reagieren, wenn es die oberste Ebene ist, Sie sehen, dass in diesem Deaver wir zwei verschiedene Tags haben die B und Angriff unten, und es ist völlig in Ordnung, weil sie sind in Top-Level-Zeiten in J sechs. Wir können auch einige JavaScript-Code einfügen. Um das zu tun, müssen wir die frühen Klammern dieses Raumes innerhalb der kalten Raketen verwenden, von denen wir JavaScript schreiben können , genau wie wir es in jedem Skript hätten. Zum Beispiel können wir ein plus freies cooles Rendern für nur sehen, wie erwartet. Oder wir können zum Beispiel eine String-Verkettung verwenden, um, Arbeit gehen. Wir können auch einige j six in einer Variablen genießen, zum Beispiel. Cons willkommen gleich, dass die Eröffnung willkommen ist. Und dann, um diese Snippets von Jess X in unseren Ritter zu setzen, haben wir die Eckklammern verwendet, weil eine JavaScript-Variable zwischen geschweiften Klammern mit Übergabe ihres Inhalts gesetzt wird, damit wir tun können, und was einfach fünf willkommen ist, ist ein bisschen, das ich habe der späte ist lebensfähig Ein sehr nützlicher Fall, in dem wir JavaScript innerhalb der JSX verwenden , macht Gaullist zum Beispiel. Nehmen wir an, wir haben ist bitte mit einigen Zahlen und wir wollten machen, ist als UNO befohlen Polizei. Also in einem HTML haben wir Sie gut verwendet. Außerdem bist du drinnen. Wir haben richtig gemacht und wie ich für jede aus den Listen Elemente gegraben, um das programmatisch zu tun, können wir die geschweiften Klammern verwenden, Polizist nehmen jedes Element und Mapping es auch. Oh, ich bin Elemente Schrägstrich Ich erinnere mich, dass Sie das sogar ich verwenden müssen, um die geschweiften Klammern zu verwenden, um das Element innerhalb des kleinsten Artikels zu setzen, weil wir einen J-Sex-Wert zurückgeben. Obwohl wir uns also in diesen größeren Klammern befinden, öffnen wir einen anderen JSX-Kontext. Und so müssen wir diese kleinen geschweiften Klammern benutzen. Alter, lege das Element in die Liste. Wenn wir das gespeichert haben, werden wir sehen, dass wir immer mit allen Gegenständen, die ich nicht habe Wir müssen den Code nicht ändern, um das Atom zu ändern. Also, wenn ich eine andere geändert, obwohl ist oben. Es ist in JavaScript. Die Station Klasse ist reserviert Welt, weil wir es verwenden, um Klassen zu definieren. Jonah hat Klauseln geschöpft, so dass wir das nicht verwenden können, um die HTML-Klasse vom Typ zu definieren. Stattdessen verwenden wir Klassennamen und setzen dann den Wert. Zum Beispiel ABC genau wie bei den normalen HTML-Tags. Und in Ihrer CSS-Datei können Sie Punkt ABC machen und es ist alles in Ordnung. Es gibt andere Reaktor-HTML-Requisiten, die sich anders verhalten als in Standard-HTML, von denen die erste Stil ist. Sie sind es gewohnt, eine Zeichenfolge in HTML zu sein, aber in der Reaktion ist es ein Objekt. Also müssen wir den JavaScript-Kontext mit dem Wurf die Klammern öffnen und dann ein Objekt mit anderen Strom aus Klammern definieren . Sie haben also diese doppelte geschweifte Klammern Syntax. Dann verwenden wir einfach den CSS Brock als Schlüssel. Zum Beispiel, Ecke und der Wert wird der CSS-Wert sein. Zum Beispiel, rot gerade gespeichert, und die Farbe ist rot. Sie müssen auch vorsichtig sein, weil die Benennung der Requisiten in React fällt Camel Fall Mutation. So, zum Beispiel, die Grundfarbe ist geschrieben Aufruf über mit Farbe in Großbuchstaben. Zum Beispiel ist die letzte Requisite mit einem seltsamen Verhalten beim Klicken, was bedeutet, dass eine Zeichenfolge Funktion ist, so dass Sie einfach eine Funktion sein können und den Code für das schreiben können, was Sie wollen. Essen aus einfachen. Ein großes Ich war und ein Klick. Ich habe gelernt, dass es schnell war. Diese Requisiten verhalten sich anders im J-Sex, dann in HTML. Aber es gibt auch neue Requisiten, die Jessica einführt, Zum Beispiel, die Schlüsselstütze. Wenn Sie in die lokale Hostkonsole gehen, wird eine Warnung angezeigt. Jedes Kind in einer IRA oder einem Verräter sollte eine eindeutige Schlüsselstütze haben. Was das bedeutet, ist, dass, wenn wir die alten Elemente auf die kleinsten Elemente abgebildet eine R a erstellt haben haben, wireine R a erstellt haben. React will, dass wir einen Schlüssel geben, Bleichmittel bringen, sie abfließen. Wir können das Element einfach als Schlüssel verwenden. Also, wenn wir sagen, dass die Warnung verschwunden ist 4. Der Zustand von React: Dynamisch gehen: bislang haben wir Onley Studien-Websites erstellt. Es ist Zeit, dynamisch zu werden. Das erste, was wir einführen müssen, ist ein neues Gewicht. Definieren Sie Jerry Act Struktur statt der Funktion nach oben große Nahaufnahme. Beginnen wir also mit dem Importieren der Komponente aus der Reaktorbibliothek und definieren diese dann als Klasse neu . Also Klasse, huh erweitert Komponente. Und dann finden wir eine größere Funktion, die genau das gleiche tut wie die Funktion oben, die wir vorher finden. So können Sie mir Genie Sexwert von einfachen Hallo zurückgeben und es wird Rand in Ihre Seite irrte bekommen . Also, was ist der Unterschied? Warum mit einem klassischen? Weil wir den Staat benutzen können. In einem Konstruktor, der beteiligt ist, wenn ihre Seiten zum ersten Mal erstellt werden, können wir einen Zustand definieren. Zum Beispiel können wir feststellen, dass mein Name Andrea ist. Was können wir mit diesem Staat machen? Zum Beispiel? Stecken Sie es in den Deejay-Sex ist das geblieben Name? Wir haben Ah hallo unter Ihnen jetzt fragen, also was ist der Unterschied zu allen anderen Javascript-Wertsachen Und es ist, dass reagieren abgeschlagen und geändert den Zustand Und wann immer es sich ändert, kühlt Reaktor die Renderfunktion wieder so, wenn ändern wir den Zustand der Seite aktualisiert wird . Cheyney State. Ähm, das können Sie zum Beispiel. Also hat sich der Timer eingestellt und wir werden funktionieren. Wechseln Sie das Stadion nach einer Sekunde. Ändert den Status. Sie können denken, dass es 18 unflexibel dauerte. Diese, die den Namen blieben, weil jemand anderes. Aber wir können das nicht tun, um aus Performance-Gründen zu reagieren, und es würde das innere Funktionieren von der Bibliothek brechen. So ist es, dass wir Funktion verwenden. Diese setzen den Zustand nicht und würden ihm den neuen Zustand übergeben. Also nennen Sie jemand anderen Ruhm. Und wenn Sie auf die Seite gehen und sie aktualisieren, sehen Sie, wie Andhra und nach dem zweiten die Funktion ausgelöst wird, ändert es den Zustand der haben wir die Änderung ergriffen und aktualisiert dann die Seite. Machen Sie die Seite ein wenig dynamischer. Wir haben dies einen Tag aus dem Zustand in die Warteschlange gestellt, wie die auf Klick aus über mögliche Schaltfläche ändern Person . Dann machen wir es nur dieses Mal aus, und stattdessen haben wir das auf mit uns verwendet. Die Funktion ist, dass Spanien und die Neuen Staaten aus Namen, zum Beispiel. Nun, wenn wir die Seite öffnen, ist das Helen Rapid 1000 ändern auf eigene Faust. Aber wenn wir die Person ändern können. - Hallo. Schaden dort. Nehmen wir an, wir wollen einen Zähler schaffen, Sir. Blitz-Lernende, die den Staat aufbringen. Wir werden diese Zählervariable setzen, die bei Null beginnt, und dann werden wir unter ihr auf der Flucht die Fraktion. Es ist also ein Zustand des Donners und wir wollen auch einen Knopf, der den Zähler erhöhen kann. So Taktstock plus eins und dann im Klick auf den Button, den wir übergeben, erhöht die Funktion den Zähler. Also dieser Saad Staat und Sie denken vielleicht, dass es OK ist, diese da unten beruhigen diese nicht Staat Zähler plus eins. Aber aufgrund dessen, wie dies ist, wird der Set-Status implementiert. Indien React Library Doing so etwas könnte Lee Teebeutel, die kommen können wie Tage oder Monate später, nachdem die Kälte von Kollegien in bestimmten Zuständen geschrieben, weil dies nicht gesetzt Zustand ist eine c berüchtigte Operation. So könnten zwei verschiedene besagte Zustände gleichzeitig passieren und stattdessen Konflikte auftreten. Was wir tun, ist das Übergeben des Colback , der den alten Zustand nimmt und es verwendet, um die neuen Zustände des Zählers alle State Counter plus eins zu bauen . Dies ist Bug Proof Du gehst jemals zurück , der den Alten Staat nimmt und den neuen Zustand zurückgibt. Also lassen Sie uns überprüfen unzählige wollen Diese Murmeln aus dem Bus waren Werke. Das ist es meistens. 5. Komponenten: Reagiere Bausteine: Nehmen wir an, wir haben das erfunden, was mich im Baum willkommen heißt. Unterschiedliche Punkte von der Anwendung. Wenn ich die Begrüßung als solche ändern möchte, muss ich Hello zum Beispiel drei verschiedene Male eingeben zum Beispiel , was keine Ahnung ist. Reagieren Sie. Natürlich ist Total an Bord gelöst Problem. Wir können eine andere Funktion bekennen, genau wie wir es bei der Erstellung der Up-Funktion getan haben. Wir wissen, dass die Willkommensfunktion zurückgibt eine willkommene Nachricht ist und dann können wir die Funktion als, ähm, jede TML-Komponente verwenden Funktion als, ähm, . Also haben wir es einfach so ausgedrückt Free, verschiedene Punkte von der Anwendung und es funktioniert. Hallo, drei Mal unter draußen. Nun, wenn ich zurück zu Willkommen wechseln möchte, schreibe ich es einfach in den Arbeiter und willkommen herum, wir haben es viel effizienter gemacht, unseren Code zu schreiben. Eine kleine Sache, die Sie beachten müssen, ist, dass die Benennung als Zehe immer mit einem Großbuchstaben beginnen , weil sonst Reaktorfehler und Sita für eine Standard-HTML-Targa, zum Beispiel, Diva durch den Lorca Buchstaben beginnen war natürlich. Willkommen mit einem Afrika-Brief. Jetzt kannst du OK sagen, aber was ist, wenn ich lieber verdammt willkommen heißen will? Muss ich eine andere Komponente erstellen, die eine Zeitverschwendung für sein wird und natürlich, nein, nein, tust du nicht. Wir können uns Requisiten zu begrüßen, genau wie wir bestanden haben, zum Beispiel, Stil oder ein auf schnellen Zeh ein div. In diesem Fall können wir sagen, zum Beispiel, zum Beispiel, Tod willkommen bei uns auf einem Monat, der unter der Funktion willkommen ist, erhält ein Objekt das alle Requisiten enthält, die ihm als Argument übergeben werden. Natürlich können wir die Requisiten verwenden, um die J sechs zu definieren, dass die Begriffe. So, zum Beispiel, fällt der Name jetzt wieder, willkommen und selten. Aber wenn ich die 1. 1 auf die RV ändern, die, zum Beispiel wird willkommen David es So haben wir eine generische Komponente für willkommen hier. Wir könnten zum Beispiel auch Upstate Name erstellen, der uns ausgepackt startet. Und dann haben wir den Staat den Namen und dann einen Boden in der auf Klick übergeben und den Zustand ändern , dass dies nicht Sex acht zu einem anderen Regen ist, zum Beispiel. Siehst du, ich, ähm, tauche in den Boden. Und jetzt, wenn ich auf den Boden klicke, bin ich froh, dass es willkommen wird. David, Denk daran, Dad, wenn sich der Zustand ändert, wird die Renderfunktion wieder ausgeführt. So erhält die Willkommensfunktion die neuen Requisiten und Rikers, die neue JSX. Wir können auch zustandsfähige Komponenten erstellen, indem wir die Klasse sagen, das ist zum Beispiel können wir einen einfachen Timer erstellen, der einen Timer hat, der bei Null beginnt und dann jede Sekunde um eins erhöht wird . Dann können wir diese Aufhängerkomponente in der UPS eher Funktion verwenden. Ähm, es funktioniert Gerechtigkeit. Fat hat es getan. 12345 usw.. Aber was passiert, wenn ich klicke? Ich bin David A. Die Orender-Funktion aus dem Aufstieg ist wieder falsch. Also willkommen bekommt seine neuen Requisiten und zeigt Willkommen, die da waren statt willkommen unter unserem Aber was passiert toe der Zustand aus Timer Glink, Sie sagten, dass die Zahl nicht den Reset bekommen zu werfen. Dieser Zustand bleibt also auch erhalten, wenn die Renderfunktion erneut ausgeführt wird. 6. Bedingtes Rendering: Zur Anzeige oder nicht anzuzeigen: Ich habe dieses sehr einfache up erstellt, das unsere Willkommenskomponente verwendet. Und dann gibt es einen Logging und Abmelden Button. Gilligan setzt den Namen angegeben Zehe Andhra, während die Aussichtstasten Das ist der Name ST No. Und der Standardstatus ist nein. Also, wenn wir die Seite zum ersten Mal öffnen, bekommen wir eine Begrüßung ohne den Namen und Onley. Nun, wieder, wir haben unseren Namen. Wir möchten eine andere Botschaft zeigen, nicht die willkommene. Wenn der Name nein ist und wir können graben ist ah erste Möglichkeit, das zu tun, einfach falsche Anweisung in der Renderfunktion verwenden. Willkommen. Also, wenn der grobe Name nicht gut ist, nein. Und wir können unsere Standard-Willkommensnachricht zurückgeben. Sonst kehren wir zurück. Sie sind noch nicht eingeloggt. Also, jetzt, als er die Seite zum ersten Mal öffnete, bekommen wir die Masse so ohne unsere meine falsch, dann mit der Suche und willkommen auf trübe Und dann blasen wir Gicht und wir bekommen die andere Nachricht wieder. Aber es gibt auch einen anderen Weg zu tun, den Wir halten können, dass ich als solcher willkommen war wie zuvor. Wir können gewöhnlichen Operator verwenden, der in dem Code von der Kunst ist. Aber ich würde sagen, diese, die den Namen nicht gleich zu wissen Frage Mark folgte ich, was wir wollen. Rancor. Wenn die Bullion-Anweisung vor wahr ist, so der Willkommenszustand. Sonst könnten wir so nennen, dass man zu rendern, wenn der Zustand Nase ist. Das Ergebnis ist genau die gleiche Botschaft des Anfangs wieder. Ausloggen, einloggen, aufpassen. Es ist einfach eine Frage der Ästhetik und von Fall zu Fall fühlt man sich besser als der andere. Es ist wichtig, dass Sie wissen, wie Sie beides verwenden. 7. Benutzereingaben bearbeiten: Nehmen wir an, wir wissen, dass der Benutzer erlauben soll, seine Verwenden Sie mich, um das zu tun. Wir brauchen einen Zulassungsbenutzer, oder? Oh, ist irgendjemand Tag an? Ich kann meinen Jugendnamen schreiben. Wie lesen wir aus dem Reaktor? Was der Benutzer tief gebunden hat Der einfachste Weg daran ist, eine neue Variable in der ST Paul zu erstellen , zum Beispiel Eingabe, die sich als gerade richtig gedreht hat. Und wir sagen, dass der Eingabewert Zustandseingabewert ist. Also dieser Zustand der Eingangsname. Nun, wenn wir in das Pentagon gehen, auch kämpfen, wenn Sie versuchen, in der Tastatur zu kaufen nichts passiert, weil der Eingabewert gezwungen ist , die gleiche uns die Include-Namen in den Zustand zu sein. Jetzt müssen wir mit den Änderungen umgehen. Also bei Veränderung können wir uns Corporate Funktion, genau wie, wenn wir die auf Klick gehandhabt haben, um das Ereignis zu bekommen und Sie sagen, ist der Zustand, und sagte die Bibel in Putting essen, die Wert sind, was der Wert ist, den der Benutzer zu tippen versucht. Jetzt, wenn wir zurückgehen und versuchen zu sterben, aber wir können es. Aber wir haben auch den Wert im Zustand gespeichert. Wenn wir also hineinschauen wollen, ersetzen wir einfach die Zeichenfolge. Andhra, wir haben diesen acht Eingangsnamen, was der Benutzer gestorben ist. Und auch würde es Eingabe, Name zurücksetzen , eine leere Zeichenfolge machen. Also, jetzt kann ich, zum Beispiel, Sohn da und wieder, und ich bin Lovin und dann jemand anderes, den du gesehen hast. 8. Der React Datenfluss: Ich habe eine leicht modifizierte Version aus dem Logging out erstellt, das wir in der letzten Lektion gesehen haben . Wir haben also diese willkommene Komponente, die bereits willkommen macht. Sie werden dann nicht mit dem Logging Former angemeldet, der alle Eingaben, die On Change und die Unterseite für die Zugehörigkeit und das Abmelden behandelt . Und schließlich haben wir die Up-Komponente, die die Willkommens- und die aussehende Formkomponente umschließt . Das Problem hier ist, dass Begrüßung einen Namen benötigt, aber der Name wird in dem Zustand aus der Protokollierung für nicht aus dem oben gespeichert. Wie können wir den Staat vom ersteren an den Reaktor weiterleiten? Wir können uns nicht Requisiten oder Zustand von einer unteren Komponente wie Logan bilden eine obere Komponente wie oben. Das Einzige, was wir tun können, ist, den Staat zu machen. So erkennen wir, dass Name eine Requisite ist, die auch durch willkommen nicht nur Logging Formular benötigt wird, so dass wir es in den Zustand, sind Komponente. Ist der Name drauf? - Nein. Jetzt wird das Problem, wie wir den Zustand von oben aktualisieren, wenn das Gefecht innen ist, das Formular angeklickt, um zu tun, dass wir ein cooles Back Prob zum Beispiel übergeben. Wir geben den Namen ändern mich und es ist eine Funktion, die einen neuen Namen nimmt und diese den traurigen Zustandsnamen Doppelpunkt neuen Namen ausführt . Dann in der lokalen Form können wir diese Funktion aufrufen, wenn wir auf den Namen datieren möchten, so dass wir diese Ernte tun können Ändern Sie den Namen übergeben den neuen Namen, der in diesem Fall ist, diese, die besagt, dass wichtig mich Wir brauchen nicht die Aktualisierung des Staates dass in der langen Zeit mehr informieren, weil es nicht benötigt wird Und wir können das gleiche für den Abmelde-Button tun Einfach wir nicht als neuen Namen büsten. Jetzt wird der Zustand in der oben aktualisiert, indem der Aufruf des Ziels zurück Änderungsnamen von innerhalb Defour Komponente So können wir einfach den Upstate übergeben, dass Teoh die Willkommenskomponente Und jetzt starten wir uns nicht angemeldet. Aber ich kann mich einloggen und lange einloggen und ich kann mich nicht ausloggen. Diese heben den Zustand nach oben und dann übergeben Callbacks nach unten ist ein Boden, den Sie die ganze Zeit in Reaktor verwenden werden . Es ist nur anwesend 9. Die Website aufbauen und zur Bereitstellung der Website: , um Ihre Website online zu veröffentlichen. Es gibt zwei Hauptschritte, die Sie unternehmen müssen. Die erste besteht darin, eine optimierte Bereitstellungsversion zu erstellen, so dass Sie einfach zu pm, laufen, laufen, gebaut oder wenn Sie Yarn-Down-Build verwenden, werden wir in der großen Ordner-Website bereit für die Bereitstellung von meinen Tests finden, die ich Sarge verwende. Es ist sehr einfach necken Sie gerade getippt und die Ex-Suche Es fragt Sie, wo es die Website finden kann , die Sie veröffentlichen möchten. Also Sie nur der Build-Ordner e Creeds zufällige Domain für Sie. Wenn Sie Premium gehen, können Sie auch die Domain dann besser wählen und Sie die Website bereitstellen und es ist zum Beispiel Mine ist Moti i dot surge dot Shh fahren . Also, wenn wir nur wissen, d ich Serge Sage habe, finden wir, dass ich auf der Website arbeiten. 10. Kursprojekt: beobachten Sie die ganze Klasse, also sind Sie dran, jetzt anzurufen. Das Projekt, das ich Ihnen gebe, baut ein Online-Bücherregal, das heißt, Sie werden eine Website erstellen, in der die Benutzer die Bücher hinzufügen können, die sie gelesen haben oder sie wollen lesen und ihnen eine Bewertung geben. Lassen Sie es uns eingrenzen. Sie müssen die vollständige Liste der Bücher anzeigen, wenn der Benutzer die Seite öffnet und einige zusätzliche Informationen anzeigen . Wenn er auf einen von ihnen klickt, müssen Sie ein Formular haben, in dem der Benutzer nicht kann. Das Buch und jedes Buch muss einen Titel haben und über möchte ich lesen oder Red Tuck und dann optionale Bewertung. Schließlich müssen Sie die Bücher lokal speichern. Das heißt, wenn ich Benutzer ein Buch hinzufügt, dann schließt die Seite, wenn er die Website wieder öffnet, muss das Buch immer noch da sein. Diese letzte Anfrage hat dir wahrscheinlich ein bisschen Angst gemacht, weil ich dir nicht beigebracht habe, wie man das macht. Aber der Punkt ist, dass man in der Rial-Lebenscodierung nie alles darüber weiß, was man tun muss. Es ist eine entscheidende Fähigkeit, im Internet Ressourcen über Ihr Fass zu lernen und zu finden . Mach dir keine Sorgen für diese ein Mal, ich gebe dir einen Hinweis. Das erste, was ich Ihnen vorschlage, ist, die Buchdaten in Jason zu speichern, die in einem Objekt in Ihrem Staat sind. Und zweitens, um Daten lokal auf dem Telefon oder PC des Benutzers zu speichern, können Sie den lokalen Speicher JavaScript A B I verwenden. Sie können mehr darüber im mdn erfahren. Wir und schließlich können Sie die Daten über das Buch im lokalen Speicher mit J Zune-Punktzeichenfolge sehen. Wenn ich und abrufen ET mit Jason den Pass, das war alles, was ich wünsche Ihnen viel Glück und sie hoffen viele von Ihren guten Projekten zu sehen, Zoom.