Erste Schritte mit React JS

1. Einführung: Hi da. Mein Name ist Daniel. Ich bin Entwickler hier bei Skillshare und möchte Sie bei den ersten Schritten mit React-Codes begrüßen. Ziel dieses Kurses ist es, Ihnen die benötigten Konzepte und Ideen zu vermitteln, um ReactJS in Ihren Webanwendungen verwenden zu können. Der Kurs ist in zwei Abschnitte aufgeteilt. Der Fundamental-Teil, in dem wir die Bausteine von React, Dinge wie React-Komponenten, Eigenschaften, Status oder wie Sie CSS zum Stylen Ihrer Komponenten verwenden, diskutieren Dinge wie React-Komponenten, Eigenschaften, . Alle Lektionen aus diesem Abschnitt werde ich modular und auf den Punkt zeigen, damit Sie sie später als Referenzen verwenden können. Außerdem gibt es den Beispiel-Teil. Hier werden wir komplexere Beispiele erstellen, die ich in mehreren Lektionen entwickelt habe. Wir werden sehen, wie die grundlegenden Konzepte von React miteinander kombiniert werden , um eine vollständige Anwendung zu erstellen. Ich ermutige Sie, mitzuverfolgen und zu kodieren. Der Kurs enthält mehr als 15 Konzepte und jede Lektion hat ihr Startprojekt und auch ein Endbeispiel dafür, wie diese Dateien am Ende des Unterrichts aussehen sollten. Bevor Sie mit diesem Kurs beginnen, stellen Sie sicher, dass Sie das Dienstprogramm Create React App installiert haben. Die Links sind in der Beschreibung dieses Kurses enthalten. Bitte beachten Sie, dass dies zwar ein Kurs ist, der Ihnen ReactJS vorstellt, Sie jedoch über ein grundlegendes Verständnis von JavaScript, HTML und CSS im Allgemeinen verfügen sollten . Lasst uns anfangen und sehen, wie React dein Leben erleichtern und deine Karriere ankurbeln kann. 2. Deine erste React: Die Startvorlage unserer ersten Übung ist fast leer. Wir haben diese Index-JS-Datei, die nur ein Element und auch eine index.html mit einem leeren Körper enthält . Denken Sie daran, dass ich, um mit unserer Übung zu beginnen, unsere Startvorlage heruntergeladen habe, zippe sie und nachdem wir npm install und npm [unhörbar] ausgeführt haben, sollten wir diese Warnung beim Speichern einer Datei auftauchen lassen. Der Umfang dieser Lektion besteht darin, unsere erste Reakt-Komponente zu erstellen. Dafür muss ich zuerst die index.js hinzufügen, die Importanweisung für React. Es gibt mehrere Möglichkeiten, React-Komponenten zu erstellen. Der klassischste Ansatz ist die Verwendung von JavaScript-Klassen. Dafür erstelle ich zuerst eine Klasse namens First Component. Diese erste Komponente wird React.Component erweitern. Die [unhörbare] Komponente Kakao für React ist die Renderfunktion. React erweitert das dieser Komponente entsprechende Tag auf das, was von der Renderfunktion zurückgegeben wird. In unserem Fall, wenn wir wollen, dass unsere erste Komponente nur ein h1 ist, werde ich hier sagen, dass ich h1 mit dem Text hallo world zurückgeben möchte. Wenn wir jetzt speichern und die Seite aktualisiert wird, erhalten wir immer noch nur diese Warnung als Ausgabe. Dies liegt daran, dass wir nicht darauf hingewiesen haben, wo diese Komponente im HTML platziert werden soll. Lassen Sie uns zuerst diese Warnung verschieben und danach gehe ich hier in die index.html, erstelle ein div mit der ID von root. Dieses neu erstellte Div wird als Container für unsere Komponente dienen. Zurück im Index js werde ich eine neue Impulsanweisung hinzufügen. Dieses Mal für ein ReactDom. ReactDom hat auch eine Renderfunktion, aber diese nimmt eine bestimmte React-Komponente und hängt sie an eine HTML-Notiz an. Wir können ReactDom.Render sagen und als ersten Parameter geben wir unsere erste Komponente an und als zweiten Parameter würden wir das document.getElementById verwenden und wir werden sagen, dass wir diese erste Komponente anhängen möchten die ID von root. Wenn ich jetzt speichere, können wir auf dem Bildschirm unsere erste Reakt-Komponente sehen. Zusammenfassend ist die Idee, dass jede React-Komponente über diese Renderfunktion verfügt und standardmäßig das tatsächliche React-Tag auf das erweitert , was von dieser Zufallsfunktion zurückgegeben wird. 3. Nested: Die Komponente, die wir auf dem Bildschirm haben, ist sehr einfach. Es hat nur einen h1-HTML-Knoten mit etwas Inhalt. Aber wenn wir in dieser Funktion sind, können wir auch komplexere HTML-Strukturen zurückgeben. Zum Beispiel kann ich hier einen Link hinzufügen. Wenn wir sparen, können wir sehen, dass die Dinge wie zuvor funktionieren. Was ist, wenn unsere Komponente noch komplexere Richtung umgestellt werden muss? Nehmen wir an, dass wir nach diesem h1 auch eine horizontale Linie haben wollen. Wenn wir sparen, werden wir feststellen, dass wir einen Fehler bekommen. Dies geschieht, weil die Renderfunktion unter normalen Bedingungen nur ein einzelnes Root-Element zurückgeben sollte. Bei neuen Innovationen gibt es Problemumgehungen für diese Welt. Aber die einfachste Lösung in unserem Fall, es wird nur sein, hier schließendes div hinzuzufügen, das als Wurzelelement dienen wird. Wenn wir sparen, können wir sehen, dass unsere Komponente jetzt auch einen h1, einen Link, aber auch diese horizontale Linie hat , die wir zuvor hinzugefügt haben. Aber die Dinge können noch interessanter werden. Was ist, wenn wir eine andere Komponente benötigen, die aus zwei Komponenten dieses Typs besteht? Am Ende ist eine React-Anwendung eine Sammlung von React-Elementen, die zusammenarbeiten, um ein gemeinsames Ziel zu erreichen. Wir fügen eine neue Komponente hinzu, und diese Komponente wird App heißen. Um es zu erstellen, kopiere ich diese erste Komponente einfach und füge sie ein, ändere ihren Namen in App, und von diesem Ende der Funktion wir dieses leere div zurück. jetzt in ReactDom Wenn wir diese jetzt in ReactDom durch die Komponente ersetzen, die auf App eingestellt und gespeichert werden soll, erhalten wir nur den leeren Bildschirm. Dies passiert natürlich, denn von diesem Ende der Funktion geben wir einfach das leere div zurück. Aber wir können hierher kommen und aus der return-Anweisung auch zwei Komponenten des Typs erste Komponente hinzufügen. Wenn wir sparen, können wir auf dem Bildschirm sehen, dass unsere Anwendung gerade komplexer wurde. Es ist möglich, mit dieser Art von Strukturen so komplex zu werden, wie wir wollen. Wir werden in den zukünftigen Lektionen sehen, wie wir Dinge wie Eigenschaften, Kontext oder Ereignisse verwenden können , um Daten von einer Komponente an eine andere zu senden. 4. JSX und Interpolation: Werfen wir einen Blick darauf, was wir auf dem Bildschirm haben. Wir haben eine JavaScript-Klasse und auch einige andere JavaScript-Objekte, die importiert und verwendet werden. Sie fragen sich vielleicht, selbst wenn wir in einer JavaScript-Datei sind, wie wir HTML-Strukturen wie diese verwenden können? Nun, das liegt daran, dass die Übersyntax namens JSX aus JavaScript XML stammt und von den Leuten von Facebook entwickelt wurde, um mit React verwendet zu werden. Das coole Zeug ist, dass wir diese Art von Mischung zwischen HTML und JavaScript sogar auf einer tieferen Ebene verwenden können . Diese Render-Methode ist am Ende eine JavaScript-Funktion. Mit JSX kann ich also eine JavaScript-Variable in das eigentliche HTML interpolieren. Dies bedeutet, dass ich hier eine Variable namens x mit einem Wert von 10 deklarieren und innerhalb der return-Anweisung einen neuen Absatz hinzufügen kann und innerhalb der return-Anweisung , der etwas wie den Wert von x ist und geschweifte Klammern verwendet Ich gebe hier einfach den Namen der Variablen ein, in unserem Fall x, und wenn ich speichere, sehen wir auf dem Bildschirm, dass wir diesen neuen Absatz haben der aus statischem HTML-Text besteht, aber auch einen Wert bietet, der direkt von JavaScript, diese 10, umso mehr, damit wir Ruby- oder JavaScript-Ausdrücke hier hinzufügen können. Etwas wie das Double von x ist, und hier in geschweiften Klammern kann ich alles hinzufügen, was ich will, solange es ein JavaScript-Ausdruck ist und etwas x multipliziert mit 2 sagen, und wir werden das Double von x ist 20, und das ist nicht auf Zahlen beschränkt. Zum Beispiel kann ich JavaScript-Objekte oder andere Dinge verwenden. Nehmen wir an, wir definieren hier eine neue Variable namens my-string mit dem Wert von React ist cool, und danach gehen Sie in die Return-Anweisung und fügen Sie hier einen neuen Absatz hinzu, der besagt, dass die ersten fünf Zeichen sind und indem Sie geschweifte Klammern verwenden, Ich nehme die meine-Zeichenfolge und sage die Unterzeichenfolge von Null und Fünf und das wird funktionieren, wie wir auf dem Bildschirm sehen können, sind die ersten fünf Zeichen React. Auf diese Weise können wir JSX und Interpolation verwenden um unsere React-Komponenten komplexe Daten anzeigen zu lassen. 5. React: Um zu erklären, welche Reakt-Eigenschaften sind, beginnen wir mit dem aktuellen Beispiel. Wir haben unsere React-App, die zwei Absätze anzeigt. Einer mit dem Inhalt „Hallo, mein Name ist Bob“ und der andere mit dem Inhalt „Hallo, mein Name ist Joe“. Angesichts der Tatsache, dass der Inhalt sehr ähnlich ist, es absolut sinnvoll, diese Redundanz zu beseitigen und eine React-Komponente zu erstellen, die diesen Text anzeigt. So etwas wie die say-hi-Komponente, von ihrer Render-Methode gebe ich einfach einen leeren Absatz mit dem Inhalt „Hallo, mein Name ist“ zurück . Theoretisch sollten wir in der Lage sein, diese beiden Elemente durch etwas wie, sagen wir Hallo Komponente für den ersten Absatz und die zweite Komponente für den zweiten Absatz zu ersetzen sagen wir Hallo Komponente für den ersten Absatz . Aber es gibt hier ein Problem, und das ist die Tatsache, dass der Name für den ersten Absatz Bob ist, und für den zweiten heißt der Name Joe. React-Eigenschaften sind genau das, was HTML [unhörbar] ist. Zum Beispiel, wenn ich hier eine Link-Notiz mit etwas Text nehme. Ich habe dieses href-Attribut , mit dem ich diesen Link auf etwas wie google.com verweisen kann. Ich kann hierher kommen und sagen: okay, der Name für die erste Komponente entspricht Bob, und der Name für die zweite Komponente entspricht Joe. Wir haben dies innerhalb der tatsächlichen, sagen wir hi-Komponente in der Render-Methode, ich erstelle eine neue Konstante namens name, und dieser Name wird gleich mit this.props.name sein. Nachdem dieser Name extrahiert wurde, kann ich dies jetzt durch Interpolation ersetzen, den Namen der Konstante, die ich gerade erstellt habe. Wenn wir jetzt sparen, können wir sehen, dass wir für die erste Komponente „Hallo, mein Name ist Bob“ haben , den Wert, den wir hierher gesendet haben, und für die zweite haben wir : „Hallo, mein Name ist Joe“. Alles, was in diesen Eigenschaftsreferenzen gespeichert ist, ist eine Konstante. Wir können den Wert einer Immobilie nicht ändern. Wenn ich zum Beispiel hier tippe this.props.name gleich Daniel, und wenn wir speichern, erhalten wir den folgenden Fehler, der besagt, dass uns kein neuer Wert einer Eigenschaft zugewiesen werden kann. Denken Sie daran, dass die Eigenschaften konstant sind. Was wir jedoch tun können, ist die JavaScript-Destrukturierung zu verwenden, um weniger Code zu schreiben, wenn wir unsere Eigenschaften extrahieren. Indem ich diese Dinge an Ort und Stelle habe, kann ich jetzt die statischen Absätze entfernen. Sie fragen sich vielleicht, ob ich in einer React-Anwendung sagen kann, dass es einen Parameter gibt , etwas anderes außer einer Zeichenfolge, etwas wie, sagen wir das Alter derjenigen, die Hallo sagen, und die Antwort lautet natürlich ja. Ich kann Zahlen, Booleans, Objekte oder sogar Funktionen als Parameter verwenden . Der einzige Unterschied besteht darin, dass ich für Dinge, die keine Strings sind , geschweifte Klammern verwenden muss, um einen Wert zu senden. Zum Beispiel, wenn ich hier das Alter gleich hinzufügen möchte, und ich werde in geschweiften Klammern sagen, 25. Wenn ich diese 25 als String innerhalb meiner Komponente senden werde , wird dies auch als String aufgenommen. Hier verwenden wir geschweifte Klammern, um eine Nummer zu senden. In der Sag-Hi-Komponente, diese Struktur, auch diese Alterseigenschaft und hier fügen Sie etwas hinzu, „Mein Alter ist“ und innen geschweift das Alter. Wenn wir jetzt sparen, werden wir sehen, dass für die erste Komponente uns sagen würde : „Mein Alter ist 25", und für die zweite wird nichts ausgedruckt, wird nichts ausgedruckt da wir kein Alter gesendet haben eigentum. 6. Grundlegende UI: In dieser Lektion werden wir uns ansehen, wie React Benutzerereignisse funktionieren. Unsere Komponenten sind nicht zu viel wert, wenn sie nicht wissen, wie sie mit Benutzerereignissen umgehen sollen. Das vielleicht am häufigsten verwendete Ereignis ist der grundlegende Klick. Nehmen wir an, wir möchten diese Schaltfläche erstellen, um uns eine Warnung anzuzeigen, wenn Sie darauf klicken. Ich habe hier eine Funktion namens show message. Diese Funktion „Nachricht anzeigen“ wird eine Warnung haben, die etwas wie „Hallo da“ sagt. React weiß mit Funktionseigenschaften mit Ereignissen umzugehen. Es gibt einige integrierte Eigenschaften, die mit grundlegenden Ereignissen umgehen können, wie OnClick. Ich werde sagen, dass ich für mein OnClick-Ereignis diese Funktion aufrufen möchte, die ich gerade geschrieben habe. Ich werde das sagen, diese Botschaft zeigen. , erhalten wir nach dem Speichern Wenn ich diese Taste gedrückt habe, erhalten wir nach dem Speichern die Warnung, die wir gerade in die Nachrichtenfunktion anzeigen einfügen, und wir haben weitere Ereignisse. Wenn wir zum Beispiel ein Maus-Enter Event abfangen möchten, füge ich hier einfach onMouseEnter hinzu. Ich werde dieses Ereignis darauf hinweisen , dass onMouseEnter und natürlich muss ich diese Funktion auch erstellen. Im Moment füge ich hier einfach eine einfache Konsolenprotokollmeldung so etwas wie „Das ist bei Mauseingabe“ sagt. Wenn wir nun die Konsole speichern und öffnen, werden wir sehen, dass die Schaltfläche die ganze Zeit, in der wir mit dem Mauszeiger fahren, diese Nachricht in der Konsole ausgedruckt wird. In der React-Dokumentation gibt es eine vollständige Liste der von mir unterstützten UI-Ereignisse. Ich füge diesen Link in die Beschreibung der Lektion ein. Wir haben Dinge wie Doppelklick, Maus über, Maus heraus, Tastaturereignisse, Fokusereignisse und vieles mehr. 7. Events: Die vielleicht häufigste Fallstrick bei der Auswahl der Verwendung der Getriebekomponenten ist die Bereichsbindung. Was ist dieser Bereich bindend? Nehmen wir an, wir haben die aktuelle Situation. Eine Schaltfläche mit OnClick-Handler und OnMouseEnter. Später in unserer Anwendung müssen wir mehrere dieser Schaltflächen haben. In diesem Fall möchte ich eine neue Klasse namens MyButton erstellen. Dieser MyButton gibt einfach eine Schaltfläche zurück, an die diese OnClick- und OnMouse-Handler angeschlossen sind. Innerhalb der App entferne ich die Handler und anstelle der Standard-HTML-Schaltfläche verwende ich einfach diese MyButton-Klasse, die ich gerade erstellt habe. Wie bereits erwähnt, möchten wir zwei dieser Schaltflächen in unserer Anwendung haben. Jetzt wird es interessant sein, diese beiden Schaltflächensätze anpassen zu können, beide zeigen jetzt genau dieselbe Nachricht an. Wir können das tun, indem wir eine Immobilie verwenden. Ich werde hier sagen, dass die Nachricht für den ersten Button einer Nachricht entspricht. Für den zweiten Button entspricht die Nachricht einer anderen Nachricht. Mit diesen Eigenschaften kann ich jetzt in der Warnung hierher kommen und anstelle der Standardnachricht so etwas wie this.props.message verwenden. Wenn wir jedoch auf die Schaltfläche klicken, werden wir feststellen, dass die Fehlermeldung „Kann 'Requisiten' nicht auf undefined lesen“ erhalten . Dies liegt an dem Problem, das wir bereits bei dieser Kombination erwähnt haben. Die Idee ist, dass wir, wenn wir den Handler passieren, in einem anderen Kontext sind und React nichts über die Frachtklasse Bescheid weiß. Um dies zu beheben, haben wir zwei Möglichkeiten. Die erste Option ist hier drin, die ShowMessage-Funktion an dieses Element zu binden. Wenn wir speichern, können wir jetzt sehen, dass wenn ich klicke, die Show Nachricht erhalten, und wenn ich die zweite auswähle, bekomme ich eine andere Nachricht. Aber irgendwie ist es ein bisschen umständlich, immer einem Handler hinzuzufügen, der sich daran bindet. Wir können es zu unserem Vorteil nutzen. Die Tatsache, dass die Pfeilfunktionen für ECMAScript 6 direkt an den übergeordneten Bereich gebunden sind. Damit kann ich diese ShowMessage nehmen und es zu einer Pfeilfunktion machen. Jetzt kann ich die Bindung leicht entfernen und wenn ich klicke, funktionieren die Dinge wie erwartet. der Regel Wenn wir ECMAScript 6-Klassen zum Erstellen ihrer Komponenten verwenden, verwenden Sie in immer Pfeilfunktionen, um Ereignishandler zu erstellen. 8. Komponentenzustand: Der Status React ermöglicht es uns, die Änderung aller Elemente von React Components zu verwalten und die Visuals entsprechend zu aktualisieren. Um dieses Statuskonzept in die React Components einzuführen, simulieren wir das Verhalten von Benutzern, die sich in einer Anwendung anmelden. Anfangs haben wir diese beiden Knöpfe. Wir haben Landenten geklickt, die an sie gebunden sind. Wenn ich auf diese Schaltfläche klicke, erhalten wir die folgende Konsolenprotokollmeldung und wenn ich auf diese klicke, erhalten wir eine weitere Konsolenprotokollmeldung. Dies passiert, weil ich hier OnClick auf den angemeldeten Benutzer eingestellt und im Admin angemeldet habe. Abgesehen davon möchte ich in der endgültigen Anwendung auch hier den Benutzertyp angezeigt haben, der derzeit angemeldet ist. Wenn ich zum Beispiel hier auf „Als Admin anmelden“ klicke, muss der UserType Admin angezeigt werden, und wenn ich hier auf „Als Standardbenutzer anmelden“ klicke, muss er den UserType is user leiten. Um den Staat nutzen zu können, müssen wir ihn zuerst deklarieren. Wenn Sie Enigma sechs Klassen überspringen, können wir den Status in Wartezeit deklarieren. Der weniger verbale Weg ist die Verwendung von Klassenattributen. Irgendwo hier werde ich sagen, dass State gleich ist, und der Status einer React Component ist immer ein Objekt, das die Statusvariablen enthält. In unserem Beispiel benötigen wir nur eine dieser Variablen und sie wird UserType heißen. Anfangs wird es den Wert einer Zeichenfolge keine haben. Die zweite Möglichkeit, den Status zu deklarieren, befindet sich innerhalb des Klassenkonstruktors und die Syntax sieht ungefähr so aus. Am Ende ist das Ergebnis nur dasselbe, dass diese Konstruktorfunktion etwas mehr Zeit benötigt, um zu schreiben. Ich werde es entfernen und die erste Variante verwenden. Was ich hier tun kann, nachdem der Status deklariert wurde, ist, dass ich hier reingehen und this.state schreiben kann und ich werde sagen, dass ich den UserType anzeigen möchte. Auch wenn wir im Moment sparen, werden wir sehen, dass das Ergebnis genau das gleiche ist. Was wir tun können, wenn dieser Zustandsmechanismus eingerichtet ist, ist, dass ich hier die Konsolenprotokollnachricht durch eine Methode namens set state ersetzen kann und this.setState ist immer die Methode , die wir verwenden möchten, um den Status in einem Reagieren Sie auf Komponente. Was ich tun werde, ist, ihm ein Objekt mit den Dingen zu geben, die ich in diesen Zustand umwandeln möchte. Hier drin werde ich sagen, dass der UserType, ich möchte auf Benutzer eingestellt werden. Für die zweite Konsolenprotokollmeldung habe ich this.setState und ich werde sagen, dass der UserType in admin geändert werden muss. Mal sehen, was jetzt passiert, nachdem ich gespart habe. Wenn ich hierher gehe und auf „Als Admin anmelden“ drücke, werde ich die Textänderung im Benutzertyp Admin haben. Wenn ich hier auf „Als Standardbenutzer anmelden“ drücke, habe ich den Benutzertyp Benutzer. Was ich erreicht habe, ist, dass dieser Status eines Komponenten-Updates erreicht wird, aber auch die Visuals dieser Komponente entsprechend geändert werden. Auf ein paar Dinge, auf die ich hinweisen möchte. Verwenden Sie zunächst immer den festgelegten Status, um den Status zu ändern. Wenn wir einfach so etwas tun würden. State.UserType gleich etwas. Wenn ich speichere, werden wir zunächst feststellen, dass wir eine Warnung in unserer Konsole erhalten, aber auch wenn wir die Benutzertaste drücken, wird auf unserem Bildschirm keine Änderung vorgenommen. Dies geschieht, weil die Render-Methode, obwohl der Status geändert ist , nicht aufgerufen wurde. Wenn wir möchten, dass unsere Benutzeroberfläche auch aktualisiert wird, haben Sie immer hier drin, so etwas wie this.setState und was auch immer wir ändern möchten. Die zweite Beobachtung wird sein, dass wir den Staat immer initialisieren müssen, bevor wir ihn benutzen. Wenn ich hier beispielsweise die Initialisierung unseres Zustands löschen werde, wenn wir speichern, werden wir feststellen, dass wir ein Fehlerfeld erhalten, das besagt, dass wir so etwas wie UserType nicht verwenden können , bis dieser Status nicht initialisiert wurde. Schließlich führt der dritte, this.setState, diesen Parameter mit dem aktuellen Status zusammen, er ersetzt nicht den aktuellen Status. Im Grunde bedeutet das, dass hier, im Anfangszustand, wenn ich eine neue Statusvariable von x auf fünf gesetzt habe, wenn ich LoginUser oder LoginAdmin aufrufe, diesen festgelegten Status und ich werde einen neuen Wert für den UserType. Nur dieser Benutzertyp wird geändert. Das anfängliche x wird auf fünf gesetzt und es wird keine Änderung vorgenommen, und dann haben wir es. Dies sind die ersten Schritte, aber auch die ersten Fallstricke, auf die Sie stoßen werden, wenn Sie React setState verwenden. 9. Stil: Der Umfang dieser Lektion besteht darin, zu sehen, wie wir CSS verwenden können , um unsere React-Komponenten zu stylen. Am Ende des Unterrichts möchten wir in der Lage sein, Komponenten zu erstellen, die als Quadrate aussehen und angeben können, welche Hintergrundfarbe dieses Quadrat haben soll. Als Start-Setup habe ich hier bereits das Klassenquadrat, eine Komponente, die nur ein div zurückgibt und uns eine Eigenschaft von Text erhält, und dieser Text wird auf dem Bildschirm angezeigt. Das erste, was wir tun möchten, ist, eine CSS-Datei an diese index.js anzuhängen. Dafür gehe ich hierher und erstelle eine neue Datei. Diese Datei wird als index.css gespeichert. Das Interessante in React ist die Tatsache, dass wir für jede Datei einige CSS-Dateien importieren können, die wir dort benötigen. Hier kann ich sagen, dass ich importieren möchte, und aus dem aktuellen Ordner importieren möchte, index.css. Nur um zu sehen, dass alles funktioniert, gehe ich hierher und nehme das HTML-Attribut. Ich werde sagen, dass ich möchte, dass ein Randgrau aus weißen Pixeln daran angehängt wird. Wenn wir jetzt sagen, können wir sehen, dass der Index js und der Index CSS jetzt verknüpft sind und die Stile aus dem CSS in meiner Datei index.js angewendet werden. Wenn ich das weiß und als endgültiges Ziel Komponenten wie diese habe, gehe ich zurück in den Index CSS und erstelle hier eine Klasse namens Quadrat. Ich fange an, die CSS-Eigenschaften aufzulisten, die ich brauche, damit unsere Divs wie die im Bild aussehen. Zuerst muss ich einen schwarzen Rand von einem Pixel hinzufügen. Danach werde ich sagen, dass die Zeilenhöhe für unseren Text 100 Pixel beträgt. Außerdem beträgt die Breite unserer Komponenten 100 Pixel. Ich brauche auch text-ausrichten, auf zentriert. Schließlich benötigen wir einen kleinen Rand von 10 Pixeln. Dieses Klassenquadrat gibt uns das grundlegende Layout für unsere Komponenten. Wenn wir nun in den Index CSS gehen, können wir hierher kommen und sagen, dass ClassName gleich ist . Ich werde sagen, dass ich möchte, dass dieses Div eine Klasse von Quadrat hat. Wenn wir speichern, werden wir sehen, dass unsere Divs jetzt auch die CSS-Eigenschaften erhalten haben, die in dieser Klasse aufgeführt sind. Eine Sache, auf die ich hinweisen möchte, ist die Tatsache, dass ich hier drin den ClassName verwendet habe, um HTML-Attribut eine CSS-Klasse zuzuweisen. Dies liegt daran, dass wir in der JS-Welt bereits die Klasse als Schlüsselwort haben. Unter normalen Umständen würden Sie einen ClassName verwenden, um HTML-Tags CSS-Klassen zuzuweisen. Unser Beispiel ist immer noch nicht vollständig. Es wäre schön sagen zu können, dass dies ein rotes Quadrat ist und dies ein gelbes Quadrat ist. Dafür verwenden wir die Instyles von React. In einer React-Komponente ist es möglich, ein Stilattribut festzulegen, das als Parameter empfängt, ein Objekt, das diese Instyles dieser Komponente enthält. Jetzt sage ich hier etwas wie, der Stil ist gleich. Nehmen wir an, die Farbe ist anfangs rot. Wenn wir unsere Anwendung speichern und zurückgehen, werden Sie jetzt sehen, dass bei beiden Quadraten jetzt ein Text auf Rot eingestellt ist. Das Interessante ist jedoch, dass wir diesen Wert dem Wert einer Immobilie zuordnen können. Ich kann hierher kommen und sagen, dass die Farbe gleich Rot ist. Für diesen ist die Farbe gleich gelb. Schließlich können wir den Startwert von Rot hier auf this.properties ändern, und ich sage die Farbe. Wenn wir sparen, werden wir sehen, dass die Farbe für das erste Quadrat rot ist. Für den letzten, die Farbe, ist es gelb. Um es als Hintergrundfarbe festzulegen, muss ich nur hier schreiben, das ist eine Hintergrundfarbe und CamelCase die Farbe hat funktioniert. Wenn wir sparen, sehen wir endlich unsere gewünschte Ausgabe. als Schlussfolgerung, Beachten Sie als Schlussfolgerung, dass wir CSS-Dateien an unsere React-Komponenten anhängen können, und wir können diese Komponenten stylen oder den ClassName verwenden und eine bestimmte CSS-Klasse daran anhängen. Oder indem Sie Inline-Stile mit diesem Stilattribut verwenden, um unserem Styling mehr Flexibilität zu verleihen. 10. Wie du das React nutzen kannst.: Hi da und willkommen. Es besteht ziemlich hohe Chancen, dass Sie zuvor von diesen Daten für Kinder gehört haben. Im Wesentlichen die Sonden, die Kinder verwendet werden, wenn Sie eine React-Komponente wie diese Galerie haben. Sie möchten darin den HTML-Inhalt über Komponentendeklaration verwenden. Im Moment haben wir eine leere Bildergalerie. Wenn ich hier etwas Inhalt hinzufügen möchte, sagen wir dieses einfache Absatz-Tag und diesen Absatz , der in unserer Galerie-Komponente gerendert werden soll. Ich kann gehen und in geschweifte Klammern schreiben, die ihre Kinder stützen und fertig sind. Wir haben es funktioniert. Natürlich ersetzen wir diesen Text, wir vergessen das Bild und wir haben unsere Leute Katze in die Galerie. React weiß aber auch, wie man mehrere untergeordnete Elemente anzeigt, nicht nur eines. Niemand kann uns davon abhalten, noch ein Bild hinzuzufügen , weil man nie genug Bilder haben kann. Wenn wir uns auffrischen, haben wir ein neues Bild an Bord. Wenn Sie sich die React js-Dokumente ansehen, werden Sie feststellen, dass es tatsächlich dieses untergeordnete Objekt gibt, das uns Zugriff auf eine Reihe von Methoden gibt. Es könnte eine gute Idee sein, später alle diese Methoden zu überprüfen, die hierher kommen. Wenn Sie beispielsweise zeigen möchten, wie viele untergeordnete Elemente Ihre Komponente hat, können Sie die Count-Methode verwenden. Um nicht ständig schreiben zu müssen, dass Kinder reagieren, füge ich das untergeordnete Objekt als separaten Import hinzu. Jetzt werde ich einen neuen Absatz mit etwas Inhalt erstellen und hier Children.count verwenden und weitergeben, was wollen wir zählen? Nach der Aktualisierung können wir jetzt sehen, dass wir auch die Anzahl der Kinder auf dem Bildschirm haben. Wenn wir unsere Galeriekomponente zwingen wollen, nur ein Kind zu erhalten, können wir nur Kinder verwenden und so weiter. Aber vielleicht ist die nützlichste untergeordnete Methode die Map, die sie verwendet, wir können alle Kinder durchlaufen und sie unserem zurückkehrenden Element zuordnen. In unserem Fall könnten wir so etwas wie Kinder sagen, diese Map plus diese anonyme Funktion. Es braucht jeweils ein Kind und gibt zurück, was angezeigt werden soll. Im Moment ist die Ausgabe genau gleich, aber das coole Zeug ist, dass wir diese Elemente jetzt kontrollieren können. Wenn wir beispielsweise möchten, dass unsere Bibliothek nur Bilder als Kinder zulässt, können wir hier sagen, wenn Element dieser Typ nicht dem Bild entspricht, dann einen neuen Fehler auslösen. Moment ist alles wie zuvor, aber wenn ich in die Galerie hinzufüge, sagen wir h1, nun, wir werden diesen Fehler bekommen, wir müssen ihn wir werden diesen Fehler bekommen, wir müssen ihn vorerst löschen, nur damit der gesamte Code wieder funktioniert. Eine andere Sache, für die wir map verwenden können, ist, die geteilten Elemente zu manipulieren, nicht nur um sie einzuschränken. Wenn ein Bild beispielsweise kein Titelattribut hat, möchten wir ein Standardattribut hinzufügen. Dieser Elementparameter ist vom Typ via Component. Wir können hier etwas sagen, wie wenn es kein Element gibt, das diesen Titel stützt, dann ist Element, das diesen Titel stützt, nur der Katze entspricht. Wir werden diesen Fehler jetzt bekommen. Nun, Sie erinnern sich vielleicht, dass die Requisite über die schreibgeschützte Komponente beendet ist. Glücklicherweise können wir das umgehen, indem wir das Klonelement verwenden. Wir werden dieses Element einem Klon von sich selbst zuweisen. In einem React Clone-Element können wir jedoch auch einen zweiten Parameter übergeben, um neue Eigenschaften einzurichten. In unserem Fall werde ich den Titel als nur eine Katze festlegen, und wir sollten bereit sein zu gehen. Wenn ich speichern werde, werden wir feststellen, dass wir bei der Überprüfung dieses Elements auch diesen Standardtitel-API-Look erhalten. Ich hoffe, Ihnen hat diese Show zu den App-Tutorials gefallen. Wenn Sie Fragen haben, diese gerne in den Kommentaren unten stellen. Ich bin Daniel und wir sehen uns dann das nächste Mal. Prost. 11. Ein Spiel mit React, Teil 1: Hallo und willkommen. Mein Name ist Daniel und ich werde Ihr Kursleiter für dieses praktische VRGS-Beispiel sein. Unser Spielraum für dieses Tutorial wird es sein, dieses sehr einfache Spiel aus Rock, Papier, Schere zu bauen . In diesem Spiel haben wir zwei Spieler, den roten und den blauen. Wenn wir die Schaltfläche „Spiel ausführen“ platzieren, zeigt unser Spiel eine mischende Animation und wählt nach dem Zufallsprinzip eines der vollständig verfügbaren Elemente aus. Basierend darauf, was für jeden Spieler ausgewählt wird, entscheidet unsere Anwendung, welcher der Spieler der Gewinner ist. Lasst uns an die Arbeit gehen. In der Startvorlage für dieses Projekt arbeite ich an der NPM-Installation. Wenn Sie es noch nicht getan haben, sehen Sie in den Links zu dieser Episode eine Anleitung zum Einrichten Ihrer Umgebung. Nachdem die NPM-Installation abgeschlossen ist, können wir NPM start eingeben und wir sollten unsere Anwendung betriebsbereit haben. Werfen wir einen Blick darauf, was wir derzeit im Startcode haben. Erstens, die Datei index.js, die nur unsere Anwendung wiedergibt. Daneben haben wir diese App, CSS, die die Stile für unsere Anwendung enthält. Angesichts der Tatsache, dass es sich um einen ReactJS-Kurs handelt, werden wir nicht zu viele Details darüber diskutieren, wie die CSS-Stile erstellt wurden. Nur bei Bedarf werden wir uns mit den CSS-Teilen befassen, die für unsere Anwendung wichtig sind. Der wichtigste Teil ist diese App, die JS-Datei ist, die als Einstiegspunkt für unsere Anwendung dienen wird. Im Moment rendert es nur eine einfache React-Komponente aus, die nur ein leeres Div hat. Das erste, was wir angehen werden, ist die Erstellung dieser beiden Spielerkarten. Wenn wir ein wenig über sie nachdenken, handelt es sich um staatenlose Komponenten, die von zwei Eigenschaften abhängen, der Farbe des Spielers und dem Symbol. In diesem Sinne gehe ich zurück in den Code und erstelle eine neue zustandslose Komponente. Diese zustandslose Komponente wird als Spielerkarte bezeichnet. Anfangs ist unsere Spielerkarte nur ein leeres Div mit einem Klassennamen, der auf Player-Card eingestellt ist. Dieser Klassenname ist bereits in der App CSS definiert und zeigt das grundlegende Rendern unserer Karten an. Jetzt, da diese zustandslose Komponente erstellt wurde, kann ich zur Render-Methode zurückkehren und hier zwei neue Komponenten vom Typ Player-Card hinzufügen. Nachdem wir gespeichert und die Seite aktualisiert wurde, können wir auf der rechten Seite die beiden neu erstellten Komponenten sehen. Wie bereits erwähnt, sind unsere Spielerkarten von zwei Eigenschaften abhängig. Sie sind abhängig von der Farbe und auch vom Symbol. Mit den neu deklarierten Eigenschaften setze ich die Farbe für die erste Karte auf Rot und ihr Symbol auf Papier. Für den zweiten setze ich die Farbe auf Blau und das Symbol auf Rock. Um sicherzustellen, dass alles in Ordnung ist, gehe ich zurück in die Spielerkartenkomponente. Hier drin zeige ich die Symboleigenschaft an. Nachdem wir gespeichert haben, können wir jetzt sehen, dass unsere Komponenten auch die angegebenen Symbole haben. Sie fragen sich vielleicht, warum die zweite Komponente ihre Texte auf den Kopf geschrieben hat. Nun, das liegt daran, dass wir in der App CSS-Datei eine spezielle Regel haben, die wir am Ende der nächsten Episode besprechen werden. Wenn wir auf unser letztes Beispiel zurückgehen, sollte jede dieser Karten in der entsprechenden Farbe eingefärbt sein. Dies ist eine großartige Gelegenheit, die Inline-Stile von React zu verwenden. Dafür werde ich ein neues Objekt namens style erstellen, und darin werde ich den Hintergrund so einstellen, dass der Hintergrund dem entspricht, was wir vom Farbparameter erhalten. Schließlich weise ich in der return-Anweisung der Render-Methode den Stil des Divs so zu, dass dem gerade erstellten Style-Objekt entspricht. Jetzt, nachdem wir gespeichert haben, können wir sehen, dass eine Spielerkarte rot und die andere blau gefärbt ist. 12. Ein Spiel mit React Teil 2 erstellen: Hallo, und willkommen zurück. Im ersten Teil haben wir die Grundelemente für unser Spiel hinzugefügt. Lassen Sie uns nun unser Spiel erstellen, um ein zufälliges Symbol auszuwählen. Um dies zu erreichen, müssen wir dem Spiel zuerst mitteilen, was sind alle verfügbaren Symbole? Ich gehe in die Haupt-App und füge einen Standardkonstruktor hinzu, der vorerst nur eine Superspule mit den Standardeigenschaften erstellt. Der nächste Schritt besteht darin, ein Symbolfeld unter dieser Referenz hinzuzufügen. Es wird auf ein Array verweisen, das alle frei verfügbaren Symbole, Stein, Papier und Scheren enthält . Wir brauchen auch einen Knopf, um das Spiel zu starten. Ich gehe hier in den Hauptrender, füge diesen Button mit dem Text Run game hinzu. Ich werde auch eine Run-Game-Methode hinzufügen, die anfangs gut nur ein einfaches Konsolenprotokoll mit dem Text hat, startet das Spiel. Diese Methode wird dem On-Click-Ereignis der Schaltfläche zugewiesen. Wenn ich die Konsole öffne, werden wir sehen, dass jedes Mal, wenn wir die Taste drücken, diese Meldung in der Konsole erscheint. Das Set an Ort und Stelle haben. Der nächste logische Schritt besteht darin, unserem Spiel beizubringen , wie man zufällige Elemente mit dem unteren Klick macht. Grundsätzlich müssen wir einen Zufallsindex generieren und das entsprechende Element aus diesem Array herausholen. Zuerst erstelle ich den Zufallsindex und gebe ihm einen Indexnamen. Um die Zufallszahl zu generieren, verwende ich Math.random, und wir multiplizieren dies mit der maximalen Anzahl von Symbolen in unserem Fall drei. Wir werden Math.floor auch verwenden, um sicherzustellen, dass wir keine Zahlen wie 2,5 oder 1.3 oder irgendetwas erhalten , das keine ganze Zahl ist. Wenn dieser zufällige Index konstruiert ist, können wir jetzt einfach gehen und ein Konsolenprotokoll von diesen, diesen Symbolen und dem Index erstellen. Wenn wir nun die Seite aktualisieren, wird beim Drücken der Taste ein zufälliges Element danach erhalten, ein anderes, ein anderes und so weiter. Lassen Sie uns diese zufälligen Symbole jetzt in die Ansicht bringen. Wir müssen diesen statischen Wert ersetzen, und auch diesen, wir haben so etwas wie das zufällige Element, das hier generiert wird. Dies ist ein perfektes Beispiel, um den Zustand der Komponenten zu verwenden. Zuerst werde ich dies durch diesen Status PlayerRed ersetzen, und auch für diesen werde ich diesen Zustand schreiben, PlayerBlue. Diese beiden Statuswerte werden in der Run Game-Methode festgelegt. Angesichts der Tatsache, dass wir uns mit Statuseigenschaften befassen müssen, müssen wir dieses SetState verwenden und ihm ein Objekt übergeben. Innerhalb dieses Objekts werde ich sagen, dass der PlayerRed diesen Symbolen entspricht, und als Index füge ich diese ganze Formel ein. Wir werden genau die gleiche Formel wiederverwenden, diesmal aber für den PlayerBlue. Wir löschen und fügen ihn hinzu, und nachdem wir gespeichert haben, werden wir feststellen, dass wir einen Fehler erhalten. Dies liegt daran, dass wir hier versuchen, auf etwas vom Staat zuzugreifen, und diesen Staat noch nicht geschaffen haben. Dies ist sehr einfach zu beheben. Ich gehe in den Konstruktor und eine Anleitung, dass dieser Zustand einem leeren Objekt entspricht, und mit diesem Set gehe ich zurück ins Spielfenster und jetzt werden wir sehen, dass wir jedes Mal sehen, wenn wir die Run-Taste drücken, wir bekommen ein zufälliges Symbol, das auf unserem Bildschirm angezeigt wird. Werfen wir noch einmal einen Blick auf die endgültige Version unseres Spiels. Hier haben wir diese schönen Icons für die Symbole und nicht den statischen Text. zum Code im öffentlichen Ordner zurückkehren, haben wir diesen Bildordner, der die drei Symbolsymbole enthält. Alle von ihnen haben eine PNG-Erweiterung. Um dies in unser Projekt einzubauen, verwende ich den Eigenschaftsordner des Hintergrundbild-Eigenschaftenordners. Hier stelle ich fest, dass die URL der Bildordner plus das entsprechende Symbol und plus die Dateierweiterung von png sein wird. Wir werden den formalen Code entfernen und wenn wir das Spiel speichern und ausführen, werden Sie sehen, dass wir diese Symbole auch auf dem Bildschirm haben. Sie fragen sich vielleicht, warum dieses zweite Bild um 180 Grad gedreht wird. Nun, das liegt an dieser CSS-Eigenschaft, die ich hier hinzugefügt habe und die definiert, dass für das zweite Element dieses Typs wir für das zweite Element dieses Typs eine CSS-Skala und einen CSS-Flip als Filter haben sollten. 13. Ein Spiel mit React, Teil 3 erstellen: Wir haben das Glück unserer Bewerbung erreicht. Unser Spiel hat jetzt ein grundlegendes Layout, weiß, wie man einige zufällige Symbole zeichnet und auch die entsprechenden Symbole für die Symbole zeigt. Eine Sache, die wir als Nächstes tun könnten, ist, diese mischenden Animationen zu zeigen , wenn die Taste gedrückt wird. Es gibt mehrere Techniken, mit denen wir dies erreichen können , aber aus Gründen unseres Beispiels wählen wir einfach das reine JavaScript aus. In JavaScript haben wir zwei Hauptzeiten von Funktionen. Erstens haben wir das setInterval und zweitens das setTimeout. Für beide von ihnen. Die Grundidee ist, dass sie nach einiger Zeit eine bestimmte Funktion ausführen werden. Wir geben ihnen eine auszuführende Funktion und die Verzögerung, die auf diese Funktion angewendet werden soll. Der Hauptunterschied zwischen ihnen besteht darin, dass setTimeout ausgeführt wird, die eine Funktion nur einmal geben. In der Zwischenzeit führt SetInterval es aus, bis es abgebrochen ist. Angesichts der Tatsache, dass dieser Schärfeffekt in unserem Beispiel von mehreren zufälligen Schweinen hergestellt wird , wird die eingestellte Intervallfunktion verwendet. Davon abgesehen sollten wir jetzt wieder in unseren Code zurückgreifen. Zuerst nehme ich all diesen Teil, der die Zufallssymbole generiert, und wickle sie in eine Funktion ein und verwende diese Funktion mit dem setInterval. Ich stelle ein Intervall von 100 Millisekunden ein, was bedeutet, dass eine Funktionsstörung alle 100 Millisekunden ausgeführt wird, bis sie abgebrochen sind. Wenn wir nach dem Speichern den Run-Game-Button platzieren, sehen wir die Animation in Aktion. Trotzdem sind die Dinge noch nicht abgeschlossen. Ein Problem, dem wir jetzt gegenüberstehen, ist, dass unsere Animation nicht aufhört. Vorerst. Ich stoppe es einfach manuell, indem ich die Seite aktualisiere Wir müssen einen Weg finden, die Ausführung dieser Funktion programmatisch zu stoppen. Wenn wir in die Dokumentation zurückkehren, werden wir diese klare integrale Funktion entdecken, die wir zusammen mit einem Verweis auf ein bestimmtes eingestelltes Intervall verwenden können . Wenn man das weiß, wird der Plan so sein. Wir lassen die Funktion 40 Mal laufen und danach werden wir das klare Intervall verwenden, um die Ausführung unserer Funktion abzubrechen. Zuerst gehe ich zurück in die Quelle. Hier erstelle ich eine neue Variable namens Counter. Dieser Zähler beginnt mit dem Wert von Null in einem neuen Spiel. Jedes Mal, wenn diese Funktion ausgeführt wird, wird dieser Zähler inkrementiert. Als Nächstes benötigen wir einen Verweis auf unser Intervall. Dafür definiere ich eine neue Variable, die mein Intervall genannt wird. Wie Sie sehen können, wird es auf das setInterval hinweisen. Danach werde ich mit einer Anweisung prüfen, ob unser Zähler ein Niveau über 40 erreicht hat, und wenn ja, sage ich, lösche das Intervall meines Intervalls. Danach, wenn die Seite aktualisiert wird, als wir wieder angefangen haben, wird das Spiel sehen, dass unsere Animation nach 40 Runden stoppt. Im letzten Schritt sollten wir unserem Spiel beibringen, wie man den Gewinner entscheidet. Dazu führen wir einen neuen Wert oder den Status namens Winner ein und setzen ihn zunächst auf eine leere Zeichenfolge. Die Entscheidung wird in einer neuen Funktion getroffen, die als Seite bezeichnet wird. Diese Funktion wird aufgerufen, nachdem wir das setInterval gelöscht haben. Angesichts der Tatsache, dass wir uns mit Statusvariablen befassen müssen, verwenden wir die assist state-Methode und sagen , dass der Gewinner dies.DecideWinner sein sollte. Aus dieser Funktion erhalten wir ihnen das Ergebnis unseres Spiels. Wir verwenden zunächst eine zerstörerische Anweisung, um den Wert von Spieler Blue und Player Red aus dem Zustand zu extrahieren . Zunächst prüfen wir, ob der Spieler Rot dem Spieler Blue entspricht, falls wir zurückgeben werden, dass wir ein Duo-Ergebnis haben. Als Nächstes überprüfe ich, ob der Spieler Red nicht der Gewinner ist. Da ich eine Log-Anweisung bin, füge ich einfach den Code ein. Aber im Grunde sehen wir hier nur nach jedem der drei Fälle, die den Spieler mit dem Gewinner rot machen könnten. In diesem Fall werden wir bekommen, dass der Spieler Rot der Gewinner ist. Wenn wir kein Duo-Ergebnis haben und Spieler Red nicht der Gewinner ist, kann man davon ausgehen, dass der Spieler Blue das Spiel gewonnen hat. Jetzt müssen wir nur noch in die zufällige Methode gehen. Hier in einem Absatz zeige ich die Statusvariable für den Gewinner an und schließe auch den Absatz. Unser Spiel sollte bereit sein, eine Probefahrt zu machen. Wenn wir das Spiel ausführen, wird es für das Zielspieler-Papier für den blauen Spieler ausgewählt . Es wird uns sagen, dass der rote Spieler gerade gewonnen hat. Dies schloss unsere Bewerbung ab. In diesem Beispiel haben wir Dinge wie grundlegende React-Komponenten, Ereignishandler oder die Verwendung von JavaScript-Timing-Funktionen mit React gesehen . Danke fürs Zuschauen und ich hoffe es hat dir gefallen. Fröhliches Programmieren und wir sehen uns das nächste Mal.