The Ultimate React Js Reaktionsfreudige Portfolio-Website

1. Kurs-Einführung: Hallo, Willkommen und vielen Dank für Ihr Interesse an meinem Kurs. In diesem Kurs werde ich Ihnen beibringen, wie Sie eine reaktionsschnelle Portfolio-Website mit verschiedenen Technologien wie React erstellen eine reaktionsschnelle Portfolio-Website mit , js sind USGS, Bootstrap, Load JS, Express JS und Minima. Und am Ende dieses Kurses können Sie die Website auf dem Server bereitstellen, was bedeutet, dass Ihre Portfolio-Website im Internet zugänglich ist. Hört sich gut an, oder? Schön. Die ersten zwei Bilder. 2. Demo des Projekts: Auf dem Bildschirm ist plötzlich die Anwendung , dass wir in diesem Kurs zu Butte gehen. Und ich möchte damit beginnen, eine der ohnmächtigen Zukunft dieser Anwendung zu enthüllen eine der ohnmächtigen Zukunft , die Sie nicht verachten können. Und diese Zukunft ist die Mail-In-Funktionalität. Wenn ich also auf den Abbruch der hohen Armee traf, wird es eine glatte Schraube, um mich wieder zu kontaktieren, wo Ihr potenzieller Kunde mit Ihnen kommunizieren und Sie einstellen kann . Versuchen wir es also, indem wir auf die Abbruch der hohen Armee klicken. Siehst du, wie es glatte Schriftrolle ist, liebe ich es. Hier werden wir also fortfahren, indem wir auf absteigend gekauft klicken , um zu überprüfen, ob das Unternehmen gut validiert ist. Werfen Sie einen Blick auf die obere rechte Ecke des Bildschirms. Sie sehen die Toastnachricht und es heißt, bitte fühlen Sie sich oder die Felder mit den Namensfeldern für E-Mail. Bevor ich also auf den Button Senden klicke, muss ich Ihnen zur Übersichtlichkeit meinen Posteingang zeigen. Hier ist es? sicher gibt es keine neue Nachricht in meinem Posteingang. Kannst du sie auf der Website sehen? Probieren wir es aus, indem wir auf dasselbe Boarding klicken. Werfen Sie einen Blick darauf. Kannst du sehen, dass es heißt, danke, dass du eine Helix kontaktiert hast. Lass mich dich runter in den Posteingang bringen. Und hier ist es. Klicken Sie zum Öffnen. Hier ist der Name des Absenders. Schicken Sie uns eine E-Mail, und hier ist der Nachrichtensatz. Dies ist eine der wichtigsten Zukunft der Portfolio-Website. Keine Sorge, ich werde Ihnen beibringen, wie Sie diese Funktionalität von Grund auf neu implementieren können. Sie auf die Website. Ihr Recht, also klicken wir nun auf den Call to Action, der in Smooth Scroll zu den Home-Komponenten gekauft wurde. Schauen wir uns die im Roulette gekaufte Gate-Region an. Klicken Sie auf das Erosionstafel holen in. Es wird meinen Lebenslauf herunterladen. Und ich klicke zum Öffnen. Also hier ist mein Lebenslauf. Siehst du, genau hier haben wir die Social-Media-Symbole. Und wenn Sie auf eines der Symbole klicken, gelangen Sie auf die entsprechende Seite. Und direkt unter den Icons haben wir den Namen und den schönen Typeffekt mit verschiedenen Emojis. Und jetzt wird mein Hoover und das Profilbild verkleinern, um die Sichtbarkeit zu verbessern. Jetzt schwebe ich und dann ziehe ich es aus. Ich hoffe, ich ziehe es wieder aus. Lassen Sie uns schnell zur Komponente „Über mich“ übergehen. Und wenn ich dann auf „Über mich“ klicke, wird es glatt zur anderen Komponente scrollen. Hier ist die Über mich, eine Komponente, in der Sie Ihre potenziellen Ansprüche ganz über sich selbst nennen würden . Und unten sind die Lebenslaufkomponenten. Diese Komponente ist sehr wichtig, einfach weil Sie hier Ihre Erfahrungen mit Ihren potenziellen Kunden teilen werden . Sie müssen Ihre Arbeitshistorie, Ihre Programmierfähigkeiten, Projekte und Ihr Interesse zeigen . Im Wartelistenbaum müssen Sie also anzeigen, wie lange Sie in der Branche sind und mit dem Unternehmen , mit dem Sie gerade zusammenarbeiten. Für die Programmierfertigkeit. Sie müssen Ihre Fähigkeiten basierend auf Ihren Fähigkeiten zeigen. Und alles hier ist schön angepasst. Aber Projekte, dazu gehören die verschiedenen Projekte, die Sie welchem Ton Sie zeigen werden, das Startdatum und das Enddatum. Also hier, persönliche Portfolio-Website, noch von einer Shop-E-Commerce-Website. Und hier drüben haben wir das Interesse, das dein Hobby impliziert. Und hier unten haben wir die Testimonial-Komponente. Und wir werden das Testimonial vom rechten Bildschirmrand nach links vom Bildschirm scrollen vom rechten Bildschirmrand nach links vom Bildschirm lassen. Und das sagt Ihr Kunde über Sie. Schließlich haben wir die Contact Me-Komponente, und hier können sich Ihre potenziellen Kunden mit Ihnen in Verbindung setzen, indem Sie Ihnen E-Mails senden. Diese Funktionalität ist in der Tat fantastisch. Alles klar, also lass mich dir die Fed in Animation zeigen. Und wenn Sie jetzt auf der Website nach unten scrollen und wenn ich nach unten scrolle, werden Sie feststellen, dass die Komponenten DUC füttern, oder? Also lass mich nachladen. Werfen Sie einen Blick darauf. Schon wieder. Wenn ich nach unten scrolle, wird die ursprüngliche Komponente eingeblendet. Siehst du die Testimonial-Komponente? Und die Komponente? Okay, also lasst uns die Reaktionsfähigkeit herausnehmen. Lass es uns auf dem iPhone Fünf herausnehmen . Für 678. Mit diesen kann ich Ihnen versichern, dass die Website auf unseren Plattformen zu 100% reagiert. Wenn Sie also von dieser Portfolio-Website auschecken möchten, ist am Ende hier die Adresse. Sie können schnell auf einer SET Engine tippen, es Ababa dot herokuapp.com. Und dann wird diese elegante Portfolio-Website auf Ihrem Bildschirm angezeigt. Und jetzt, wer bin ich? Mein Name ist am einfachsten und ich habe über sieben Jahre Erfahrung in der Softwareentwicklung, habe nicht in verschiedenen Unternehmen als Full-Stack-Entwickler gearbeitet . Also habe ich die Erfahrung, die es braucht, um es durch diesen Kurs zu führen. In diesem Kurs werde ich dein Kursleiter sein. Keine Sorge, ich werde Ihre Hand an Butte dieser klassischen Portfolio-Website von Grund auf bis zur letzten Phase der Bereitstellung halten. Und am Ende könnten Sie die Website auf einem Lebensretter bereitstellen und den Quellcode auch an GitHub übertragen. Nachdem Sie all dies gesagt haben, melden Sie sich schnell an und fangen wir an. Wir sehen uns dann. 3. FRAGEN STELLEN: Fragen zu stellen ist so wichtig , einfach weil es Ihnen ermöglicht, in die richtige Richtung zu gehen. Wenn Sie also in Schwierigkeiten geraten, sollten Sie immer Fragen stellen, bevor Sie mit der nächsten Vorlesung fortfahren. Ich verstehe jedoch klar , dass Sie in diesem Kurs Busey Lenin sein werden. Aber ich weiß es sehr zu schätzen, wenn Sie ein paar freie Minuten Ihrer Zeit damit verbringen könnten , ein Blatt zu lesen, eine Überprüfung über diesen Kurs. Und so bekomme ich ein Feedback von dir und hoffentlich macht McManus Beta ihr Recht. Lasst uns also ohne weiteres anfangen. 4. React erstellen: Jetzt fangen wir an, die Anwendung zu erstellen. Und in den ersten Vorträgen wurde mir klar, dass die meisten von euch diese Tabs wahrscheinlich kennen. Einfach weil ich mit dem grundlegenden Anstarren aus der Create React App abgesperrt bin . Also bitte ertragen Sie mich, denn ich möchte die Öfen nur zugunsten von Leuten erklären die Öfen nur zugunsten von , die neu bei React js sind. Und der Grund ist, dass ich alle in Ruhe nehmen möchte. So schnell musste js.org reagieren. Und hier ist die Adresse. Geht mit der Dokumentation fort. Hier ist es. Du musst nur auf Hunde klicken? Okay, also hier auf Create a New reagieren. Hier ist es in der oberen rechten Ecke des Bildschirms? Klicken Sie auf. Das erste, was wir hier tun werden, ist, im Grunde eine Boilerplate einer React-Anwendung zu generieren , die aus den Bibliotheken, den ursprünglichen Dateien und Ordnern besteht , um eine einfache React-Boilerplate-Anwendung auszuführen . Auf dem Bildschirm befindet sich die React-Dokumentation. Und natürlich ist es für den Zweck dieses Kurses nicht relevant, oder? Wenn Sie also ein Neuling sind, empfehle ich Ihnen dringend, die Dokumentation zu lesen , um ein Anspruchswissen darüber zu haben , worum es bei React js geht. Scrollen Sie schnell nach unten, außer Kontinuum. Hier drüben der MAX-Befehl, einfach Create, React App ausgeführt werden kann , ohne sie auf unserem CCE-Schwanz installieren zu müssen. Alles klar, also lasst uns anfangen. Geh zurück zu deinem Desktop. Und hier drüben erstellen wir ein Stammverzeichnis namens Portfolio Pro. Klicken Sie mit der rechten Maustaste auf neues Essen. Portfolio-Profi. Technik-Phrase. bei der Benennung Ihres Projekts Verwenden Sie bei der Benennung Ihres Projekts immer einen beschreibenden Namen , der den Zweck des Projekts angibt. So werden Sie es in Zukunft erkennen können. Okay, also die nächste Zeile besteht darin, dieses Verzeichnis mit dem Code-Editor und dem perfekten Code-Editor zu öffnen dem Code-Editor und dem , den ich in diesem Kurs verwenden werde , lease. Also VS-Code. Zögern Sie nicht, einen Code-Editor Ihrer Wahl zu verwenden. Aber für mich ist VS Code mein Favorit. Und wenn Sie sich die obere linke Ecke des Bildschirms ansehen, sehen Sie das Verzeichnis eines Haarportfolios Pro. Aber für einige von euch siehst du es vielleicht nicht dort drüben. Alles, was Sie tun müssen, ist das Portfolio-Verzeichnis in den VS-Code zu ziehen und abzulegen. Also musst du einfach per Drag & Drop ziehen. Wenn du das machst, wirst du es auf jeden Fall hier sehen. Jetzt. Maximieren Sie den VS-Code und schließen Sie diesen dann. Öffnen Sie das integrierte VS-Code-Terminal. Und auf dem Mac findest du es hier im oberen Menü. Und dann neues Seminar. Direkt im Terminal. Wir werden den Befehl schreiben, um React js zu installieren. Und ich mache MDX, erstelle Dash, reagiere Dash. Wir werden die React-Anwendung nicht in einem separaten Paket installieren . Und ich nenne den Paket-Client. Sie können entscheiden, den Namen des Pakets an Ihrem Ende zu ändern . Ich empfehle Ihnen jedoch dringend, sich an den Convention-Client zu halten , einfach weil React js mit dem Frontend zu tun hat, was den UI-Teil der Anwendung impliziert. In Ordnung, also reaktive Destillation ist die reaktive Destillation im Gange. Und das würde auf jeden Fall, ich muss nur schnell zur Vorlesung vorgehen. React js wurde erfolgreich installiert. Um fortzufahren, müssen wir dieser Anweisung folgen. Okay, also müssen wir zuerst das Client-Verzeichnis laden, in dem wir React js installiert haben, und dann die Eingabetaste auf Ihrem Tastaturnest drücken . Wir müssen das Frontend starten, Dev-Server. Also werden wir MPM machen, fangen an. Drücken Sie die Eingabetaste auf Ihrer Tastatur, um sie in Brand zu setzen. Auf dem Bildschirm ist die Londoner Seite. Und standardmäßig läuft der Server auf dem localhost-Port 3000. Hier ist es. Ok. Und jetzt sind wir mit der Installation fertig. In der nächsten Vorlesung werden wir damit beginnen, das React-Boilerplate zu enthüllen. Das ist vorerst alles für diese Vorlesung. Wir sehen uns in der nächsten Vorlesung. Bleiben Sie konzentriert und passen Sie auf. 5. Die Kühlplatte reagieren: In diesem Vortrag werden wir das React Boilerplate vorstellen. Öffnen Sie so schnell das Client-Verzeichnis. Fahren wir mit der package.json-Datei fort. Hier werden alle Abhängigkeiten, die das Frontend betreffen, sitzen. Und hier drüben haben wir React 17.2 gespeichert und Nest ist, sie werden nicht reagieren, obwohl React DOM verwendet wird , um mit dem Dokumentobjektmodul in den Brauen zu arbeiten . Und hier haben wir die React-Skripte und die Web-Vetos. Runter. Hier sind die Skripte in Ordnung. Und hier ist der Anfang, den wir in der vorherigen Vorlesung ausführen , um den Server anzukurbeln. Hier unten ist die BWT. Wenn wir also npm BWT ausführen, wird es die statischen Assets für die Bereitstellung aufbauen. Ordnung, also werden wir in Zukunft, wenn wir diese Anwendung auf dem Server bereitstellen wollen, wenn wir diese Anwendung auf dem Server bereitstellen wollen, den Missbrauch nutzen. Und hier drüben haben wir den Test und Ägypten. Tatsächlich ist das Auswerfen erforderlich, wenn Sie aus der Create, React App auswerfen und Ihren Webpart anpassen. Sie schnell mit der index.html fort, gehen Sie dann zur Öffentlichkeit und trüben Sie sie. Scrolle nach unten. Bevor wir also fortfahren, müssen wir verstehen, worum es bei GS reagiert. React JS ist eine JavaScript-Bibliothek, die verwendet wird, um eine einzelne Seitenanwendung zu berechnen. Und hier haben wir ein Div mit der ID von root. Lassen Sie mich Ihnen schnell zeigen, was bei Daddy Food passiert. Geht weiter zur Quelle, die das SRC ist. Öffne die index.js. Und ganz oben haben wir React aus dem React-Modul importiert. Und auch das React DOM von React DOM Modul. Und das React DOM hat eine Methode namens render. Und diese zufällige Methode nimmt die Hauptkomponente auf. Hier ist es. Und die Min-up-Komponente wird oben importiert. Das ist es genau hier. Okay. Öffne jetzt die App js. Ich werde es einfach klären. Befehl T oder Steuerelement T unter Windows. Also müssen wir uns auf AP dot js einstellen. Siehst du jetzt haben wir ein paar GSS hier drüben. Der Unterschied zwischen CSS und HTML ist also das Klassennamenattribut. In HTML ist es eine Klasse, aber genau hier in GSS ist es Klassenname, da die Klasse ein reserviertes Schlüsselwort ist. Vorhin habe ich Ihnen gesagt, dass Reacts verwendet wird , um eine einseitige Anwendung zu berechnen. Die Frage ist, wie funktioniert es? Lass mich es dir schnell zeigen. Jetzt wird alles hier im ArcGIS an den Indexpunkt js weitergegeben. Lass mich es dir zeigen. Siehst du hier ist die app.js. Wenn die app.js hier gerendert wird, wird sie über diese Codezeile, document.getElementById von root, an die index.html weitergegeben . Also müssen wir den Indexpunkt HTML öffnen. Nun, das ist das Div mit der ID von root. Wenn es an die index.html weitergegeben wird, wird es hier zwischen diesem div mit der ID von root gerendert . Zusammenfassend lässt sich sagen, wenn wir zur RGS gehen, was auch immer wir in der RGS rendern, okay. Würde an die index.js weitergegeben werden , die verkauft wird, wenn das Objekt gerendert wird, wenn ich es höre , diese Codezeile durchläuft und dann den gesamten Inhalt in der app.js an die index.html weitergibt , richtig? In dieses Div mit der ID-Route. Die index.html ist also das, was im Internet angezeigt wird. Lassen Sie uns den Code so schnell aufräumen. Markieren Sie, wischen Sie es ab. Und dann wischen Sie es von den Zeilen 18 bis 26 ab. Wisch es ab. Und das Titelportfolio vermasselt, wo wir den Inhalt haben. Und dann werden wir es tun. Jetzt müssen wir die Dateien löschen , die wir in diesem Kurs nicht benötigen. brauchen wir nicht hier drüben. Halten Sie die Befehlstaste auf dem Mac und die Steuerungstaste unter Windows gedrückt, um auszuwählen. Und dann brauchen wir nicht den Logopunkt SVG, den Setup-Testpunkt HGS. Rechtsklick, Löschen. Alles klar, also Heron zum UP GAS. Hier ist das fehlende weit. Wir haben es im SRC gelöscht und wir haben es hier im UP GAS importiert. Also müssen wir den Import auch löschen. Sicher. Wir müssen also vom öffnenden Head-Tag bis zum schließenden Header-Tag hervorheben . Wisch es ab. Sparen Sie. Gehen Sie weiter zum Plaza, es sei denn, schauen Sie es sich an. Ihr Recht. Dies ist also das Ergebnis, das wir von dieser Vorlesung erwarten. In der nächsten Vorlesung werden wir damit beginnen, die Struktur unseres Projekts aufzubauen. Wir sehen uns in der nächsten Vorlesung. Bleiben Sie konzentriert und passen Sie auf. 6. Die Projektstruktur einrichten: Wir werden die Struktur unseres Projekts nach den Best Practices einrichten . der rechten Maustaste auf das SRC und klicken Sie auf einen neuen Ordner. Und hier erstellen wir einen Ordner namens Portfolio-Container. Stimmt's? In diesem Portfolio-Container erstellen wir ein anderes Verzeichnis namens Über mich. Rechtsklick. Neuer Ordner. Über mich wird das Verzeichnis über mich enthalten. Es ist CSS-Datei und die entsprechenden Bilder. Das ist eine wirklich lustige Geschichte über MEINE Komponente. Also brauchen wir noch einen. der rechten Maustaste auf den Portfoliocontainer hier auf Neuer Ordner. Und das würde heißen kontakt mich. Und natürlich sollten Sie wissen, dass Sie mich auch kontaktieren und wir die Komponente, ihre CSS-Datei und ihre zugehörigen Bilder enthalten . Rechtsklick erneut auf den Portfolio-Container. Neuer Ordner. Und das wird zu Hause heißen. Okay, du musst nur meiner Führung folgen. Lebenslauf, Portfolio, Container, Neuer Ordner, FUTA. Und das Nest ist ein Zeugnis. Jetzt sind wir damit fertig, die Struktur unseres Projekts einzurichten. In der nächsten Vorlesung werden wir also anfangen, auf dieser Struktur aufzubauen. Kümmere dich. 7. Profile 1: Nach der Struktur unseres Projekts beginnen wir mit der Home-Komponente. Und wie Sie sich daran erinnern können, haben wir alle diese Verzeichnisse direkt im Portfolio-Container erstellt . Hier ist es am linken Bildschirmrand, direkt im Explorer. Schön. Jetzt werden wir als erstes die tiefgreifende Komponente erstellen. der rechten Maustaste auf das Home-Verzeichnis hier auf eine neue Datei. Und das würde Profil dot js genannt. Technischer Ausdruck, wenn mnemonische Komponente immer die Pascal-Namenskonvention verwendet, was bedeutet, dass Sie den ersten Buchstaben jedes Wortes großschreiben . Das klingt gut, Beautiful. Jetzt müssen wir die entsprechende CSS-Datei erstellen. Rechtsklicken Sie erneut auf das Home-Verzeichnis. Hier auf Neue Datei. Tiefgründiger Punkt-CSS. Sie auf das Profil GAS und hasst es. Hier verwenden wir die Verknüpfungen, um die Funktionskomponente React js zu generieren. Ich werde c haben, und hier ist es. Drücken Sie die Eingabetaste, um auszuwählen. Für einige von Ihnen haben Sie das möglicherweise nicht funktioniert. Alles, was Sie tun müssen, ist ein sehr leistungsfähiges Plugin zu installieren das als React Native React React Reader Snippet bezeichnet wird. Lassen Sie mich Ihnen zeigen, wie Sie dieses Snippet im Explorer installieren können. Und wenn ich höre, müssen Sie auf die Erweiterungen klicken, dann sehen Sie rechts unten links auf die Erweiterungen. Alles klar, in der Setbox suchen wir bereits nach React, Native und Native und Dunst es. Ich habe es auf meinem Computer installiert. Das ist der Grund, warum Sie sehen, dass die Deinstallation gekauft wurde. Wann siehst du? Wenn Sie es jedoch nicht installiert haben, sehen Sie das Installationsbootfahren. Alles, was Sie tun müssen, ist, auf die Schaltfläche Installieren zu klicken und sie auf Ihrem VS-Code installieren zu lassen. Und aus irgendwelchen Gründen, wenn es zum ersten Mal nicht für Sie funktioniert hat, müssen Sie nur VS Code neu starten. Jetzt, es sei denn, schließe es. Hier drüben geben wir diesem div einen Klassennamen eines tiefgreifenden Dash-Containers. Und richtig, in diesem div brauchen wir ein anderes div mit dem Klassennamen des Profils übergeordnet. Div. Geben Sie dem Klassenthemenprofil einen Dash übergeordnet an. Wie traurig. Ein anderes, div mit dem Klassennamen, Profil-Dash-Details. Und schließlich brauchen wir ein anderes Div mit dem Klassennamen Cornrows. Perfekt. In Ordnung, also lass uns den Entdecker verstecken oder zu deinen Fenstern kommen. Was wir nun implementieren werden, sind die Social-Media-Symbole. Lasst uns zum Demo-Projekt weitermachen. Dies ist die Adresse eines Hey, es wird Portfolio dot herokuapp.com. Und das wollen wir zunächst Facebook, Instagram, YouTube und Twitter implementieren . Toronto VS Code, es sei denn, das schnell tun. Also genau im div mit dem Klassennamen werden wir natürlich das a-Tag haben. Jetzt. Wir werden das I-Tag haben. Geben wir ihm einen Klassennamen von f, einen F-Bindestrich, Facebook-Strich, Quadrat, Lambda weniger als Zeile, um diesen Code viermal zu duplizieren. Also werde ich nur von 9 bis 11 hervorheben. Halten Sie die Umschalttaste und Alt gedrückt und tippen Sie dann viermal auf die Pfeiltaste nach unten auf Ihrer Tastatur. Können Sie sehen, dass wir genau das tun, um Code im VS-Code zu duplizieren. Und hier drüben werden wir den Klassennamen in FA ändern . Google Dash, Strich im Quadrat. Und jetzt brauchen wir das Instagram-Symbol. F8 Strich ist der Boden. Und wir brauchten für das YouTube. Und zuletzt für Twitter. Sparen Sie. Lassen Sie uns nun die Anwendung ausführen, um zu sehen, was wir an Bord zum Terminal hatten. Und dann müssen wir den CD-Client, MPM. Beginne. Warten wir drauf. Stimmt's? Wenn Ihre Icons also nicht angezeigt werden, wissen Sie, warum sie sich in VS-Code einsetzt? Und lass mich es dir hier zeigen. Wir haben die Bootstrap-Klassen verwendet , nämlich FA, Dash, Facebook, Google Plus Instagram und der Rest von ihnen. Damit wir diese Klassen verwenden können, müssen wir das Projekt mit Bootstrap verknüpfen. Öffnen Sie das Materialverzeichnis. Für mich. Das Materialverzeichnis befindet sich direkt auf meinem Desktop. Und warum ist es? Also muss ich einfach aufmachen. Dieses Verzeichnis befindet sich direkt in der Ressource. Also sieh es dir an und lade dieses Verzeichnis herunter. Es enthält alle notwendigen Dateien , die wir in diesem Kurs verwenden werden. Jetzt öffnete das könnte ihr helfen. Haare, ist es? Und das ist der Bootstrap-Link. Kopieren Sie Heroin in den VS-Code-Befehl P, um dieses kleine Suchfeld oben zu öffnen. Und dann werden wir auf Indexpunkt HTML einstellen . Und hier ist es. Schön. Füge es hier ein. Okay, also müssen wir den Code formatieren , um ein bisschen behaupten zu können. Rechtsklick. Formatieren Sie das Dokument mit Previa. Okay, jetzt sieht der Code sehr sauber aus. Mir gefällt es. Und wenn Sie kein Pedia auf Ihrem VSCode haben, Natur aus erneut Explorer, und lassen Sie mich Ihnen zeigen, wie Sie es installieren können. Explorer und klicken Sie dann auf S. Tension befindet sich genau hier in dieser Sandbox. Sie müssen auf Vorbestellung einstellen und es trüben. Ich habe es schon installiert. Klicken Sie also am Ende auf die Schaltfläche Installieren , um sie auf Ihrem VSCode zu installieren . Schließ es nieder. Jetzt müssen wir diese Komponente im js P rendern und dann für unsere app.js genau hier in diesem div einstellen. Okay, bevor wir das machen, müssen wir nur das Importprofil importieren , oder? Ich habe nicht automatisch importiert als Sorge, ich mache es von Grund auf neu. Also muss ich das einfach abwischen. Importieren Sie das Profil aus dem Schrägstrich des Punkt-Schrägprofil-Containers . Und hier müssen wir nur das Komponentenprofil mit dem selbstschließenden Tag rendern . Speichern Sie sie im Browser und schauen wir es uns an. Werfen Sie einen Blick darauf. Es erscheint genau hier in der Mitte des Bildschirms. Probieren wir es aus, indem wir auf das Icon klicken: Facebook, Instagram, YouTube und Twitter. Die Links funktionieren nicht. Du weißt warum Heron zu VS Code und lass mich es dir zeigen. Fahren Sie mit dem Profil fort. Und hier drüben, direkt im hohen Kalium oder mit Freunden. Wir müssen den entsprechenden Social-Media-Link dort kopieren und einfügen . also für Facebook sehen, Kannst du also für Facebook sehen, dass ich nur die URL meines Facebook-Pits kopieren muss. Komm her, wische das Pfundzeichen ab und füge dann ein. Also mache ich es einfach für das YouTube. Hier ist mein YouTube-Kanal. Also hier ist das Icon für YouTube. Bitte stellen Sie sicher, dass Sie den Link und die entsprechenden Symbole einfügen . Okay? Also muss ich es einfach auch für Instagram machen. So kannst du das an deinem Ende machen und alles erledigen lassen. Jetzt für Instagram. Wipp dieser Pfund-Paste Pfund-Paste gespeichert, hatte auf den Browser. Öffnen Sie das Portfolio, laden Sie auf, laden Sie es neu. Um es auszuprobieren, klicken wir noch einmal auf die Icons. Facebook. Kannst du sehen? Also musst du einfach wieder hochgehen. Probieren wir es auf YouTube aus. Und Tierra, richtige Phrase, alles funktioniert wie erwartet. In der nächsten Vorlesung werden wir also mit den restlichen Details zur Profilkomponente fortfahren , einschließlich des typischen Reaktors. Wir sehen uns in der nächsten Vorlesung. Bleiben Sie konzentriert und passen Sie auf. 8. Profile 2: In dieser Vorlesung werden wir diesen Typeffekt implementieren. Kann sehen. Und wir werden auch die Kurzbeschreibung, die Körper und das Profilfoto umsetzen . Toronto VS-Code. Es sei denn, implementiere das schnell. Bevor wir fortfahren, müssen wir etwas tun. Vermasselt es. Und lass mich dir genau hier dieses Div mit einem Klassennamen mit tiefgreifenden Details zeigen. Kannst du sehen? Jetzt möchte ich, dass du gewöhnliche Eier hervorhebst oder Control X abschneidest. Und dann komm her, füge es genau hier ein. Genau hier sollte es schließen. Speichern Sie sie im Browser. Eigentlich sieht alles gleich aus. Aber wenn Sie diese Korrektur nicht vorgenommen haben und wenn wir anfangen, sie zu stilisieren, wird sich dies stark auf Sie auswirken. Gleich nach dem schließenden div von ClassName, Profil, Datenbankname, werden wir ein anderes div haben, geben ihm einen Klassennamen Profil, Details, Strich, Rolle. Und jetzt müssen wir den Typeffekt implementieren. Wir müssen den Zieltyp React auf das Terminal installieren Zieltyp React auf das Terminal und dann sehen, um den aktuell laufenden Server zu stoppen. Jetzt werde ich npm install machen. Reagiere Strich. Die Installation ist im Gange, also müssen wir darauf warten. War erfolgreich installiert. Scrollen Sie nach oben, wenn Sie die Gurke nicht importieren. Scrolle nach unten. Jetzt müssen wir es umsetzen, oder? Hey, ich verwende lieber das selbstschließende Tag. Also hier drüben werden wir die Schleife unendlich haben. Die Schritte, setzen Sie es auf leeres Objekt. Und dann haben wir eine Reihe von Elementen, bei denen es sich um die Details handelt, die basierend auf der Zeit angezeigt werden sollen. Und hier werden wir einen vollen Plastik-Dave haben, durch ein Komma getrennt ist. Wir wollen, dass es eine Sekunde dauert. Also werden wir jede Sekunde ein Display haben. Also würde dieser Typ für eine Sekunde auftauchen. Und dann, okay, markieren Sie, halten Sie die Umschalttaste und Alt gedrückt und tippen Sie dann viermal auf die Pfeiltaste nach unten. Okay, also hier werden wir Full-Stack-Entwickler-Horror haben Full-Stack-Entwickler-Horror , oder? Was hier passiert, ist das, dieser Typ wird für eine Sekunde angezeigt, und dann wird dieser Typ Silizium anzeigen. Es ist also eher so, als würde all dies in der Schräglage auf jede Zelle warten. Wenn also Guy eine Schaltung anzeigt, wird er losgehen und dieser Typ zeigt eine Sekunde an, er geht los. Und genau wie Dad, haha, richtig, Solver Nestor Linie ist es, die Emojis zu implementieren. zu tun oder zu markieren ist sehr einfach. Also bitte, wenn Sie sich auf Windows stützen, müssen Sie nur festhalten. Also wenn deine Tasse, folge meiner Führung. Platzieren Sie nun die Maus hier unten und gehen Sie dann zum Menü oben rechts. Hier auf Edit, Emoji und Symbole. Hier entscheide ich mich einfach für diesen Kerl. Siehst du sehr einfach zu implementieren? Und auch hier muss ich mich nur entscheiden Omega-Punkt entscheiden. Werfen Sie einen Blick darauf. Okay. Jetzt sind wir damit fertig. Wenn Sie also an Windows arbeiten, müssen Sie nur meinen Code kopieren und einfügen. Und Sie werden dies im Internet anzeigen lassen. Nein, geh weiter zum Terminal. Wir müssen die Bewerbung noch einmal starten. Mpm starten. Schön, ich liebe es. Siehst du einen Blick darauf. Harold, zu VS-Code, es sei denn fortfahren. Gleich nach diesem schließenden Span-Tag. Wir werden eine Menge Span-Tag haben. Geben Sie den Klassennamen von Profil, Strich, Bindestrich, Slogan an. Gehen Sie weiter zum Demo-Projekt. Also müssen wir nur diese kurze Beschreibung eines Hey, Exemplars kopieren. Fügen Sie es direkt zwischen das Tag ein. Sparen Sie. Schau es dir im Browser an. Kannst du sehen, hey, ist es jetzt das Nest und die Linie ist, um das Boot zu implementieren ist. Also lasst uns das schnell machen. Gleich nach diesem schließenden div. Wir werden ein div-Profiloptionen haben. Und hier werden wir ein Gewähr haben , geben Sie den Botnet-Klassennamen an. Und gleich zwischendurch, stelle mich ein, Save. Und hier ist der Grund, richtig. Also müssen wir den eingekauften Lebenslauf implementieren. Lassen Sie uns alles in ein, ein Tag, die Hypothese oder eine Phrase einpacken . In Ordnung, um diese umzusetzen, müssen wir ihren Lebenslauf importieren. Ich bin in das Materialverzeichnis gegangen. Ich habe es direkt hier auf meinem Desktop, öffne es und öffne dann den Portfolio Pro-Client öffentlich. Also hier müssen wir diesen Lebenslauf kopieren. Rechtsklick. Kopieren. Komm her, füge Heron in VS-Code ein, lösche das Pfundzeichen ab, den Namen des Lebenslaufpunkts PDF, weil es sich um eine PDF-Datei handelt. Also hier werde ich herunterladen. Genau hier werden wir ein Boot fahren lassen , der diesem Button einen Klassennamen mit hervorgehobenem Strich btn gibt . Und hier, hol Lebenslauf, spare. Außer weggenommen. Hier ist der Get Resume Bootfahren. Probieren wir es mal aus. Klicken Sie auf. Kannst du das sehen? Jetzt lädt es meinen Lebenslauf herunter, gehorcht und hat ihn. Kannst du so schön sehen? Das ist alles vorerst, für diese Vorlesung sehen wir uns in der nächsten Vorlesung. Bleiben Sie konzentriert und passen Sie auf. 9. Profilbild und Korrekturen anzeigen: Okay, jetzt werden wir das Profilbild implementieren. Und danach werden wir die notwendigen Korrekturen vornehmen. Scrolle nach unten. Gleich nach diesem div. Wir werden ein anderes Div mit dem Klassennamen „profound Dash“ haben . Bild. Noch eins. Tiefgründiger Strich, Bild, Strich, Hintergrund. Sicher. Vermasseln Sie es, wenn Sie nicht die notwendigen Korrekturen vornehmen. Gleich nach diesem div mit dem Klassennamen Coase. Wir werden eine andere Def haben, geben Sie den Klassennamen an. Dash-Symbol. Schön. Lass mich dir was zeigen. Hier sind also Highlights von Fahrspuren 14 bis 28 die a-Tags. Halten Sie die Alt-Taste gedrückt und tippen Sie dann auf die Pfeiltaste nach oben auf Ihrer Tastatur. Siehst du das? Genau so verschiebt man Code in VS-Code. Also wenn ich diesen Code mit dem Klassennamen des Pause-Symbols aus diesem div verschieben möchte. Alles, was ich tun muss, ist die Alt nach unten zu drücken und dann auf die Pfeiltaste nach unten auf der Tastatur zu tippen. Siehst du das? Alles klar, also lasst es uns einziehen. Das einfachste so sicher. Kannst du jetzt sehen, wir haben den Code direkt im div mit dem Klassennamen von Coase, Dash-Symbol ANOVA. Alternativ dazu besteht darin , alle Tags richtig in ein div mit dem Klassennamen des Ursache-Dash-Symbols zu kopieren und einzufügen . Dies ist zum Beispiel oft nach dieser Vorlesung, und in der nächsten Vorlesung werden wir beginnen, diese Komponente zu stilisieren. Wir sehen uns in der nächsten Vorlesung. Bleiben Sie für Kosten und passen Sie auf. 10. Das Profil gestalten: Fangen wir an, die Profilkomponente elastisch zu stilisieren. Und erinnern Sie sich daran, dass wir es in der vorherigen Vorlesung so verlassen haben. Mir wurde klar, dass es nicht schön aussieht, aber obwohl es auch nicht AGI aussieht. Also keine Sorge, in den nächsten Vorträgen werden wir es vollkommen gut aussehen lassen. Heroin zu VS-Code es sei denn fortfahren. Das erste, was wir hier tun werden, ist, dass die notwendigen Importe den Explorer schnell öffnen. Klicken Sie mit der rechten Maustaste auf SRC und klicken Sie auf neuen Ordner. Nennen wir es Vermögenswerte. Und richtig, in diesen Assets erstellen wir einen neuen Ordner. Nach Hause. Fahren Sie mit dem Materialverzeichnis Orban und öffnen Sie auch die SRC-Vermögenswerte des Portfolio-Pro-Clients. Also muss ich diese einfach zur Seite ziehen und dann das Schriftpaket kopieren. Dies ist also die Schriftart , die wir in diesem Kurs verwenden werden. Komm her, füge es direkt in die Vermögenswerte ein. Und hier müssen wir mit unnötigen Bildern kopieren , die die Profilkomponente relevant sind. Der BDI, die Form und das Profilfoto. Wählen Sie aus. Kopieren. Öffnen Sie das Zuhause, fügen Sie sie ein und schließen Sie die Portfolio-Sonde. Beim Öffnen des Codes wurde der Code geöffnet, wie weit wir die CSS-Datei kopieren müssen. Sieh es dir an. Kannst du sehen Heroin in VS-Code kopieren? dem Indexpunkt CSS fort, hebt hervor, schrubbt und fügt ihn dann genau hier ein. Stimmt's? Speichern Sie sie im Browser und schauen wir es uns an. Schön. Mir gefällt es. Kannst du sehen? Jetzt haben wir das Boot sieht wunderschön aus. Hier ist das Importin, welches das primäre Barton und VCs ist. Sie haben das Abbrechen hervorgehoben. Hielt an VS-Code fest. Lass mich es dir zeigen. Scrolle nach unten. Scrolle nach unten. Hier ist das primäre BTN, das ist das hohe AMI, das gekauft wurde. Wir haben also nur den Hintergrund, die Schriftgröße, den Rahmen und die Schriftfarbe angegeben die Schriftgröße, den Rahmen . Und hier drüben haben wir es auf Hoover geschafft. Wenn Sie also den Mauszeiger darauf bewegen, wird dies der Hintergrund der Grenze sein und alle anderen Eigenschaften bleiben gleich. Lass mich es dir zeigen. Siehst du das? Wenn ich mit der Maus darauf schwebe, ändert sich der Randhintergrund. Okay, also dasselbe für das hervorgehobene PTEN. Erreichen ist das Gleiche. Und hier ist der Stil eines Heu. Also geht es an die Macht. Scrolle nach unten. Und hier sind die Farben, die ich für die Ergebnisse vorbereitet habe. Markieren, kopieren Sie Heroin in VS-Code. Und dann müssen wir mit unserem App Dot CSS fortfahren. Markieren Sie auch den scrub-Befehl V zum Einfügen. Perfekt. Jetzt sind wir mit den Einstellungen fertig. Fahren wir mit dem Profilpunkt CSS fort. Schließen Sie dies, schließen Sie dies, blenden Sie den Explorer aus und fahren Sie dann mit dem Profilpunkt-CSS fort. Also hier beginnen wir mit dem Profilcontainer. Derzeit ist der bevorzugte JS. Und lass mich es dir zeigen und warum ist es? Also werden wir es auf einen Flex-Container setzen. Um das zu tun, müssen wir nur Flex anzeigen. Machen Sie sich Notizen. Und wenn ein Behälter so eingestellt ist, dass er Flex anzeigt, erweitert er die Elemente, um den verfügbaren Platz zu filmen oder die Gegenstände zu schrumpfen, um ein Überlaufen zu verhindern. Hier ist die Abbildung auf dem Bildschirm. Werfen Sie einen Blick darauf. Kannst du das sehen? Schön? Richten wir Elemente aus. Um unsere beste Ausrichtung zu senden. der Mitte. Begründen Sie Inhalte. Mitte, die Höhe, 10 Prozent. Die mittlere Höhe, der Inhalt anpassen und die Hintergrundbild-URL. Wir müssen einige Schritte voraus zu den Vermögenswerten gehen , nach Hause. Und hier müssen wir den bg-Punkt JPEG auswählen , der als Hintergrund des Profils gespeichert wird. Aber in Zukunft werden wir das hier rausholen. Dies dient also nur zu Unterrichtszwecken. So kannst du etwas auf dem Bildschirm anzeigen lassen und glücklich sein. Sparen Sie. Verknüpfen wir nun die Komponenten mit der CSS-Datei. Geht weiter zum Profil. Und hier müssen wir nur den Profilpunkt CSS Save importieren. Hielt am Browser fest. Und hey, ist es jetzt der Typeffekt und eine kurze Beschreibung ist nicht mehr sichtbar. Lasst uns das schnell beheben. Ich muss nur mit dem Profil CSS fortfahren. Dann müssen wir das Profil stilisieren. Das übergeordnete Element hat seine Anzeige flexibel, Elemente ausrichten, zentrieren und die Farbe. Lass es uns sicher fühlen. Gehe in den Browser und trübe ihn. Die Farmgröße beträgt 24 Pixel. Die Mohnblumen der Schriftfamilie, halb fett. Nun, für das Profil hat diese Rolle gespielt. Also muss ich nur hervorheben, kopieren. Komm her, füge ein, schließe die geschweifte Klammer. Und alles, was wir hier tun müssen, ist den Namen zu löschen. Und wir werden eine Rolle haben, den Flex-Richtungs-Doppelpunkt. Dies ist also die Richtung, in der die Geschmackslinien den Rand angezapft haben. Also werden wir es von oben, rechts, unten links, von oben für 10 Pixel, von rechts, 0, von unten, 24 Pixel und nach links 0 haben. Als nächstes muss ich nur die geschweifte Klammer markieren, kopieren, einfügen und schließen. Und hier müssen wir den Kopf stilisieren. Und natürlich solltest du wissen, dass der Typeffekt in der ersten Stufe stimmt. Ich zeige dir das versteckte Tag und trübe es. Also beziehen wir uns auf all das rechte Oberteil, hey, gib ihm eine Schriftgröße von 40 Pixel. Schrift, Familie, Währung, die Sie sparen. Schauen wir es uns an. Siehst du okay, der primäre Test? Also die Farbe, jetzt müssen wir diese Farben verwenden. Also haben wir LAR, weiß, den hervorgehobenen Text importiert . Also hier wollen wir die Cola verwenden, die wir früher importiert haben. Wir müssen uns für den AARP-Punkt-CSS einstellen. Und hier wollen wir die dunkelorange Farbe verwenden , die auf dem CSS gehalten wird. So einfach ist das. Der tiefgreifende Rollen-Slogan, der die kurze Beschreibung ist. Dieser Typ hier drüben, Profil, Dash, Dash. Slogan. Geben Sie ihm eine Telefongröße von 19 Pixeln an. Gib ihm einen Spielraum. Von oben haben wir 50 Pixel von rechts. Und 0 auf den restlichen Seiten. Und hier ist mir die Mohnblumen der Schriftfamilie leicht, laden, du siehst Code oder schreibst etwas gerade auf mich aufmerksam. Vermasseln Sie, wo wir die hervorgehobenen Tests haben. Okay. Alles klar, Leute, wir müssen das richtig buchstabieren. Schau Leute, wir bauen ein klassisches Portfolio-Projekt auf. Es ist also notwendig, dass wir grammatikalisch geprüft werden. Also denke ich, dass es jetzt cool ist. Und hier drüben geben wir den Spielraum. Also wähle ich einfach Duplicate Women es für die Warteschleife aus. Gib die Hintergrundfarbe an. Der Hintergrund ist weiß. Also müssen wir die Farbe schwarz speichern lassen. Und bevor wir fortfahren, lass mich dir etwas direkt im Profil GAS zeigen. Siehst du genau hier dieses Div mit einem Klassennamen mit tiefgreifenden Dash-Optionen. Also müssen wir grammatikalisch EXXAT sein. Speichern Sie sie im Browser. Jetzt ist Hoover auf dem Getter importin DOC. Eigentlich werden wir die Profilbildklasse und den Box-Schatten verwenden . Also wollen wir einen Kreis haben. Dafür. Wir setzen den Grenzradius auf 50 Prozent. Geben Sie ihm eine Höhe von 80 Pixeln geben Sie ihm eine Breite von 80 Pixel für den Rand an. Also es sei denn, nimm den Rahmen heraus. Siehst du hier ist der Rahmen in der oberen rechten Ecke des Bildschirms. Es scheint gut zu sein. Ich liebe es. Jetzt müssen wir das Profilbild direkt auf den Rahmen setzen . Ich muss diese Kopie nur hervorheben. Komm gleich her, füge ein, schließe die geschweifte Klammer, stell den Hintergrund und gib das Versteck von 92 Prozent. Gib ihm eine Breite von 92%. Jetzt müssen wir das Bild anzeigen. Also werden wir URL machen, die Vermögenswerte getroffen haben, das Zuhause, dann brauchen wir das Profilfoto. Sicher. Kannst du sehen, dass das nicht gut aussieht. Heroin zu VS-Code. Die Größe des Hintergrunds. Cover, sicher, gehen Sie in den Browser. Kannst du sehen, dass das Profil gut erscheint? Also lasst es uns jetzt am Rahmen reparieren. Ist das ganz einfach. Alles, was wir tun müssen, ist den Grenzradius zu kopieren. Fügen Sie es richtig ein, drücken Sie, Speichern und gehen Sie zurück. Kannst du das sehen? Schön? Wiederhole es. Nein, wiederhole es. Position des Hintergrunds. der Mitte. Kannst du das sehen? Schön? Lassen Sie uns nun den Zoom in Wirkung implementieren. Lass mich es dir zeigen. Du siehst, wenn ich mit der Maus auf das Profil fahre, passiert nichts. Also muss ich diese einfach kopieren. Komm her, füge ein, schließe die geschweifte Klammer. Und hier haben wir die UNH vorbei. Wir haben die Transformation und geben ihr dann eine Skala von 1,07. Und wir wollen, dass es 1 Sekunde übergeht. Erleichtern Sie sich. Sicher. Bewegen Sie die Maus auf das Profilbild. Kannst du dich sehen? Das ist perfekt. In Ordnung, also müssen wir die Social-Media-Symbole stilisieren. Die Begnadigung, sind es Pixel der Polsterung übrig? 0 Pixel Also müssen wir hier einfach alles abschließen. Wenn Sie also die Maus auf die Symbole bewegen, angesichts der Skala von 1,5. Und hier müssen wir das I-Tag, sicheres Heroin für den Browser angeben und einen Blick darauf werfen. Alles funktioniert wie erwartet. Das ist vorerst alles für diesen Vortrag. Wir sehen uns in der nächsten Vorlesung. Bleib konzentriert. Und TK. 11. Profile Profil-: Fahren wir mit der Profilkomponente fort. Und in diesem Vortrag werden wir an der mobilen Reaktionsfähigkeit arbeiten. Schauen wir es uns schnell an. Siehst du auf dem Galaxy S5. Schauen wir es uns auf dem iPad Pro an. Okay, cool. Ipad. Sehen Sie vorerst, dass die Anwendung nicht auf den VS-Code reagiert, es sei denn, fortfahren Sie fort. Fangen wir mit dem iPad Pro an. Das Profilbild. Geben wir die Marge an. Die Profildetails, der Name, die Details des Profils. Wir müssen ihm nur eine Telefongröße von 20 Pixeln geben. Jetzt müssen wir die Größe der Körper auf dem iPad Pro reduzieren. Geben Sie ihm also eine Breite von 120 Pixeln an. Auffüllen des Z-Index. Gehen Sie zum Browser und schauen wir es uns an. Probieren wir es auf dem iPad Pro aus. Wieder wie erwartet. Ich mag es, dass es auf VS-Code weitergegeben wurde, es sei denn auf dem Bildschirm mit der maximalen Breite von 900 Pixeln fortfahren . Also muss ich nur nach oben scrollen, markieren, kopieren, komma k, einfügen, die geschweifte Klammer schließen. Und jetzt müssen wir die Pixel ändern, also die Bildschirmgröße. Dies stimmt also mit der maximalen Breite der rohen Pixel von niemandem überein. Wir müssen das Profilbild stilisieren. Und was wir tun werden, ist die Höhe auf 320 Pixel anzugeben. Die Breite, 320 Pixel, gibt ihm einen Rand. Markieren, kopieren, einfügen und schließen Sie die geschweifte Klammer. Und auf einem Bildschirm mit der maximalen Breite von 100 Pixel. Dann das Profilbild. Geben wir die Marge an. Sie sollten also wissen, was die impotente Regel ist, die NCSS-Türen definitiv die NCSS-Türen definitiv diese hier drüben werden diese außer Kraft setzen. Okay. Tiefgründig. Dodge, Elternteil. Die Flex-Richtungsspalte umgekehrt Rand von den oberen 40 Pixeln, 0 auf den Arrettseiten. Wir werden seinen Display-Flex haben. Rechtfertigung des Inhalts. Abstand zwischen den Profildetails. Einzelheiten. Alles, was wir hier tun müssen, ist die Marge anzugeben. Der Name des Profils, Komma-Punkt. Tiefgründig. Hat diese Rolle gespielt. Wir müssen nur eine Linie zum Weihnachtsmann testen. Sparen Sie. Gehen Sie in den Browser und schauen wir es uns an. Es sieht gut aus auf Galaxy S5, iPhone, iPhone 6, 7 und 8 Schön. Also lasst es uns anprobieren. Ich habe ein x auf dem iPad, ein iPad Pro Omega. Und schließlich jetzt auf einem kleineren Bildschirm mit der maximalen Breite von 375 Pixeln. Markieren Sie erneut, kopieren Sie. Komm her, füge die geschweifte Klammer ein, schließe und wir müssen die Bildschirmgröße 3, 75 Pixel angeben. Auf dem Bildschirm. Wir müssen die Größe des Profilbildes reduzieren. Gib ihm eine Höhe. 75 Bilder. Geben Sie die Breite auf 75 Pixel an. Margin Top minus 90 große Schuhe. Die Profildetails geben ihm eine Breite von 90 Prozent an. Sparen Sie. Jetzt auf den Browser, unrealistisch es raus. Diese sollten also auf allen Plattformen reagieren. Siehst du? Kannst du sehen, dass das alles für den Moment ist, für diese Vorlesung. Wir sehen uns in der nächsten Vorlesung. Bleib konzentriert. 12. Profilfoto: Wir werden direkt in der Home-Komponente mit der Arbeit an der FUTA beginnen . Lass mich dir zeigen, was ich damit meine. Ich lese kein Demo-Projekt. Kannst du diese Kurve hier sehen? Lassen Sie es uns schnell umsetzen. Geht mit dem VS-Code fort. Klicken Sie mit der rechten Maustaste auf Home hier auf New Folder. Und das würde FUTA heißen. Genau hier. Wir müssen das Essen, unsere Komponente, herstellen. Hier eine neue Datei, foo dot dot js. Lassen Sie uns die entsprechende CSS-Datei erstellen. Raus hier auf einer neuen Datei, foo dot dot css. Wir sind auf Essen RGS. Generieren wir die Funktionskomponente. Schön. Jetzt müssen wir nur noch die Komponenten mit ihrer CSS-Datei verknüpfen . Also müssen wir das nicht tun, wenn wir anfangen , sie zu stilisieren, richtig. Also mit verknüpft ist die CSS-Datei mit dem Lebensmittel IgA bekannt. Wir werden diesen TV ClassName des FUTA-Containers geben. Wenn der Klassenname food R Strich, Container. Und genau in diesem Div werden wir ein anderes Div mit dem Klassennamen von FUTA Parent haben . Wir müssen das Bild IMG, SRC benötigen, geschweifte Klammer öffnen und schließen. Dann werde ich es brauchen. Sie müssen es auf der offenen und geschlossenen Klammer platzieren. Gehen wir ein paar Schritte voraus, um die Vermögenswerte zu erreichen. Home Slash Schiff, Strich BG Punkt PNG mit dem selbstschließenden Tag. Stimmt's? Schön. Jetzt werden wir es merkwürdig machen. Dies würde also angezeigt , wenn es ein Problem mit dem Bild gibt. Lass mich dir das Bild schnell zeigen. Sie auf Vermögenswerte, zu Hause. Und dann sind hier die Bilder. Denken Sie daran, dass wir dieses Bild ist Querruder in der vorherigen Vorlesung importiert . Und hier ist der Schiffs-Strich BG Dot PNG. Dies ist also das Bild, das als FUTA verwendet werden soll. Alles klar, mach es ab. Und auch denke ich, dass wir damit fertig sind. Wir müssen es auch schließen. Jetzt ist sie auf das FUTA CSS. Hier drüben beginnen wir mit dem Lebensmittel- oder Armaturenbehälter. Geben Sie die Höhe von 17,8% an. Phrase, ich möchte, dass du meiner Führung folgst, richtig, damit wir alle das gleiche Ergebnis erzielen können. Gib ihm eine Breite von 100%. Überlauf. Versteckt. Anzeigen, Flex. Begründen Sie den Inhalt zu zentrieren, Essen und Strich, Elternteil. Und stellen Sie immer sicher, dass Ihre Klassennamen richtig geschrieben sind , damit Sie sich nicht in Schwierigkeiten stürzen. Die Breite 100%, geben Sie ihm eine Höhe von 100%. Und die maximale Breite von 1920 Pixel. Jetzt für jedes Bild, FUTA Dash, Elternteil, und natürlich sollten Sie wissen, dass sich das Bild, das das IMG-Tag ist, hier oben im Essen befindet. Und lass mich es dir schnell zeigen. Dieses div mit dem Klassennamen der FUTA-Periode. Und dann ist hier das IMG-Tag. Geben Sie ihm eine maximale Breite 100% und geben Sie ihm eine Höhe von 130 Pixeln. Wir möchten so zielen, wie es auf dem iPad Pro erscheint. Richten wir Elemente aus. Flex, Ende, sicher. Unter der Annahme, nein, müssen wir diese Komponentenrechte in der gs p app.js rendern . Und wo ist es? Jetzt müssen wir Lebensmittel aus dem Portfolio-Container-Schrägstrich importieren , Schrägstrich FUTA ist so einfach. Also müssen wir nur die FUTA mit dem Soft-Closing-Tag ausführen die FUTA mit dem Soft-Closing-Tag zum Terminal gehen. Und dann müssen wir den CD-Client MPM starten. Warten wir drauf. Und wie Sie sehen können, zeigt es die Kunst an, die vom Bildschirm abgehoben wurde, sagt keine Internetverbindung. Damit sollten wir also verstehen, dass etwas mit dem Toronto-VS-Code des Bildes nicht stimmt , es sei denn, das schnell zu beheben. Fahren Sie mit foo Tag Ohren und Haare fort. Ist es das? Okay, also diese eine Sache, die ich dir zeigen möchte, Hey, kannst du sehen? Jedes Mal, wenn Sie ein Bild in React JS benötigen, müssen Sie das Ende eines Hier- und dann Punktvorgaben erreichen, um Hier- und dann Punktvorgaben erreichen, sie im Browser zu sichern. Und schauen wir uns noch einmal an. Siehst du, es sieht so aus, als würde das Bild nicht auftauchen , nur weil es direkt in den weißen Hintergrund fällt. Werfen Sie einen Blick darauf. Siehst du hier ist das Bild. Kannst du sehen? Ich bewege es nach rechts und bewege es dann nach links. Ich bewege es nach rechts und bewege es dann nach links. Das Bild ist also genau hier, aber man kann es nicht sehen, einfach weil es herunterfällt. Der weiße Hintergrund. Kannst du sehen, dass es richtig ist? Also mach dir keine Sorgen. In der nächsten Vorlesung werden wir es reparieren lassen. Und das ist oft für diese Vorlesung gedacht. Wir sehen uns in der nächsten Vorlesung. 13. Anzeigen der Footer: Lassen Sie uns das Essen auf dem Bildschirm angezeigt werden und lassen Sie die Profilkomponente wie erwartet aussehen. Öffne den Entdecker. Rechtsklick auf Home. Kannst du dieses Haus eines Hey sehen? Klicken Sie mit der rechten Maustaste auf Neue Datei. Zuhause js. Lassen Sie uns die entsprechende CSS-Datei erstellen. Klicken Sie erneut mit der rechten Maustaste auf Home hier auf New File, On Dot CSS. Gehen wir weiter zu den Home-JS und generieren dann die Funktionskomponente React js. Und ich weiß, dass du jetzt wissen solltest, wie das geht. So schnell. Geben wir diesen fehlerhaften Klassennamen an. Und wir werden es Home Dash Container nennen. Und genau hier werden wir alle Komponenten rendern , aus denen die Homepage besteht. Also lasst es uns importieren. Hey, lasst uns das Profil aus dem Profil importieren. Und hier müssen wir das FUTA aus dem FUTA Slash foo Tag js importieren . Im Moment haben wir nur zwei Komponenten. Und in Zukunft werden wir mehr Komponenten auf der Homepage haben. Lassen Sie uns so schnell einen Trend haben. Zuerst müssen wir das Profil mit dem selbstschließenden Tag rendern . Und das Nest ist FUTA. Und auch das selbstschließende Tag. Dieser Hinweis tauscht beispielsweise die Komponenten nicht aus. Lass mich dir zeigen, was ich damit meine. Highlights. Wenn Sie das Essen oben verschieben, erhalten Sie ein anderes Ergebnis. Okay? Sie müssen also Ihre Komponente entsprechend dem rendern Ihre Komponente entsprechend dem was Sie auf dem Bildschirm sehen, was einfach impliziert, dass Sie meiner Führung folgen sollten. Also muss ich es nach unten bewegen. Kannst du sehen Okay. Sparen Sie. Hab jetzt an der Heim-CSS festhalten. Genau hier müssen wir diesen Container stilisieren, der der Hauscontainer ist. Rechtfertigung des Inhalts. Abstand zwischen der Höhe beträgt 50 vh und die mittlere Höhe 670 Pixel. Und das Nest und die Linie sollen mit dem Profil CSS fortfahren. Hier ist es? Scrollen Sie nach oben. Ordnung, im Profilcontainer habe ich Ihnen in der vorherigen Vorlesung gesagt , dass diese nicht an diesem Ort sein werden. Markieren Sie also und dann Befehl X zum Ausschneiden. Jetzt ist sie auf das hier aufgeführte Heim-CSS. Sparen Sie. Fahren Sie mit dem obigen G S und genau hier müssen wir das Profil abwischen und das Essen ist Bestandteil, da es bereits in der Home-Komponente gerendert ist. Also alles, was wir hier tun müssen, ist , dass die Home-Komponente richtig in der App g, s. zu mieten in der App g, , also nützt dies hier drüben nichts. Wir brauchen es nicht. Jetzt müssen wir nur noch nach Hause aus Portfolio-Containern Slash Home Slash Home JS und dann ITA Safe mieten. Danach müssen wir das Home-JS mit der CSS-Datei verknüpfen . Habe schnell homogen und importiert dann Home-Dot-CSS. Und bitte beachten Sie, dass diese richtig sind. Die Benennungskonvention einer Komponente ist die Pascal-Benennungskonvention. Ich weiß also nicht, wie das zustande kam. Wischen Sie es ab, und dann sollte das F auf Johannisbrot sein. Speichern Sie sie im Browser und schauen wir es uns an. Kannst du das sehen? Okay, also das ist das Ergebnis, das wir bekommen haben, aber das ist für die Augen nicht angenehm. Wir müssen hier etwas in VS Code tun. Okay, fahren Sie mit dem Heim-CSS fort. Ich glaube nicht, dass wir diese Höhe hier drüben brauchen. Markieren Sie es und wischen Sie es dann ab. Sparen Sie sie noch einmal im Browser. Werfen Sie einen Blick darauf. Schön. Mir gefällt es. Kannst du das sehen? Auch? Dies ist jetzt oft für diese Vorlesung. Wir sehen uns in der nächsten Vorlesung. 14. Bewahre Projektstrukturen und bereinigung des Codes: Jetzt müssen wir den Code bereinigen oder die Struktur unseres Projekts beibehalten. Horizontaler VS-Code außer fortfahren Öffne den Explorer. Ich möchte dir hier was zeigen. Direkt im Home-Verzeichnis. Wir haben das Profil CSS und dann das Profil JS. Und diese beiden Akten sind fehl am Platz. Okay, also müssen wir dafür ein separates Paket erstellen. Klicken Sie nun mit der rechten Maustaste auf das Home-Verzeichnis hier auf Neuer Ordner. Und das wird Profil genannt. Lassen Sie uns diese also in das Profilpaket verschieben. Klicken Sie auf Ziehen und legen Sie es dann dort im Profil ab. Und hier ist die Dialogbox. Es heißt, bist du sicher, dass du das profunda CSS in das Profil verschieben willst? Um dem zuzustimmen, müssen Sie auf Rückgängig machen, Boarding verschieben klicken und auch das Profil GAS abholen, es direkt in das Profilpaket ziehen und ablegen. Und natürlich beweg dich. Es gibt also einige Probleme hier im Terminal, einfach weil wir jetzt einen Import fehlen. Zuerst. Wir müssen weiter zum Heim-GAS. Hier ist das Profil. Jetzt mache ich das Schrägprofil J S, Save. Und hier auf dem Terminal heißt es, dass Länder von Ihnen das sehen. Wir müssen zurück zum Profil CSS, unfixiert, die fehlenden Importe. Scrolle nach unten. Also müssen wir hier drüben umziehen. Noch einen Schritt voraus. Sparen Sie. Und Knochen. Das Problem wurde gelöst. Wenn Sie eine solche Anwendung schreiben, wird sie sehr einfach zu lesen und zu verstehen. Okay, also bringe ich dir genau bei, wie man eine Anwendung wie ein Profi berechnet. Derzeit Browser es sei denn zu sehen ob alles gut funktioniert. Alles funktioniert wie erwartet. Ich liebe es. Alles klar. Kümmere dich. 15. Component: In dieser Vorlesung werde ich Ihnen beibringen, wie Sie Komponenten perfekter und organisierter rendern können, damit es sehr einfach wird, den Bildschirmnamen und die Bildschirm-ID zu erhalten , wenn wir mit der Implementierung des reibungslosen Bildlaufs beginnen . Das bedeutet, dass wir alle Bildschirme in einer Komponente abbilden und dann nur diese Komponente in der App gerendert werden. Klingt knifflig, oder? Okay. Lassen Sie mich Ihnen derzeit ab.js zeigen. Während wir mit den Vorträgen fortfahren, werden wir vier bis fünf verschiedene Komponenten haben. Und diese Komponenten werden in der app.js gerendert, wie Sie die Heimat eines Heu sehen. Richtig. Also werden wir das Testimonial haben, den Grund für den Kontakt und den Rest von ihnen. Nun werden wir alle Bildschirme in einer Komponente abbilden und dann nur diese Komponente in der app.js rendern lassen . Okay, also müssen wir es nicht so fest codieren. Also glaube ich, während wir fortfahren, Joel, verstehe es gut genug. Rechtsklicken Sie auf SRC. Hier ein neuer Ordner. Und dieser Ordner würde Dienstprogramme heißen. Sind richtig in den Dienstprogrammen. Wir werden hier auf New File ein Modul für Dienstprogramme erstellen . Und wir werden ein Modul namens common t's dot js erstellen . Also richtig, in diesem Modul werden wir aus Portfolio-Containern Slash Home Slash Home importieren aus Portfolio-Containern . Jetzt müssen wir die Gesamtzahl der Bildschirme als Podcasts abrufen. Und wir nennen es totalen Unterstrich. Bildschirme. Setze es auf ein Array, oder? In diesem Array werden wir das Objekt haben. Und dann werden wir die Schlüsselwertpaare haben. Namensspalte des Bildschirms. Der Name des Bildschirms ist Home und die Komponente ist Home. In Zukunft werden wir also die gesamte Komponente hier speichern lassen. In Ordnung, lassen Sie mich Ihnen zum Beispiel zeigen, nehmen wir an, wir haben die Lebenslaufkomponente und ich werde es tun, ist dupliziert und dann wird der Mittelwert wieder aufgenommen werden. Und dann wird die Komponente wieder aufgenommen. Also müssen wir es einfach oben rechts importieren. Wenn Sie das tun, werden Sie direkt in diesem Array gespeichert haben. Okay? Es ist ein einfachster Punkt. Also muss ich einfach rückgängig machen. Jetzt müssen wir eine Titration durchführen, um die verfügbaren Bildschirme zu erhalten. Also hier mache ich einen Spot Const, bekomme Unterstrich, Unterstrich-Index. Wir werden den Bildschirm Nim aufnehmen, den Namen des Bildschirms unterstrichen. Und hier werden wir prüfen, ob der Bildschirmname nicht existiert. Wenn der Bildschirmname nicht existiert, müssen wir minus eins zurückgeben, was bedeutet, dass solche Bildschirme im Array nicht gelehrt werden. Jetzt müssen wir durch die Arrays des Bildschirms schauen und die verfügbaren Bildschirme abrufen. Denn lass ich gleich 0 und ich habe weniger als 22 Bildschirme Punktlänge. Und dann müssen wir mich um eins erhöhen. Also hier werden wir prüfen, ob Bildschirme von I dot screen Nim, Bildschirmname, dann werden wir den Bildschirm selbst zurückgeben . Okay? Hier müssen wir nur lachend zurückkehren. Sicher, oder? Die verschachtelte Linie besteht also darin, eine Komponente zu erstellen. Rechtsklick auf den Portfoliocontainer. Hier ist der Portfolio-Container. Rechtsklick auf neue Datei. Jetzt erstellen wir eine Komponente namens Portfolio-Container dot js. Also hier mache ich es, lasst uns die Gesamtbildschirme importieren. Lass mich es dir hier zeigen. Ist es Unterstrichenbildschirme von Dienstprogrammen slash OTs. Die nächste Zeile besteht also darin, die Gesamtbildschirme zu durchlaufen , damit sie auf dem Bildschirm angezeigt werden. Okay, also mache ich den Gesamtbildschirm Punkt, setze es, um Klammern zu öffnen und zu schließen. Gesamtbildschirm Punkt, setze es, Wenn eine Bildschirmpunkt-Komponente vorhanden ist, haben wir screen.com. Gib ihm einen Bildschirmnamen. Öffnen und schließen Sie den Bildschirm der geschweiften Klammer mit dem Namen Punktbildschirm. Geben Sie den Bildschirmnamen des Tastenbildschirms an. Außerdem müssen wir ihm einen Ausweis geben. Screenshot, Name des Bildschirmunterstrichs. Stimmt's? So nahes Europa war ein selbstschließendes Tag. Ein anderes, wenn es nicht existiert. Also müssen wir hier nur ein leeres Div von a zurückgeben. Gib dem div einen Schlüssel. Bildschirm Punktbildschirm unterstrichen den Namen und schließen Sie ihn dann. Schön. Und schließlich müssen wir diese Methode aufrufen. Lassen Sie mich Ihnen diese Funktion hier zeigen. Wir werden es genau hier in der Benutzeroberfläche nennen. Geben wir diesem div also einen Klassennamen, Portfolio-Container. Und genau hier drin, nimm die geschweifte Klammer n, unsere Bildschirme, und rette sie in der app.js. Wir wischen das ab. Also müssen wir Portfolio-Container importieren, oder? Es hat es für mich wieder automatisch gemacht. Also muss ich es einfach abwischen. Eigentlich mache ich das , damit jeder mitmachen kann. Und wir müssen nur Portfolio-Container aus dem Portfolio-Container-Slash-Portfolio-Container importieren aus dem Portfolio-Container-Slash-Portfolio-Container . Und wir müssen auch das Haus abwischen. Und alles, was wir hier rüberbringen müssen, ist der Portfolio-Container. Schließen Sie es mit einem selbstschließenden Tag. Speichern Sie sie im Browser und schauen wir uns an , was wir an Bord haben. Erneut laden. Auf dem Bildschirm wird nichts angezeigt. Stimmt's? Schauen wir sie uns auf die Konsole an. Und eine funktionale ist nicht gültig als Reaktordiagramm. Okay. Toronto-VS-Code. Dann gibt es sie auf gewöhnlichen OTS. Alles ist cool über hey, Portfolio enthält sagt Funktion, sind die richtigen Leute. Dies ist eine Funktion, daher muss sie öffnende und schließende Klammern haben. Das ist es also, was es zu einer funktionstüchtigen Funktion macht. Nochmals weiter zum Browser. Stimmt, wunderschön. Alles funktioniert als Zuschauer. Ich liebe es. Dies ist jetzt oft für diese Vorlesung. Wir sehen uns in der nächsten Vorlesung. Bleiben Sie konzentriert und passen Sie auf. 16. Einführung in RXJS. Beobachtungen: Ordnung, also werden wir in dieser Vorlesung an den Animationen und dem reibungslosen Bildlauf arbeiten . Bevor wir jedoch mit dieser Vorlesung fortfahren, ist es gut zu wissen, was ein Beobachter ist, ein Beobachtbar ist und in unserem USGS Gegenstand ist. Und nach der Art gebe ich Ihnen den Link zur offiziellen USGS-Website , damit Sie mehr darüber lesen und erkunden können. Beobachter. In Pfeilen ist G ein Beobachter, ist er Wertverbraucher, der von einem Beobachtbaren geliefert wird? Und Observables sind Lizzy Push-Sammlung mehrerer Werte. Das Thema ist in unserem USGS unterworfen, ist eine besondere Art von Beobachtbar, die es den Werten ermöglicht, es an verschiedene Beobachter zu multikastieren. Okay, also ist es eher wie eine Veranstaltung und triff uns. Natürlich wissen Sie, dass Event-Emitter Registrierung von verschiedenen Sündern unterhält. In Ordnung, lass es mich dir so schnell zeigen, damit du ein klares Bild davon hast wovon ich rede. Wenn ich jetzt nach unten scrolle, werden Sie feststellen, dass die Abutment-Komponente hineinpasst. Jetzt lass uns runter gehen. Können Sie sehen, dass die Originalkomponente hineinpasst? Nun, die Idee ist, dass dieser Effekt , der der Beobachtbare ist, in einem Modul implementiert wird. Und dann werden wir verschiedene Komponenten haben, um dieses Observable zu nutzen, indem wir es abonnieren. Kannst du das Testimonial sehen, den Kontakt mit mir? Siehst du, wie es reinpasst? All dieser Effekt wird also in einem Modul erzeugt, und dann werden wir diesen Effekt verbrauchen , indem wir ihn abonnieren. Die Idee selbst ist also das Beobachtbare und die Beobachter sind die Komponente, die dieses Beobachtbare konsumiert. Jetzt können wir sagen, dass die Contact Me-Komponente ein Beobachter ist und das Fade-In-Effekt-Modul das Beobachtbare ist. Hört sich gut an, oder? Schön. 17. ScrollService: Habe das Konzept von USGS in der vorherigen Vorlesung nicht verstanden . In dieser Vorlesung werden wir mit der Implementierung des Codes fortfahren. Also Heron zum Terminal und lasst uns ein USGS installieren. Wir müssen CD Client, dann npm Installationsfehler GAS. Die Installation ist im Gange. Also müssen wir darauf warten. Installiert. Erfolgreich. Und die musst du vorerst einfach ignorieren. Klicken Sie mit der rechten Maustaste auf Dienstprogramme hier auf Neue Datei. Dann erstellen wir eine Datei namens Cross Service Dot js. Das erste Unbekannte, das wir hier machen werden, ist der Import des Gesamtbildschirms. Importieren Sie Gesamt-Unterstrich-Bildschirme aus gängigen OTAs. Und die NES-Downline besteht darin, das Subjekt aus unserer USGS zu importieren . Und wenn Sie sich in der vorherigen Vorlesung erinnern können, habe ich Ihnen gesagt, dass das Subjekt eine besondere Art von Beobachtbarkeit ist , die es ermöglicht, dass Werte Multicast-Status sein können, was dieses besondere Beobachtbare impliziert , das wir tun werden create würde in verschiedenen Unternehmen konsumiert und durch das Abonnieren von Essen konsumiert werden. Also hier müssen wir nur Subjekt von REXX importieren. Spot, die vierte Klasse, scrollen Sie Lebensläufe. Jetzt werden wir dieses Cross-Service-Objekt haben. Ihre Freunde haben angefangen. Scrollhandler-Semikolon. Übrigens denke ich nicht, dass dies notwendig ist. Jetzt werden wir das Thema instanziieren. Also müssen wir das Objekt oder die Referenz erstellen. Und jetzt nennen wir es aktuellen Screen-Sender. Ein neues Thema. Und das Gleiche hier werden wir statisches, aktuelles Verblassen des Bildschirms, ein neues Thema machen . Jetzt haben wir hier einen Konstruktor und fügen die Scroll-Ereignisse zum Fenster hinzu. Fensterpunkt, Ereignis-Listener hinzufügen. Dieser Punkt. Genau hier. Wir werden den Funktionsaufruf zum Actionbootfahren implementieren . Und lass mich es dir zeigen. Hier ist der Aufruf zum Handeln abbrechen. Wenn Sie auf diesen Button klicken, wird es reibungslos zur Contact Me-Komponente scrollen. Und der Name dieser Funktion wird skrotal sein. Stellen Sie mich ein, stellen Sie es auf unsere Funktion ein. Und hier werden wir es tun. Lassen Sie sich mit mir in Verbindung setzen, Dokumentpunkt abrufen, Element für ID abrufen. Dann bekommen wir die ID des Kontakt-Me-Bildschirms. In diesem Fall Kontaktraum. Also Freunde hier drüben, du musst meiner Führung folgen. Wenn Sie also so etwas tun, funktioniert es möglicherweise nicht für Sie, einfach weil die ID des Bildschirms in Zukunft so aussehen wird. Kontakt Space. Hab Recht. Und wenn der Bildschirm nicht existiert, müssen wir ihn genau hier beenden. Und wenn ja, werden wir mich kontaktieren, Bildschirm, DOD, scrollen in die Ansicht. Und das Verhalten. Es wird reibungslos verlaufen. Das ist es also, was es reibungslos macht. Scrollen Sie aus K, wir machen Fortschritte und es gefällt mir. Was ich gerade tun werde, ist diese Methode zu duplizieren , diesen Kerl hier drüben. Also werden wir diese für die Home-Komponente haben. Lass mich es dir schnell zeigen. Siehst du das unten genau hier? Dies würde also zum Home-Component Bone scrollen. Kannst du das sehen? Schön. Also müssen wir ihm einen Namen geben. Das würde also erwischt werden. Scrollen Sie nach Hause. Hier wird zu Hause sein. Wir werden diesen Variablennamen in den Startbildschirm ändern. Was ich jetzt tun werde, ist Command zu drücken und D. erneut darauf zu drücken. Kannst du sehen, dass die multikulturelle Bearbeitung sehr nett ist. Jetzt lösche ich es ab. Also lassen wir den Startbildschirm die Escape-Taste drücken , um das Multi Kausal zu deaktivieren. Nett. Nachdem wir dies getan haben, prüfen wir , ob das Element im Blick ist. Dies impliziert einfach, ob das Dokument vollständig auf dem Bildschirm erscheint oder nicht. Treten Sie also aus dieser Funktion heraus. Und hier werden wir ein Element in Sicht haben LM k. Wir werden eine Variable namens Req gleich L m dot haben . Holen Sie sich Bonding Client rect, entschuldigen Sie mich, das Auge eines Haares. Schneid das ab. Diese Methode von I gibt hier ein direktes DM-Objekt zurück , das Informationen über die Größe eines Elements und seine Position relativ zu den wenigen und den wenigen Pots enthält. Einfachere Phase zu dem Teil des angezeigten Dokuments, der derzeit in seinem Fenster sichtbar ist. Und hier werden wir eine variable Elemente top, Element top, req dot top haben. Und hier werden wir ein variables Element unten haben, req dot, ich schätze, weißt du, unten. Mal sehen, was das Element teilweise sichtbar ist. Lassen Sie uns teilweise machbares Element top. Wenn also das Element top kleiner als Windows Punkt in einer Höhe ist und das Element von bottom größer oder gleich 0 ist. Es bedeutet, dass es teilweise sichtbar ist. In Ordnung, also müssen wir nach dem vollständig sichtbaren suchen. Lassen Sie es vollständig sichtbar. Element top ist größer oder gleich 0 und das Element bottom ist kleiner oder gleich dem Fensterpunkt in einer Höhe. Jetzt werden wir einen süßen Fall haben. Wenn der Fall teilweise ist, werden wir teilweise sichtbar zurückkehren. Dieser Typ hier, entschuldigen Sie mich, das ist Coulomb. Und wenn der Fall eine vollständige Spalte ist, werden wir vollständig sichtbar zurückkehren. Und hier wird der Standardfall falsch sein. Hier ist ein Pfeil, einfach weil das Semikolon sein muss , um diesen Fall zu schließen. Richtig. Jetzt überprüfen wir den Bildschirm, der sich derzeit im Ansichtsfenster befindet, was bedeutet, dass der Bildschirm vollständig angezeigt wird. Also hier werden wir eine Funktion haben. Überprüfen Sie den Korrespondenten des View-Ports. Wir haben uns eine Veranstaltung für unsere Funktion angeschaut. In Ordnung, also musst du einfach den Code zusammen mit mir eingeben , damit ich alles erklären muss. Also lass mich es dir zeigen. Das ist dieser Fall hier drüben. Und dann dieser Punkt ist dieser Punkt ein Element in Sicht. Dann müssen wir den Fall Porsche zeigen. Dieser Typ hier. Wenn vollständig sichtbar. Teilweise sichtbar. Wenn der Bildschirm also teilweise sichtbar ist, was bedeutet, dass er nicht vollständig gerendert wird, müssen wir den Feed tatsächlich senden. Jetzt werde ich den aktuellen Punktbildschirm in Punkt passen. Als Nächstes. Hier ist eine Methode und dann müssen wir ein leeres Objekt und die Nest-Methode aufnehmen . Entschuldigen Sie mich. Die nächste Methode wird verwendet, um neue Werte in das Subjekt einzufügen und es Multicast-Betten an die Beobachter zu bringen , die registriert sind, um sich das Thema anzuhören. In diesem Fall wird es also einer anderen Komponente stammen. Das ist ziemlich erklärend also Und schließlich, wenn es vollständig sichtbar ist. Das heißt, wenn die Komponente vollständig auf dem Bildschirm gerendert wird , müssen wir den Bildschirmnamen, den Punkt und den Punkt senden den Bildschirmnamen, den . Und wir müssen das auf Objekt eines Haares nehmen. Und wir werden Bildschirm in View Coelom, Bildschirm, Bildschirmnamen machen. Und dann müssen wir aus diesem Safe ausbrechen. Vermasselt sie, oder? Wir haben es hier drüben vollkommen gut gemacht. Dann sorgen wir uns, wenn wir anfangen, diesen Observables-Job zu konsumieren , würde es definitiv gut genug verstehen. Alles klar. Kümmere dich. 18. Animations: In dieser Vorlesung werden wir mit den Animationen fortfahren. Klicken Sie mit der rechten Maustaste auf Dienstprogramme hier auf Neue Datei. Und dann wird das Animationen dot js genannt. Und dann müssen wir die Standardklasse exportieren. Die Animation ist offen und schließt geschweifte Klammer. Und hier müssen wir die Animationsklasse instanziieren. Und die Referenz des Objekts würde Animationen genannt. Animationen Semikolon, um es zu beenden. Und übrigens variiert, optional. Dann werden wir hier eine Funktion haben, die in den Bildschirm passt. Diese Funktion nimmt also die Bildschirm-ID auf, nämlich der Name des Bildschirms, setzt sie auf unsere Funktion und lassen Sie uns zum Portfolio GS gehen. Also möchte ich dir den Ausweis zeigen und es haarst ihn. Kannst du es sehen? Jetzt werden wir eine Variable haben, Bildschirm. Document dot, erhalte Element nach ID. Wir müssen uns die Vorstellung vom Bildschirm machen. Und wenn ich, hey, müssen wir prüfen ob der Bildschirm nicht existiert. Also haben wir zufällig und dann müssen wir es beenden. Und wenn es existiert, müssen wir es stilisieren. Gib ihm eine Fünf. Und dann werden wir uns umwandeln. Wir müssen Y übersetzen, das von der Y-Achse stammt. Eins. Bilder. 19. Paketinstallation und Update-Bildschirm: Willkommen zurück bei den Autos. Hab Recht. In dieser Vorlesung werden wir also damit beginnen, die Header-Komponente zu implementieren. Am Ende dieser Vorlesung werden wir die Home-Komponenten so aussehen lassen. Wie genau das, was Sie auf dem Bildschirm sehen . Toronto-VS-Code. Es sei denn fortfahren. Um fortzufahren, müssen wir der Struktur des Projekts folgen. Okay? Klicken Sie also mit der rechten Maustaste auf die Startseite eines neuen Hero-Ordners. Und dieser Ordner wird Head heißen. Stimmt's? Im Header-Paket. Wir müssen die Header-Komponente erstellen. Dann hier auf neue Akte. Und das wäre der Kartenkopf. Lassen Sie uns die entsprechende CSS-Datei erstellen. Kopfzeilen-Punkt CSS. Js. Generieren Sie die funktionale Komponente. Schön. Jetzt müssen wir die notwendigen Pakete installieren. Geht zum Materialverzeichnis, zu den Materialien und scrollt dann nach unten. In Ordnung, also hier habe ich eine Schriftart, die wir installieren möchten. Jetzt hole ich mir eine erste Zeile, die Heron in den VS-Code kopiert. Hier müssen wir den Kunden sehen. Und dann npm install Befehl V, um sie auf die Materialien einzufügen und dann die zweite Zeile zu kopieren. Ich bin hier, npm install paste. Lass es uns installieren lassen, MPL installiert. Und ich weiß, dass die meisten von euch neugierig sind , warum ich es so mache. Für die Bruchlinie, npm install, Befehl V einzufügen. Und schließlich installieren Sie NPM. Wir sind mit der Installation fertig. Wenn Sie also alles auf einmal installieren möchten, müssen Sie nur so kopieren. Und dann komm her, npm installieren und dann einfügen. Also habe ich es an meinem Ende gemacht, aber es hat nicht gut für mich funktioniert. Lasst uns das Paket JSON Heavy anschlagen. Kannst du es sehen? Okay. Beginnen wir nun mit den Importen. Wir müssen Gesamt-Unterstrich-Bildschirme importieren. Und wir werden auch importieren, erhalten aber Unterstrichenbildschirm, Unterstrich-Index von Utilities, Schlamm, gemeinsame Lattes. Also bekommen wir alle diese Registerkarten direkt hier aus dem gemeinsamen OTS-Modul. solltest du wissen. Importieren wir den Treuhanddienst aus. Okay, lasst uns Awesome Font, Awesome Icon importieren Awesome Font, . Und wie alles müssen wir importieren. Lassen Sie uns nun die notwendigen Statusvariablen deklarieren , die verwendet werden sollen. Und hier werden wir Const haben. Wählen Sie diesen Bildschirm aus und legen Sie fest. Bildschirm, stellen Sie es auf den Status verwenden ein. Und der Ausgangszustand wird 0 sein. Kurz bevor wir fortfahren, müssen wir die US di dt importieren. Also hier werden wir den Staat benutzen. Wir müssen die Show einstellen, eine Option haben, sie auf Sie setzen, angeben, dass der Ausgangszustand falsch sein wird. Jetzt definieren wir eine Funktion zum Aktualisieren des Bildschirms setzen ihn auf unsere Funktion ein. Und hier werden wir im aktuellen Bildschirm auswählen. Also hier werden wir eine Variable haben. Bildschirmindex. Der Bildschirmindex. Jetzt werden wir Koreaner Queen Dot Screening View machen. Wenn der Bildschirmindex kleiner als 0 ist. Und so ist der nächste in der Reihe, den beobachtbaren Schritt außerhalb dieser Funktion zu abonnieren . Und dann werden wir eine Variable haben. Koreanisches Bildschirm-Abonnement, Scroll-Servicepunkt, Windschutzscheiben- Also lass mich es dir zeigen. Dann müssen wir vier Vs einstellen. Und hier ist das Casta, das Objekt oder die Freunde der Fachklasse. Lass mich es dir hier zeigen. Und wo ist es? Punkt. Wir müssen das Observable abonnieren. Und dann werden wir den aktuellen Bildschirm der Funktion aktualisieren aufnehmen , dieser Typ hier drüben. In Ordnung, also möchte ich nicht, dass dieser Vortrag zu lange dauert. In der nächsten Vorlesung werden wir mit der Benutzeroberfläche fortfahren. 20. Header und Klick-Funktion: Okay, also lasst uns mit dem URI fortfahren. Der Austin, den wir genau hier machen werden, besteht darin, die Namen der Komponenten als Navigation anzuzeigen. So kannst du den Lebenslauf „Home About Me“ und den Rest von ihnen sehen. Aber obwohl wir nicht alle diese Komponenten erstellt haben. Im Moment sehen Sie also nur das Zuhause, das hier oben als Navigation angezeigt wird. Also wollen wir es dynamisch machen. Hier drüben. Wir werden eine Funktion haben, um das zu tun. Ruft Hara-Optionen ab und setzt sie wie gewohnt auf eine Pfeilfunktion. Und hier drüben werden wir offene Klammern zurückgeben und schließen. Lass uns zuordnen, zeichnete die Gesamtsumme Bildschirme Kommando P. Und dann bringe ich dich zu Communities. Und hier sind die Gesamtbildschirme. Wo auch immer Komponenten hier gelehrt werden, wir werden sie oben als Navigation anzeigen lassen. Was wir gerade tun werden, ist, die Gesamtsumme der Bildschirme abzubilden . Gesamtzahl der Bildschirme Punktmap. Also genau hier haben wir ein div, geben ihm einen Schlüssel mit Bildschirmnamen, Bildschirmunterstrich und Bildschirmnamen. Lass mich es dir schnell zeigen. Portfolio-Container in Toronto Und hier ist der Schlüssel. Perfekt. Ich habe dir gesagt, während wir fortfahren, Joel, verstehe definitiv alles. Also ja, es kommt gleich. Nun geben wir diesem div einen Klassennamen, erhält die optionale Header-Klasse. Wir müssen also den onClick angeben , damit er anklickbar sein kann. Wenn Sie also auf einen der Namen klicken, sollte er zur entsprechenden Komponente wechseln. Lass mich es dir zeigen. Nehmen wir zum Beispiel, ich möchte auf „Über mich“ klicken. Bringt Sie zur Komponente „Über bloße“. Also beim Klicken wird ein Kern sein, geschweifte Klammern öffnen und schließen. Und später werden wir eine Funktion namens Switch-Bildschirm haben . Also müssen wir direkt im DV den Namen des Bildschirms überspannen. Bildschirm, Name des Unterstrichs des Bildschirms. diesen wird es also auf dem Bildschirm angezeigt. Die nächste Funktion haben wir einen Schritt nach oben der Optionen „Header holen“. Und dann definieren wir hier eine Funktion, um mit den Header-Optionen umzugehen , um Leerzeichen zwischen dem Bildschirm zu erstellen und den Namen der ausgewählten Komponenten zu verspotten , würde eine andere Farbe haben. Das wird also kommen, wenn wir anfangen, es zu stilisieren. Also hier werden wir die Header-Optionsklasse bekommen, die hier der funktionale Datensatz ist. Diese Funktion, wenn Index festgelegt ist Gesamtbildschirme Punktlänge minus eins. Und wir werden Klassen plus Strich, Strich, Separator haben . Und wenn der Bildschirm Record Index gewählt wird, werden die Klassen gleich sein. Gewählte Kopfzeile optional. Wenn also oben mehr als ein Bildschirm als Navigation angezeigt wird, müssen wir Platz zwischen den Navigationen schaffen. Lassen Sie mich Ihnen hier zeigen, dass Sie Home haben und dann den Raum zwischen dem Haus und dem über mich und von den oben genannten mir zu ihrem Lebenslauf, zum Testimonial und dann zum Kontakt mit mir. Von diesem Stück hier drüben sprechen wir. Und hier soll der Name der Komponente als ausgewählt markiert werden, wenn Sie darauf klicken. Kannst du jetzt sehen, dass „Über mich“ ausgewählt ist , wenn ich auf unseren Lebenslauf klicke. Vermasselt es. Kannst du sehen? Richtig. Genau das versuchen wir von den Fahrspuren 41 bis 42 zu erreichen. Okay. Die nächste in der Reihe besteht also darin, einen Wechsel zwischen den Bildschirmen zu implementieren. Und jetzt haben wir dafür eine Funktion. Und ich habe dir schon mal gesagt, der Switch-Bildschirm, wechseln. Lassen Sie uns die Komponente untersuchen. Punkt dokumentieren, Element nach ID abrufen. Wir müssen die ID des Bildschirms abrufen. Screenshot, Name des Bildschirms unterstrichen. Die Scream Komponenten existieren nicht. Und wenn ja, werden wir Punktpunkt der Bildschirmkomponente in die Sicht scrollen lassen. Das Verhalten wird reibungslos verlaufen. Und das weißt du. Jetzt stellen wir den ausgewählten Bildschirm ein. Okay, jetzt fangen wir an, die Benutzeroberfläche zu implementieren. Ich denke, das sollte in Klammer eingewickelt sein. Nahaufnahme dieses div. Hier werden wir ein Under Def haben, geben Sie ihm einen Klassennamen des Header-Strichs. Und wir werden ein div mit dem Klassennamen Dash, Hamburger haben und klicken Sie auf Optionen anzeigen. Was wir gerade umsetzen wollen, lassen Sie mich Ihnen genau hier zeigen. Es zeigt kein iPad Pro an, daher muss es auf iPhone und mobilen Plattformen angezeigt werden. Genau das versuchen wir umzusetzen. Siehst du das bescheidener hier oben links auf dem Bildschirm? Und ich hoffe, du kannst sehen , dass der Klassenname Header Dash 100 Burger Dashbars. Und dann das Icon. Wir werden diesen Kerl benutzen. Lass mich dir die hier zeigen. Es muss hierher kommen und nah einfügen Europa war das selbstschließende Tag. Und geh aus diesem Div mit dem Klassennamen des Header-Hamburgers. Dies ist das div genau hier, und hier ist das schließende Tag. Gleich nach dem schließenden Tag werden wir ein div haben, geben Sie ihm einen Klassennamen von Header Dash, Logo. Alles klar, In diesem Div werden wir das Logo überspannen. Also von einem Hey, wenn Sie ein Logo haben, können Sie auch das Logo hier verwenden. Als könntest du so etwas machen. Wenn das Logo also in Form eines Bildes vorliegt, können Sie IMG, SRC, okay machen und dann die Position des Bildes anvisieren. Aber für mich möchte ich nur das Logo spammen. In diesem Fall wird es mein Name sein. Hier. Wir werden ich glaube, lasst uns dabei bleiben. Okay, und dann ist das Giottos Schild auf meiner Tastatur in der Nähe der Bar. Gleich nach dem schließenden div von Klassennamen, Header, Logo , Himmel, werden wir ein anderes div mit dem Klassennamen haben . Show hatte eine Option. Und dieses Mal werden wir es unter einer Bedingung anzeigen. Wenn es also existiert, haben wir hier einen Dash-Optionen. Zeigen Sie Strich-, Strich-Optionen an. Also hier werden wir die Funktion get Header-Optionen aufrufen . Lass mich dir das hier zeigen. Sparen Sie weniger Kick-Start der Anwendung. Die Kopfzeile wird nicht auf dem Bildschirm angezeigt. Komm zurück und dann müssen wir es im Home-JS rendern. Hier müssen wir von importieren. erneut sicher, dass sich der Kopf oben im Profil befindet. Jetzt ist sie in den Browser. Erneut laden. Jetzt ist die Kopfzeile auf dem Bildschirm. Lass mich es dir zeigen. Siehst du das? In der oberen linken Ecke des Bildschirms sehen Sie das Logo und den Namen der Home-Komponente, die als Navigation angezeigt werden. Also hier ist die Komponente Home und hier ist das Logo. also in der nächsten Vorlesung beginnen, Wenn wir also in der nächsten Vorlesung beginnen, diese Komponente zu stilisieren, wird alles perfekt aussehen lassen. 21. Stylen der Header: Fangen wir an, die Header-Komponente zu stilisieren. Heroin setzte VS-Code ein. Und bevor wir fortfahren, müssen wir etwas tun, Hadar JS geöffnet. Genau hier müssen wir den Klassennamen ändern um einen Dash-Container sicher zu leiten. Nachdem wir das getan haben, fahren wir mit dem Header CSS fort. Wir wie es ist, okay, hey, ist es der Header-Container? Wir werden einen Display-Flex haben. Begründen wir den Inhalt, um zu zentrieren. Die Höhe, 140 Pixel, die Farbe der Schriftart. Es wird weiß sein. Und hier müssen wir den Kopf hier oben stilisieren und hoops, das soll ein Punkt sein. Schnell. Lassen Sie uns den Flexraum dazwischen anzeigen lassen, geben Sie ihm eine Höhe von 100% von 70 Prozent. Und die Farbe der Schrift. Es wird auch weiß sein, also muss ich mir nur diese Paste schnappen. Arbeiten wir an dem Logo. Die Telefongröße beträgt 50 Pixel. Die Telefonfamilie, Poppins, extra fett. Die Farbe der Schrift wird also weiß sein. Ich muss diese Paste nur sicher greifen. Und bitte sollten Sie sicherstellen, dass Ihre CSS-Datei bereits mit der Komponente verknüpft ist. Wir haben es in der vorherigen Vorlesung gemacht. Wir waren im Browser dran und schauen wir uns ihn an. Kannst du schön sehen? Es sieht gut aus. Und dann ist hier der Hara Hamburger. Keine Sorge, wir werden alles richtig ausgerichtet haben. Der MNIST ist also die Header-Option. Hatte einen Schuss Schiefer. Habe einen Display-Flex. Richten wir die Elemente an der Mitte aus. Und wir müssen auch den Header stilisieren. Option. A gibt ihm eine Schriftgröße von Systempixeln. Die Kosten werden also 0,600 betragen. auf den Browser. Und lass mich zeigen, dass du den Header siehst? Lasst uns was machen. Siehst du hier ist es in der linken oberen Ecke des Bildschirms? Wir möchten diese auf mobilen Plattformen zeigen. Westliche Linie ist die Header-Option, trennen Sie 0 Punkt-Strich. Kann es von hier aus schnappen. Separator, gib ihm einen Rand von 50 Pixel. Und hier geben wir ihm eine Farbe. Die Farbe wird also auch weiß sein. Es wird greifen und dann genau hier einfügen. Lassen Sie uns nun den ausgewählten Header, die Option, den Punkt, den ausgewählten Strich, den Strich dialysieren . Und dann müssen wir nur noch die Farbe angeben. Wir können hier tatsächlich fest codiert werden. Das ist es also, was es hier drüben ist. Siehst du? Genau das haben wir gerade umgesetzt. Sie werden es also nicht hier auftauchen lassen, nur weil wir oben nur das Zuhause als Navigation angezeigt haben . Wenn wir also anfangen, weitere Komponenten hinzuzufügen, werden Sie den Effekt sehen. Schauen wir es uns auf mobilen Plattformen an. Siehst du, dass das überhaupt nicht reagiert? Kannst du das sehen? In der nächsten Vorlesung werden wir den Leiter treffen, der auf mobilen Plattformen reagiert. Wir sehen uns in der nächsten Vorlesung. Bleib konzentriert. Und TK. 22. Header: Lassen Sie uns mit der mobilen Reaktionsfähigkeit fortfahren. Sie müssen festhalten, um ein CSS zu engagieren. Und dann fangen wir mit dem iPad Pro an. Also auf Medienbildschirm und maximaler Breite von 1, 1, 1, 0 Pixel, was der Größe des iPad Pro entspricht. Jetzt werden wir hier oben den Kopf haben und ihm eine Breite von 80 Prozent geben. Markieren, kopieren, einfügen, schließen Sie die geschweifte Klammer ab. Und hier müssen wir Ihre Bildschirmgröße auf 970 Bilder ändern . Wir werden einen Anzeigeblock haben. Speichern Sie sie im Browser. Erneut laden. Siehst du jetzt, dass der Hamburger in der oberen linken Ecke des Bildschirms oder rechts erscheint . Alles wird auf jeden Fall cool werden. Immer noch auf der Bildschirmgröße möchten wir die Kopfzeile übergeordnet. Wir haben 100%. Lasst uns die Position haben. Absolut, die Linke, mein Verlust, 100%. Die oberen Pixel geben ihm eine Höhe von 100 und eine Breite von 100 Prozent an. Begründen wir den Inhalt. Platz um sich herum. Und dann der Hintergrund, der Schieberegler selbst ist. Wenn es Clyde-Szene ist, möchten wir, dass der Hintergrund 1, f, 22, 35, der Z-Index, die Deckkraft ist. Lass es uns 0,5 machen. Sicher. Wir werden einen Übergang haben, weisen Sie darauf hin. Und dann für die Header-Option separate oder DOD. Hey, gibt es einen Rand des ausgewählten Headers? Dot, Strich, Strich, Balken. Die Schriftgröße beträgt 30. Bilder sollten Punkt sein. Und der Rand 0 Pixel, zehn Bilder. Hier müssen wir uns diese Farbe nur von hier ausleihen. Füge es hier ein. Vielleicht zahlen wir es später zurück. Ich weiß es nicht. Hier. Zeigen Sie Strich, Hamburger, Option. Leute. Lassen Sie uns es herausnehmen und sehen, ob alles einwandfrei funktioniert. Laden Sie Qu Garys neu, alles funktioniert wie erwartet. Jetzt. Kannst du es sehen? Perfekt, ich liebe es. Siehst du das? Versuchen wir es also auf dem iPhone 6, 7 und 8, 2 x find. Auf dem iPad Pro. Sie sehen, wir haben die Navigation und jetzt ist der Leiter eines 100 Burgers verschwunden. Aber wenn du auf das iPad gehst, werden wir den Kopf haben, einen Hamburger. Siehst du? Also Freunde, alles funktioniert wie erwartet. Ordnung, also sind wir mit der in Zukunft verdienten Header-Komponente fertig . Sie werden sehen, wie wir die Namen der Komponente oben als Navigationen anzeigen werden. Also wirst du das oben genannte Zeugnis fortsetzen lassen, kontaktiere mich und all das. Wir sehen uns in der nächsten Vorlesung. Bleib Folklorist und pass auf. 23. Wiederverwendbare Komponente: In dieser Vorlesung werden wir die vernünftige Komponente erstellen. Eine wiederverwendbare Komponente ist eine Benutzeroberfläche, die in einem anderen Teil der Anwendung für Butte mehr als eine Instanz wiederverwendet werden kann einem anderen Teil der Anwendung . Okay, also lass mich dich zum Demo-Projekt bringen. Scrolle nach unten. Hier sind die wiederverwendbaren Komponenten, die aus dem Titel, der Überschrift und dem Trennzeichen bestehen, das ist diese Zeile hier drüben. Kannst du schön sehen. Eine Sache, die mir an der wiederverwendbaren Komponente am besten gefällt , ist die Flexibilität. Dies wird also hier in der Komponente „Über mich“ verwendet , um den Titel Über mich und jede Unterüberschrift anzuzeigen , was das Über mich und dann die Unterüberschrift ist. Warum wählen Sie mich? Okay. Wenn dies nun in einer anderen Komponente wiederverwendet würde, lassen Sie mich es Ihnen zeigen. In diesem Szenario haben wir den Lebenslauf. Wir werden also einen anderen Wert an die wiederverwendbare Komponente weitergeben . Jetzt können Sie den Grund sehen, warum ich sagte, wiederverwendbare Komponenten sind flexibel. Auch mano ein Mano Microsoft passt in eine andere Komponenten wie das Testimonial. Wir müssen den Wert ändern, der an die Komponente weitergegeben wird . In Ordnung? In diesem Fall ist hier das Testimonial als Titel, und hier ist die Unterüberschrift. In Ordnung, also lasst uns in den Code eintauchen und dann müssen wir ihn gut genug verstehen, während wir fortfahren. Heroin zu VS Code eines. Hey, wir werden ein Verzeichnis namens subhead erstellen. Jetzt müssen Sie nur noch mit der rechten Maustaste auf die Dienstprogramme klicken. Hier ist es. Können Sie sehen, klicken Sie mit der rechten Maustaste hier auf Neuer Ordner. Jetzt erstellen wir die Komponente hier auf Neue Datei, Bildschirmüberschrift dot js. Generieren wir die Funktionskomponente. Wir werden diesem div einen Klassennamen von head im Dash-Container geben , entschuldigen Sie mich, schreiben Sie direkt auf dieses div. Wir brauchen ein anderes Div mit dem Klassennamen von Screen Dodge. Geh rein. Und hier drüben müssen wir den Titel überspannen. Überspannen Sie geschweifte Klammern und schließen Sie geschweifte Klammern. Und ich werde Requisiten Punkttitel machen. Und hier wird diese Funktion ihm Sonden bringen. Sie können also den Namen der Eingabeaufforderungen tatsächlich in etwas anderes ändern . Aber ich empfehle Ihnen, sich an die Konventionssonden zu halten , einfach weil diese allgemein akzeptiert werden. Und viele Leute, das ist es, was es tut. Was passiert also genau hier, wenn wir gerade den Wert erhalten, oder? In der nächsten Vorlesung werden Sie also sehen, wie wir den Wert durch Sonden an diese Komponente weitergeben können . Am einfachsten das. Und wir müssen nach der Unterüberschrift suchen. Und hier drüben werden wir die geschweifte Klammer haben. Und dann öffne und schließe Klammern. Wir werden Requisiten Dot-Unterüberschrift machen. Wie üblich erhalten wir einen Wert, der über Sonden an diese Komponenten weitergegeben wird . also in diesem Fall Wenn also in diesem Fall ein Wert vorhanden ist, der hier weitergegeben wird, müssen wir diesen Wert anzeigen. Also werden wir ein div haben, geben Sie dem div einen Klassennamen für Screen-Dash, Dash-Überschrift. Rechts. In diesem div müssen wir diesen Wert überspannen, der die Unterüberschrift ist. Also mache ich Requisiten, Punkt-Unterüberschriften und Pfeile. Wenn es keine Unterüberschrift gibt, die an diese Komponente weitergegeben wird, müssen wir ein leeres div anzeigen. Also komm her, Coelom, das sind die Pfeile, wir werden ein div haben. Schließ es nieder. Zusammenfassend erhalten wir nur die Daten, die über Requisiten an dieses Unternehmen weitergegeben werden über Requisiten an dieses Unternehmen weitergegeben , und machen Sie sich keine Sorgen. In den nächsten Vorträgen sehen Sie, wie wir Werte an dieses Unternehmen weitergeben können und wie schön. Jetzt ist sie auf das Demo-Projekt. Lassen Sie mich Ihnen diese hier zeigen, was der Separator ist. Also das werden wir jetzt tun. Diese Zeile hier drüben, wir werden nur This is the Blob haben. Die sind irgendwie nördlich von hier. Das ist der Blob. Kannst du den Kerl hier sehen? Dies ist alles für die wiederverwendbare Komponente. In der nächsten Vorlesung werden wir diese Komponente stilisieren. Okay? Wir sehen uns in der nächsten Vorlesung. Bleib fokussiert und pass auf. 24. Wiederverwendbare Komponente: In dieser Vorlesung werden wir beginnen, die vernünftige Komponente zu stilisieren. Am Ende dieser Vorlesung werden wir es so aussehen lassen. Kannst du sie sehen, richtig? Fahren Sie also schnell mit VS-Code fort, wenn Sie nicht fortfahren Rechtsklick auf die Bildschirmüberschrift. Hier eine neue Akte. Und diese Datei würde Screen Head in Punkt CSS heißen. Bevor wir fortfahren, müssen wir die Komponente mit der CSS-Datei verknüpfen . Öffnen Sie den Bildschirm mit der Überschrift GAS und scrollen Sie nach oben. Also bin ich schon oben da. Was ich jetzt mache, ist das Importieren der Bildschirmüberschrift Punkt CSS. Rette sie hier in CSS auf den Bildschirm. Und hier beginnen wir mit der Überschrift des Containers. Lass mich es dir schnell zeigen. Hier ist also die Überschrift, die die Bildschirmüberschrift, den Bildschirmstrich, die Strichüberschrift und hier den Rest der Klassen enthält den Bildschirmstrich, die Strichüberschrift . Also lasst uns weitermachen. Wir müssen dies auf einen Flex-Container setzen. Die Spalte „Flex-Richtung“. Richten wir die Elemente an der Mitte aus. Die Breite, 100% Marge. Und hier haben wir einen halben Bildschirmstrich, Strichüberschrift , Unterüberschrift. Jetzt wird der Buchstabenabstand drei Pixel betragen. Marge. Wie Milch isst. Es mischt 18 Pixel. Schriftgröße. Pixel. Die Farbe. Wir müssen das Colo nutzen, das wir früher in der Vorlesung des Professors importiert haben . Und ich hoffe, dass wir uns daran erinnern können. Für eine Bildschirmüberschrift die Bildschirm-Dash-Überschrift. Geben wir die Schriftgröße von 32 Pixel an. Die Farbe wenn f, 22, 35. Und mittlerweile solltest du mit dieser Farbe vertraut sein. Die Schrift, Familie, Poppins, Boot, Kopf und Separator, Überschrift, Strich. Separator. Wir werden einen Display-Flex haben, um Elemente an der Mitte auszurichten. Die Position relativ. Die Breite, 180 Pixel, oder? Sie für die Trennlinie DOD, die Zwischensummenlinie, Geben Sie für die Trennlinie DOD, die Zwischensummenlinie, eine Breite von 100% geben Sie ihm eine Höhe von 200 Pixeln. Und die Hintergrundfarbe, wir werden diese Farbe verwenden. Also muss ich einfach erwachsen werden und es dann genau hier einfügen. Lassen Sie mich Ihnen also genau zeigen, was wir gerade gemacht haben. Das ist hier drüben, diese Linie hier drüben. Ich spreche nicht von diesem Kerl. Das ist die, von der ich spreche, diese Zeile von einem. Nun, für den separaten Blob-Punkt, müssen wir ihn jetzt ändern, um hier in die Luft zu jagen. Gib ihm eine Höhe von 10 Pixeln, eine Breite von 100%. Die Position ist absolut. Wir haben eine Anzeige, Flex, Rechtfertigung zum Zentrieren, Markieren, Kopieren, Einfügen und Schließen der geschweiften Klammer. Und dann müssen wir das Div stilisieren. Lass mich dir dieses Div eines Heu zeigen. So schnell müssen wir ihm eine Breite von 35 Pixeln geben, Randradius von 10 Pixel. Und die Hintergrundfarbe. Für diese Heron zum CSS. Wir müssen die dunkelorangefarbene Kopie benutzen. Komm zurück zum Bildschirmkopf in CSS und dann musst du nur bezahlen. Okay, also pass hier drüben auf, schließ den Raum. Sicher. Jetzt sind wir mit der wiederverwendbaren Komponente fertig. Und in der nächsten Vorlesung werden wir sehen, wie wir Daten an den Bildschirm weitergeben können , indem GAS durch Sonden richtig ist, dieser Typ genau hier. Wenn wir also die wiederverwendbare Komponente rendern, werden die Details auf dem Bildschirm angezeigt. Alles klar, das ist jetzt oft für diese Vorlesung und wir sehen uns in der nächsten Vorlesung. Kümmere dich. 25. AboutMe: Willkommen zurück bei der Sache. Alles klar, jetzt werden wir anfangen, an den About Me-Komponenten zu arbeiten. Und am Ende dieser Vorlesung werden wir so etwas so Schönes haben. Werfen Sie einen Blick darauf. Okay, also geh zurück zum VS-Code. Es sei denn fortfahren. Um fortzufahren, müssen wir die notwendigen Eingaben vornehmen. Rechtsklicken Sie auf die Assets Hier, ist es? Klicken Sie mit der rechten Maustaste, klicken Sie auf neuen Ordner Und wir werden es wegen mir nennen. Öffnen Sie nun den Materialordner. Es ist genau hier auf meinem Desktop, also muss ich nur 0 Schmerzen haben und dann den Portfolio Pro Client SRC eröffnen , Vermögenswerte über mich. Jetzt müssen wir nur noch das Bild kopieren, das für die About Me-Komponenten relevant ist , und es hier einfügen. Und hier ist der Rechtsklick. Kopieren. Einfügen. Schließen Sie es, fahren Sie fort und gehen Sie zurück zum VS-Code. Die nächste Zeile besteht darin, die entsprechende Komponente, eine SCSS-Datei, zu erstellen . Sie müssen nur den Portfolio-Container so öffnen . Und klicken Sie dann mit der rechten Maustaste auf Über mich. Hier eine neue Akte. Das wird „Über mich“ heißen. Js erstellt seine entsprechende CSS-Datei. Über mich dot css. Zurück zu about mu j ist generisch, die React js Funktionskomponenten. Und wenn wir den US-Effekt importieren und schachteln müssen den US-Effekt importieren und , ist es, die wiederverwendbare Komponente zu importieren. Überschrift des Begrüßungsbildschirms der Dienstprogramme, Überschrift des Begrüß Lasst uns importieren, dass diese Krähen 0s haben. Importieren wir die Animationen. Schön. Jetzt soll diese Komponenten dem Bildschirm hinzugefügt werden. Öffnen Sie die gemeinsame test.js. Und hier müssen wir die About Me-Komponenten importieren. Speichern wir es in den Konstanten. Also muss ich diese nur hervorheben. Halten Sie die Alt- und Umschalttaste gedrückt und tippen Sie dann auf die Abwärtspfeiltaste, Schön. Also müssen wir nur den Namen in Über mich ändern. In der Komponente geht es um mich. Befehl S zum Speichern. Jetzt müssen wir nur noch den Server anhalten. Hey, siehst du , dass die Komponente dem Bildschirm hinzugefügt wurde? Gehen Sie zurück zu VS-Code, der nach Common Law geschlossen wurde test.js. Wenn diese Funktion also irgendwelche Parameter annehmen wird, Sie an und kommen Sie hierher und geben Sie diesem div einen Klassennamen von über mich. Bei Containern geht es um Strich, Strichcontainer. Wir werden ein anderes Div mit dem Klassennamen von „Über MY Parent“ haben . Die nächste Zeile besteht also darin, wiederverwendbare Komponenten zu rendern. Bildschirmüberschrift mit dem selbstschließenden Tag. Und diese Komponente hat zwei verschiedene Attribute. Einer ist der Titel und wir müssen ihm einen Wert geben. Also sage ich es. Über mich. Und die andere ist die Unterüberschrift. Und hier werde ich tun, warum wähle ich mich? Okay? Die Absicht besteht also darin diese Werte an den Bildschirmkopf in Unternehmen weitergeben zu lassen und sie beim Rendern der Komponente auf dem Bildschirm anzeigen zu lassen. Alles klar, also lass mich es dir zeigen. Drücken Sie einfach auf den Bildschirmkopf in G, S und wenn ich hier sehen kann , dass wir die Werte hier erhalten, siehe Eingabeaufforderungen Punkt Unterüberschrift. Mit Hilfe dieser Aufforderungen weisen wir diesem Titel einen Wert zu. Und Symptom hier weisen wir der Unterüberschrift einen Wert zu. Wenn also kein Wert zugewiesen wird, wird nichts auf dem Bildschirm angezeigt. Geh zurück zum Über mich, GAS. Sparen, lauf. Gehe zurück zum Browser und lass es uns anschauen. Schön. Kannst du das an mir sehen und warum nur ich? Alles funktioniert einwandfrei. Und ich glaube damit können Sie klar verstehen, um welche vernünftige Komponente es geht. Die nächste Zeile besteht also darin, die Observables zu abonnieren , um einen reibungslosen Scroll- und Fading-Effekt zu ermöglichen . Also hier mache ich es, lasst uns den Screen-Handler verblassen den Bildschirm hier übernehmen. Wir werden also prüfen, ob der Bildschirm zum Ausblenden des Bildschirmpunkts nicht der Punkt-ID der Eingabeaufforderung entspricht, dann werden wir ihn hier beenden. Jetzt. Wir müssen für den Fading-Effekt implementieren. Jetzt mache ich Animationen. Animationen, Punktverblassungsbildschirm. Also lass mich dir schnell Heron zu den Animation gs zeigen. Und hier ist der Funktionsausblendbildschirm. Geh zurück zum About Me j. Also müssen wir den Ausweis aufnehmen. Schön. Hier müssen wir also die Observables abonnieren. La und ich machen Const, passendes Abonnement. Scrollen Sie Lebensläufe, Punkt entspricht hier auf dieses Kreuz F ist Komponente und lassen Sie mich Ihnen zeigen, dass Sie FSGS überqueren. Okay, hier ist der aktuelle Bildschirm Fade in, bei dem es sich um das Objekt oder die Refrains der Betreffklasse handelt. Okay, scrolle nach unten. Lassen Sie mich Ihnen hier zeigen, wo wir es implementiert haben. Also hier ist der aktuelle Bildschirm, der als nächstes in Punkt passt. Und was wir hier getan haben, ist den Fading-Effekt zu übertragen. Geh zurück zum obigen VGS. Also werden wir Punkte machen. Wir müssen es abonnieren, abonnieren. Und hier müssen wir nur Fade im Spring Handler aufnehmen. Fertig war Handler. Schön. Um zu überprüfen, ob es einwandfrei funktioniert, müssen wir zu diesem div mit dem Klassennamen von About Me Container kommen . Also gib das einen Ausweis. Requisiten dot id Befehl S zu speichern. Gehe zurück zum Browser und lass es uns anschauen. Erneut laden. Probieren Sie es aus, indem Sie auf „Über mich“ klicken. Unten. Kannst du das sehen? Alles funktioniert einwandfrei? Siehst du das? Wenn du auf „Über mich“ klickst, ist es reibungslos zur Abutment-Komponente zu scrollen zur Abutment-Komponente genau das, was die Absicht ist. Gehe zurück zum VS-Code. Hier werden wir also einige statische Informationen auf dem Bildschirm anzeigen . Dafür müssen wir nicht statische Daten deklarieren und sie in Zeiten speichern. Also hier drüben werden wir eine Konstante haben, nennen wir es Bildschirm, unterstreichen, geschweifte Klammern öffnen und schließen. Und hier werden wir die Beschreibungsspalte haben. Geh zurück zum Browser und lass mich es dir zeigen. Das ist also die Demo-Website und Hier ist die Beschreibung. Und ich werde jetzt kopieren, zurück zu VS-Code und fügen Sie es dann zwischen die Anführungszeichen ein, die durch ein Komma getrennt sind , bevor das Nest und die Zeile die Highlights sind, was die Liste der Elemente impliziert. Und hier geht die Liste der Artikel zurück. Im Moment werde ich Highlights machen. Hier werden wir also einen Datenbereich haben, der auf dem Bildschirm angezeigt werden soll. Öffnen und schließen wir eckige Klammern. Und auch hier müssen wir hier eine Kolumne platzieren. Alles klar, Der Erste auf der Liste. Lass es uns herausnehmen. Hier haben wir eine Full-Stack-Web- und Mobile-Entwicklung. Ich muss nur kopieren. Komm her, füge es ein. Getrennt durch ein Komma, geh zurück. Kopieren Sie, zwischen dem Gericht eingefügt, separat in die Ecke. Um Wiederholungen zu vermeiden, muss ich das Video nur schnell weiterleiten. Alles klar, jetzt bin ich fertig. Füllen Sie die Liste aus. Sie müssen das Video auch am Ende anhalten und es hier beenden. Und jetzt müssen wir den Kopf in Coulomb über seinem Kopf haben. Öffne die Anführungszeichen, geh zurück. Kopieren, einfügen. So einfach ist das. Die Zeile besteht darin, eine Funktion zu definieren die durch die obigen Daten soll, damit sie auf dem Bildschirm angezeigt werden. Also hey, ich denke ich muss das Terminal schließen , um Vollpension zu haben. Hier werden wir die Highlights ausgeführt und auf unsere Funktion gesetzt haben . Also müssen wir die Bildschirmkonstanten dieser Daten, Punkt-Highlights, abbilden . Lass mich es dir zeigen. Highlights. Kugeln, ok. Punkt-Aufzählungszeichen, Punkte öffnen und schließen Klammern und öffnen und schließen Sie dann die Klammer noch einmal. Jetzt müssen wir auf ein Argument eingehen, wenn ich es auf unsere Funktion setze. Genau hier haben wir ein div mit dem Klassennamen der Highlights. Und wir müssen ihm einen Schlüssel geben, um Duplikate von Werten zu vermeiden. Und hier werden wir ein anderes Div mit dem Klassennamen des hervorgehobenen Blogs, Highlights, Dash, Blob und es unten haben. Und schließlich müssen wir den Wert überspannen. Schön. Okay, also für einen Schlüssel, wenn du das machst, wird alles für dich funktionieren. Jetzt müssen wir die Daten auf der Benutzeroberfläche anzeigen. Scrollen Sie hier nach unten, wo wir die Benutzeroberfläche haben. Also gleich nach der vernünftigen Komponente werden wir ein anderes Div mit dem Klassennamen von über mich Codd haben . Gib den Klassennamen über Dash, Dash cod. Und wir brauchen auch ein anderes Div mit dem Klassennamen von About me Profil. Über Dash me, Dash-Profil. Lass mich es dir zeigen. Hier ist das Hauptprofil, dieses Bild von einem Heu. Und wir brauchen auch ein anderes Div mit dem Klassennamen von about Dash, Dash-Details. Bitte stellen Sie immer sicher, dass die Klassennamen gut geschrieben sind , damit Sie keine Probleme haben, wenn wir anfangen, sie zu stilisieren. Und hier müssen wir die Beschreibung anzeigen und sie trüben. Also gebe ich uns Pfund bei Klassennamen von über Dash, Dash Description. Also hier müssen wir den Artikel anzeigen. Jetzt mache ich Bildschirmunterstrich-Konstanten Punktbeschreibung. Vermasselt es. Lass mich es dir zeigen. Hier ist die Beschreibung. Wir brauchen ein Div mit einem Klassennamen von ungefähr Dash. Strich-Highlights, div Klassenname hebt Strich hervor, Überschrift. Genau hier. Wir müssen die Überschrift überspannen. Also werden wir die Bereichskonstanten, die Punktmarkierungsüberschrift, die Überschrift, den sicheren Bildschirm durchführen . Also hier gehe ich zum CD-Client NPS. Punktet runter. Schön, alles funktioniert wie erwartet. Also hier ist die Beschreibung. Aber ich bin so überrascht, dass die Überschrift nicht auftaucht. Geh zurück und lass es uns anschauen. Richtige Leute, es gibt einen Fehler im Zauber hier drüben. Das soll auf den Weg gehen. Sparen Sie noch einmal, geh zurück. Alles klar, hier ist die Überschrift und du siehst n. Dies ist die Beschreibung. Lassen Sie uns die Liste der Elemente anzeigen. Genau hier, nach dem schließenden div der ClassName-Highlight-Überschrift, rufen wir die Methode render-Highlight auf. Sicher, geh zurück. Und hier ist die Liste der Artikel. Schön. Das Nest und die Linie besteht darin, die Proteine zu haben, Hey, geh zurück und nimm ein Heu. Gleich nach dem schließenden div von ClassName über mich Highlights. Wir werden ein div mit dem Klassennamen von about dash, dash haben . Also können wir jetzt die Leichen haben. Was ich jetzt tun werde, ist, zur Profilkomponente zu gehen und sie aus dem Befehl P hat auf geben g, s zu kopieren . Hier ist der Text also kopiert, gehe zurück zu den About Me gs und füge ihn dann genau hier ein. Befehl S zum Speichern. Gehe zurück zum Browser und lass es uns anschauen. Scrolle nach unten. Schöner Satz, das ist ein tödliches Ergebnis, das wir von dieser Vorlesung erwarten. Mir wurde klar, dass diese nicht schön aussehen, aber obwohl es nicht IDA aussieht, aber mach dir keine Sorgen. In der nächsten Vorlesung, wenn wir anfangen, diese Komponente zu stilisieren, werden wir es vollkommen in Ordnung haben. Dies ist oft für diese Vorlesung gedacht. Wir sehen uns in der nächsten Vorlesung. Bleiben Sie konzentriert und passen Sie auf. 26. Styling über die Komponente: Genau das haben wir in der vorherigen Vorlesung bekommen. Und alles funktioniert wie erwartet einwandfrei. Vermasseln Sie es, wenn Sie die eingebaute Bombe Über mich erhitzen , bringt Sie hierher. Es bedeutet also, dass der Smooth Scroll Wagen vollkommen in Ordnung ist. Schauen wir uns ein Schnäppchen in der Bauchregion an. Und auch die Schaltfläche „Fortsetzen“ funktioniert wie erwartet. Schön. Jetzt ist die nächste in der Reihe, diese Komponente zu stilisieren, wie bewohnt aussieht. Gehe zurück zum VS-Code, es sei denn fortfahren Öffne das About Me CSS. Und hier drüben würden wir mit dem Container beginnen. Lass mich es dir zeigen. Hier, ist es? Also muss ich nur b dot aufrufen, ihn hier einfügen, geschweifte Klammern öffnen und schließen. Und wir werden es Flex, Flex-Richtung, Spalte anzeigen lassen, Inhalte aussenden. Richten Sie Elemente aus, um den Rand zu zentrieren. Wir werden also 50 Pixel haben. Befehl S zum Speichern, gehen Sie zurück zum GS sind die CSS-Datei weniger mit der Komponente verknüpfen . Vermasselt es. Und Hey, wir werden über mich importieren, Dot CSS, Save. Gehe zurück zum Browser, sofern es nicht herausgenommen wurde. Kannst du sehen? Alles klar, lass uns weitermachen. Geh zurück zum Über mich. Css style ist das DOD der Elternklasse über MEINE Eltern. Und wir werden ihm eine maximale Breite von 100 Pixeln geben. Und die Breite 70%. Der Über mich, cod dot über mich. Lassen Sie uns eine Anzeige von Flex haben. Die Breite beträgt 100%. Box-Schatten. Speichern, geh zurück zum Browser. Alles nimmt allmählich Gestalt an. Mir gefällt es. Also für das About Me Profile, über das Dash-Profil gestrichelt. Und hier geben wir ihm eine Breite von 50 Prozent das Hintergrundbild. Dann müssen wir das Bild verwenden, das wir früher in der vorherigen Vorlesung importiert haben . Url. Wir müssen die Vermögenswerte treffen. Kampf um mich. Es ist Clash me dot JPEG. Und ich hoffe, Sie können sich erinnern, wenn wir bei diesem Bild die Hintergrundgröße importieren . Lasst uns die Kurve machen. Hintergrund, wiederhole, nein, wiederhole die Hintergrundposition. Lasst uns sein Zentrum haben. Sparen Sie. Geh zurück. Und hier ist das Profil. Gehe jetzt zurück zum VS-Code. Wir müssen das Über mich stilisieren, Details über Dash me. Und hey, wir geben ihm eine Breite von 48%. Test ausgerichtet. Lassen Sie uns es rechtfertigen. Fügt 30 Pixel hinzu. Sparen Sie. Schau es dir im Browser an. Sieht cool aus. Lass uns fortfahren. Also hier drüben müssen wir Beschreibung von About Me stilisieren. Also werde ich einfach tun, um mich zu zerschlagen. Beschreibung. Hier nennt man die Klammer. Schriftgröße für die Beschreibung beträgt 12 Pixel. Für mich Highlights. Geben wir ihm einen Spielraum von oben rechts. Bei Bildern hier drin werden wir Sarah für ein Highlight haben, das Dodd, Highlights, Dash, Überschrift hasst . Also hier werden wir die Schriftfamilie haben. Poppins, Boot. Die Schriftgröße, 14 Pixel, Rand. Und hier für das Highlight, Punkt, Highlights. Lassen Sie uns es flexibel anzeigen lassen. Richten Sie Elemente an der Mitte aus. Die Marge. Fünf Pixel, 0. Schließlich machen wir es für eine Telefongröße sicher. Schau es dir im Browser an. Das sieht toll aus, ich mag es. Kannst du das sehen? Lass uns fortfahren. Das Nest und die Linie sollen also hier eine Kugel zeigen, was der Highlight-Blob ist. Also werde ich Dash Blob hervorheben. Die Höhe wird Thema sein verklagt die Breite, 12 Pixel, den Rand, 010 Pixel und die Hintergrundfarbe. Also werden wir 5823 haben. Sparen Sie. Geh zurück. Und hier ist der Pool hier drüben, der hervorgehobene Blob. Aber ich mag es nicht, wie es vorerst wie ein Rechteck aussieht . Wir müssen uns ändern. Es sieht immer noch eher nach einer Art Zeug aus, oder? Also lasst uns das schnell machen. Es ist also sehr einfach, das zu tun. Jetzt müssen wir nur noch den Grenzradius anwenden und ihn dann 50 Prozent sicher machen. Geh zurück. Hier ist es nicht so schön? Großartig. Es hat mir gefallen. Und wenn ich höre, dass dir klar wurde, dass die Flaschen überhaupt nicht atmen, dann siehst du, dass zwischen den Leichen kein Platz ist. Geh zurück und repariere das schnell. Hier werden wir über Dash me Optionen tun. Und dann müssen wir den hervorgehobenen BTA ins Visier nehmen. Also müssen wir nur die Marge angeben. Also von oben rechts, unten 0, und dann von links haben wir es 30 Pixel. Werfen Sie einen Blick darauf. Kannst du das sehen? Schön. Alles funktioniert wie erwartet. Nehmen wir also eine mobile Atomplattform und sehen, ob sie reagiert. Okay, so erscheint es auf dem iPad Pro. Es reagiert nicht. Kannst du sehen, dass der Abbruch in Ordnung ist. Lass es uns auf dem iPhone herausnehmen. Werfen Sie einen Blick darauf. Kannst du sehen, dass es mir so nicht gefällt. Alles klar, lass es uns herausnehmen. Boom. Alles funktioniert wie erwartet. Aber für die mobile Reaktionsfähigkeit müssen wir daran arbeiten. Also das ist vorerst alles für diesen Vortrag. Alles klar, Vorsicht. 27. AboutMe Component Responsive: Lass uns perfektionieren Diese Firma ist, indem es reaktionsschnell macht, gehe zurück zu VS Code. Und hier drüben müssen wir wie gewohnt mit dem iPad Pro beginnen. Also ein iPad Pro, iPad Pro Reaktionsfähigkeit. Somit beträgt Queen für iPad Pro 11 Pixel. Also hier mache ich DOD wegen Dash Me, Lohnsatz. Wir müssen ihm eine Breite davon noch Prozent geben. Das ist also alles für das iPad Pro und für andere mobile Plattformen. Jetzt muss ich diese nur noch kopieren. Kopieren. Komm her, füge ein, schließe die geschweifte Klammer und komm dann unverändert an diesen Ort. Die Pixel. Hier haben wir es Nacht acht Pixel für seine Königin kleiner als das iPad Pro. Also wenn es so ist, ja, hier auf der mobilen Plattform, wollen wir das EMH deaktivieren. Also mache ich das, spiele, speichere und renne, gehe zurück zum Browser und Knochen, das Bild ist weg. Schön. Jetzt müssen wir also die Details machen , um den Rest des Raums zu besetzen. Geh zurück, um das zu tun. Hey, ich werde nur DOD machen, weil ich Details zerschmettert habe. Lassen Sie uns die Breite auf 100% einstellen. Sparen Sie und rennen Sie. Siehst du diesen Kern? Geh zurück und lass uns weitermachen. Jetzt auf einem sehr kleinen Gerät , also auf einem kleineren Bildschirm. Jetzt muss ich das nur noch einmal kopieren. Schließen Sie die Spaltenklammern. Und hier müssen wir die Bildschirmgröße angeben, wenn sie bei einer Verstauchung oder bei ausgeschalteter maximaler Breite für 66 Pixel erscheint . Also denke ich, dass dies ein sehr kleiner Bildschirm sein sollte. Ja. Bei der Option „Über mich“ geht es also um Dash. Strich-Optionen. Wir werden es Flex anzeigen lassen, die Flex-Richtungs-Säule . Zuletzt müssen wir die Tasten richtig positionieren. Also jetzt muss ich nur noch hier runter wegen Strich, Strich, Optionen, punktmarkierten PTA kommen. Also müssen wir ihm nur 24 Pixel von oben zusammenführen, dann 0 auf den restlichen Seiten. Also hier werde ich es einfach tun, okay, Beautiful. Ich kopiere die hier aufgelisteten einfach. Machen wir die Breite auf 100. Diese Heiligen retten. Kannst du sehen, dass alles als Zuschauer erscheint und es gefällt mir. Lassen Sie es uns also auf allen Plattformen herausnehmen. Iphone X, okay, netter iPod, nett. Ipad Pro. Schön. F15. Großartig. Und schließlich haben Sie auf dem Galaxy S5 Recht. Dies ist, als Ergebnis erwarten wir von dieser Vorlesung. Jetzt sieht die Komponente so schön aus. Alles klar, wir sehen uns in der nächsten Vorlesung. Bleib fokussiert und pass auf. 28. Die Nachahmung und die Zuordnung von der Zuordnung des Zugehörigkeit zu beherrschen, sowie der State: Jetzt werden wir anfangen, an ihrer Lebenslaufkomponente zu arbeiten . Und am Ende dieser Vorlesung werden Sie so etwas haben. Ist das nicht wunderschön? Stimmt's? Also lass es uns herausnehmen. Hier haben Sie also die Wacky History, Programmierfähigkeiten, Interessen, Bildung, die Projekte. Und der Rest von ihnen. Gehe zurück zu VS Code. Und hier müssen wir die entsprechende Komponente erstellen und eine CSS-Datei hinzufügen. Klicken Sie also mit der rechten Maustaste auf eine neue Datei. Und hier werden wir es wieder aufnehmen dot js nennen. Lassen Sie uns die entsprechende CSS-Datei erstellen. Rechtsklick auf neue Datei. Dies wird wieder aufgenommen dot css. Gehen Sie zurück zur ursprünglichen Komponente, generieren Sie die React JS-Funktionskomponenten, RFC und Bone müssen den Explorer ausblenden. Und jetzt müssen wir die notwendigen Importe vornehmen. Hier importieren wir die Dienstprogramme für wiederverwendbare Komponenten, Überschrift des Begrüßungsbildschirms und die Überschrift JS. Und hier müssen wir den Treuhanddienst aus den Dienstprogrammen Splash, Screen, Fernsehern importieren . Und hier müssen wir die Animationen importieren. Diese Funktion wird ihn Requisiten als Parameter nehmen. Lassen Sie uns also hier eine Zustandsvariablen deklarieren, die verwendet werden sollen. Für den Anfangszustand wird 0 sein. Und hier unten werden wir Const Sets haben, Karussell von Set-Style. Und die ersten Zustände. Hier setzen wir es auf ein leeres Objekt. Jetzt müssen wir den Fading-Effekt auf den sanften Bildlauf implementieren . Also muss ich diese nur aus dem Component Command D oder Control D unter Windows kopieren dem Component Command D oder Control D unter Windows und dann jahrelang einstellen und habe es. Also muss ich einfach alles so kopieren. Geh zurück zum ursprünglichen Spott. Und hier muss ich einfach einfügen. Schön. Lassen Sie uns die wiederverwendbare Komponente ausführen und weisen Sie sie zu jedem Attribut entsprechende Werte. Also hier für diesen DFF wird einen Klassennamen des Fortsume-Dash-Containers, Screen Dash Container, aufnehmen. Ordnung, und genau hier in diesem div werden wir ein anderes div mit dem Klassennamen von Region haben , der ein div enthält, geben Sie ihm einen Klassennamen mit Resume, Dash Content. Und hier rendern wir die Bildschirmüberschriftenkomponente des selbstschließenden Tags. Und hier ist das erste Attribut der Titel. Und der Titel sollte wieder aufgenommen werden. Und das zweite Attribut ist die Unterüberschrift. Und hier sollte dies meine Form von Biodetails sein. Und natürlich sollten Sie inzwischen richtig verstehen, wie vernünftig die Komponente funktioniert, weil ich sie in der vorherigen Vorlesung gut genug erklärt habe . Fügen wir diese Komponente dem Bildschirm hinzu. Gehe zurück zum gemeinsamen OTUs Command P. Ich muss es nur hier einstellen. Gemeinsame OTS und hat es. Importieren wir die ursprüngliche Komponente. Importieren. Aus Portfolio-Containern fortsetzen, kollidieren, fortsetzen, kollidieren, JS fortsetzen. Und dann haben wir hier nur zwei Highlights. Duplizieren Sie diesen Code oder Sie können auch kopieren und einfügen. Ich glaube, ich habe dir in früheren Vorträgen beigebracht, wie das geht. Hier sollten Sie es also einfach in den Bildschirmnamen ändern, der ein Lebenslauf ist. Und hier sollte der Komponentenname wieder aufgenommen werden, tut mir leid. Okay. Paraffinmischung. Hier ist das Gleiche wie, okay, es ist ein Satellit gleich. Lassen Sie uns die Anwendung ausführen, um zu sehen, was wir an Bord haben. Komm her, um Determiner zu sein. Und dann sind wir im Stammverzeichnis. Also muss ich nur einen CD-Client machen. Und dann ist NPM start mit Frequenzweichen nicht definiert. Gehe zurück zu VS Code. Öffne ihren Lebenslauf. J ist auf Zeile 15. Alles klar. Es gibt einen Fehler in den Schreibweisen eines Heu. Und ich denke, das stammt aus der vorherigen Vorlesung. Das soll also Scroll-CVs Command S sein , um noch einmal zu sparen. Gehen wir zurück zum Browser. Hier wird also die Region oben als Navigation angezeigt. Lasst uns drauf klicken. Stimmt's? Diesmal passiert nichts. Gehe zurück zu VS Code. Und hier müssen wir das nur einen Ausweis geben. Punkt-ID der Requisiten ist eine leere Zeichenfolge. Sparen Sie. Geh zurück und nimm es noch einmal raus. Also Hitze auf den ursprünglichen Abbruch. Können Sie sehen, dass die wiederverwendbare Komponente bereits gerendert wurde? Lasst uns also schnell anfangen, an der ursprünglichen Firma zu arbeiten . Alles klar, also bevor wir fortfahren, denke ich, dass Reihen chromatisch EXXAT eines Haares sein müssen . Ich muss nur noch zur MEG zurückkehren, ist da ist es. Und dann haben wir hier Scroll-Lebensläufe importiert. Ich weiß sowieso nicht, wie ich diese aussprechen soll, aber es gibt ein doppeltes Auge eines Tages. Jetzt muss ich diese nur noch ausziehen und dann wieder dorthin gehen, wo wir sie benutzt haben. Haben wir es nur abwischen müssen. Und dann ist es hier, buchstabiert. Sagt in Zeile 13. Wieder mehrere, ein Mieter. Schön. Also geh jetzt zurück zum Browser. Unsere schreiben, alles funktioniert wie erwartet. Wenn Sie also eine Anwendung wie ein Profi schreiben, müssen Sie chromatisch EXXAT sein. Die verschachtelte Linie soll eine geringfügige vernünftige Komponente erstellen. Gehe zurück zu den Sichtbereichen. Und natürlich sind wir mit dem obigen VGS fertig, also muss ich es einfach schließen. Und auch, wir sind fertig mit den gemeinsamen OTS. Schließ es nieder. Alles klar, also hier drüben werden wir kleine vernünftige Komponente haben. Hier werden wir also einen Dy für den Klassennamen von Regionsüberschrift, Lebenslauf, Strichüberschrift haben. Wir brauchen auch ein div mit dem Klassennamen Resume Dash, Dash-Überschrift , einem div, gib ihm den Klassennamen, Überschrift Dash, Bullet. Also hier drüben werden wir die Attributüberschriften haben. Wenn also der Attributüberschrift ein Wert zugewiesen wird, zeigen wir diese Wert-Pfeile an. Auf dem Bildschirm wird nichts angezeigt. Dafür werden wir ein bedingtes Rendern haben. Also hier werden wir uns überspannen. Wir werden Requisiten Punktüberschrift als Attribut machen. Und wenn die Überschrift ein Z-Score ist, müssen wir die Kopf- und Wert-Aufforderungen zur Punktüberschrift anzeigen . Auf einem Bildschirm würde nichts angezeigt, nur eine leere Zeichenfolge und nichts würde auf dem Bildschirm angezeigt. Hier drüben haben wir ein anderes Attribut von Datum. Lass mich es dir zeigen. Hier ist das Von-Date und dann ist hier das Zehendatum. Am einfachsten das. Wenn also das von Datum und gesagt es existiert, werden wir anzeigen. Das Datum. Also hier drüben werden wir ein Div mit dem Klassennamen head in Dash haben. Doppel-Anführungszeichen genommen und dann hier drüben unterstreichen. Requisiten Punkt bis heute. Also Pfeile. Wenn der Schuldner nicht existiert, müssen wir ein leeres div anzeigen. Wir werden ein leeres Div anzeigen. Schön. Ich muss diesen Code härter speichern und formatieren, oder? Genau hier haben wir ein anderes div mit dem Klassennamen Lebenslauf, Dash, Dash, Überschrift. Und bitte stimmen Sie nicht mit Java-Klassennamen , die korrekt geschrieben sind, sodass Sie keine Probleme haben, wenn wir beginnen, die Anwendung zu stilisieren. Wenn also die Unterüberschrift existiert, müssen wir sie anzeigen und nichts wird wie gewohnt auf dem Bildschirm angezeigt. Also hier haben wir die Attribute unterüberschrift, Requisiten Punkt Unterüberschrift. Wenn das z ist, müssen wir die Unterüberschrift anzeigen. Und unsere. Wir werden nur eine leere Zeichenfolge haben. Alles, was wir hier tun, ist, zu erhalten, der Zweifel der Daten von der Hauptkomponente weitergegeben werden würde. In Ordnung, also hier haben wir die Attribute Unterüberschrift, wenn wir ausgeführt haben, das ist Komponente, die Attribute von head. Und es wird einen Wert annehmen, also wird dieser Wert angegeben, dann wird er hier angezeigt. Andernfalls, wenn für die Attribute der Überschrift kein Wert angegeben wird, würde nichts auf dem Bildschirm angezeigt. Es ist so einfach wie das hier drüben ist. Nach dem schließenden div des Klassennamens Iridium Subheading. Wir werden ein anderes div mit dem Klassennamen eines Lebenslauf-Strichs, einer Überschrift, einem Strich, einer Beschreibung haben . So das Gleiche hier. Das Gleiche hier. Wenn die Attributbeschreibung einen Wert erhält, müssen wir diesen Wert anzeigen. Und nichts würde auf dem Bildschirm angezeigt werden. Stimmt's? Ich möchte also nicht, dass dieser Vortrag zu lange dauert, weil wir viel zu tun haben. Das ist alles vorerst, für diese Vorlesung sehen wir uns in der nächsten Vorlesung. Bleiben Sie konzentriert und passen Sie auf. 29. Vorbereiten von Statische Daten: Beginnen wir mit den statischen Daten. Bevor wir jedoch fortfahren, müssen wir die notwendigen Importe vornehmen. Öffnen Sie das Materialverzeichnis, öffnen Sie das Portfolio Pro-Client, SRC Assets. Dann müssen wir hier im Materialverzeichnis dieses Revisionspaket kopieren. Lass mich es dir zeigen. Dies enthält die SVG , die wir in dieser Komponente verwenden werden. Also muss ich einfach kopieren. Komm her, füge ein, schließe es, schließe es. Gehe zurück zu VS Code. Lassen Sie uns deklariert werden, da statische Daten verwendet werden müssen. Vermasselt es. Also hier drüben werden wir eine Konstanz haben, nenne es Regionalabzüge. Dies ist der beste Weg, ein Array zu benennen. In Ordnung, damit Sie die Aufzählungszeichen „Lebenslauf“ sehen können , einfach weil es sich um eine Sammlung von Daten handelt. Wenn ich also Kugeln mache, ist das keine gute Praxis. Und eigentlich ist das meine eigene Meinung, aber es ist gut. Sie nennen einen Bereich mit einem Pluralwort. Genau hier werden wir das Phosphat-Etikett haben. Spalte. Hier wird Bildung, Komma-Logo, SRC, Doppelpunkt, Bildungspunkt SVG sein. Lass mich es dir schnell zeigen. Heroin zu den Vermögenswerten. Und hier ist der Lebenslauf. Das ist also die Bildung als Vg hier drüben. Okay, getrennt vom Koma. Und hier drüben werden wir das Wort Geschichte haben. Hier, ist es. So das Gleiche. Wir müssen ein Komma der Labelspalte haben, und dann haben wir das Logo, SRC Coelom. Dann werden wir Strich, Geschichte, Dot SVG haben. Dies wird in der Tat eine Wiederholung beinhalten. Also muss ich das Video einfach vorantreiben. Alles klar, jetzt bin ich fertig damit. Auch. Sie müssen das Video nur an Ihrem Ende pausieren und fertigstellen. Alles ist gleich. Alles was Sie tun müssen, ist das Label und die SVG zu ändern , oder? Daher besteht die kleinere Zeile darin, statische Daten für den Fortschrittsbalken der Fertigkeiten zu deklarieren. Alles ist also derselbe Prozess. Hier werden wir Programmierkenntnisse und Details haben. Die Herbstskala. Lasst uns einen raus nehmen. Wir haben JavaScript-Komma und geben ihm dann einen Bewertungsprozentsatz an. Für mich ist meine Fähigkeit in JavaScript bis zu 85 Prozent gebührenfrei , Ihre Kapazität hier zu spezifizieren, getrennt durch ein Komma-Duplikat. Und hier müssen wir die Skala ändern, um auf JS zu reagieren. Die Rate und der Prozentsatz meiner React JS werden sein. Lassen wir es uns auch bei 85 belassen. Und diese werden in der Tat Wiederholungen beinhalten. Also muss ich das Video einfach vorantreiben. Alles klar, ich bin fertig damit. Alles, was Sie tun müssen, ist, die Fertigkeit und die Rate in Prozent zu ersetzen . Tun Sie es also für andere Fähigkeiten, die Sie gefangen haben , und dann werden Sie es richtig haben. Nun soll eine verschachtelte Zeile statische Daten deklarieren , um zu zeigen, dass sich die Informationen über die Projektarbeit beziehen. Also hier werde ich konkrete Protestdetails machen. Und wie Sie sehen können, verwende ich das Pleura-Wort an den Kletterer. Also hier werden wir einen Titel haben. Lass mich es dir zeigen. Hier ist das Projekt, und dann sind hier die Details. Also werden wir einen Titel haben. Also hier haben wir eine Titelspalte. Dann passe ich die Portfolio-Website weiter. Komma. Dann haben wir die Dauer. Die Dauer. Lass mich es dir zeigen. Hier ist die Dauer. Jetzt müssen wir von der Firma Gebrauch machen. Also werde ich einfach 2020 bis 2021 machen. Entschuldigen Sie, das sollte hier ein Doppelpunkt sein, durch ein Komma getrennt ist. Und dann machen wir hier die Beschreibungsspalte. Geh zurück und lass uns die Beschreibung kopieren. Dazwischen trennte sich das Gericht durch ein Komma und für die Unterüberschrift. Also hier werden wir ein anderes Projekt einbeziehen. Können Sie sehen, dass wir ein Geschäft haben, die E-Commerce-Website. Hallo, ich werde es jetzt tun, ist diesen Code zweimal zu duplizieren. Alles klar, also müssen Sie nur das Projekt reparieren, an dem Sie hier gearbeitet haben. Vielleicht hast du an einem Projekt gearbeitet. Dies sollte der Titel des Projekts sein, diese Schulden Sie haben das Projekt gestartet und dann das Enddatum des Projekts. Hier sollten Sie also über ein Projekt sprechen , das die Beschreibung und hier ist die Unterüberschrift. Und das Gleiche gilt für all diese Arten von Ich hier. Dies wird in der Tat eine Wiederholung beinhalten. Also muss ich das Video einfach vorantreiben. Das Gleiche wie ich hier drüben gemacht habe. Ich füge die Projekte ein, an denen ich gearbeitet habe, ein Datum, an dem ich das Projekt begonnen habe, und das Enddatum, die Beschreibung und die Unterüberschrift. Genau das habe ich hier gemacht. Und du kannst auch ein Video an deinem Ende posten und meins schreiben, wenn du willst. Die statischen Daten für den Rest der Region werden detailliert beschrieben. Also hier werde ich const machen, Details fortsetzen. Hier haben wir ein div, geben ihm einen Klassennamen Lebenslauf, Screen Dash, Container, und wir müssen den Schlüssel geben. Wenn ich also höre, müssen wir die kleineren vernünftigen Komponenten rendern. Fortsetzen, Überschrift, näher mit einem selbstschließenden Tag. Und hier hat es ein Attribut namens Heading. Geben wir diesem Attribut einen Wert. Ich muss diese nur kopieren zwischen das doppelte Anführungszeichen einfügen. Und auch von dieser Komponente wird eine andere Attribut-Unterüberschrift erhalten. Als Unterüberschrift ist das. Kurz nach dem Kopieren? habe dir gesagt, dass das eine Weile dauern wird , weil wir alles von Grund auf neu machen werden. Und wir haben vom ID-Attribut. Lassen Sie mich also sagen, dass ich 214 nicht an die Universität aufgenommen werden kann. Dann wurde ich Absolventen in Ich sage bis heute bis 18. Sie können hier also alles tun, was es will. Du schreibst hier was. Ich kopiere diesen Code einfach hier drüben, kopiere, komm her, füge ein. Und dann müssen wir die Werte ändern. Also hier haben wir zur Bildung. Dies ist eine andere Zertifikatklasse. Hier drüben haben wir den Nationalen Jugenddienst. All dies sind also meine Zertifizierungen. Also musst du es durch Helden ersetzen. Und hier. Und hier wird es 2019 bis 2020 sein. Markieren Sie also, duplizieren Sie es noch einmal. Und dann haben wir hier die High School. Also denke ich, dass jeder diese haben sollte. Die Highschool, die du besucht hast, der Name der höchsten Coolness hier drüben. Und diese müssen wir auch für die Arbeit als Perioden umsetzen . Also komm her. Plus ein Komma hier am Ende dieses schließenden div-Klassennamens, den Bildschirmcontainer fortsetzen. Also hier werden wir ein div mit dem Klassennamen haben. Obwohl es denselben Klassennamen haben wird. Der Klassenname wird derselbe sein, hat eine Kopie diese von hier, komm her und füge dann ein. Jetzt schließe das Div. Und hier müssen wir den Schlüssel ändern. Was für Strich S Perioden. Wahrscheinlich wird es also dasselbe sein. Jetzt muss ich nur diese wiederverwendbare Komponente kopieren. Komm her, füge es hier ein, geh zurück zum Browser. Die Geschichte des Rocks. Hier sollte also der Name des Unternehmens für das Sie gerade arbeiten. Kopieren. Komm hier über die Überschrift und Unterüberschrift. Kopieren Sie Einfügen. Jetzt müssen Sie angeben, ob Sie derzeit in diesem Unternehmen arbeiten. Vielleicht wurde ich das Jahr 2020 eingestellt und dann nicht richtig oder arbeite in derselben Firma. Ich werde also nur darauf hinweisen, dass wir ein sehr klassisches Portfolio präsentieren , mit dem wir es zu tun haben. Jetzt werden wir diese Beschreibung haben. Also hier werden wir ein div haben, geben Sie den Klassennamen der Erfahrungsbeschreibung an. Und hier drüben haben wir ein Span-Tag, geben den spanischen Klassennamen Lebenslauf-Dash, Dash-Tests , direkt zwischen diesen Pfund-Tag. Komm her. Also hier muss ich nur die erste Zeile kopieren. Also hier haben wir ein anderes Div mit dem Klassennamen der erfahrenen Beschreibung, der Schreibweise des Erlebnisses. Also denke ich, dass das nicht gut geschrieben ist. Also. In Ordnung. Also hier haben wir eine Spanne mit dem Klassennamen des Resume-Beschreibungstests, fortsetzen Dash, Strich, Test. Und hier müssen wir auf Websites zurückgehen, was die Demo-Seite ist. Und dann kopiere diese beiden Zeilen hier drüben. Füge es hier ein. Alles klar? Und hier muss ich nur mit einem Strich angeben. Im Grunde genommen ist dies optional. Gleich nach diesem Pfund-Tag. Wir werden eine Pause machen. Und hier werden wir noch einen Tab haben. Also muss ich das einfach kopieren weil es genau das Gleiche ist. Schön. Komm zur Website-Demo. Kopieren Sie diese Zeilen. Komm her, füge es ein. Schließlich werden wir denken, dass wir dafür die selbstschließenden Tags verwenden sollten. Wir brauchen auch ein Span-Tag. Kopiere das, komm her, füge ein. Geh zurück. Hier. Wir müssen die letzte Zeile kopieren, wie diese und Knochen. Wir sind bereit zu gehen. wir hier eine Pause und fahren Sie mit der nächsten Vorlesung fort. Kümmere dich. 30. Vorbereiten von Statische Daten 2: Lassen Sie uns mit den statischen Daten gleich nach diesem schließenden div, Klassenname, erfahrener Beschreibung fortfahren nach diesem schließenden div, Klassenname, . Platzieren Sie also ein Komma hier. Wir müssen die Daten für das Programm verarbeiten wenn wir einen Klassennamen haben werden. Geben wir ihm einen Schlüssel. Also nenne ich die wichtigsten Programmierfähigkeiten auf die Details der Programmierfähigkeiten. Lass mich zeigen, dass du es vermasselt hast, hier oben. Also muss ich einfach hier unten kopieren. Wir programmieren DDOS Dos Dos Dos. Jetzt werden wir ein div haben, geben Sie ihm einen Klassennamen von Skill Elternteil. Geschicklichkeitsausweichen. Gib ihm einen Schlüssel, gib ihm einen Schlüssel. Index. Schließe den dv. In Ordnung, jetzt werden wir ein anderes Div mit dem Klassennamen der Überschrift Bullet haben . Und auch hier haben wir hier kein halbes Span-Tag zu zeigen. Also werde ich es tun, ist Q-Punkt-Fertigkeit. Wir brauchen hier ein Div. Q Strich. Bitte achten Sie immer auf die Schreibweisen der Klassennamen. So wichtig. Also werden wir hier ein paar Inlines, Handtücher anwenden. Ich werde Star machen. Q-Punkt geschrieben vorgestellt. Gib diesem div einen Klassennamen von Dash. Line sind die Projekte. Also müssen wir das Projekt durchlaufen , damit es auf dem Bildschirm angezeigt wird. Platzieren Sie hier ein Komma direkt nach dem schließenden div von className. Setzt Queen-Container wieder auf. Geben Sie ihm den Klassennamen eines Fortsetzungsbildschirm-Containers und geben Sie ihm einen Schlüssel. Hier müssen wir also die Projektdetails abbilden. Details Punkt-Map. Jetzt müssen wir das eine kleine wiederverwendbare Komponente mieten. Gib ihm einen Schlüssel. Diese Komponente hat ein Attribut namens Heading. Also werde ich Details Punkt, Titel, Projektdetails Punkt, Punkt, Punkt machen. Also plus ein Komma hier sei denn, es tut es zuletzt für die Zinsen. Stimmt's? Es scheint also, dass die Klassennamen gleich sind. Ich muss nur kopieren, einfügen. Ändern Sie den Schlüssel, um alle Stopps eindeutig zu identifizieren. Also müssen wir auch die wiederverwendbare Komponente vermieten. Und hier, lass mich dir das für die Interessen zeigen. Wir haben nur die Überschrift und die Beschreibung. Und zuvor war das, was wir gemacht haben, für die Projektdetails. Natürlich haben wir Beschreibung der Überschrift Unterüberschrift von unerzähltem. Lass mich es dir zeigen. Können Sie die Beschreibung der Überschrift Unterüberschrift von bis heute sehen? Unsere Rechte. Jetzt kämpft jemand mit mir zusammen und ich mag es. Also hier werden wir die Überschrift haben, ihm einen Wert zuweisen, so wie wir ihn hier haben. Das Nest ist also die Beschreibung. Kopieren Sie diese, fügen Sie sie zwischen das Zitat ein. Schön. Jetzt muss ich nur noch die dritten wiederverwendbaren Komponenten hervorheben. Dupliziere es zweimal oder kopiere und füge es zweimal ein. Also hier drüben musst du nur die Überschrift und die Beschreibung ändern . Die Überschrift und die Beschreibung. Okay, also lass mich das Video schnell weiterleiten und es an meinem Ende machen. Stimmt, schön, das tun sie nicht. Stellen Sie also sicher, dass Sie sich ändern. Hier drüben der Kopf und du kannst Musik sehen, welche Musik du gerne hörst. Und dann ja. kann wettbewerbsfähiges Gaming über dieses Spiel sprechen. Du liebst am meisten, so wie du es hier hast. Wir können also auch von diesen kopieren und so daraus kopieren. Ja. Alles klar. Wir sehen uns also in der nächsten Vorlesung. 31. Die Ui und Funktionen erstellen, um die Ui auf dem Bildschirm zu zeigen: Lasst uns nun die ursprüngliche Komponente fertigstellen. Aber bevor wir fortfahren, müssen wir das tun. In Ordnung, also wurde mir klar , dass diese die Codes brauchten, ich muss diese nur von diesem Ort herausschneiden. Komm an die Spitze eines hier, füge es hier ein. Richtig. Scrollen Sie jetzt nach unten. Jetzt müssen wir eine Funktion für den Caruso definieren. Und ich nenne es, wir werden eine Variable der eingestellten Höhe haben. Lassen Sie uns neue Kouros versetzen, öffnen und schließen Sie geschweifte Klammern. Und dann müssen wir ihm eine Stilspalte geben, geschweifte Klammern öffnen und schließen. Hier werden wir eine Transformation haben. Dann übersetze Y, was ist, eine Y-Achse. Öffne und schließe jetzt Klammern. Und hier drüben werden wir dieses doppelte Zitat haben. Jetzt werden wir Karussell-Offsets setzen. Hier nehmen wir einen neuen Caruso. Und hier setzen wir select auf den Aufzählungsindex dann den Index direkt auf Ihrem Telefon aus. Sparen Sie. Jetzt sind wir mit der Karussellfunktion fertig. Damit diese Funktion aufgerufen wird, müssen wir den onclick aktivieren. Hier drüben. Wir werden eine Funktion haben. Also müssen wir nur die Lebenslauf-Kugeln abbilden. Ich zeige dir oben bei einem Regionskugeln Komma K und hier die Icons auf dem Etikett. Das Symbol auf dem Etikett. Also ja. Alles klar, also sind wir okay hier ist es. Jetzt mache ich originale Kugeln. Punkt-Map. Natürlich solltest du mittlerweile mit Map sehr vertraut sein. Stellen Sie es auf unsere Funktion ein und öffnen und schließen Sie Klammern. Also hier haben wir ein div und geben den onclick an. Und hier werden wir das Handle kairos aufrufen, unsere Funktion. Jetzt gib ihm einen Klassennamen. Jetzt müssen wir den Klassennamen konditionieren, um das ausgewählte Bootfahren stilisieren zu können. Also bin ich weniger Zeit für den Code und lass mich es dir zeigen. Jetzt mache ich den Index, das ausgewählte Aufzählungszeichen, den Index. Und wir werden diesen Klassennamen ausgewählter Strich, Aufzählungszeichen anzeigen . Und wir werden die 90er Kugel zeigen. Lassen Sie mich Ihnen zum Beispiel im Grunde zeigen , dass die Ausbildung kein Klick ist und dann nicht ausgewählt wird. Wenn ich jetzt auf die Ausbildung klicke, werden Sie sehen, dass die Schriftfarbe weiß wird. Können Sie sehen, dass dies auf die bedingte Anweisung zurückzuführen ist , die Öfen basierend auf der Bedingung zu stilisieren . Alles klar, also hier ist die Bedingung kein Klick, also wirst du sie sehen, unsere Arbeitshistorie drauf, eine Art dunkle Schrift. Wenn ich darauf klicke, werden Sie feststellen, dass eine Schriftart tatsächlich weiß geworden ist. Die einfachsten Daten. Wenn der Index also dem ausgewählten Aufzählungsindex entspricht, müssen wir diese Klasse stilisieren, damit die Telefone weiß sind. Und es geht darum, ihm einen Schlüssel zu geben. Hier haben wir also ein IMG-Tag mit dem Klassennamen, Aufzählungsstrich, Logo, weniger näher mit einem selbstschließenden Tag. Src, öffne und schließe geschweifte Klammern. Und wir müssen verlangen, dass das E gemacht hat, dass alle Symbole wie Speicherplatz benötigen, Klammern öffnen und schließen. Und dann müssen wir das Asset-Paket ins Visier nehmen. Squash, fortsetzen. Öffnen und schließen Sie hier geschweifte Klammer, Kugeln, Punkt, Logo, SRC und die Kunst-Internetverbindung. Das heißt, wenn das Bild nicht angezeigt wird, werden wir diesen Test anzeigen. Gehen wir nun in die Region, die T2 auf dem Bildschirm angezeigt werden soll. Dafür werden wir eine Funktion haben. Genau hier. Wir werden eine Funktion haben, um Fortsetzungsbildschirme zu erhalten, geben Sie ihr einen Klassennamen für einen Lebenslauf, Strich, einen Bindestrich, Pfeile nach oben. Und hier haben wir zwei wahre Details. Details, Punktspeicherung . Nach der Bildschirmüberschriftenkomponente. Wir werden ein div mit dem Klassennamen „Resume Dash“ haben . Und hier noch ein Div-Klassenname, Fortsetzungsstrich, Aufzählungszeichen , Aufzählungen , Container Kugel, Symbol, dies. Und wir werden eine IV haben, geben Sie ihr einen Klassennamen von Kugeln. Jetzt haben wir keine Informationen, die die Bullet-Funktion von S speichern können, oder? Da ist alles in Ordnung. Und schließlich, nach dem schließenden div, bool className es. Wir werden ein anderes Div mit dem Klassennamen Dodge, Kugeln, Strichdetails haben . Wir müssen aufrufen, dass Fortsetzungsbildschirme Funktion S zum Speichern erhalten . Gehe zurück zum Browser und lass es uns anschauen. Erneut laden. Aus dem Render wurde nichts zurückgegeben. Dies bedeutet normalerweise, dass eine Return-Anweisung auf Tempo geht. Schauen wir uns an, was das Problem ist. Schauen wir uns die statischen Daten an. Hier drüben in der wiederverwendbaren Komponente. K Leute. Werfen Sie einen Blick darauf. Jetzt ist es hier. Nicht gut geschrieben, das tut mir so leid . Das ist eine Korrektur. Wir müssen die Benutzeroberfläche zurückgeben. Und dort liegt das Problem. Jetzt werde ich nur diese zusätzlichen Schnitte hervorheben , die hier eingefügt wurden. Du musst nur das Semikolon abwischen. Mit Tagen wird Command S zu speichern sein. Gehe zurück zum Browser und schau es dir an. Scrolle nach unten. Dies ist genau das Ergebnis, das wir von dieser Vorlesung erwarten. In der nächsten Vorlesung werden wir also damit beginnen, diese Anwendung zu stilisieren. Und in der Tat wird es extrem schön aussehen. Wir sehen uns in der nächsten Vorlesung. Bleiben Sie konzentriert und passen Sie auf. 32. Gestalten der Resume: Beginnen wir damit, ihre Lebenslaufkomponente zu stilisieren. Und wie Sie auf dem Bildschirm sehen können, gibt es keinen Platz, um zwischen der geschriebenen Komponente und der Komponente zu unterscheiden . Hier ist die mittlere Komponente. Hier ist die ursprüngliche Komponente. Eine andere Sache, auf die ich möchte, dass du dich hier drüben konzentrierst. Sie müssen nur einen Blick auf die linke Seite des Bildschirms werfen. Kannst du sehen, dass die Icons nicht auftauchen, nämlich die SVGs für Bildung, die Rockgeschichte, Programmierfähigkeiten und den Rest des Tages. Also müssen wir all das Zeug in dieser Vorlesung reparieren lassen. Harold zu VS-Code, es sei denn fortfahren. Vermasselt es. Hier, ist es? Wann immer Sie ein Bild von einem Paket benötigen, müssen Sie hierher kommen und dann einen Punktstandard ausführen. Ich glaube, ich habe dir das in der vorherigen Vorlesung erzählt. Meiner eigenen Meinung nach könnte dies ein Problem mit der Version sein. Und das ist übrigens meine eigene Meinung. Also Heron, um sie CSS zu lesen und weniger weiterzumachen. Wir beginnen mit dem Grunde-Container. Also werde ich Dot Resume Container machen. Lass mich es dir schnell zeigen. Hier zum Tourismus JS. Scrolle nach unten. Und hier ist es. Alles klar? Wir werden einen Display-Flex haben. Und wirklich haben wir diese fossilen UNC gemacht. Und ich denke jetzt ist es gut, genau zu erklären, was das bewirkt. Wenn ein Container so eingestellt ist, dass er Flex anzeigt, erweitert er die Elemente, um den verfügbaren Platz auszufüllen oder zu verkleinern, um einen Überlauf zu verhindern. So einfach ist das. Richten wir nun die Elemente an der Mitte aus. Die Flex-Richtung. Spalte. Inhaltscenter ausrichten. Die mittlere Höhe. Lassen Sie uns es zu Inhalten passen. Der Rand beträgt 120 Pixel. Um die Auswirkungen auf dem Bildschirm zu sehen, müssen wir ihren Lebenslauf mit der CSS-Datei verknüpfen. Also geh auf Tourismus GAS, vermassele Lava hier, wir müssen Regime-Dot-CSS importieren, sie im Browser retten. Die Gebühren nehmen allmählich Gestalt an. Grund CSS. Und hier drüben müssen wir die Karte stilisieren. Die Karte wird als Container dienen auf dem die Festnahmeinformationen sitzen werden. Wir werden einen Display-Flex haben. Geben Sie ihm eine Höhe der Physik, die Pixelbreite von 10 ein 100 Pixel. Speichern Sie sie im Browser. Kannst du es jetzt sehen? Geben wir diesem also eine Hintergrundfarbe damit Sie sehen können, wovon ich spreche. Dies dient nur der Klarheit halber. Hintergrundfarbe. Lass es uns Tomate machen. Sparen Sie. Gehe zurück zum Browser. Jetzt können Sie sehen, so dass dies als Container für den Rest der Artikel gespeichert wird . Und jetzt die Icons hier drüben. Wenn ich die Hintergrundfarbe abnehme, Haare auf den Browser. Kannst du jetzt sehen, sieht es so aus, als wäre das Symbol nicht in gewisser Weise, weil der Hintergrund weiß ist und das Symbol selbst weiß ist. Lass uns fortfahren. Der Grund Booler, Punktregion, Strich, Kugeln. Geben wir ihm eine Höhe von 100%. Der Box-Schatten, 15 Pixel. Es gibt neun Pixel mal 15 Pixel, und die Farbe des Boxschattens auf f, 2 bis 3, fünf, speichert sie im Browser. Und hier ist der Boxschatten. Geben wir nun die Breite an und machen alles sauber. bei so vielen Kindern, 30 Speichern Sie sie bei so vielen Kindern, 30, 20 Pixel, im Browser. Und hier ist es. Können Sie sehen, dass die Nachricht M Zeile der Grund ist, warum Aufzählungszeichen Details sind. Also denke ich, dass er zwei Highlights hat. Schnapp dir, komm her, klebe ein, schließe die geschweiften Klammern. Alles, was wir tun müssen, sind Details. Und bitte passen immer zu einer Klasse Namen sind Schweißnähte, Paltz, der Flex wachsen. Geben Sie hier einen an. Die Breite. Dies sollte 100 Pixel sein. Überlauf, Heizung und die Polsterung. 0, 0. Sicher. Gehen Sie erneut in den Browser und trüben Sie ihn. Jetzt zur Erfahrungsbeschreibung, Punkterfahrung, Strich, Beschreibung. Achten Sie darauf, dass die Schreibweisen richtig sind. Wir werden die Marge haben. Zehn Pixel von oben. 0 auf den restlichen Seiten. Ausrichten. Ausrichten, geben Sie die maximale Breite an, 100%. Stimmt's? Aus dem Grund gibt es Details Kairo auf sie im Browser und lass mich es dir zeigen. Klicken Sie nun auf eines der Etiketten. Es wird die Korrespondentendetails auftauchen. Versuchen wir es also in der Arbeitsgeschichte. Siehst du das? Programmierkenntnisse, Projekte, Bildung? Okay, obwohl es gut erscheint, aber das ist nicht wie erwartet. Hieron zu VS Code Punkt fortsetzen, Strichdetails. Weiche aus. Fahrzeugregeln gelten, wenn auf eines der Etiketten geklickt wird. Wir möchten, dass es zu den entsprechenden Details scrollt. Also werde ich den Übergang machen, transformieren. Machen wir es sicher. Heroin zum Browser. Und jetzt müssen wir hier die Arbeitsgeschichte neu laden. Hast du gesehen, dass das wunderschön ist. Ich mag ES. Projekte Bildung. Und jetzt möchte ich dir etwas mit Interesse zeigen. Siehst du, dass es hier drüben einen leeren Raum gibt? Mach dir keine Sorgen. Während wir mit der Stilisierung dieser Komponente fortfahren, wird hier alles wie erwartet im VS-Code erscheinen . Scrolle nach unten. Und jetzt für den Bullet-Container, Punkt-Strich-Container, werden wir ihn Flex anzeigen lassen, Elemente an der Mitte ausrichten. Geben wir ihm eine Höhe von 101%, 100%. Was bedeutet noch einmal, die Position relativ, speichert sie im Browser. Jetzt ist alles im Bullet-Container Inline-Stil als Aufzählungszeichen. Aufzählungszeichen geben die Breite von 80 Prozent, Position sowie relativ an. Und der Z-Index. Für die Kugel selbst. Ich meine, all diese Labels, einschließlich der Ökonomen punkten Kugeln. Wir werden einen Display-Flex haben. Richten Sie Elemente an der Mitte aus. Die Hintergrundfarbe. Die Hintergrundfarbe stimmt. Ich hoffe, du kennst diese Farbe. Angesichts der Höhe von 40 Pixel. Rand, 15 Pixel von oben. Das Recht, Sarah-Pixel, Polsterung, 0 Pixel. Entschuldigung, das sind acht Pixel. Grenz-Radius. Ein Randradius wird 20 Pixel betragen. Die Breite 30 Pixel. Übergang. Speichern Sie sie im Browser, und hier sind die Ergebnisse. Alles nett. Kannst du sehen, was ich meine Maus auf die Beschriftungen konzentriert habe, die ich einem Zeiger zeigen wollte. Also mache ich wieder Speichern, gehe zum Browser. Jetzt sieh dir mal an. Du siehst, dass das stimmt. Als nächstes sind die Kugeln beschriftet. Kugeln dash, Label. Die Schriftgröße. 14 Pixel Der Leerraum hoch. Die Font-Familie, Halbschale. Schau es dir im Browser an. Siehst du, kannst du sehen , dass alles vierteljährlich Gestalt annimmt? Das Nest ist das Pullets-Logo. Geben wir die hohen 16 Pixel, Rand. 0 kleine Pixel, Heroin zum Browser. Jetzt können Sie sehen, dass die Logos gut verteilt sind. Sehen Sie, wissen Sie, jetzt kann ich für die Aufzählungszeichen, Punktaufzählungen , Strich eine Breite von 34 Pixeln geben . Höhe, 100% Z-Index 1. Geben wir ihm eine Hintergrundfarbe. Wie üblich Hintergrundfarbe. Lassen Sie es uns im Browser herausnehmen. Siehst du jetzt diese Bar hier drüben? Aber wir wollen, dass die Logos zwei Sitze hier drin sind. Dafür werden wir also eine Position haben. Lass es uns absolut machen. Speichern Sie sie im Browser. Schön, ich mag es hier auf Top VS Code. Und für das Bullet-Symbol. nun zu den ausgewählten Kugeln zeigen, Lassen Sie mich nun zu den ausgewählten Kugeln zeigen, dass Sie keinen Tourismus GAS haben und hier unten in der Funktion. Alles klar, also hier ist es. Wir haben gerade die Kugel stilisiert und wir werden auch die ausgewählte Kugel stilisieren. Lassen Sie mich Ihnen zeigen, wann eines der Etiketten angeklickt wird. Wir möchten, dass es hervorgehoben wird. Ist kein CSS entstanden. Und hey, ich werde punktausgewählte Ausweichkugeln machen. Wir müssen nur die Farbe angeben. Lass es uns weiß machen. Die Breite. 100% sicher. Schön. Klicken Sie nun auf Project DOC, Rockgeschichte, Bildung. Stimmt's? Fahren wir mit dem Bildschirmcontainer fort. jetzt nach diesem versteckten Interesse zeigen, Lassen Sie mich jetzt nach diesem versteckten Interesse zeigen, dass Sie das sehen können? Wir müssen dieses Problem beheben. Punkt-Strich, Armaturenbrettbehälter. Lassen Sie uns einen Display-Flex haben. Und die Flex-Richtung. Doppelpunkt. Rechtfertigung des Inhalts. Platzieren Sie gleichmäßig. Gib ihm eine Höhe. 360 Pixel Gib ihm eine Breite. 100% Sicher. Sie auf den Browser. Kannst du jetzt sehen, dass alles wie vermutet auf der Karte stimmt? Heroin nach VS-Code. Scrolle nach oben. Lassen Sie uns nun die Hintergrundfarbe dieses Katalogs mehr Zeit angeben. Nichts verlässt das Auto. Alles stimmt im Safe. Scrollen Sie nach unten zu weniger als Zeile ist der Grund, warum die Kopfregion abbricht Überschrift fortsetzt. Dash, Strichüberschrift. Schnell, so glücklich, relativ zu positionieren. So zeigen wir Flex an. Rechtfertigung des Inhalts. Abstand zwischen der Linie ist der Kopf und die Booler. Überschrift, Strich, Kugel. Gib ihm eine Position. Absolut, links minus 30 Pixel. Die Höhe und die Breite, 15 Pixel. Oben ist 50 Pixel. Geben wir die Hintergrundfarbe an. Und dieses Mal werden wir es orange machen. Speichern Sie das im Browser und lassen Sie es uns herausstrecken. Hier sind die Kugeln, die zur Arbeitsgeschichte herausgenommen wurden. Und hier soll die durchgezogene Linie es ganz einfach machen, also muss man nur den Grenzradius machen. Mach es 50 Prozent. Gehe zurück zum Browser und höre dass die Beweise gut erscheinen. Die MSDN-Linie ist der Grund für Enthauptung, Punktstrich, Strich, Überschrift. Und stelle immer sicher, dass deine Klassennamen gut geschrieben sind. Eine Schriftgröße von 14 Pixel. Der Font-Familienkurs, den Sie inzwischen kennen sollten Mohnblumen, Semi Boulder, die Farbe der Schriftart. Lassen Sie uns also die Grunde-Überschriftenbeschreibung, Punktstrich, Strich, Beschreibung dialysieren . Geben Sie einfach die Fremdgröße von Pixeln an. Ausrichten, rechtfertigen, Gestalt annehmen. In Ordnung, also ist die Zeile das Datum eines hier, was die Dauer ist. Siehst du am rechten Bildschirmrand? Lasst uns diesen wöchentlichen Punkt hervorheben, Überschrift, Strich, Datum, oder? Also, ähm, geben wir die Hintergrundfarbe an. Natürlich werden wir es schaffen, dass es dunkelorange wird. Kopiere, füge es hier ein. Gib ihm eine Party. Die Telefongröße. Es sollte 14 Pixel betragen. Geben wir ihm einen Randradius von 14 Pixel an. Und schließlich möchten wir, dass die Farbe, die die Schriftfarbe ist, weiß ist. Sicherer Hafen zum Browser. Und hier ist der schöne Weg zum VS-Code. Beginnen wir also mit der Stilisierung des Skill-Abschnitts , der dieser q-Bar-Punkt ist, Skill Dash übergeordnet. Lass es uns Flex anzeigen lassen. Und die Flex-Richtungs-Säule. Denn wir haben 50 Prozent. Jetzt für das Programm im Stahlcontainer, Programmierfähigkeits-Container, lassen Sie es uns Flex anzeigen lassen. Und die Flex-Richtung wird falsch sein. Richten Sie Elemente an der Mitte aus. Rechtfertigung des Inhalts. Abstand zwischen dem Flex-Wrap Up. Wie hoch ist der Skill-Prozentsatz? Punktfähigkeits-Strich. Dies zeigt also die Stärke Ihrer Programmierfähigkeiten. Jetzt werden wir eine Position einnehmen. Machen wir es relativ. Geben Sie eine Höhe von 15 Pixeln, 70 Prozent. Und natürlich müssen wir die Hintergrundfarbe angeben, also muss ich sie nur von hier kopieren einfach weil es dieselbe Farbe haben wird. Speichern Sie Heroin im Browser. Stimmt's? Also haben wir dieses seltsame Resort vorbei, hey, was könnte das Problem sein? Okay, bleib an VS-Code. Was ist das Problem? Schauen wir uns alle Eltern an, alles cool hier drüben. Der Container für Programmierfähigkeiten. Das sind unsere richtigen Freunde. Lasst uns diese beiden zum Einwickeln machen, oder? Der Flex-Wrap wird also sein, den Rob auf VS Code hatte. Und boom, alles wie erwartet für den aktiven Prozentbalken. Also hier kopiere ich diese. Einfügen, schließen Sie die geschweifte Klammer. Und hier drüben, Dot Dash, Dash. Lass uns das schnell machen. Natürlich wird die Höhe gleich sein. Ich kopiere nur den Einfügeübergang. Und dieses Mal zeigt die Hintergrundfarbe Ihre Fähigkeit an. Also müssen wir angeben, hey, ist es sicher? Schön. Kannst du jetzt sehen, dass alles wie erwartet funktioniert? Ich mag es hatte bis zum VS Code. Und schließlich für das Span-Tag, richtig, in der übergeordneten Skill-Klasse. Also muss es diese kopieren. Komm her. Einfügen, schließen Sie die geschweiften Klammern. Wir werden das span-Tag, die Schriftfamilie, die Schriftgröße, 16 Pixel haben die Schriftfamilie, . Und die Farbe wird dunkelorange sein. Die Schriftfarbe, dunkelorange. Sicher. In Ordnung, also lasst uns den Browser anschauen und das Endergebnis sehen. Schön. Nehmen Sie es an Bildung aus. Innerhalb von Qu, Whack, Geschichte, Programmierung, Geschicklichkeit, Projekt, Interesse. Alles funktioniert als Zuschauer und es gefällt mir. Wenn Sie es also auf der mobilen Plattform überprüfen, werden Sie feststellen, dass es nicht reagiert. Kannst du den Moire sehen? Dies würde in der nächsten Vorlesung behoben werden. Das ist also vorerst alles, für diese Vorlesung, wir sehen uns in der nächsten Vorlesung. Bleiben Sie konzentriert und passen Sie auf. 33. Responsiveness für die Responsiveness die: In Ordnung, jetzt werden wir die Lebenslaufkomponenten reagieren lassen . Heroin, also VS-Code. Fangen wir mit dem iPad Pro an. Stylen Sie als sehr Lebenslauf-Karte. Strich fortsetzen. Gib ihm eine Breite von 80 Pixeln. Dafür lachen. Also komm hier runter. Jetzt müssen wir die ursprünglichen Aufzählungsdetails stilisieren. Punktradium, Kugeln ausweichen, Strichdetails. Geben Sie das Polster an. Richtig, also sind wir fertig. Und für das iPad Pro gehen wir nun unter Arrest mobile Plattformen. Wenn Sie diese Grab Based hervorheben, schließen Sie die geschweiften Klammern. Und hier müssen wir die Pixel für Mobiltelefone angeben. 1023 Punkt setzen den Inhalt wieder da wir Flex und die Flex-Richtungsspalte anzeigen. Richten Sie Elemente aus, um Nester für die Aufzählungszeichen zu senden. Kugeln. Okay, also müssen wir hier einen Punkt platzieren, einfach weil es ein Klassenname ist. Und die Kugeln werden das Gewebe von 90 Prozent haben. Für die Regionskarte. Die Höhe. Lassen Sie uns es zu Inhalten passen. Wir werden einen Display-Flex haben. Und die Flex-Richtungs-Säule. Der Rand, 30 Pixel, richten Elemente aus. der Mitte. Natürlich wird die Breite 90 Prozent betragen, also werde ich sie hier einfügen. Nun, für die Details der Aufzählungszeichen für den Lebenslauf, wird der Punkt fortgesetzt. Details zum Aufzählungsstrich. Gib ihm eine Höhe. 360 Pixel Geben Sie ihm eine Breite von Inhalt anpassen. Geben Sie die Polsterung an, 0. Der Grund, warum Kugel. Natürlich sollten diese Kugeln gelesen werden. Gib ihm eine Breite von 100%. Rand, 30 Pixel, 0. Zuletzt wurde für den ausgewählten Aufzählungszeichen Ausweichen ausgewählt. Und geben wir ihm eine Breite von 100%. Also werde ich einfach hervorheben, schnappen, komm her, füge es ein. In Ordnung, also wenn du meiner Führung folgst, bekommst du definitiv das gleiche Ergebnis mit mir. Speichern Sie sie im Browser. Lasst uns nachladen. Dann stecke es auf mobilen Plattformen heraus. Hier ist auf dem iPhone Fünf. Punktet runter. Schön. Kannst du es jetzt sehen? Exzellent. Alles klar, lass es uns auf dem iPhone X herausnehmen. Perfect Guys. Lasst uns zerstreuen. Auf dem iPad Pro. Großartig. Ich liebe das auf dem iPad. Werfen Sie einen Blick darauf. Und schließlich weniger auf dem iPhone 6, 7 und 8 Klausel herausgenommen . Alles sieht gut aus wie zuschauen. Dies ist also plötzlich das Ergebnis, das wir von dieser Vorlesung erwarten. Alles sieht gut aus und ich mag es. Alles klar, also das ist vorerst alles für diesen Vortrag. Wir sehen uns in der nächsten Vorlesung. Bleiben Sie konzentriert und passen Sie auf. 34. Testimonial und Owl: Willkommen zurück bei den Autos. Alles klar. Fangen wir an, an der Testimonial-Komponente zu arbeiten. Und am Ende werden wir ein sehr gut aussehendes Zeugnis wie dieses haben . Werfen Sie einen Blick darauf. Kannst du das sehen? Ist das nicht wunderschön? Alles klar, also lasst uns schnell anfangen. Gehe zurück zum VS-Code. Rechtsklick auf das Pocket Testimonial. Hier ist es, Rechtsklick? Und jetzt erstellen wir die entsprechende Komponente. Also hier eine neue Akte. Und das würde als Testimonial Dot js bezeichnet werden. Lassen Sie uns die entsprechende CSS-Datei erstellen. Rechtsklick auf Testimonial. Neue Datei. Testimonial Dot CSS ist wunderschön. Die nächste Zeile ist die Installation der OWL Carol ist 0. Also sie aufs Terminal. Genau hier im Terminal bin ich im Stammverzeichnis. Lasst uns also zum Kunden gehen. Dafür. Ich mache nur einen CD-Client. Und hier werde ich npm install, React Dash, Dash Cruiser machen. Um fortzufahren. Erwärmen Sie die Eingabetaste auf Ihrer Tastatur. Die Installation ist im Gange. Installiert, erfolgreich. Die nächste Zeile besteht darin, dieses Projekt mit jQuery zu verknüpfen. Factory könnte helfen und das jQuery-Skript kopieren. Materialien. Könnte uns helfen, zu sinken. Also hier haben wir das jQuery-Skript, markieren, kopieren. Gehe zurück zum VS-Code. Jetzt suche ich einfach nach index.html. Ich suche lieber so danach. Sie können also tatsächlich im Explorer darauf einstellen. Scrollen Sie hier unten am jQuery-Skript vorbei. Speichern Sie das Projekt. Schließen Sie dann die index.html, gehen Sie zum Testimonial generieren Sie die Funktionskomponente React js. Hier importieren wir also den OWL Caruso von React dodge OWL kairos. Geh zurück zum Code, wie viel mehr Zeit. Und hier müssen wir diesen Import kopieren. Kopieren. Bitte kopiere diese nicht hier drüben. Dies ist nur eine Überschrift und verschiedene Gründe, warum ich das Kommentarzeichen hier platziert habe. Also kopiere diese Zeile nicht, oder? Dies sind die notwendigen Linien. Kopieren Sie, gehen Sie zurück zu VS-Code und fügen Sie ihn dann ein. Importieren wir also die Bildschirmüberschrift, die die wiederverwendbare Komponente ist. Und natürlich solltest du jetzt wissen, wie das geht. Überschrift des Begrüßungsbildschirms der Dienstprogramme, Begrüßungsbildüberschrift GAS importiert auch dieses Fadenkreuz Begrüßungsbildüberschrift GAS importiert auch dieses Fadenkreuz von Dienstprogrammen. Und hier drüben müssen wir auch die Animation importieren, die nächste in der Reihe ist, die glatte Schraube und den Fading-Effekt zu implementieren. nächste in der Reihe ist, die glatte Schraube und den Fading-Effekt zu implementieren Deshalb muss ich das nur von mir kopieren. Also füge ich es einfach ein. Schön. Nachdem wir das hier in Steve gemacht haben, werden wir die Bildschirmüberschrift rendern. Und es hat Attribute Titel. Hier werden wir Testimonial machen. Und natürlich hat es Attribut-Unterüberschrift. Hier machen wir es machen hier. Wir werden einen Abschnitt mit dem Klassennamen eines Testimonial-Abschnitts haben. Ich weiß, dass die meisten von Ihnen tatsächlich erwartet haben, dass es dv ist, Klassenname des Testimonialabschnitts. Und hier geben wir ihm eine ID, Requisiten Dot ID. Also diese Funktion wird ausgewählt, es verbessert sich sicher. Jetzt müssen wir diese Komponenten hinzufügen, aber den Bildschirm gemeinsam P. Und dann werde ich auf gemeinsame Booties einstellen. Und hier drüben werden wir Testimonial aus dem Portfolio-Container-Schrägstrich importieren . Testimonial. Schön. Und im Moment dupliziere ich diesen Code einfach. Hier. Wir müssen den Namen in Testimonial ändern. Und hier ist die Komponente Testimonial. Geh zurück zum Terminal und ich mache npm, startet. Schön. Jetzt wird ein Testimonial auf dem Bildschirm angezeigt. Und hier ist die wiederverwendbare Komponente. Vermasselt es sei denn, die Nymphe erscheint oben als Navigation. Genau hier sehen Sie es, wenn Sie auf dieses Testimonial zu den Testimonial-Komponenten klicken . Schön. Gehe zurück zum VS-Code. Wir brauchen die gewöhnlichen Kartoffeln nicht mehr. Schließ es nieder. Und wir brauchen auch das über mich nicht. Schließ es nieder. Moment sind wir also im Testimonial JS. Also richtig, in diesem Abschnitt werden wir ein div mit dem Klassennamen des Containers haben . Und richtig, in diesem Container werden wir ein anderes div mit dem Klassennamen der Zeile und einem Recht in dieser Rolle haben . Dann müssen wir die OWL Caruso anrufen. Also mache ich OWL und hey, ist es wunderschön? Hier geben wir also den Klassennamen für die blauen Strichpfeile an. Und wir werden ihm einen Ausweis geben, ARF-Testimonial, Testimonial-Strich, Karussell. Und hier werden wir ein anderes Div mit dem Klassennamen haben . Dies ist also ein Bootstrap-Klassenname, Spaltenstrich, Strich 12. Und hier werden wir ein div haben, ihm einen Klassennamen dieser T-Dash-Elemente geben und das Element im Test schreiben. Wir werden auch ein div mit dem Klassennamen von S T Dash Kommentar haben . Und hier werden wir ein p-Tag haben. Das ist nur für den richtigen Job. Alles klar? Also genau in diesem p-Tag habe ich schon einen Write-Up. Also muss ich einfach zurück zum Code. Und hier siehst du Zeugenaussagen. Jetzt kopiere ich einfach diese Zeilen von hey, komm her, füge sie ein. Stimmt's? Lassen Sie uns diesen Code also formatieren, indem Sie mit der rechten Maustaste auf Dokument formatieren mit klicken. Kannst du das sehen? Erstaunlich. Wir möchten, dass dies als Zitat erscheint. Was ich jetzt tun werde, ist, diese Aussage mit einem I-Tag abzuschließen. Dann können wir das Icon angeben. Und hier bevorzuge ich das selbstschließende Tag. Also hier werden wir einen ClassName haben, eine Bootstrap-Klasse von FASFA, Dash, Dash, links. Dies wird also das linke Zitatsymbol erzeugen. Jetzt muss ich das nur noch kopieren. Komm her, füge ein, ändere es direkt nach dem schließenden p-Tag in Court . Wir werden ein UL-Tag haben. Stimmt's? In diesem UL-Tag. Wir werden das LI-Tag genau hier haben. Wir werden ein I-Tag haben. Jetzt wollen wir nur noch die Rate und die Icons implementieren. Lass mich es dir schnell zeigen. Also muss ich nur diesen Befehl C stoppen, um die Amino zu stoppen. Okay, also das wollen wir umsetzen. Die Bewertungssymbole hier drüben. Und das sind die doppelten Anführungszeichen, die wir gerade umgesetzt haben. Kannst du sehen, so wird die Aussage genau so auf dem Bildschirm erscheinen. Bevor wir also mit weiteren Dingen fortfahren, müssen wir dieses UL-Tag, einen Klassennamen, einen Strich behalten . Alles klar, also konzentrieren wir uns jetzt auf die I-Tags. Und hier geben wir dem einen Klassennamen, FASFA Dash. Also bevorzuge ich auch das selbstschließende Tag. Jetzt markieren wir das LI-Tag, kopieren und einfügen. Füge es immer wieder ein. Also hier werden wir FASFA dy Dash, Dash raus haben . So bietet LI-Tags an und scrollen Sie nach unten. Und hier werden wir ein div haben, geben Sie ihm einen Klassennamen von Clients Dash im Herbst, oder? In den Kundeninformationen. Wir werden das Foto des Kunden, den Namen und die Position des Kunden haben . Um das zu tun, müssen wir die notwendigen Fotos importieren. Sei das Pop-up, der Explorer, replicon public hier auf New Folder. Und das würde IMG heißen. Gehe zurück zum Ordner „Materialien“ geöffnet. Und hier ist das Testimonial, oder? Im Testimonial-Paket haben wir alle unnötigen Bilder, die die Testimonial-Komponente relevant sind. Und hier eröffnen Sie jetzt den Portfolio Pro Client SRC, richtig? Wir müssen nach der Öffentlichkeit suchen. Und hier ist das IMG, das vor ein paar Sekunden erstellt wurde. Und dann muss ich jetzt zurückgehen und all dieses Paket kopieren, all dieses Paket kopieren, welches das Testimonial ist. Fügen Sie es direkt in das IMG ein. Gemeinsam V. Schön. Schließ es, schließe es. Gehen Sie zurück zum VS-Code und schauen wir uns ihn dann an. Hier ist das IMD. Klicken Sie zum Öffnen , und hier ist das Testimonial. Und all dies sind die relevanten Fotos. Also hier werden wir das IMG-Tag SRC haben. Wir müssen auf die Pocket IMG Slash Testimonial-Klasse verweisen . Jetzt wollen wir dieses Foto nutzen. Tennessee. Der Name ist also Lady Dot PNG. Jetzt gib ihm eine seltsame keine Internetverbindung. Die Quoten werden auf dem Bildschirm angezeigt , wenn beim Laden des Bildes ein Problem auftritt. Speichern, geh zurück zum Browser und hasst es. Geben wir nun den Namen des Clients an. Und was wir dafür verwenden werden H5. Also werde ich sehen, dass sie dominieren. Jetzt zur Position. Dafür werden wir ein p-Tag verwenden. Nehmen wir an, diese Lady ist CEO. Ich werde CEO machen, global. Sparen Sie, sieh es dir an. Also hier ist der Name des Kunden. Und unten ist die Position. Schön. Das Nest und die Linie besteht darin, diesen Code dreimal zu duplizieren. Oder Sie können dreimal kopieren und einfügen ist alles gleich. Also schau mir zu, wie ich aus einem Div mit dem Klassennamen Collage oder 12 kopiere . Ich muss es dir so klar machen damit du keine Probleme hast. Und dieses div, NCAA aus den Zeilen 32, Zeilen 67. Also sieh mir zu, wie ich hervorhebe. Jetzt halte ich die Umschalttaste und die Pfeiltaste nach unten auf deiner Tastatur gedrückt. 3 mal 1, 2, 3. Und rettet es? Gehe zurück zum Browser, lade neu. Siehst du diesen Ordner? Vorerst? Wir werden den Treuhandeffekt nicht sehen nur weil wir diesen Caruso nicht implementiert haben. In Ordnung, also sind wir fertig mit der Benutzeroberfläche. Und in der nächsten Vorlesung werden wir die Kairos umsetzen. Wir sehen uns in der nächsten Vorlesung. Bleiben Sie konzentriert und passen Sie auf. 35. Verwendung von Testimonial mit React Carousel: Alles klar, jetzt werden wir an den Testimonial Kairos arbeiten. Und am Ende dieser Vorlesung werden Sie die Testimonials vom rechten Bildschirmrand nach links vom Bildschirm scrollen vom rechten Bildschirmrand nach links vom Bildschirm lassen. Lasst uns schnell anfangen. geht auf den VS-Code. Hier drüben. Bevor wir fortfahren, müssen wir die notwendigen Änderungen vornehmen. Befehl B um den Explorer zu öffnen. Und dann lass mich dir hier den Testimonial-Punkt CSS zeigen . Als ich die vorherige Vorlesung durchlief, wurde mir klar, dass die Testimonials, CSS, nicht richtig geschrieben wurden. Jetzt müssen Sie nur noch rechten Maustaste auf das Testimonial-CSS klicken und dann auf Umbenennen klicken. Hier drüben. Stellen Sie sicher, dass das, was Sie gerade auf dem Bildschirm sehen mit dem übereinstimmt, was Sie auf Ihrem Code haben. Sie müssen also die notwendigen Korrekturen vornehmen. Zuvor gab es einen hier drüben. Lass mich dir so zeigen. Alles, was Sie tun müssen, ist das OH abzuwischen und dann die Return-Taste auf Ihrer Tastatur zu erhitzen. Schön. Nest, scrolle nach unten. Lass mich es dir zeigen. Ich habe ein paar Bilder des Kunden hinzugefügt. Also hier ist der Lady Dot PNG. Und wenn Sie zum nächsten Kunden zurücktreten, habe ich Mike dot PNG. Sie können also all diese Bilder tatsächlich ändern. Und diese Bilder sind genau hier in einem Testimonial-Paket. B, scrolle zur Republik. Hier, IMG, und dann hier ist der Lady Dot PNG. Png und Mike Punkt PNG. Okay. Schließe das Testimonial JS. Ich muss dein eigenes nochmal mitbringen. Scrolle nach oben. Lassen Sie uns nun die Karussell const-Optionen implementieren und dann auf leere Objekte setzen. Und hier werden wir die Schleife haben, um wahr zu sein. So können wir eine ständige Wiederholung der Zeugnisse haben. Für Marge. Machen wir es 0 getrennt durch ein Komma und dann Nerven genau hier, du kannst es wahr oder falsch machen. Und emittiert in Grenzen, oder? Unbegrenzt wie Lewis von ihm entfernt ist, aber um es mit einem Komma zu trennen und dann diese booleschen Operationen zu punkten. Also lasst es uns wahr machen. Sie können es an Ihrem Ende deaktivieren, indem Sie es auf „false“ festlegen . Autoplay. Wir wollen es durch eine intelligente Geschwindigkeit. Was die Autoplay-Türen sind, Sie beim Öffnen des Browsers , der Website, müssen Sie beim Öffnen des Browsers , der Website, auf keine Schaltfläche klicken, damit das Testimonial mit dem Scrollen beginnt. Das wird also automatisch geschehen. Im Vergleich zu der Geschwindigkeit, für die diese Testimonials vom rechten Bildschirmrand nach links vom Bildschirm scrollen . Sie können sich entscheiden, die Geschwindigkeit zu erhöhen und auch die Geschwindigkeit zu reduzieren. Jetzt ist es an der Zeit, es reaktionsschnell zu machen. Diese Gegenstände, es wird eins sein. Also muss ich es einfach zweimal hervorheben und dann duplizieren. Hier drüben. Keine Sorge, ich werde all diese Tabs zu dir drehen. Und hier werden wir 768 haben. Und schließlich werden wir 100 haben und Displays wir wollen, dass es drei ist. Wenn ich also einen Bildschirm innerhalb von 0 bis 768 Pixeln höre, erscheint das Testimonia eine Spalte und eine Zeile, oder? In. Auf Laptop, Desktop und iPad wird es in drei Spalten angezeigt. Und nur kleinere Geräte wie das iPhone oder Samsung, es wird nur ein Doppelpunkt erscheinen, oder? Ja, genau das haben wir hier drüben gemacht. Speichern Sie, scrollen Sie nach unten dorthin, wo Sie den OWL Caruso haben. Jetzt öffne und schließe ich die geschweifte Klammer. Jetzt müssen wir die Op-Aktien aufnehmen. Speichern, gehen Sie zurück zum Browser und schauen wir es uns an. Kannst du sehen, dass es mir so schön gefällt. Jetzt haben wir das Testimonial-Scrollen vom rechten Bildschirmrand nach links vom Bildschirm. In Ordnung, das ist also oft für diese Vorlesung. Und in der nächsten Vorlesung beginnen wir, diesen Kontinent zu stilisieren und dann wird alles gut aussehen. Wir sehen uns in der nächsten Vorlesung. Bleiben Sie konzentriert und passen Sie auf. 36. Erfahrungsberichte: Alles klar. Lasst uns also anfangen, die Testimonial-Komponente zu stilisieren. Heroin nach VS-Code. Öffne das Testimonial-CSS. Und hier ist es. Schließen Sie den Explorer-Befehl B. genau hier. Wir beginnen mit dem Testimonial-Bereich. Testimonial-Sektion. Und die Polsterung. Es wird 80 Pixel betragen. Es gibt 80 Pixel. Die Hintergrundbild-URL. Und wenn ich höre, müssen wir das Bild importieren , das wir für den Hintergrund verwenden möchten. Öffnen Sie nun den Materialordner. Es muss auf einen Desktop gehen, auf dem es sich an meinem Ende befindet. Hier unten sind die Materialien, n, hier ist das Testimonial oder wurde das Portfolio pro Client SRC Vermögenswerte geöffnet . Also ziehe ich das einfach zur Seite. Geh zurück. Also werde ich die ganze Tasche kopieren. Kopieren. Komm direkt in den Vermögenswerten hier runter. Ich füge es einfach ein, schließe es, schließe es und gehe schließe es, schließe es dann zu VS Code. Doppeltes Zitat hier drüben. Wir müssen einen Schritt voraus sein, um den SRC zu heizen. Src slash Assets. Testimonial. N. Hier ist das Hintergrundbild. Bitty Strich einen Punkt JPEG. Die Hintergrundposition. Lass es uns in den Mittelpunkt stellen. Der Hintergrundanhang. Wir werden es reparieren lassen. Und die Position. Lass es uns in Bezug nehmen. Wir sehen uns. Und für den Z-Index, Z-Dash-Index, machen wir es minus eins. Sparen Sie. Gehen Sie zurück zum Testimonial-JS und verknüpfen Sie es weniger mit der CSS-Datei. Scrollen Sie nach oben. Und hier drüben werde ich einfach Testimonial-Punkt-CSS importieren, sie im Browser speichern und es uns ansehen. Erneut laden. Stimmt's? Okay, also hier ist der Hintergrund. Wenn ich also nach oben scrolle, werden Sie sehen, dass der Hintergrund auf dem Bildschirm fixiert wird. Siehst du, dass sich der Hintergrund nicht bewegt? Es ändert sich nicht, nur weil wir den Hintergrundanhang reparieren müssen. Siehst du jetzt okay, richtig. Wir sind auf Testimonial CSS Nest. Wir müssen den Testimonial-Bereich vorher machen. Also kopiere ich diese einfach. Einfügen, schließen Sie die geschweiften Klammern. Und hier werden wir vorher einen Doppelpunkt haben. Und hier werden wir den Inhalt leer haben. Und die Position ist absolut. Die linke 0, die oberste 0, die Breite, 100%, die Höhe, 100%, der Z-Index. Also lasse ich das einfach kopieren, weil es genau das gleiche Team ist. Die Deckkraft wird keinen Harvards 0 haben, es fünf. Jetzt werden wir die Hintergrundfarbe haben. Okay, also rette sie im Browser und lass es uns anschauen. Wie schön sind, oder? Wenn Sie es sich also genau ansehen, werden Sie feststellen, dass das Hintergrundbild jetzt transparent ist, einfach weil wir einen weiteren Balken darüber platziert haben und dann die Deckkraft angeben. Lass mich es dir schnell zeigen. Hatte auf VS Code und hier ist was es transparent gemacht hat, oder? Wenn ich also die Deckkraft auf 0,5 reduziere, spare, komm zurück. Kannst du sehen? Jetzt wird es transparenter. Also denke ich, dass unser Null-Punkt 85 dafür cool wäre. Sie können also in einem Wert einer Wahl angeben, ist das tödlich? Du magst es richtig? Jetzt stilisieren wir das FUTA Dot-, Foo Dot -, Strichbild. Mit 100%. Die Höhe wird natürlich 100% betragen, also muss ich es nur von hier kopieren. Und das Maximum haben wir 1920 Pixel. Überlauf, Heizung. Wir werden es flexibel anzeigen lassen, Inhalte rechtfertigen. Schätze du weißt es, Zentrum. Und dann der Rand oben. Wir wollen es Manoj, ein Pixel ungleich Null. Sparen Sie. Lassen Sie es uns im Browser herausnehmen. Scrolle nach unten. Jetzt können Sie sehen, dass die Kurve hier tatsächlich auftaucht, aber nicht als Zuschauer. Sie sich also keine Sorgen, wenn wir diese Komponente stilisieren, werden wir alles vollkommen in Ordnung haben. Alles klar, also komm zurück. Jetzt werden wir für das Image IMG tun. Jetzt haben wir die maximale Breite, 100%. Und die Höhe auf Pixel. Geh zurück und lass uns noch einmal nachsehen. Kannst du das sehen? Schön? Mir gefällt es. Jetzt haben wir die erwarteten Ergebnisse aus dem Vollzeithorizont. Lass uns mit dem Karussell fortfahren. Und hier müssen wir stilisieren, dass die ITA testet. Also muss ich das einfach kopieren. Komm zurück und füge dann Punkt-Strichelement ein. Gib ihm eine Hintergrundfarbe. Lass es uns weiß machen. Polsterung, 30 Pixel Speichern Sie sie im Browser. Alles klar, das sieht gut aus, aber wir müssen es zur Beta machen. Gehe jetzt zurück zum VS-Code. Jetzt müssen wir den Grenzradius Kurs geben. Wir wollen, dass diese Haargrenze ein bisschen kurvig ist. Jetzt mache ich also den Grenzradius. 50 Pixel von oben, 50 Pixel von rechts, 50 Pixel von unten. Und dann wollten wir 0 Pixel von unten links. Speichern, geh zurück zum Browser und lass uns sehen. In Ordnung, jetzt haben wir den Radius auf alle Ecken mit Ausnahme der unteren linken Ecke angewendet . Und wenn Sie es genau betrachten, werden Sie feststellen, dass die Kante sehr scharf ist. Und was den Rest der Ecken angeht, so drängt das gerade unsere eigene Kurve für das p-Tag direkt in einem Testgerät. Also markiere ich einfach diese Kopie, komm runter, füge ein, schließe die geschweiften Klammern. Und dann wollen wir das p-Tag stilisieren. Und natürlich können Sie immer auf dieses Testimonial-JS verweisen , wenn Sie sich der Klassennamen nicht sicher sind. Jetzt für die Schriftgröße 16 Pixel, Zeilenhöhe, 26 Pixel. Die Telefone essen wir 100, also wird das sein aerobisches Häkchen machen. Und Vorstand. Die Marge. Margin, wir werden diesen Fehler zehn Pixel haben. Und für die Telefonstadt wollen wir, dass es kursiv erscheint. Rette sie, oder? Okay, jetzt kannst du sehen, dass die Schrift deswegen schräg erscheint . In Ordnung. Die nächste in der Zeile besteht also darin, das Zitat zu stilisieren. Jetzt kopiere ich diese Spalte einfach hier. Einfügen, schließen Sie mit der geschweiften Klammer. Und dann mache ich Punkt, FA, Dash, Dash, Dash, links. Wir haben hier nicht viel zu tun, nur das Randrecht. Machen wir es fünf Pixel. Und die Farbe des Augensymbols, das ist das Zitat selbst. Also weniger Mickeys Commodore. Und bevor wir fortfahren, sollte dies übrig bleiben. Das tut mir so leid. Wirklich ein typografischer Fehler. Sparen Sie, komm her. Jetzt ist das verbleibende Zitat in guter Verfassung. Also muss ich nur Gebühren hervorheben und duplizieren. Also hier müssen wir es ändern, um es zu zitieren, oder? Die Farbe bleibt also gleich. Und hier wird es randlinksbündig sein. K. Jetzt ist das Zitat in guter Verfassung. Jetzt zum Rating. Also hier komme ich hier hoch und kopiere es immer wieder. Einfügen, schließen Sie die geschweiften Klammern. Wir wollen die belüftenden Icons stilisieren, die die Sterne sind. Also hier werden wir Kommentar-Punktsterne getestet haben. Danach kopiere ich Paste. Und jetzt wollen wir das LI-Tag stilisieren. Und alle diese Klassen sind hier drüben im Testimonial j is. Jetzt sind dies die LI-Tags, mit denen wir es zu tun haben. Toronto-Zeugnis CSS. Also für Stars, lass mich es dir zeigen. Du siehst es so, wie es so aussieht . Uns gefällt es nicht. Also müssen wir es anzeigen lassen, Inline-Block, Speichern, Auschecken. Schön, ich mag es. Alles ist fast fertig. Also lasst uns weitermachen. Geben wir die Margin-Rechte an. Alles, was ich jetzt tun werde, ist diesen Code hervorzuheben und dann zu duplizieren. Komm her, wir wollen das I-Tag stilisieren. Lass mich es dir nochmal zeigen. Hier ist das I-Tag, oder? Welches ist das Icon selbst. Kannst du sehen? Also lösche ich das ab. Wir werden das Symbol vergrößern. Gehe zur Formulargröße von 30 Pixeln. Und die Farbe wird Tomate sein. Speichern unter überprüfen Sie es erneut. Großartig. Gehe zurück zum VS-Code. Die nächste in der Zeile sind die Clientinformationen, Punktinformationen. Lasst uns das so schnell machen. Position. Relativ. Verzeihung links, 80 Pixel, Polsterung über 80 Pixel und die mittlere Höhe beträgt 60 Pixel. Stimmt's? Bevor wir fortfahren, muss ein Polsteroberteil fünf Pixel betragen. Sie können also zum Browser gehen, um es auszuchecken. Aber für mich muss ich einfach weitermachen, damit wir schnell fertig werden können. Jetzt müssen wir die Bilder stilisieren. Diese Bilder hier drüben. Okay, also kopiere ich alles hier. Komm her, füge ein, schließe die geschweiften Klammern. Und dann mache ich IMG, um die Bilder ins Visier zu nehmen. Also für die Höhe 70 Pixel die Breite 70 Pixel. Die Grenze. Wir werden seine zwei Pixel haben, solide, transparent. Die Randfarbe. Lass es uns schwarz machen. Von links 0, die oberste 0. Sparen Sie Ihre Reform. Jetzt müssen wir die Grenze des Rahmens kreisförmig machen , oder? Also geh zurück und lass uns das schnell machen. Also müssen wir nur mit dem Grenzradius umgehen. Mach es 50 Prozent. Sparen Sie. Jetzt kannst du sehen, oh, schön. Ich mag es hier in VS-Code, es sei denn weiter. Und wir werden diese Position haben. Absolut. Sparen Sie nochmal, alles ist wie erwartet. Schön. Ich mag es hier auf VS Code. Jetzt müssen wir also das H5- und ein p-Tag stilisieren. Ich kopiere diese einfach. Einfügen, schließen Sie die geschweifte Klammer. Und dieses Mal müssen wir die Hedge Five ins Visier nehmen. Geben Sie ihm eine Schriftgröße von 16 Pixeln an. Die Schrift, die wir sehen würden, ist 100. Das wird es also dick machen. Die Zeilenhöhe beträgt 26 Pixel. Marge. Sparen Sie. In Ordnung, schließlich müssen wir das p-Tag stilisieren. Lass mich dir das p-Tag zeigen. Dies ist der Treffer F5, und dann ist dies das p-Tag. Der Name des Kunden ist also unter fünf Jahren eingepackt. Und die Rolle des Kunden ist in ein P-Tag eingeschlossen, Strafe im rechten Gesicht ist sauber, also sollte jeder ein angemessenes Verständnis dafür haben , was wir hier tun. Jetzt kopiere ich das einfach noch einmal, diesmal das p-Tag. Also haben wir die Schriftgröße. Kopieren Sie von hier aus, einfügen und die Zeilenhöhe. Auch. Kopieren Sie von hier. Fügen Sie das Telefon ein, das wir von hier kopieren würden. Einfügen, aber dieses Mal wird es 400 sein. Und die Marge ist 0. Speichern Sie sie im Browser. Kannst du das sehen? Schön, ich mag es. Jetzt schauen wir es uns auf mobilen Plattformen an. Hier ist ein iPhone S. Scrollen Sie nach unten. Schön. Also iPhone Sechs. Nett. Schauen wir es uns also auf dem iPad Pro an. Und hier ist es auf dem iPad Pro? Es erscheint sehr schön. Mir gefällt es. Und schließlich müssen wir nach Galaxy S5 schauen. Scrolle nach unten. Dies ist zum Beispiel genau das Ergebnis, das wir von dieser Vorlesung erwarten. Wir sehen uns in der nächsten Vorlesung. Bleiben Sie konzentriert und passen Sie auf. 37. Erstellen der ContactMe: Willkommen zurück zum Kurs. Okay, jetzt arbeiten wir an der Contact Me-Komponente. Und die Komponente besteht aus zwei verschiedenen Abschnitten. Erstens ist die Benutzeroberfläche, die mit dem Frontend zu tun hat, und das zweite ist das Back-End. Und am Ende können Sie E-Mails von einem Kunden erhalten. Antwort auf diese E-Mail über diese Portfolio-Website. Hört sich großartig an, oder? Schön. Heron zu VS-Code, es sei denn fortfahren. Das erste, was wir hier machen werden ist, die notwendigen Dateien zu importieren, nämlich die entsprechenden Bilder. Das ist eine wirklich lustige Geschichte über MEINE Komponente. Jetzt wurde der Materialienordner geöffnet. Materialien. Dann siehst du diese Bilder hier drüben. Öffnen Sie nun den Portfolio Pro-Client. Klicken Sie auf SRC. Dann kopieren wir diesen Ordner hier und fügen ihn dann hier ein. Schauen wir uns an, was wir haben. Wir haben die Last, die das GIF ist, das wir verwenden werden. Wir haben das Mailing-Hintergrundbild. Also lass mich dir zeigen, was die Türen sind. Wir müssen das nur schließen und dann schließen. Derzeit noch einmal Browser. Und wenn ich höre, wenn ich auf den Sende-Button drücke, wirst du den Herrn in Bob sehen. Siehst du das? Schön. Lassen Sie uns die entsprechenden Komponenten erstellen. Portfolio-Container in Toronto Und hier ist das Kontakt-Me-Verzeichnis, das wir zuvor in den vorherigen Vorträgen erstellt haben. Also klicke ich einfach hier auf New File. Dann nenne ich es kontaktiere mich dot js. Und schnell müssen wir die entsprechende CSS-Datei erstellen. Kontaktiere mich dot CSS, direkt hier um mich zu kontaktieren js. Verstecken wir den Entdecker. Generieren Sie die Funktionskomponente React js, RFC. Schön. Jetzt müssen wir hier die notwendigen Importe vornehmen. Also hier werden wir importieren. Ich debugge SRC Slash-Bilder Schrägstrich. Jetzt schauen wir uns Yvonne Namen der Bilder von sind da an. Jetzt haben wir den männlichen Punkt JPEG. Also mache ich einfach Männer Dot JPEG. Und hier müssen wir die Ladestangen Wand importieren. Also nenne ich es einfach Schleife eins. Alles klar, im selben Verzeichnis. Hier müssen wir also die Dienstprogramme für wiederverwendbare Komponenten, Splash, Bildschirmüberschrift und Bildschirmüberschrift importieren die Dienstprogramme für wiederverwendbare Komponenten, Splash, . Und hier müssen wir importieren, Scroll-Service aus Dienstprogrammen importieren scrollen. Und wir müssen auch die Animation importieren ist Dienstprogramme. Animation ist. Und was müssen wir importieren? Stimmt's? Scheint als Substantiv. Die werden in Ordnung sein. Und dann soll die verschachtelte Linie diesen glatten Bildlauf und den Fading-Effekt implementieren . Also müssen wir herkommen und ihm Requisiten mitnehmen. Jetzt haben wir diese in mehreren Komponenten implementiert, also muss ich nur noch auf mich js und dann zurückgehen. Hallo, Okay, es ist bereits hervorgehoben, also werde ich es einfach gut machen, für Unterrichtszwecke muss ich es einfach selbst machen. Jetzt. Weniger Highlights aus den Zeilen 92, Zeilen 15, Kopie. Geh zurück um mich zu kontaktieren js. Und dann müssen wir hier drüben nur einfügen. Okay, bevor wir fortfahren, müssen wir diese Komponenten dem Bildschirm hinzufügen. Jetzt, Heroku üblich. Okay, also müssen wir importieren. Kontaktiere mich. Kannst du Leute sehen, das importiert diese automatisch für mich, wenn ich hier klicke und boome, es wird importiert. Ich weiß also, dass es den meisten von euch schwer fällt, diese H2 zu machen, und deshalb muss ich es selbst manuell machen. Ja. Lassen Sie mich es also monogam importieren, kontaktieren Sie mich aus dem Portfolio-Container-Schrägstrich, kontaktieren Sie mich, slash kontaktieren Sie mich. Und jetzt glaube ich, dass alle damit cool sind. Also hier müssen wir es hier zu Konstanten hinzufügen. Jetzt muss ich diese nur noch hervorheben. Halten Sie Alt und Umschalttaste gedrückt und tippen Sie dann auf die Pfeiltaste nach unten auf Ihrer Tastatur. Kannst du das sehen? Im Moment müssen wir den Namen ändern, um mich zu kontaktieren. Und hier sollte sich die Komponente mit mir in Verbindung setzen. Sparen Sie. Geh zurück um mich zu kontaktieren JS. Und genau hier auf dem DV geben wir diesem div einen Klassennamen des mittleren Dash-Containers. Geben wir ihm also eine ID, damit wir nicht zu diesen Komponenten navigieren können. Erstens wird der Name des Bildschirms angeklickt. Also hier mache ich Requisiten. Punkt-ID. Jetzt. Vorsichtig. So schnell weniger als das sind sie wiederverwendbare Komponenten, damit etwas auf dem Bildschirm angezeigt wird. Jetzt mache ich den Bildschirm näher mit dem selbstschließenden Tag. Und vorausgesetzt nein, wir haben dies in den vorherigen Vorträgen getan. Jetzt die Unterüberschrift, die ich hier machen werde, weniger in Kontakt bleiben. , also denke ich, wenn du diese machst Okay, also denke ich, wenn du diese machst, sieht so besser aus. Also lass das L einfach so machen, wie es auf dem Bildschirm erscheinen soll, oder? Also ja. Okay. Und das andere Attribut ist der Titel. Jetzt nehme ich Kontakt mit mir auf. Schön, ich denke das in Ordnung. Sparen Sie. Gehe zurück zum Terminal und dann zum CD-Client. Und dann fangen wir npm an. Alles klar, lass uns darauf warten. Schön. Jetzt haben wir die Contact Me-Komponente auf dem Bildschirm. Vermasselt es und mal sehen, ob der Name hinzugefügt wird. Hat genug gestanden. Parfit Jungs hier sind kompatibel. Wenn ich also auf Kontakt klicke, bringt es uns hier runter. Heroin zu VS-Code es sei denn fortfahren. Amanda B, um den Explorer zu verstecken. Jetzt, gleich nach dem schließenden Tag der Bildschirmüberschrift, werden wir ein div haben, geben der Klasse Glied ARF, zentrales Dash-Telefon. Und hey, noch ein div, Klassenname von Kohle. Jetzt werden wir React typisch haben. Ich glaube, wir haben das schon mal gemacht, oder? In der Profilkomponente. Lassen Sie uns also zur Profilkomponente gehen. Profil ab.js. Ist es hier? Also werden wir aus der Hecke kopieren. Diese Überschrift hier muss kopiert werden. Geh zurück um mich zu kontaktieren GS. Bevor wir dies also implementieren lassen, müssen wir die React typische Vermasselung importieren. Nach den Best Practices müssen wir den Import eines Hey, Import aus React Dash Art des Anrufs durchführen. Okay, danach muss ich ihm einen Platz wie diesen geben. Und genau hier müssen wir nur einfügen. Alles, was wir ändern müssen, ist das Header-1-Tag. Also werde ich einfach hervorheben und dann drücke ich Befehl und D. Kannst du sehen, dass diese beiden ausgewählt sind, das öffnende Kopf-Tag und das schließende Kopf-Tag. Dies nennt man Multicasts bearbeiten. Mach es H2 und 1000. Und hier haben wir nicht, ich gebe das einem Klassennamen des Titels. Was ich jetzt tun werde, ist diese hervorzuheben und an deinem Ende feucht zu schrubben , um mehr Informationen anzuzeigen. Aber für mich möchte ich nur, dass nur diese Informationen angezeigt werden. Lassen Sie mich also die Informationen eines hier zeigen. Jetzt melde ich mich bei mir. Also hier müssen wir die MOOG's einbeziehen. Ich glaube, du weißt, wie man das macht. Für diejenigen unter Ihnen, die keinen Mac verwenden, müssen Sie nur meinen Code kopieren und einfügen , um diese MODS zu erhalten. Jetzt brauche ich dieses Emo-Symbol hier drüben. Ist es für weniger als Linie die Social-Media-Symbole. Lass mich es dir zeigen. Hier sind die Social-Media-Symbole. Und ich erinnere mich, dass wir das ganze Querruder dieses Zeugs in der vorherigen Vorlesung gemacht ganze Querruder dieses Zeugs in haben, als wir die Profilfirma implementiert haben. In dieser Vorlesung wird die Profilkomponente sehr hilfreich sein. Gehe zurück zu den Profilkomponenten. Vermasselt es. Alles klar, also werden wir alles so kopieren. Hebt Kopierrechte aus den Zeilen 122, Zeilen 26 hervor und gehen Sie dann direkt nach dem schließenden Tag des HA2 zurück zu mir ds . Ich werde einfach einfügen und den schönen MAN S besuchen, um zu sparen. Gehen Sie zurück zum Browser und schauen wir uns an, was wir bisher gemacht haben. Alles klar, kannst du diese anderen Symbole in der unteren linken Ecke des Bildschirms sehen? Und ich hoffe, dass das jemand sieht. Also muss ich das ein bisschen vergrößern. Und das haben wir bisher gemacht. Ich möchte nicht, dass dieser Vortrag zu lange dauert, also lasst uns hier eine Pause machen. Und in der nächsten Vorlesung werden wir das Kontaktformular erstellen. Wir sehen uns in der nächsten Vorlesung. Bleiben Sie konzentriert und passen Sie auf. 38. ContactMe und State: Also lasst uns mit dem Kontakt-Me-Telefon fortfahren Harrington VS Code. Hier, Austin, werden wir die notwendigen Zustandsvariablen deklarieren, die verwendet werden sollen. Also denke ich, wir sollten es genau hier machen. Okay, lasst uns den US-Bundesstaat importieren. Sie müssen also nur einen US-Bundesstaat der Kamera platzieren einen US-Bundesstaat der Kamera und dann nach unten scrollen. Und hier werden wir Const haben. Und wir müssen den Namen fehd, ruhiger, setName haben, um States zu benutzen. Und der Ausgangszustand wird leer sein. Zum ersten Mal wird nichts im Feed sein. Also muss ich jetzt das hervorheben und dann viermal duplizieren. Umschalttaste und tippe auf die Pfeiltaste nach unten auf deiner Tastatur. Okay, also müssen wir das in E-Mail ändern. Und dann setzen wir hier die E-Mail ein. Notiz. Dies ist ein ungewöhnlicher Fall. Also setzen wir es auf eine leere Zeichenfolge, die der Ausgangszustand ist. Und hier drüben müssen wir diesen Namen in Nachricht ändern. Und hier haben wir das Banner. Und schließlich haben wir den Booleschen hier drüben. Und natürlich sollten Sie wissen, dass dies eine boolesche Operation ist und entweder wahr oder falsch zurückgeben sollte . Hier werden die ersten Zustände also Unterarme sein. Lassen Sie uns nun schnell das Kontaktformular erstellen. Also hier drüben, gleich nach diesem schließenden div, werden wir ein div haben den Klassennamen Dash geben. Und auch wir werden hier ein div haben, geben Sie den Klassennamen IMG Dash an. Und hier werden wir eine Absicherung für IMG SRC haben eine Absicherung für . Ich bin Debug. Also werden wir ihm ein OT geben. Also denke ich, wir sollten es mit dem selbstschließenden Tag schließen. Alles klar. Die nächste in der Reihe ist also, dass das Telefon kurz nach diesem schließenden div hier von ClassName IMG zurückgeht. Wir werden das Telefon hier drin haben. Wir werden ein P-Tag haben. Mach dir vorerst keine Sorgen , denn ich werde es dir zeigen. Also hier werden wir ein Label haben. Geben wir ihm einen Klassennamen. Und ich werde tun, denn der Slogan wird genannt. Wir werden haben, dass der Eingabetyp Test ist. Und ich bevorzuge auch das selbstschließende Tag für diese schönen. Was ich als Nächstes tun werde, ist diese wie diese hervorzuheben. Dupliziere es zweimal. Oder Sie können zweimal kopieren und einfügen. Das Nest ist die E-Mail. Also hier ändere ich es in E-Mail. Ändere es in E-Mail. Der Typ hier wird E-Mail sein. Und diese würden für die Nachricht verwendet. Und die Botschaft. Sparen Sie und rennen Sie. Geh zurück zum Browser und lass mich es dir zeigen. Hier ist das Bild. Lass mich es dir zeigen. Welches ist das IMG zurück, das wir Querruder importiert haben und wir haben es hier gezeigt. Nun, hier ist die Absicherung für. Wenn Sie also genau hinsehen, sehen Sie die drei Eingabefelder. Lassen Sie mich ein bisschen hineinzoomen. Hier ist der Name, die E-Mail und die Nachricht. Aber ich möchte nicht, dass das Meldungsfeld die gleiche Größe wie die anderen Felder hat. Dafür müssen wir den Testbereich als aufgespießt nutzen. Gehe zurück zu VS Code. Und hier, wo Sie den Imput haben, werden wir ihn in Testbereich umstellen. Sparen Sie. Geh zurück. Jetzt können Sie sehen, dass es richtig ist, also haben wir es unseren Höhepunkt unter den restlichen Feldern. Aber eine Sache, die ich Ihnen zeigen möchte, ist, , wenn Sie etwas eingeben diese Eingabefelder nicht funktionieren, wenn Sie etwas eingeben. Lass mich dir zeigen, was ich damit meine. Also zoome ich ein bisschen raus. Ich überprüfe das. Und schauen wir es uns auf der Konsole an. Sie sehen, wenn ich die Eingabefelder verwende , passiert nichts. Es passiert nichts. Es bedeutet also, dass diese Felder nicht funktionieren. In Ordnung? Also müssen wir mit der Impedanz umgehen. Gehe jetzt zurück zu VS Code. Und ich denke, bevor wir das tun, müssen wir nur den Boden umsetzen. Lassen Sie uns also den Boden schnell implementieren. Gleich nach dem Testgebiet. Wir werden ein anderes div haben, geben Sie den Klassennamen ARF an, senden Sie Dash. Und genau hier drin werden wir einen Bolton haben. Also hier machen wir den Eingabetyp des Bolton. Natürlich wird gelöst, bedeutet, dass das Tag gesendet wird. Wir möchten also unten ein Symbol anzeigen. Wir müssen das I-Tag aufnehmen und ihm dann einen Klassennamen von FASFA Dash p bar geben. Entschuldigung, Papier sollte nur ein P-xy-Flugzeug sein. Alles klar? Und ich schließe auch gerne mit dem selbstschließenden Tag. Okay, ich denke alles coole Phänomen. Schau es dir im Browser an. Und wir haben zwei k. Dies ist der Grund von einem hier. In der unteren linken Ecke des Bildschirms. Siehst du hier ist das Bootfahren. Gehe zurück zum VS-Code. Jetzt müssen wir mit der Impedanz umgehen. Scrollen Sie also nach oben und definieren wir dafür eine Funktion. Jetzt werden wir eine Konstante haben und ich nenne es Honigtauname. Stellen Sie es auf unsere Funktion und nehmen Sie dann an einer Veranstaltung teil. Schön. Hier werden wir also setName-Ereignisse, Punkte, Ziele, Punktwert ausführen , diese hervorheben und zweimal duplizieren. Und hier müssen wir es in E-Mail ändern. Dies wird auch E-Mail sein. Okay. Ja. Und hier sollte weniger alt sein. Okay. Alles cooler. Scrollen Sie nach unten , sofern sie nicht in Enklave Also müssen wir mit dem Namen beginnen, das Namensfeld ist. Und jetzt müssen wir unverändert sein. Wir rufen den Funktionsnamen auf und der Wert sollte benannt werden. Bildlaufleiste. Testen wir es aus. Wir müssen nachladen. Alles klar, also hier auf der Konsole werden wir den Änderungseffekt sehen. Also tippe ich N ein. Lass es uns auf der Konsole herausnehmen. Okay, also wenn ich das tue, sehe ich das unveränderte hier drüben. Siehst du, das ist genau das, was das aufwandle Türen. Kurz gesagt, das onchange-Ereignis in React, erkennt den Wert eines Eingabeelements Änderungen. Klingt gut, oder? Schön. Gehe zurück zum VS-Code, es sei denn, er habe ihn in allen Bereichen implementiert. Und das Gleiche wie Lee werden wir für die E-Mail tun. Also werden wir Veränderungen haben. Und denk dran, das geht um Karma-Fall. Wir rufen die Handle-E-Mail-Funktion auf. Der Wert wird natürlich E-Mail sein. Und schließlich müssen wir es für die Botschaft tun. Also muss ich diese Kamera einfach hier kopieren. Einfügen. Und bitte ändern Sie die Funktion, um Nachrichten zu behandeln. Der Wert, den wir hier haben werden, stammt also aus dem Meldungsfeld. Speichern, geh zurück zum Browser. Also lasst uns ihm ein Zeichen geben. Öffne die Konsole scrolle nach unten für den Namen, den ich machen werde. Mike ist daher der Ort, an dem ich für die E-Mail finden kann , die ich machen werde. Okay, und für die Nachricht. Also muss ich einfach HIV a machen. Die Füße bekommen den Wert nicht. Siehst du das? Es erscheint hier auf der Konsole, aber der Wert ist nicht, erfasst den Wert nicht. Okay, geh zurück zum VS-Code und lass es uns reparieren lassen. Vermasselt es, oder? Freunde. Dies soll eine Botschaft und Hoffnung sein , dieses Mal zu erhalten oder wird in Ordnung sein. Alles klar. Okay, geh zurück zum Browser. Wir müssen nachladen. Probieren wir jetzt die Nachricht aus. In Ordnung, alles funktioniert einwandfrei. Also Satz, das ist vorerst alles, für diese Vorlesung und in der nächsten Vorlesung werden wir beginnen, dieses Unternehmen zu stilisieren, sehen uns in der nächsten Vorlesung. Bleiben Sie konzentriert und passen Sie auf. 39. Styling ContactMe: Also werden wir die Kontaktfirmen stilisieren. Und am Ende wirst du es so aussehen lassen, als ob diese in diesem schönen sind. Gehen Sie zurück zum VS-Code, es sei denn fortfahren Öffne den Kontakt mit mir CSS. Gemeinsames P gesetzt für Kontakt mit mir CSS. Und hier ist es. Beginnen wir mit dem Hauptcontainer, gemeinen Punkt-Strichcontainer. Also geben wir ihm eine mittlere Höhe von 100 vh. Für die zentrale Form Punkt zentral. Spaß. Wir werden die maximale Breite haben, die Polsterung. Lass es uns Flex anzeigen lassen. Und der Randradius von Pixeln. Marge 0 raus. Eine Menge Flex-Richtung wird zwöllig sein. Rechtfertigen Sie das Inhaltscenter. Und für die Hintergrundfarbe. Wir werden hier sein. Sparen Sie. Jetzt müssen wir das Kontakt-Me-CSS mit den Kontakt-Me-Komponenten verknüpfen . Hat den Kontakt mit mir geöffnet. Scrollen Sie nach oben. Also denke ich, wir sollten es genau hier machen. Speichern, gehen Sie zurück zum Browser, es sei denn, checken Sie ihn aus. Alles klar, jetzt haben wir den Hauptcontainer. Kann sehen. Aber es gibt ein Problem mit diesem Bild, nämlich der IMG-Tasche. Das werden wir in Zukunft auf jeden Fall beheben. Gehen Sie also zu VS Code, um mich zu kontaktieren. Und hier Lassen Sie uns mit der zentralen Form H2 fortfahren. Lassen Sie mich Ihnen die Geschichte richtig zeigen und tippen Sie den Effekt ein. Wo haben wir den Typ-Effekt, denke ich, ist ganz oben. Hier. Ist es das? Die Seite zur Farbe der Schrift wird definitiv weiß sein. Der Buchstabenabstand, bei dem es sich den Abstand zwischen den einzelnen Ebenenstilen handelt. Also werden wir es haben, um den Rand unten zu rammen. Machen wir es 20 Pixel. Speichere und führe es aus. Hier müssen wir für Rückfall, zurück, Strich für die maximale Breite, 380 Pixel stilisieren . Die Marge, 0 auto. Jetzt kopiere ich diese einfach. Schließen Sie die geschweifte Klammer und wir möchten den IMG-Dash anvisieren. Aber natürlich sollten Sie alle diese Kurse hier kennen. Sie sollten wissen, dass dies der Schaum ist, der IMG, wo sich die Hecke befindet, und das Bild ist. Gib ihm eine Breite von 100%. Rand unten von 20 Pixel. Jetzt müssen wir das IMD vier zurück stilisieren. Dafür muss ich diese einfach kopieren. Einfügen, schließen Sie die geschweifte Klammer. Dann mache ich H4, das sind die Telefone. Lass mich es dir zeigen. Das ist der IMG auf vier Arten, wie es in Ordnung ist, sieh es dir an. Es wird jetzt auf dem Bildschirm angezeigt, weil eine Schriftart selbst schwarz ist. Also hier ist es. Schicken Sie Ihre E-Mail hier. Jetzt müssen wir zuerst die Farbe ändern, damit wir sie hier oben auf dem Bildschirm sehen können. Lass es uns weit sparen. Kannst du jetzt sehen, dass es sehr sichtbar ist. Späterer Abstand. Nullpunkt. Eine Form zu Weizen. Wir wollen, dass es ein bisschen schwer ist, also scheint es hier körperlich zu sein . Also werden wir es 400 schaffen, sparen, zurückgehen. Kannst du jetzt sehen, dass es jetzt mehr Board ist. Wenn du die jetzt abnimmst, siehst du den Unterschied? Der Unterschied ist Ton. Geben Sie ihm eine Telefongröße von 18 Pixeln an. Jetzt wollen wir die Bühne für ein bisschen im Hintergrund verstecken . Gib die Kapazität 0.5. Sparen Sie. Siehst du es jetzt? Also haben wir diese Art von Wirkung hier drüben, oder? Schön. In Ordnung, geh zurück zum Browser. Und hier ist das Bild, das dieses IMG hier drüben ist, es ist zu groß, also müssen wir die Größe reduzieren. Hier liegt also das Bild. Ich füge die geschweifte Klammer ein und schließe dann. Jetzt müssen wir den Ausstoß seines Arms abzielen, der das IMG-Tag ist. Also die Breite, machen wir es 100% sicher. Siehst du jetzt, dass es allmählich Gestalt annimmt. Und das weniger als das, was wir tun werden, ist, das Bild tatsächlich ein wenig im Hintergrund zu verstecken. Also hier drüben werde ich Deckkraft machen. Ein McKee weniger, 0.5. Sparen Sie noch einmal. Siehst du jetzt, dass Emit Heider direkt im Hintergrund ist ? Gehen wir nun zu den Feldern über. Zentrales Telefon. Das Telefon, es ist gelöst. Wir werden also gesagt, dass wir ein Display haben werden. Flex, die Farbe. Lass es uns schwarz machen. 15 Pixel Rechtfertigen Sie das Inhaltscenter. Und sie werden die Richtung biegen. Spalte. Jetzt für Rand oben minus 52 Pixel. Die Hintergrundfarbe Weiß und der Grenzradius. 12 Pixel Sparen Sie. Lass es uns herausnehmen. Stimmt's? Die Dinge nehmen allmählich Gestalt an und ich mag es. Alles klar, lass uns weitermachen. Gehe zurück zum VS-Code. Jetzt müssen wir ein P-Tag direkt im Telefon stilisieren. Lass mich es dir zeigen. Hier ist das p-Tag. Und keine Sorge, wenn wir anfangen, die E-Mail-Funktionalitäten zu implementieren, zeige ich Ihnen, was diese Türen sind, okay, also machen Sie sich vorerst keine Sorgen darüber. Was ist ein Telefon und ein P-Tag? Text ausrichten, zentrieren, der Rand, unten, zehn Pixel. Und die Farbe, die die Schriftfarbe ist. Außer meine Kinder, Orange. Der Buchstabenabstand Nullpunkt für Regen. Eigentlich wollen, dass die Funktionalitäten Sets sind, oder? Wenn Sie also unten klicken, sehen Sie einen Test am Telefon, um anzuzeigen, ob die Nachricht erfolgreich war oder nicht. Genau das ist das Verbot von Türen, das ist dieses P-Tag einer, Hey, der Schriftfamilie. Mohnblumen fett, oder? Für die Formularbeschriftung beträgt der Rand unten also fünf Pixel. Die Farbe, machen wir es schwarz. Dann der Gitterabstand Nullpunkt auf RAM. Sparen Sie. Komm zurück. Jetzt sehen Sie die Labels vr gut platziert. Dies sind die Etiketten. Alles klar, also fangen wir an, die Eingabefelder zu stilisieren, nämlich den Namen, die Namensfelder, das E-Mail-Feld und das Nachrichtenfeld. Jetzt sollten Sie wissen, dass das Ich in der Firma und in der Firma, wir müssen das Imputkoma und dieses Testgebiet ins Visier nehmen. Wir werden mit einer Breite von 100% gehen. Der Rand, zwei Pixel, solide, RGBA. Jetzt haben wir 0, k. Mach das einfach viermal. Und der Umriss, lassen Sie die Hintergrundfarbe bekannt machen. Bevor wir also damit fortfahren, muss ich Ihnen zeigen, was wir tun wollen, ist hierher zu kommen Sie bis zum Demo-Projekt nachzuahmen. Und wie Sie sehen können, ist die Standardfarbe der Eingaben eine Art Grau. Lass mich ein bisschen zoomen. Sieh dir eine Art graue Farbe hier drüben an. Und wenn Sie mit der Maus darauf fokussieren, wird sie zu Weiß. Kann das mit einer Art blauer Grenze sehen. Ja. Blauer Umrissrand. Ja. Also muss ich jetzt die Standardfarbe der Imputes auf grau einstellen. Die Farbe wird also RGBA bis 300 sein, Kolyma bis 30 Zara. Zara. Dann werden wir hey, corner, 0.6, sparen, zurück. Und warum ist es? Weißt du, siehst du, wie man die Polsterung schreibt? Die Schriftgröße? M? Für Rand unten. Machen wir es 22 Pixel. Umgrenzungsradius. Wir wollen, dass es ein bisschen gekrümmt wird. Ich mache es 10 Pixel. Übergangspunkt. Oder geheim ist sicher und schön. Alles sieht gut aus, aber wir müssen noch einige bestimmte Dinge reparieren. Lasst uns jetzt weitermachen. Für das Testgebiet, für diesen Bereich, 3000 Ecke bei fünf Komma zwei, Komma 0, 570, speichern. Und schließlich der Hintergrund selbst. Was ist die Hintergrundfarbe sollte weiß sein. Sparen Sie. Geh zurück. Lass mich ein bisschen vergrößern. Wenn du also deine Maus auf das Meldungsfeld fokussierst, sehe ich. Siehst du das? Perfekte Leute. Aber im Moment funktioniert es nicht für die E-Mail- und ein Namensfeld, aber Sie können es und die Nachricht, die der Testbereich ist, markieren Sie diese Duplikate, Shift und Alt und dann zerschlagen die Pfeiltaste nach unten auf Ihrer Tastatur. Alles klar, jetzt werden diese geändert, um anzuklagen. Ich denke, es wird die gleichen Stile haben. Sparen, komm zurück, Hey, siehst du? Okay, also müssen wir den unteren Rand stilisieren , die obersten 15 Pixel. Polsterung, fünf Pixel. Umriss. Die 160 Pixel. Sparen Sie. Es sieht gut aus. Die Grenze. Geben wir ihm einen Rand von zwei Pixeln, solide. Orange Die Schriftgröße, 12 Pixel, Randradius, 19 Pixel. Hintergrundfarbe. Alles klar, machen wir es sicher. In Ordnung, die Schrift wird nicht angezeigt. Wir müssen ihm eine Schriftfarbe geben. Die Farbe sollte also weiß sein. Sparen Sie, komm zurück. Okay, und die Schriftart selbst ist zu klein und hat eine Schriftgröße, also machen wir sie vielleicht 18 Pixel. Okay, das ist in Ordnung. Ja, das ist in Ordnung. Richten Sie Elemente zentrieren aus und rechtfertigen Sie den Inhalt dann mit dem Weihnachtsmann. Okay, wunderschön. Aber im Moment ist das Unternehmen nicht so, wie wir es wollen. Und sehen Sie, genau das werden wir erreichen. Lasst uns also darauf hinarbeiten, dies zu erreichen. Aber davor müssen wir Unheilige für die Verschraubung machen, hier die Hintergrundfarbe angeben. Weicher. Übergang. Einer ist, das ist eins, sagen wir Aquin, und die Grenze, zwei Pixel. Also leitendes Symptom, Hey, komm her und lass es uns ausprobieren. Siehst du mich zoomen? Das ist in Ordnung. Für die Bodenlast. Was vorerst in Ordnung ist. Ich glaube nicht, dass wir das stilisieren müssen , einfach weil wir es nicht wirklich in der Kontaktaufnahme gemacht haben G ist, also werden wir das in Zukunft tun. Der IMG Buck, Buck, Flex. Machen wir es eins. Richten Sie Elemente an der Mitte aus. Die Marge richtig? Smith erhitzt 20 Pixel. Zieh das aus. Dies sollte selbst ausgerichtet werden, um zu senden, zu speichern. Und fürs Telefon. Also 0,9. Versuchen wir also, die Symbole zu reparieren, bevor wir diesen Ordner tatsächlich ausrichten können . Also werde ich das I-Tag direkt in die Kohle punkten. Wir werden Pod in sieben Pixeln machen. Die Farbe, was noch wichtiger ist, ist breit. Sparen Sie. Jetzt kannst du die Icons sehen, oder? Sehr sichtbar. Okay, also wollen wir es einfach so machen. Siehst du, wenn du darauf schwebst, zeigt es diesen coolen Effekt. Jetzt muss ich diese nur noch kopieren. Füge es hier ein. Schließe die geschweiften Klammern hier drin. Wir werden es weiter machen. Und wir werden uns umwandeln und ihm eine Skala von 1,5 geben. Sparen Sie, geh zurück. Jetzt siehst du schön wie k, Also müssen wir dieses Problem nur beheben , weil eine Firma nicht gut ausgerichtet ist. Und genau das ist das Endergebnis eines hier, was wir erreichen wollen. 40. Fixieren von Contact (Styling): Wir möchten also, dass es auf der mobilen Plattform so aussieht, aber wir wollen es so auf einem Laptop oder Tablet-Gerät. Also müssen wir das schnell beheben. Ich mache Werbung, Bildschirm und Min-Breite von und dann werden wir die Rinde von der Max-Breite haben. Lass es uns Flex anzeigen lassen. Begründen Sie Inhalt, Abstand zwischen dem Rand, Top 30 Pixel. Sparen Sie, gehen Sie zurück und schauen wir es uns an. Und das siehst du wunderschön. Dies ist plötzlich das Ergebnis, das wir von dieser Vorlesung erwarten. Gehen Sie zurück zum VS-Code, es sei denn fortfahren Wir müssen den IMDB dot stilisieren, dash. Und hier werden wir es flexibel machen lassen. Richten Sie es an der Mitte aus. Und das Modul richtig? 20 Pixel für das Formular selbst. Flex 0,9. Ich glaube. Vaso vorerst. Sparen Sie. Alles klar, siehst du das? Es sieht extrem schön aus und ich mag es. Lassen Sie es uns also auf der mobilen Plattform herausnehmen. Stimmt's? Genau das haben wir, wenn ich höre, dass es tatsächlich auf allen Plattformen reagiert. Lassen Sie es uns auf dem Galaxy S5 und iPhone 5 herausnehmen. Iphone ein iPhone 6. Lass es uns auf dem iPhone 678 herausnehmen. Siehst du, alles sieht gut aus. Lassen Sie es uns auf dem iPad Pro auf dem Tablet-Gerät herausnehmen. Genau so sieht es auf dem Tablet-Gerät aus. So wird zum Beispiel ein URI angeboten, und in der nächsten Vorlesung gehen wir zum Backend. Im Moment haben wir genau das hier drüben. Es sieht so gut aus und ich mag es. Alles funktioniert wie erwartet. Siehst du, dass dies das Ende dieser Vorlesung ist. Wir sehen uns in der nächsten Vorlesung. Bleiben Sie konzentriert und passen Sie auf. 41. Form: Jetzt lassen wir das Formular extrem schön aussehen. Wir müssen die Front-End-Funktionalität abschließen. Und übrigens möchte ich dir etwas zeigen. Okay, wenn ich jetzt auf die Seine abbrüche klicke, werden Sie feststellen, dass die Anwendung neu geladen wird. Lass mich es dir schnell zeigen. Hier ist das gleiche Board in jetzt klicke ich. Werfen Sie einen Blick darauf. Die Anwendung wird geladen. Sie werden diesen Effekt also direkt unter der Registerkarte sehen, überprüfen Sie die andere Registerkarte hier. Versuchen wir es also noch einmal. Wenn ich auf den Sende-Button klicke, musst du nur hier direkt auf der Registerkarte vorhersagen. Siehst du die Anwendung mit Lasten? Dies ist also einer der Ofen, auf den wir sie mit dem VS-Code reparieren werden. Scrollen Sie nach oben und beheben wir dieses Problem. Stimmt's? Also hier definieren wir einen Sendeordner der Funktionskonstanten. Und hier wählen wir ein Event setzen es auf unsere Funktion. Jetzt mache ich Ereignispunkt, verhindern, Standard, auf das Formular geschraubt, es sei denn, ich rufe diese Funktion auf. Hier ist es. Jetzt gehe ich Absenden, Formular absenden, speichern, gehe zum Browser und lass es uns anschauen. Laden Sie weniger flüssig scrollen Sie zur Contact Me-Komponente. Probieren Sie es aus, indem Sie in DC auf dasselbe Boot klicken. Jetzt lädt die Anwendung kein Tier Parfit neu, Harold zu VS grundlos fortgesetzt. Scrollen Sie nach oben. Hier drüben erstellen wir ein Objekt namens Daten und setzen es auf ein leeres Objekt. Und dann nehmen wir das Kraftfeld auf, das ist der Name, der durch die ruhigere E-Mail getrennt ist, getrennt durch ein Komma. Und schließlich die Botschaft. Alles klar, also schauen wir es uns an. Jetzt mache ich console.log. Lasst uns Daten protokollieren, sie im Browser speichern, neu laden. Jetzt muss ich dich zur Konsole bringen, um den Namen zu erhalten. Ich mache Mike für die E-Mail, ich mache sie auf gmail.com. Und für die Nachricht mache ich einfach HIV. Ich höre, wenn ich auf die Schaltfläche Senden klicke, siehst du das Objekt auf der Konsole. Siehst du. Lass es mich aufmachen. Los geht's. Mein Name ist Mike für E-Mail auf gmail.com und dann ist die Nachricht hoch. Alles funktioniert wie erwartet zum VS Columbus Kontinuum. Also muss ich nur dieses Log y Paar manchmal dieser Metro und Fehler abnehmen . Also müssen wir es in einen Try-Block einpacken. Versuch es. Dann müssen Sie auch den mit dem Catch-Block auswählen. Okay, also für den Fang hier müssen wir nur den Fehler protokollieren , den wir in der Show haben. Und hier drüben muss man nur von den Linien 44 bis zu den Zeilen 48 hervorheben. Komm gleich hier in den Versuch Block, füge ein. Also nest, wir müssen den booleschen Wert auf „true“ setzen. True“ gesetzt. Während wir weiter gehen, werde ich Ihnen erklären, was die booleschen Türen hier drüben sind. Im Moment werden wir uns ständig ausruhen. Achsen, Punktposten, aber kreuzen Sie Schrägstrich-Kontaktdaten an, das ist dieses Objekt genau hier. Also bringen wir es hierher, um alles auf den Feldern mitzunehmen , oder? So einfach ist es also. Und wir haben eine Warnung auf der Konsole. Es heißt, Zeus sei nicht definiert. Also müssen wir die Achse installieren, zum Terminal zurückkehren und dann zu C gehen, um den Server zu stoppen. Jetzt werde ich npm install acts verwenden und wir müssen auch installieren, obwohl wir reagieren, um es zu rechtfertigen. Lass mich es dir schnell zeigen. Gehen wir weiter zum Demo-Projekt. Okay, ich muss einfach nachladen. Wenn ich jetzt auf die Schaltfläche Senden klicke, erscheint der Toast in der oberen rechten Ecke des Bildschirms und zeigt entweder die Fehlermeldung oder die SOC-Sexnachricht an. Klicken Sie auf. Dsi sagt, bitte füllen Sie die Felder aus. Also hier ist die Toastbotschaft, und das ist das Banner. Hatte nicht VS codieren und ins Terminal schreiben. Wir müssen auch React installieren, dash, rechtfertigen, erfolgreich installiert, erfolgreich installiert nach oben scrollen und weniger importiert werden. Alles klar, hey, ich werde von importieren. Und wir müssen auch Toast importieren, reagieren, aussagen. Scrolle nach unten. Und hier müssen wir weitermachen. Diese würden definitiv ein Versprechen zurückgeben. Also müssen wir warten. Das Programm ist da. Wir müssen einfach warten. Wann immer Sie es mit dem Warten zu tun haben, müssen Sie die Funktion mit einer gleichen Vermasselung abschließen. Also hier mache ich einen Heiligen. In Ordnung, achten Sie also darauf, nicht dasselbe aus unserem USGS zu importieren . Okay. Scrollen Sie nach oben und schauen wir es uns an. Richtig. Lass uns weitermachen. Wir müssen also prüfen, ob die Felder leer sind. Wenn die Namenspunktlänge gleich 0 ist. Hier wird dies definitiv eine Wiederholung beinhalten, nämlich nach dem Kopieren, Einfügen, Ändern des Namens in E-Mail-Punktlänge. Und auch basierend ändern Sie diese beiden Nachrichtenpunktlänge. Ordnung, also wenn das leer ist, werden wir eine Nachricht aus dem Back-End ziehen. Also hier werden wir Ruhepunktdaten machen, Punkt MSG, was die Nachricht ist. Und wir möchten den Toast auch verwenden, um die Nachricht in der oberen rechten Ecke des Bildschirms anzuzeigen . Jetzt mache ich diesen Punktfehler. Also hier ist es genau das Gleiche. Ich muss nur kopieren. Einfügen. Dann müssen wir den Booleschen Wert festlegen, um ein anderes zu erzwingen. Wenn das Formular ausgefüllt ist und alles korrekt ist, müssen wir die Erfolgsmeldung vom Back-End zurückgeben. Also werden wir sonst tun wenn der wiederhergestellte Status 200 ist. Also werde ich einfach alles von hier wie diesen kopieren, von Lays 49 bis 51. Kopieren. Füge ihre richtigen Leute ein, hier drüben gibt es einen Tippfehler. Dies sollte ein Fehler sein. Ich weiß nicht, warum meine Tastatur diese Double immer macht. Also hier müssen wir den Toastpfeil ändern, um zu Toast Dot Socke sagt: Perfekt. Okay, sicher. Scrollen Sie nach unten und lassen Sie uns die Ladung implementieren Bob. Also hier ist der Bertin. Der Klassenname dieses Divs lautet st. Stellen Sie also bitte sicher , dass das, was Sie auf dem Bildschirm sehen, genau das ist , was Sie an Ihrem Ende auf Ihrem VS-Code haben. Gleich nach dem Schließen eines Tags werden wir eine geschweifte Klammer haben. Und wenn der boolesche Wert stimmt, zeigen wir den Ladebalken an. Also müssen wir es nur in einem b-Tag einpacken diesem einen Klassennamen laden geben. Genau auf diesem b-Tag werden wir die IMG-Sounds haben. Siehst du, lade eins. Angesichts einer merkwürdigen mit den selbstschließenden Tag-Pfeilen. Wenn es falsch ist, wird es beim Abbruch nicht angezeigt. Also nur eine leere Zeichenfolge. Und lass mich dir dieses Bild schnell wieder zeigen. Scrollen Sie nach oben. Hey ist es? Also haben wir gerade die Lasten zwei Punkte GIF importiert und dann gespeichert. Also wenn ich Command P mache, t2. Also hier ist die Ladeleiste. Scrollen Sie nach unten zum Terminal npm. Beginne. Mal sehen wir uns das Endergebnis an. Scrollen Sie nach unten und klicken Sie dann auf dasselbe Board. Wann siehst du schön, es gefällt mir. Diese funktionieren also möglicherweise nicht an Ihrem Ende, nur weil Sie es nicht stilisiert haben. Geh weiter zum Wilden konnte es nicht. Lass mich es dir schnell zeigen. Jetzt werden wir uns öffnen, kontaktieren Sie mich CSAs. Scrolle nach unten, wo wir die Ladung haben. Okay? Sie müssen also nur diese Klasse hier drüben stilisieren, was die Last ist. Lass mich es dir zeigen. Hey, ist es so, dass du nur eine Breite von 60 Pixeln geben musst. Und dann wirst du es so haben. Und wenn Sie beim erneuten Laden auf denselben Port klicken. Jetzt setzt der Boolesche Wert die Kraft. Wenn ich erneut auf die Schaltfläche Senden klicke, wird der Boolesche Wert auf True gesetzt und der Ladebogen wird auf einer Tafel angezeigt wenn dies vorerst alles für diesen Vorlesungssatz ist. Wir sehen uns in der nächsten Vorlesung. Bleiben Sie konzentriert und passen Sie auf. 42. Aufruf zum Handeln und FadeInScreen Animation: In dieser Vorlesung werden wir den Aufruf zum Handeln Wharton und auch die Hälfte des Fading-Effekts umsetzen . Zum Glück vollkommen in Ordnung. Vorerst. Wenn du die High Army abtreibst, passiert nichts. Siehst du? Und wenn ich höre, passiert nichts. Wenn Sie die Website neu laden, funktioniert der Fading-Effekt nicht einwandfrei. So schnell hatte ich auf VS-Code weiter, es sei denn fortfahren. Okay, also beginnen wir mit der Komponente „About Me“. Hier drüben liegt ein typografischer Fehler vor. Dies soll ein verblassender Bildschirm sein. Ich stelle bitte sicher, dass du die notwendigen Korrekturen vornimmst. Und das ist das Richtige. Nachdem wir dies getan haben, müssen wir zu diesem div mit dem Klassennamen von About me Container zurückkehren . Und dann werde ich verblassen, Dash. Speichern Sie sie im Browser. Und mal sehen, ob der Fading-Effekt die Komponente „Über mich“ angewendet wird. Erneut laden. Kannst du es sehen? Jetzt sieh dir mal an. Siehst du das? Lassen Sie uns also mit allen Komponenten dasselbe tun. Also musst du den Lebenslauf js öffnen. Und dann denke ich, dass wir den Fehler auch hier gemacht haben. Eigentlich haben wir diesen Fehler im Unternehmen gemacht, einfach weil dieser aus der Komponente About Me kopiert wurde. Stellen Sie also sicher, dass sie in den Bildschirm passen , und scrollen Sie dann nach unten. Genau hier. Hat div mit dem Klassennamen des ursprünglichen Containers. Dann werde ich verblassen, dash, sicher. Auch sie auf die Testimonial GS. Leute, du musst das einfach machen. Okay. Wir passen in den Bildschirm, direkt in das Testimonial. Oh mein Gott. Das ist ein Top. Okay. Also werden wir es auf dem Abschnitts-Tag implementieren. Sparen Sie. Und schließlich kontaktiere mich. Und natürlich sollten wir den gleichen Schmerz tun, dass LI sie im Browser speichert und dann neu lädt. Wenn ich jetzt nach unten scrolle, wird die Komponente verblassen. Doc, DOC. Perfekt. Jetzt ist es an der Zeit, die Call to Action Voting umzusetzen. Hätte nicht wirklich helfen können. Also hier kopieren wir die Onclick-Kopie. Eigentlich ist das so einfach und ich glaube, dass einige von Ihnen es an Ihrem Ende tun können , auch wenn Sie sich diese Vorlesung ansehen. Jetzt müssen wir also mit dem Profil fortfahren J. Vermasseln, okay, hier drüben, wo wir das Bertin High AMI haben. Platzieren Sie jetzt Ihre Maus hier und fügen Sie dann die eigene Clique ein. Also hier ist die onClick-Methode. Dieses Kreuz F ist ein Punkt-Scroll-Handler-Punkt Scrotal High AMI. Gehe zum Scroll-Dienst. Und das ist die Funktion zu scrollen, mich einzustellen. Sparen Sie. Geh zurück. Jetzt klick es. Es funktioniert einwandfrei. In der unteren rechten Ecke des Bildschirms befindet sich die CTO-Aktion, um einen reibungslosen Bildlauf zur Home-Komponente zu ermöglichen. Und ich überlasse dies als Aufgabe für Sie, es selbst umzusetzen. Aber ich kann Ihnen versichern, dass der vollständige Quellcode genau dort auf GitHub ist. Also scrolle runter, äh, lass mich es dir hier zeigen. Du musst genau den gleichen Schmerz machen ich hier drüben. Okay. Sie müssen nur die onClick-Methode kopieren und dann einfügen, richtig. Also lass es mich für dich tun. Ich möchte nicht, dass du dich beschwerst. Also werden wir weiter zu unserem Über Mich gehen. Platzieren Sie Ihre Maus genau hier und fügen Sie dann ein, Speichern. Geh zurück. Klicken Sie hier. Alles funktioniert wie erwartet und es gefällt mir. Dies ist oft für diese Vorlesung und wir sehen uns in der nächsten Vorlesung. Kümmere dich. 43. Backend: Alles klar, also lasst uns in den Rücken tauchen, Ende. geht auf den VS-Code. Das erste, was wir hier tun werden , ist die package.json-Datei Command B zu initialisieren , um den Explorer zu öffnen. Und dann klicke ich einfach auf das Client-Verzeichnis. Und hier ist das Root-Verzeichnis. Hier initialisieren wir die package.json-Datei für das Back-End, sie zum Terminal und führen dann Befehl C aus, um den aktuell laufenden Server zu stoppen. Und dann müssen wir den Space Dot Punkt cd cd , um aus dem Verzeichnis des Clients zu treten. Siehst du jetzt, dass wir uns im Stammverzeichnis Portfolio Pro befinden. Was ich hier machen werde, ist Knoten-Paketmanager initialisieren, was MPM-Anforderungen ist. Und natürlich müssen Sie alle Bedingungen akzeptieren. Also werden wir ja, ja. Drücken Sie weiter auf die Eingabetaste. Und ja. Jetzt möchte ich mir den Explorer ansehen. Sie werden es die Paketpunkt-JSON-Datei sehen . Und hier ist es. Doc. Schön, immer noch am Terminal. Jetzt müssen wir die notwendigen Pakete installieren , die am Back-End verwendet werden. Also hier werden wir npm gleichzeitig installieren. Wir müssen auch Hallen installieren und uns nach der Installation Sorgen machen. Ich erkläre dir alles. Und natürlich brauchen wir den Punkt ENV. Wir brauchen auch Experten. Lade mir das Gesetz. Und schließlich brauchen wir einen Lastmonitor, der für den Knoten ist. Also werde ich das Video einfach pausieren damit du es dir ansehen kannst. Für die Installation läuft und am Ende haben Sie sie direkt in der package.json-Datei für das Back-End. Okay, kannst du sehen, dass hier der perfekte ist. Fangen wir jetzt mit gleichzeitig an. Das gleichzeitig ist ein Paket, das mehrere MPM-Skripte gleichzeitig ausführen kann . Und für die Autos. In einem sehr einfachen Tim ist die Ursache ein Mechanismus oder es ermöglicht , den Zugriff auf Ressourcen außerhalb der Domäne zu steuern , oder? Daher würde definitiv die Ursache verwendet werden , um der Anwendung Middleware hinzuzufügen. Nest ist also der Punkt ENV. Dot ENV können Sie Geheimnisse von Ihrem Quellcode trennen. In Ordnung, nehmen Sie zum Beispiel eine E-Commerce-Website und möchten den Quellcode oder mit Ihren Freunden teilen , wie gemeinfrei, Songs wie GitHub, oder? Und Sie möchten nur einen Quellcode mit ihnen sehen, aber Sie möchten Ihren API-Schlüssel nicht für die Zahlungsintegration und vielleicht auch das Passwort für die Datenbank teilen die Zahlungsintegration und vielleicht auch . Alles, was Sie tun müssen, ist, das gesamte Geheimnis in der ENV-Datei zu verstecken Geheimnis in der ENV-Datei und dann die ENV-Datei zu ignorieren. Und wenn Sie die Anwendung auf GitHub bereitstellen möchten. Die verschachtelte Linie sind also die Röntgenstrahlen. Eigentlich ist der Express ein Modul Node.js , das ein einfaches Routing ermöglicht, oder? Und wir haben MLA selbst mit einem Apfelmus bezeichnet, um eine Nachricht direkt an die E-Mail-Box zu senden. Und schließlich ist der Knoten Ammoniak groß, der der bekannte Knoten ist. Was die normannischen Türen sind, um die Anwendung zu beobachten , wenn sich Änderungen an der Anwendung ergeben, wird es helfen, die Anwendung von dramatisch neu zu starten . Also genau hier auf dem package.json, vermasselt es. Also hier werden wir die Skripte einrichten. Alles klar, also bitte ein Komma hier, ich denke, sagt das Problem. Und wir werden uns Sorgen machen. Ich erkläre dir alles. Also müssen wir den Code nur sehr schnell eingeben. Mpm, start, Präfix. Kunde. Denken Sie immer daran, ein Koma hinzuzufügen, damit Sie sich nicht in Schwierigkeiten stürzen. Die halbe Tiefe. Gleichzeitig. Backslash. Npm, führen Sie die Serverseite der doppelten Anführungszeichen aus und ein weiterer umgekehrter Schrägstrich kommt genau hier. Auch ein weiterer Backslash, MPM, führt Clydes Backslash aus, doppelte Anführungszeichen. Und das Nest besteht darin, Zugang zu Helden zu gewähren , der unsere Anwendung für die Bereitstellung berechnet wird. Jetzt mache ich einfach Kommando B, um Vollpension zu haben . Heroku. Keine Sorge, ich zeige Ihnen, dass wir diesen Code kopieren und einfügen mussten , damit Sie sich nicht auch in Schwierigkeiten versetzen. War die BWT MPM Unterstrich-Produktion. Falsch? Dann gehe ich zum npm install-Präfix-Client , MPM Run angesehen. Stimmt's? Also kenne ich den Materialordner nicht. Materialien. Öffne den Code Hale-Bopp. Also scrolle ich nach unten. Okay, also hier ist das Back-End-Skript. Es muss so kopiert werden. Komm her, wisch es ab, klebe ein. Genau das solltest du tun. Verschiedene Einheiten, um hier sehr vorsichtig zu sein , denn wenn du einen Fehler machst, Hey, ehrlich gesagt, das wird dich das machen, ich will das nicht sagen. Speichern Sie dieses Projekt. Eigentlich, was ich der Bitte erklären werde , ist das gleichzeitig, welches ist das div, oder? Wenn wir npm run dev machen, wird dies dazu beitragen, das Frontend und das Backend zu stoppen. Alles klar Leute, das ist jetzt oft für diesen Vortrag. In der nächsten Vorlesung werden wir den Sparer erstellen. Kümmere dich. 44. Den Server erstellen: Beginnen wir mit dem Erstellen eines Sparers Befehl B, um den Explorer zu öffnen. Also hier erstellen wir das Servermodul hier im Stammverzeichnis. Aber ich werde meine Maus auf diese Datei bewegen, dieses Symbol, hoffe du kannst es sehen. Sie müssen also nur auf diese Akte schweben, was die neue Landwirtschaft sehen kann. Klicke darauf und dann benennen wir es server.js. Ein weiterer schwebt auf dieses Symbol, welches die neue Datei ist. Klicken Sie darauf, und dann werden wir dot ENV haben. Perfekt. Jetzt müssen wir nur noch das Geheimnis einer hier in der Dot-ENV-Datei hier im Ordner Materialien aufbewahren. Hier sind die beiden Hauptgeheimnisse , die wir in diesem Kurs verbergen wollen. Ich muss nur B anrufen, zurück zu VS gehen, gut, hier eingefügt, sie in die server.js retten. Jetzt werden wir verlangen, dass unsere Pakete unseren Server mit dem Express JS ausführen, erfordern dot ENV, dot config. Und hier haben wir zufällig eine Konstante, nenne es ausdrücklich erforderlich. Wir wollen Röntgenaufnahmen benötigen. Das bedeutet also einfach, dass wir ausgedrückt aus dem Express-Modul importieren . Lass mich dir zeigen, was wir gerade gemacht haben. Von hier aus verlangen wir nur das aus dem Extras Modul ausgedrückte und speichern es dann in diesen Konstanten hier drüben. Die einfachsten Daten. Und wir müssen das Gleiche für die Sache tun. Entschuldigen Sie, das müssen Konstanten sein , die erfordern, dass wir die Ursache benötigen. Also hier mache ich Röntgenaufnahmen. Lassen Sie mich Ihnen also in einem GFP erklären, diese rufen die Express-Funktion auf und stellen eine neue Anwendung in diese Variable ein. Verstehst du was ich meine? Dies ruft also eine neue Express-Funktion auf und legt dann eine neue Express-Anwendung in diese Variable ein. Jetzt müssen wir der App sagen, dass sie Anrufe als Middleware verwenden soll. Oben DOT, benutze Express-, Dot-, JSON-, app.use-Aufrufe. Also all das werde ich hier einfach machen und die Middleware erstellen . Jetzt erstellen wir die Ports. Prozesspunkt ENV, Punktplott. Wir müssen den Port 5000 benutzen. Und ich werde Dot Leasing machen, wir müssen uns eine Konsole ohne Port anhören, den Pot protokollieren, den wir hören. Ich werde Server sagen, Port 5000 hören, speichern. Also direkt am Terminal werde ich npm run serve machen. Duc. Profit-Jungs sagt, dass mehrere Port 5000 hören und der Knoten eins einwandfrei liest. Alles coole Leute. Also lass mich dir zeigen, was die Türen eines Ihn sind. Nehmen wir an, ich möchte nur Port 5000 hören . Also werde ich sparen. Wenn ich speichere, wenn Sie die Konsole überprüfen, werden Sie feststellen, dass es aufgrund von Änderungen neu gestartet wird und dann den Knoten server.js startet. Die NADH-Mutter hilft also, die Anwendung jederzeit neu zu starten, wenn Sie Änderungen an Ihrem Quellcode vornehmen. Dies bedeutet also, dass Sie nicht mehr hierher kommen müssen und npm Server ausführen müssen. Das ist vorerst alles für diese Vorlesung. Wir sehen uns in der nächsten Vorlesung. Kümmere dich. 45. ContactRoute: Nachdem wir den Server in der vorherigen Vorlesung erstellt haben , fahren wir schnell mit der Kontaktroute fort. Genau hier auf VS Code. Alles was ich jetzt tun werde, ist zum Explorer zu navigieren. Also hier drüben muss ich nur den Kunden schließen. Alles klar, jetzt sind wir hier im Stammverzeichnis. Direkt im Stammverzeichnis erstellen wir ein Paket namens route. Klicken Sie hier, wo sich meine Maus auf einem neuen Ordner befindet. Wir werden diese Ordnerroute benennen. Direkt in diesem Ordner erstellen wir das Routenmodul. Rechtsklicken Sie auf die Routen. Hier eine neue Datei, dot js. Also hier benötige ich einen Express-Router. Und das Nest ist der Knoten Mailer. Konstante. Lade mir das Gesetz. Benötige NADH mich Le Havre, oder? Um den Knoten Mailer zu implementieren, sind drei Schritte erforderlich. Schritt eins ist, dass wir unsere Objekte transportieren müssen. Schritt zwei: Wir müssen das Objekt für die Mailing-Optionen festlegen. Und Schritt drei, wir müssen die Nachricht mit der Send-Mail-Methode übermitteln. Bevor wir also mit diesen Waffenstufen fortfahren, müssen wir nur die Route erstellen. Jetzt mache ich Router-Punkt-Posts, einzigen Slash-Kontakt. Und hier müssen wir in die Pyramidalis-Anfrage - und Antworttechnik eingehen, denn es tauschen Sie die Parameter nicht aus, okay, also wenn Sie hier antworten und hier anfragen, können Sie es nicht für Sie arbeiten. Stellen Sie es auf Pfeilfunktion, Befehl B, um Vollpension zu haben. Hier müssen wir also die Daten aus dem Formular abrufen, das aus dem Körper stammt. Jetzt haben wir einen Punktkörper mit variabler Datenanforderung da wir eine Anfrage von der Firma stellen , die wir zuvor in den vorherigen Vorträgen erstellt haben . Wenn die Feeds MTU sind, möchten wir eine Nachricht an den Client zurücksenden. Und ich glaube, wir haben das umgesetzt. Und der Kontakt J ist so häufig P, kontaktiere mich. Es ist also genau das Gleiche, was wir tun werden. Was ist ein paar Änderungen. Kopieren Sie die Zeilen 51 und gehen Sie dann zurück, um Route zu führen, fügen Sie ein. Schließe die geschweifte Klammer. Genau hier wird es also Datenpunktname, Punktlänge sein , das sind diese Daten genau hier. Variable Daten. Das Gleiche gilt für alle von ihnen. Datenpunkt, Punktlänge und dann Punktlänge der Nachricht data.dat. Schön. Wenn sie also gleich 0 sind, was bedeutet, wenn nichts in den Feldern ist und Sie auf Heiliges Bootfahren klicken, müssen wir den Antwortpunkt JSON zurückgeben. ein leeres Objekt genommen, und ich mache MSG für die Nachricht. Also werden wir hier tun, bitte fühlen Sie sich, sind die Felder wunderschön? Also lasst uns mit Schritt eins weitermachen. Kann mich also jemand daran erinnern, was ist Schritt eins? Haha, richtig, keine Sorge, ich werde dir helfen. Schritt eins besteht darin, diesen Transporter oder Objekt zu erstellen. Lassen Sie SMTP-Transporter, laden Sie mich le dot Transporter erstellen. Jetzt nehmen wir ihm ein leeres Objekt. Genau hier. Wir werden den Service haben und es wird Gmail sein. Und bitte, du musst hier ein Komma platzieren. Die Connect-Ports. Lass es uns für 65 Komma schaffen. Und jetzt müssen wir die Authentifizierung implementieren. Der Benutzer. Jetzt müssen Sie Ihre E-Mail angeben. Tetanus. Dies ist meine persönliche E-Mail. Stellen Sie also sicher, dass Sie in Ihrer E-Mail richtig im einzigen Zitat Komma reparieren . Und hier musst du auch dein Passwort festlegen. Nehmen wir an, mein Passwort lautet ABC bis 23. Sie also bitte sicher, dass die E-Mail und das Passwort korrekt sind. Wenn Sie es nicht richtig haben, funktioniert es möglicherweise nicht für Sie. Semester online ist die Definition der Mail-In-Option bedeutet. Stellen Sie es erneut auf leeres Objekt ein. Also hier werden wir von Spaltendaten-Punkt-E-Mail-Tool haben . Dies ist also die E-Mail Ihres Kunden, wie sie von der E-Mail Ihres Kunden an Ihre eigene persönliche E-Mail kommt , nämlich die Admin-E-Mail. Also muss ich diese einfach kopieren. Fügen Sie die Betreff-Nachricht aus dem Dollarzeichen hier ein, öffnen und schließen Sie die geschweifte Klammer und dann Datenpunktname, öffnen und schließen Sie die geschweifte Klammer und dann Datenpunktname, Komma, HTML, zurück. In Ordnung, also solltest du hier nicht verwirrt sein. Dieses Back-Tick öffnet sich hier und es endet hier. Ich möchte diese nur aus Gründen der Klarheit tun , damit jeder mitmachen kann. Jetzt werden wir h3 haben. Nahaufnahme dieser Geschichte eines hier. Informationen. Außerhalb der Geschichte. Wir werden ein UL-Tag haben. Und hier haben wir ein LI-Tag. Jetzt werden wir das Hauptteil von Daten, Punktnamen, hervorheben, duplizieren. Und wir werden jetzt die E-Mail, Data Dot-E-Mail haben . Schließlich werden wir es für eine Nachricht haben. Dafür müssen wir uns jedoch außerhalb des UL-Tags und der Techniken bewegen . Wir sind immer noch im HTML genau hier. Wir werden ein h3 haben. Was wir also im Grunde tun, ist, dass wir das Layout entwerfen , für das die Nachricht richtig in Ihrem Posteingang annehmen wird , oder? Also erstellen wir das Layout für die Nachricht. So einfach ist das. Nachricht. H3, habe ein p-Tag und schließe dann das p-Tag. Direkt zwischen dem Tag. Wir werden ein Dollarzeichen haben, lockige Klammer öffnen und schließen data.me, oder? Das ist also alles für die Mailing-Optionen. Gleich danach, unsere Mailing-Objekte, müssen wir die Nachricht mit der gleichen E-Mail-Methode senden. Alles, was ich hier tun werde, ist SMTP-Transporter Dot Mail zu senden, die Essensoptionen zu nehmen und sie dann auf unsere Funktion einzustellen. Diese könnten also manchmal einen Fehler auslösen. Also müssen wir es in einen Versuchsblock einpacken. Also hier sollten wir den Fehler auch aufnehmen. Okay? Richtig, und ein Kartenblock, wir werden den Antwortpunkt zurückgeben. Wenn also der response.status ein Kern-JSON mit 500 Punkten ist, werden wir die Nachricht weitergeben. Hier. Wir werden eine Nachricht machen. Der IIS-Serverfehler. Und auch hier drüben im Versuchsblock. Wieder noch einmal. Wenn response.status 400 ist, werden wir das tun. Bitte fühlen und hören Sie die Antwort. Der Punktstatus ist 200. Das ist also ein Erfolg, der die Botschaft ist. Also danke für das Schöne, oder? Was müssen wir also exportieren, um dieses Modul zu exportieren? Modulpunkt-Exporte, Router. Schön. Alles klar, bevor wir diesen Vortrag abschließen, müssen wir hier eine Sache machen. Kannst du diese Kolonieklammer sehen? Das ist es hier drüben. Das sollte also nicht sein. Alles, was wir jetzt tun werden, ist Highlights der Vermasselung. Hier, ist es? Also sollte es hier enden. Befehl V zum Einfügen. Siehst du, weißt du, alles cool. Schnell, Gehen wir zu den gleichen Ideen und importieren dieses Modul. Lass es uns gleich hier machen. Stimmt's? Also das ist vorerst alles für diesen Vortrag. Wir sehen uns in der nächsten Vorlesung. 46. Gmail konfigurieren: Konfigurieren wir die Anwendung in der Hälfte der E-Mail und arbeiten sie an server.js. Genau hier. Wir müssen die Route heizen. Jetzt. Ich mache Punkte, benutze Karma. Kontaktroute. Du reformierst sicher. Öffnen Sie nun die package.json-Datei direkt im Client-Verzeichnis für das Frontend. Also mache ich Command P package.json. Und dann ist es hier, dieser Typ hier im Frontend, das ist das Client-Verzeichnis. Nachdem ich dieses Heroin angetan habe. Scrolle nach unten. Hier ist der Proxy, Highlight. Kopieren Sie Heroin in den VS-Code und fügen Sie es dann hier ein. Sparen Sie. In Ordnung, also wenn Ihre Anwendung nicht bereits läuft, werde ich jetzt Control C ausführen, um den Server zu stoppen. Also muss ich es noch einmal von vorne anfangen , damit jeder mitmachen kann. Jetzt werde ich npm run dev machen. Natürlich solltest du wissen, dass dies das Frontend und Oswald das Backend starten wird . Versuchen wir es, indem wir auf das gleiche in DOC gekaufte klicken , das besagt, dass Sie die Felder sind. Lassen Sie mich Sie schnell hier in VS Code zeigen und dann kontaktieren Sie mich EGS. Hier hatten wir die Bedingung. Hier ist es. Wenn die Felder also leer sind, müssen wir diese Nachricht vom Backend erhalten und im Frontend anzeigen. Lassen Sie mich Ihnen im Backend zeigen, wo wir diese Nachricht tatsächlich werfen. Öffnen Sie die Kontaktroute. Und warum ist es? Das Frontend bekommt diese Nachricht hier drüben. Jetzt, wenn wir es erfolgreich machen, werden wir uns diese Nachricht schnappen und sie dann auch dem Frontend zeigen. Jetzt Heroin zum Browser, es sei denn die E-Mail und die Funktionalität auschecken. Bevor wir also die Festland-Funktionalität ausprobieren, müssen wir hier etwas tun, das uns helfen könnte, diese Heron in den Browser zu kopieren und ihn dann genau hier einzufügen. Also hier musst du es einfach anziehen. Jetzt lass es mich ausschalten. Kannst du ja sehen, wird es standardmäßig so sein wenn du das noch nicht getan hast. Wenn es also so ist, musst du es einfach anziehen. Und genau das müssen Sie für Gmail konfigurieren. Gehen Sie weiter zum Portfolio nach oben. Und hier drüben. Ich lade einfach neu. Dann probieren wir es mal aus. Okay, bevor wir das machen, muss ich dir meine E-Mail richtig zeigen. Übersichtlichkeit halber. Kannst du jetzt unser Recht sehen, Harold bis zum Ende hier werde ich ein gmail.com haben. Okay, versuchen wir es also mal, indem wir auf dasselbe Bootfahren klicken. Warte drauf. Dankeschön für die Kontaktaufnahme mit einem Dunst bedeutet, dass alles glücklicherweise in Ordnung ist wie vermutet, Heroin für Gmail. Und lass mich es dir zeigen. Hab Recht. Also hier ist es. Der Name ist ein Do Baba, die E-Mail lautet adobe.com und dann ist hier die Nachricht. Alles ist cool Jungs jemals das Team arbeitet wie erwartet, aber etwas stimmt nicht, also sollten diese nicht da sein. Vielleicht haben wir also ein paar Tipo an der Kontaktroute, also würden wir das später überprüfen. Jetzt lass mich dir was zeigen. Wie Sie hier sehen können, werden Sie feststellen, dass das Toastfett, das zu rechtfertigen ist, nicht auftaucht. Heroin zu VS-Code, sofern nicht implementiert. Gehe weiter zur Corticobulbar. Und hier drüben haben wir eine niedrige Kopie, diesen Import. Kopieren Sie, reagieren Sie weiter, um Harem auf VS Code common P zu rechtfertigen und setzen Sie dann für unsere app.js ein. Und hier drüben müssen wir nur diesen Import einfügen und dann den Toastbehälter einpacken . Was ist das selbstschließende Tag? Sparen Sie. Und schauen wir es uns noch einmal an. Kannst du das sehen? Ist das nicht wunderschön? Das ist in der Tat erstaunlich. Mir gefällt es. Versuchen wir es also noch einmal, jetzt klicke ich auf die Portierung senden. Warte drauf. Siehst du das hier, wenn die Überreaktionen zu rechtfertigen in der oberen rechten Ecke des Bildschirms positioniert sind. Perfekt. Alles funktioniert wie erwartet. Lasst uns also weiter zur Gmail gehen. Stimmt's? Wir müssen sehen, okay, hier ist die neue Botschaft. Der Name ist John und dann lautet die E-Mail D Dmu.com. Hier ist die Botschaft. Alles klar, also im Moment möchte ich nur, dass du die ignorierst, okay? Definitiv, oder wir werden es in den nächsten Vorträgen beheben. Das ist alles von unserer ersten Vorlesung. Wir sehen uns in der nächsten Vorlesung. Bleiben Sie konzentriert und passen Sie auf. 47. Fehler Fixing: In Ordnung, also hier drüben werden Sie feststellen, dass es Nachricht vom Datenpunktnamen steht. Offensichtlich stimmt etwas nicht, wo wir zum VS-Code zurückkehren und das schnell beheben müssen. Heroin zu VS-Code. Okay. Sie müssen also nur auf die Kontaktroute fahren. Entschuldigen Sie, ich muss es nochmal überprüfen. Sagt Nachricht vom Datenpunktnamen. Okay. Dies sollte also in den E-Mail-Optionen enthalten sein. Wir müssen die Salz-Nachricht aus dem Datenpunktnamen überprüfen. Das sollte korrekt sein. Okay Leute, ich verstehe, jetzt müssen wir die geschweiften Klammern benutzen k. Ich denke, das ist der richtige Name. Speichern Sie sie im Browser, unrealistisch und raus. Gehe zurück zum Portfolio, hoch, lade neu. Probieren wir es noch einmal aus. Aber der Name des Kunden ist Joe. Die E-Mail geht davon aus, dass es Joe auf gmail.com ist. Joe, ich möchte nur sagen, hallo, ich liebe dein Portfolio-Projekt. Klicken Sie auf den Sendeport in, wenn Sie ihn nicht auschecken. Schön. Kannst du das sehen? Mein Posteingang und schauen wir es uns an. Wir müssen nachladen. Werfen Sie einen Blick darauf. Kannst du eine Nachricht von Joe sehen? Perfekt, ich liebe es. Jetzt funktioniert alles wie erwartet. Ozon. Dies ist in der Tat ein klassisches Portfolio, derzeit Portfolio steigt. Und lass mich dir noch eine Sache zeigen. Wenn das Formular erfolgreich abgeschickt wurde, möchten wir die Felder löschen, oder? Was bedeutet, dass wir die Felder auf ihren Standardstatus setzen möchten . Also Heron zu VS Code, es sei denn, das wöchentlich zu tun. Nehmen Sie Kontakt mit mir auf VGS. Okay, richtig, in dieser Funktion hier unten , wo wir das SOC-Sex eines Heu haben. Also hier setzen wir die Felder auf ihre Standardstatussätze Nim. Wir müssen den Namen auf eine leere Zeichenfolge setzen , zweimal dupliziert markieren. Und dann müssen wir diese hier ändern, um eine E-Mail zu senden. Und schließlich müssen wir es für die Botschaft tun. Sicher. Lass es uns noch einmal herausnehmen. Relu k. Versuchen wir dieses Mal wieder zu genießen, Joe. Und er wird joe.com sein. Kannst du „Nein“ sehen. Und wenn die Nachricht lautet, werden Subtexte aktualisiert. Also geh weiter zum Posteingang. Hier ist die neue Botschaft von job. Momentan hoch. Schön, ich mag es. Also Freunde. Dies ist das Ende des gesamten Projekts. Lass hoffen, dass es dir gefällt. 48. Bereinige den Code und Vorbereitung: Der letzte Schritt, bevor wir Ihre Anwendung auf Heroku bereitstellen. Heroku VS-Code, es sei denn, nehmen Sie die notwendigen Änderungen vor. das Testimonial, Testimonial JS geöffnet und hat es. In Ordnung, Harold auf dem Desktop, auf dem sich das Projekt befindet. Und hier drüben habe ich es in der oberen rechten Ecke des Bildschirms, Portfolio Pro, welches das Stammverzeichnis ist oder der Client öffentlich geöffnet wurde. Genau hier. Ich kopiere das Paket, IMG. Kopieren Sie, gehen Sie zurück, gehen Sie zum SRC und fügen Sie es dann hier direkt in das SRC ein. Geh zurück, öffne die Öffentlichkeit noch einmal. Schrotte Heroin in den Browser und lass uns sehen, ob es neu geladen wird. Scrollen Sie nach unten zum Testimonial n. Hier ist, was Sie auf dem Bildschirm sehen werden , als sich Sorgen machen, wir werden dies in einem GP-Heroin in VS-Code reparieren lassen . Okay, also vermasseln Sie es und lassen Sie mich es Ihnen hier zeigen, wir werden die Bilder importieren. Okay, also werde ich importieren, entschuldigen Sie, lass es uns als RC IMG öffnen lassen. Dies sind die verschiedenen Bilder, die für die Testimonialkomponente relevant sind. Wir werden es importieren. Schauen wir uns die Testimonials an. Hier haben wir den Lady Dot PNG, nenne es P vermasselt. Und ich werde dieses Bild Lady von einmal den Kopf nennen , SRC Slash IMG. Das ist der Ammoniak-Schrägstrich Lady Dot PNG. Sparen Sie. Scrollen Sie zum ersten Testimonial nach unten und hasst es. Also was ich in diesem SRC-Tag richtig machen werde, lösche es ab und öffne und schließe dann die geschweifte Klammer. Wir müssen das Bild aufnehmen, Lady. Sicher, okay. Heroin in den Browser, laden Sie neu. Kannst du sehen, dass dies das erste Testimonial ist. Platz. Kann sehen, dass das Bild erschienen ist. Geh zurück. Jetzt müssen wir es für den Rest der Testimonials machen. Und hier drüben haben wir das Bild, myc dot PNG zu sein, Highlight zu schnappen, viermal 1234 dupliziert. Okay, also hier müssen wir Mike Dot PNG importieren. Scrollen Sie das erste Zeugnis nach unten, den Kreis und die Fed. Entschuldigen Sie mich. Okay, hier ist die Fed. Auch Lady Dot-Dot-Dot-Dot UND okay. Und wir haben auch Man Dot PNG nach oben scrollen. Also muss ich nur alle Dateien oder Bilder importieren main.py UND scrollen zum allerletzten Mal nach unten. Lass mich es dir zeigen. Die FUTA ist also vermasselt. Wir müssen nur alle Bilder importieren. Wisch das ab. Coole Leute. Damit sind wir bereit zu gehen. Also hier drüben geben wir ihm einen Namen. Das sollte mein Ende sein. Diese sollten sein und das sollte Form sein. Alles klar Leute, das ist alles für den Import. Also müssen wir diese Eingaben konsumieren. Okay? Das ist es, was ein Mikrofon direkt im SRC das abwischt und die lockige Klammer schließt und ihn dann Mike mitnimmt. Es ist so einfach wie das. Und auch wir müssen das Gleiche hier tun. Und das ist wieder für die Lady. Schließlich wird für den kurvigen Hintergrund des Browsers und der Kälte alles als Zuschauer erkannt. Das ist alles vorerst. In der nächsten Vorlesung werden wir dieses Projekt auf Hiroko einsetzen. Kümmere dich. 49. Bereitstellen: Alles klar, es ist Zeit für die Spielkameraden. Und natürlich sollten Sie Ihre Bewerbung am Ende dieser Vorlesung live im Internet haben. Klingt gut, wunderschön. Heron zu VS-Code, wenn nicht fortfahren, öffnen Sie die server.js. Und wenn ich hier bin, werden wir ein statisches Asset erstellen , damit Heroku unsere Dateien ablegen kann. Und wir werden es hier machen. Wir werden es aufgrund der Bedingung tun. Wenn Prozesspunkte, ENV, Punkt, laden Sie die Punktzahl, Neid und ich zeigen Ihnen schnell als Heroin in die ENV-Datei. Also hier ist es. Zurück zum Server. Wenn dies also die gleiche Produktion ist, was bedeutet, wenn wir die Anwendung bereitstellen. Das sind es, was wir tun werden. Unser Förster, wir müssen einen Ordner erstellen. Und ich werde ABC Dot riesig machen. Und natürlich wird dies eine Middleware-Funktion sein. Expresspunkt hat genau hier angefangen, direkt in den Kunden werden wir die schöne Bestellung erstellen. Im Grunde liefert express.static statische Dateien wie HTML, CSS und den Rest von ihnen. Wenn wir den Butte verwenden möchten, möchten wir diese Dateien in der schönen Reihenfolge speichern. Wenn also ein Kunde eine Anfrage stellt oder wir zuerst die index.html senden möchten . Und natürlich sollten Sie wissen, dass die index.html aus der gesamten Anwendung besteht. Abc Dot, geh. Okay, Ecke. Hier werden wir zwei Parameter aufnehmen, Anfragen und Antworten. Und bitte nochmal, tausche die Parameter nicht aus. Lass es so, wie du es heute siehst. Jetzt werden wir Ruhepunkt machen, Datei senden, Pfad, Punktauflösung, Unterstrich, Unterstrich, DIR-Name, der der Verzeichnisname ist, ist der Client, Koma. Und dann haben wir hier das BWT. Und jetzt müssen wir den Indexpunkt HTML ins Visier nehmen. So einfach ist das. Rette sie, oder? Alles ist cool. Jetzt ist die Zeile, sich bei Heroku anzumelden, Heroin im Browser und nach heroku.com zu suchen. Okay, ich bin schon eingeloggt, also muss ich mich nur ausloggen, also fange ich es einfach von vorne an. Genau das werden Sie sehen, wenn Sie ein Konto bei Heroku haben. Alles, was sehen, wenn Sie ein Konto bei Heroku haben. Alles, Sie tun müssen, ist die E-Mail-Adresse und Ihr Passwort einzugeben . Wenn Sie jedoch kein Konto haben, müssen Sie nur eines für sich selbst erstellen. das zu tun, komm hier runter und klicke dann auf den Anmeldeknopf. Wenn Sie auf die Anmeldeschaltfläche klicken, gelangen Sie zu einer Seite, auf der Sie die erforderlichen Details eingeben und dann Ihr Konto eröffnet haben. Wenn Sie also bereits ein Konto haben, bleibe ich einfach in meinem Google Mail-Konto, Google Mail und klicke dann auf die Login-Bonding. Okay, wenn Sie sich den linken Bildschirmrand ansehen, sehen Sie einige der Projekte , die ich auf Heroku bereitgestellt habe. Hier. Können Sie sehen, machen Sie sich keine Sorgen, wenn Sie neu bei Heroku sind und noch keine Anwendung bereitgestellt haben , ist das Stück leer. Also will ich nicht in Panik geraten. Und auf der rechten Seite des Bildschirms befindet sich eine kurze Beschreibung dieser Anwendung. Siehst du das hier? Die Beschreibung der Anwendungen stimmt? Um also eine neue Anwendung zu erstellen, müssen Sie nur mittags klicken, Okay, und erstellen Sie dann eine neue App. So einfach ist das. Und hier werden wir ihm einen Namen geben. Portfolio Pro. Sagt, dass Portfolio Pro nicht verfügbar ist. Das bedeutet, dass dieser Name bereits von jemand anderem gewählt wird. Also, okay. Also werden wir hier haben und Portfolio machen. In Ordnung, also ist dieser Name verfügbar. Wir müssen diesen Namen benutzen ist nett, aber ja, also müssen wir ihn nutzen. Und hier drüben müssen Sie wählen, wo Sie sich befinden, entweder in den USA oder Europa. Also werde ich es als USA belassen. Und klicken Sie dann auf die Registerkarte Erstellen. Scrollen Sie nach unten und lassen Sie mich zeigen , dass Sie die Anwendung auf Heroku bereitgestellt haben. Wir werden alle diese Anweisungen verwenden, Heroin zu VS-Code, es sei denn, Sie fahren damit fort. Hier drüben auf VS-Code, das erste Mal, dass wir den Befehl B initialisieren Natürlich sollte er den Explorer auftauchen. Also öffne die Kunden auf. Lass mich es dir gleich hier drin zeigen. Du wirst die Guids hier sehen . Siehst du das? Aber für einige von Ihnen müssen Sie möglicherweise nicht dorthin kommen. Alles, was Sie tun müssen, ist in der unteren linken Ecke des Bildschirms hierher zu kommen . Und du siehst das Einstellungssymbol hier drüben. Klicken Sie hier auf zwei Einstellungen. Direkt in der Sandbox suchen wir nach Faust ausschließen. Und das sind die ausgeschlossenen Akten. Wenn Sie also nicht im Client-Verzeichnis vorhanden sind, sollte es hier sein. Okay, also musst du nur danach suchen und dann diesen Button hier drüben drücken, um es aus der SQLite-Datei zu entfernen. Alles, was Sie tun müssen, ist hier auf dieses Symbol zu klicken. Stimmt's? Also werde ich sie einfach nach dem ganzen Kampf schließen. Es tut mir so leid, wir werden es und das Client-Verzeichnis nicht verwenden. Okay, hier sind die Guids. Rechtsklick, schrott. Schließen Sie das Verzeichnis des Clients und verlassen Sie dann das Stammverzeichnis Portfolio Pro. Bitte stellen Sie sicher, dass Sie sich außerhalb dieses Verzeichnis-Clients befinden . Und hier sind wir im Stammverzeichnis. Kann ein Determiner sein und dann sehen. Wir befinden uns also im Root-Verzeichnis-Portfolio Pro. Was ich jetzt tun werde, ist das Gate und die Ernten im Root-Verzeichnis zu initialisieren . Steigt drin. Kannst du das sehen? Hitze auf der Eingabetaste auf Ihrer Tastatur? Und hier ist das Wohl eines Haares im Wurzelverzeichnis. Die Absicht hier ist es also, all dies in das Tor einzufügen. Okay, lass uns das schnell machen. Wieder Heroin ins Terminal. Jetzt werden wir Git machen, Space Dot hinzufügen. Kannst du sehen, was ich auf dem Bildschirm gemacht habe? Bekommt Platz, seltsam, Raum, nicht. Und das wird alle Dateien in das Gate einfügen. Das Nest und die Linie sollen diese Änderungen übernehmen. Ein Heroku, Heroku. Hier müssen wir das Git-Commit kopieren. Und hier ist es. Kopiere sie in VS-Code. Fügen Sie es direkt im Terminal ein. Schon wieder. Geh zurück zu hier. Wir müssen diese Anweisung kopieren. Kopieren. Komm her, füge ein. Alles klar, also wieder Heroin zu Heroku. Jetzt müssen wir die Anwendung auf Heroku schieben , diesen Befehl kopieren, Heroin in VS-Code eingeben, direkt in das Terminal einfügen und dann die Eingabetaste auf Ihrer Tastatur drücken. Dies wird die Anwendung in die Höhe schießen und auf Heroku bereitgestellt. Und dieser Butte wird eine Weile dauern. Also muss ich die Aufnahme einfach pausieren. Die Anwendung wurde erfolgreich bereitgestellt. Jetzt können Sie diese Anwendung VS-Code auf Heroku öffnen und die Anwendung öffnen. Wenn du es also auf VSCode machen willst, musst du nur Heroku tun. Und das wird das Projektleben auf dem Heroku-Server starten . Warten wir drauf. Bis vorher. Das ist in der Tat erstaunlich. Mir gefällt es. Die Anwendung ist live im Internet. Stimmt's? Ich liebe es. Lassen Sie uns es schnell über MEINEN Lebenslauf herausnehmen. Teste Ammoniak und kontaktiere mich. Schön, ich liebe es. Probieren wir also die Festland-Funktionalität aus. Zum 41. Mal stellen Sie diese Anwendung auf Heroku bereit und die E-Mail wird nicht funktionieren. Weißt du warum? Einfach weil Sie Zugriff auf die Heroku-Maschine für Google Mail geben müssen, Heroin auf den Code, wie Strom die Materialien geöffnet hat. Könnte uns helfen nach unten zu scrollen. Und hier ist es. Geben Sie Heroku Rechner Zugriff auf Ihr Google Mail. Kopieren Sie diesen Link hier in den Browser. Und hey, ich muss nur einfügen. Alles, was Sie tun müssen, ist, auf die Schaltfläche Weiter hier unten in die Anwendung zu klicken die Schaltfläche Weiter hier unten und sie uns anzusehen. Portfolio. Also wird der VM-Name Joe Gmail sein. Gmail.com. Und Freude will einfach nur Hallo sagen. Hi. Klicken Sie auf die Schaltfläche Senden. Los geht's. Kannst du sehen , dass alles wie erwartet funktioniert? Schauen wir es uns im Gmail an. Also Heron in den Posteingang. Siehst du hier ist die neue Nachricht von Joe. Und Joe sagt, hallo David. Dies ist der Name des Absenders, die E-Mail des Absenders. Und diese Botschaft kommt von Joe. Ist das nicht wunderschön? Klassisch? Nehmen wir ein Atom-Mobilplattformen. Siehst du das? Alles funktioniert einwandfrei? Und natürlich ist dies bereits auf dem Lebensretter eingesetzt. Sie können Ihr Telefon benutzen, um es zu öffnen und zu überprüfen. Perfekt. Dies ist in der Tat ein klassisches Portfolioprojekt. Dies ist jetzt oft für diese Vorlesung. Und in der nächsten Vorlesung werden wir den SAAS-Code an GitHub weiterleiten. Wir sehen uns in der nächsten Vorlesung. Kümmere dich. 50. Bereitstellen: Alles klar, also lasst uns das Projekt schieben und Heron schnell zum Browser bringen. Dann musst du hier einfach github.com machen. Okay, Nett. Wenn Sie also kein Konto bei GitHub haben, müssen Sie lediglich auf Registrieren klicken, die erforderlichen Details eingeben und Ihr Konto einrichten lassen. Also habe ich schon ein Konto. Ich muss nur eine unterschreiben und hier gebe ich meine E-Mail an. Hier ist meine E-Mail und mein Passwort. Dann ist das Signieren von Bone hier mein GitHub-Konto. Wenn Sie sich die linke Seite des Bildschirms ansehen, sehen Sie die verschiedenen Projekte, die ich auf GitHub bereitgestellt habe. Und hier v. Also, wenn Sie GitHub zum ersten Mal benutzen, haben Sie vielleicht nichts da. Um ein neues Projekt zu erstellen, klicken Sie auf dieses Symbol rechts oben auf dem Bildschirm. Dieses Plus-Symbol, oder? Hey, siehst du? Und dann neues Repository. Wir müssen den Namen des Repositorys angeben. Portfolio-Profi. Also hier müssen wir die Beschreibung angeben, aber das ist optional, aber ich rate Ihnen, ihr immer eine Beschreibung zu geben. Cool. Scrolle nach unten. Klicken Sie auf Repository erstellen. In Ordnung, jetzt werden wir diesen Anweisungen folgen , um das Projekt bereitzustellen. Heroin nach VS-Code. Kommen Sie zu sehen und stellen Sie bitte sicher, dass Sie sich im Stammverzeichnis befinden. So wichtig. Und okay, lass uns das schließen. Wir brauchen das nicht mehr. Also muss ich einfach noch mal schrubben. Schreiber. Hier im Root-Verzeichnis müssen wir das neue Gate initialisieren. Also hier werde ich Gutes darin tun. Und hey, ist es nach der Initialisierung des Gates, was müssen wir sonst noch tun? Kann mir jemand das sagen? Okay, mach dir keine Sorgen, ich helfe dir raus. Die nächste Zeile besteht darin, die Dateien in das Gate einzufügen. All diese Dateien hier, wir werden sie ins Gate einfügen. Also um das zu tun, okay. Lass mich dich verlassen, damit du das schaffst. Probieren Sie es aus. Stimmt's? Man muss einfach nur Platz bekommen, Punkte. Nimm es raus. Halte dich nicht an Heroku fest, tut mir leid, Heroin um Rava zu holen. Und hier drüben müssen wir diesen Befehl kopieren. Und natürlich wird das Fest Commit sein. Colby. Komm runter zum Terminal, füge es erneut ein. Aber um zu kommen, müssen wir diesen Befehl auch kopieren. Kopiere diese Anweisung hier drüben. Komm zum Terminal, füge ein, drücke die Eingabetaste. Und schließlich müssen wir das Projekt drängen , um Hop zu bekommen, zurück. Und jetzt müssen wir das einfach kopieren. Kopieren. Also müssen wir hier einige Änderungen vornehmen. Er wurde in den Schlüssel zerschlagen, um die Schusswaffe zu bekommen. Okay, also ist die Operation erfolgreich. Wir müssen es uns auf GitHub ansehen, Harold zu GitHub. Alles, was wir gerade tun müssen, ist neu zu laden. Werfen Sie einen Blick darauf. Kannst du schön sehen. Jetzt haben wir das Projekt auf GitHub bereitgestellt. Und ich hoffe, du hast in diesem Kurs etwas Schönes gelernt . Hab Recht.