React Tutorial Teil 6: Einige Funktionen des Kurses, JSX und JavaScript

Heute veröffentlichen wir die Fortsetzung des React-Schulungskurses. Hier werden wir über einige Funktionen des Kurses sprechen, insbesondere in Bezug auf den Stil des Codes. Hier sprechen wir ausführlicher über die Beziehung zwischen JSX und JavaScript.



→ Teil 1: Kursübersicht, Gründe für die Beliebtheit von React, ReactDOM und JSX
→ Teil 2: Funktionskomponenten
→ Teil 3: Komponentendateien, Projektstruktur
→ Teil 4: übergeordnete und untergeordnete Komponenten
→ Teil 5: Beginn der Arbeit an einer TODO-Anwendung, Grundlagen des Stylings
→ Teil 6: Über einige Funktionen des Kurses, JSX und JavaScript
→ Teil 7: Inline-Stile
→ Teil 8: Fortsetzung der Arbeit an der TODO-Anwendung, Vertrautheit mit den Eigenschaften von Komponenten
→ Teil 9: Komponenteneigenschaften
→ Teil 10: Workshop zum Arbeiten mit Komponenteneigenschaften und Styling
→ Teil 11: Dynamische Markup-Generierung und Map-Arrays-Methode
→ Teil 12: Workshop, dritte Phase der Arbeit an einer TODO-Anwendung
→ Teil 13: Klassenbasierte Komponenten
→ Teil 14: Workshop zu klassenbasierten Komponenten, Komponentenstatus
→ Teil 15: Komponentengesundheitsworkshops
→ Teil 16: Die vierte Phase der Arbeit an einer TODO-Anwendung, die Ereignisbehandlung
→ Teil 17: Fünfte Phase der Arbeit an einer TODO-Anwendung, Änderung des Status von Komponenten
→ Teil 18: Die sechste Phase der Arbeit an einer TODO-Anwendung
→ Teil 19: Methoden des Komponentenlebenszyklus
Teil 20: Die erste Lektion in bedingtem Rendern
→ Teil 21: Zweite Lektion und Workshop zum bedingten Rendern
→ Teil 22: Die siebte Phase der Arbeit an einer TODO-Anwendung, bei der Daten aus externen Quellen heruntergeladen werden
→ Teil 23: Erste Lektion zum Arbeiten mit Formularen
→ Teil 24: Lektion der zweiten Form
→ Teil 25: Workshop zum Arbeiten mit Formularen
→ Teil 26: Anwendungsarchitektur, Container- / Komponentenmuster
→ Teil 27: Kursprojekt

Lektion 13. Über einige Funktionen des Kurses

→ Original

Bevor wir fortfahren, möchte ich ein wenig über einige der Funktionen des Codes sprechen, die ich in diesem Kurs demonstriere. Möglicherweise haben Sie bemerkt, dass Semikolons im Code normalerweise nicht verwendet werden. Wie Sie sehen können, sind dies beispielsweise in Beispielen wie den folgenden nicht:

import React from "react" import ReactDOM from "react-dom" function App() {    return (       <h1>Hello world!</h1>    ) } ReactDOM.render(<App />, document.getElementById("root")) 

Sie können Semikolons verwenden, wo immer dies möglich ist. Dann würden beispielsweise die ersten beiden Zeilen des vorherigen Codefragments folgendermaßen aussehen:

 import React from "react"; import ReactDOM from "react-dom"; 

Ich habe kürzlich beschlossen, auf sie zu verzichten. Daher erhalte ich den Code, den Sie in den Beispielen sehen. Natürlich gibt es Konstrukte in JavaScript, die nicht auf Semikolons verzichten können. Sagen wir bei der Beschreibung einer for- Schleife, deren Syntax folgendermaßen aussieht:

 for ([]; []; [ ]) 

In den meisten Fällen können Sie jedoch auf Semikolons am Zeilenende verzichten. Und ihre Abwesenheit im Code wird seine Arbeit nicht beeinträchtigen. Tatsächlich ist die Frage der Verwendung von Semikolons im Code eine Frage der persönlichen Vorlieben des Programmierers.

Ein weiteres Merkmal des Codes, den ich schreibe, ist, dass ES6 zwar technisch die Verwendung von Pfeilfunktionen in Fällen ermöglicht, in denen Funktionen mit dem function deklariert werden, ich sie jedoch nicht verwende.

Der obige Code kann beispielsweise folgendermaßen umgeschrieben werden:

 import React from "react" import ReactDOM from "react-dom" const App = () => <h1>Hello world!</h1> ReactDOM.render(<App />, document.getElementById("root")) 

Aber ich bin nicht daran gewöhnt. Ich glaube, dass Pfeilfunktionen in bestimmten Fällen äußerst nützlich sind, in denen die Merkmale dieser Funktionen den korrekten Betrieb des Codes nicht beeinträchtigen. Zum Beispiel, wenn sie normalerweise anonyme Funktionen verwenden oder wenn sie Klassenmethoden schreiben. Aber ich bevorzuge traditionelle Funktionen. Viele verwenden bei der Beschreibung von Funktionskomponenten Pfeilfunktionen. Ich stimme zu, dass dieser Ansatz Vorteile gegenüber der Verwendung traditioneller Designs hat. Gleichzeitig versuche ich nicht, eine bestimmte Art der Deklaration von Funktionskomponenten aufzuerlegen.

Lektion 14. JSX und JavaScript

→ Original

In der nächsten Lektion werden wir über integrierte Stile sprechen. Bevor wir zu diesen Themen übergehen, müssen wir einige Funktionen der Interaktion zwischen JavaScript und JSX erläutern. Sie wissen bereits, dass wir mithilfe der Funktionen von React aus normalem JavaScript-Code Konstrukte zurückgeben können, die dem normalen HTML-Markup ähneln, jedoch JSX-Code sind. Dies geschieht beispielsweise im Code der Funktionskomponenten.

Was ist, wenn es eine bestimmte Variable gibt, deren Wert in den von der Funktionskomponente zurückgegebenen JSX-Code eingesetzt werden muss?

Angenommen, wir haben einen Code wie diesen:

 import React from "react" import ReactDOM from "react-dom" function App() { return (   <h1>Hello world!</h1> ) } ReactDOM.render(<App />, document.getElementById("root")) 

Fügen Sie der Funktionskomponente einige Variablen hinzu, die den Vor- und Nachnamen des Benutzers enthalten.

 function App() { const firstName = "Bob" const lastName = "Ziroll" return (   <h1>Hello world!</h1> ) } 

Jetzt wollen wir, dass das, was die Funktionskomponente zurückgibt, kein Header der ersten Ebene mit dem Text Hello world! und eine Kopfzeile mit einer Begrüßung wie Hello Bob Ziroll! die unter Verwendung der in der Komponente verfügbaren Variablen gebildet wird.

Versuchen wir, die Rückgabe der Komponente wie folgt neu zu schreiben:

 <h1>Hello firstName + " " + lastName!</h1> 

Wenn Sie sich ansehen, was nach der Verarbeitung dieses Codes auf der Seite angezeigt wird, stellt sich heraus, dass es nicht so aussieht, wie wir es brauchen. Der Text Hello firstName + " " + lastName! . Wenn gleichzeitig das von den Tools create-react-app erstellte Standardprojekt zum Ausführen des Beispiels verwendet wird, werden wir gewarnt, dass den Konstanten firstName und lastName Werte zugewiesen werden, die nirgendwo verwendet werden. Dies verhindert zwar nicht, dass auf der Textseite genau das angezeigt wird, was von der Funktionskomponente zurückgegeben wurde, ohne dass die Namen der Variablen durch ihre Werte ersetzt werden. Das System betrachtet die Variablennamen in dieser Form als Klartext.

Wir werden Sie fragen, wie Sie JavaScript im JSX-Code nutzen können. In der Tat ist dies ziemlich einfach. In unserem Fall reicht es aus, nur das, was als JavaScript-Code interpretiert werden soll, in geschweifte Klammern zu setzen. Infolgedessen sieht die Komponente wie folgt aus:

 <h1>Hello {firstName + " " + lastName}!</h1> 

Zur gleichen Zeit der Text Hello Bob Ziroll! . Sie können reguläre JavaScript-Konstrukte in diesen JSX-Codeteilen verwenden, die in geschweiften Klammern hervorgehoben sind. Der Code wird im Browser wie folgt ausgegeben:


Eine Seite mit Markup, das von JSX und JavaScript generiert wurde

Da bei der Arbeit mit Zeichenfolgen unter modernen Bedingungen hauptsächlich ES6-Funktionen verwendet werden, schreiben wir den Code mit ihnen neu. Wir sprechen nämlich von Vorlagenliteralen, die mit Backticks ( ` ` ) gezeichnet wurden. Solche Zeichenfolgen können Konstruktionen der Form ${} . Das Standardverhalten von Vorlagenliteralen besteht darin, die in geschweiften Klammern enthaltenen Ausdrücke zu berechnen und zu konvertieren, was mit einer Zeichenfolge geschieht. In unserem Fall sieht es so aus:

 <h1>Hello {`${firstName} ${lastName}`}!</h1> 

Bitte beachten Sie, dass der Vor- und Nachname durch ein Leerzeichen getrennt ist, das hier als reguläres Zeichen interpretiert wird. Das Ergebnis der Ausführung dieses Codes ist das gleiche wie oben gezeigt. Im Allgemeinen ist das Wichtigste, was Sie jetzt verstehen sollten, dass das, was in geschweiften Klammern im JSX-Code eingeschlossen ist, gewöhnliches JS ist.

Betrachten Sie ein anderes Beispiel. Wir schreiben unseren Code nämlich so um, dass, wenn er morgens aufgerufen wird, der Text Good morning angezeigt wird, wenn am Nachmittag - Good afternoon und wenn am Abend - Good night . Zunächst schreiben wir ein Programm, das angibt, wie spät es ist. Hier ist der Code der App Funktionskomponente, die dieses Problem löst:

 function App() { const date = new Date() return (   <h1>It is currently about {date.getHours() % 12} o'clock!</h1> ) } 

Hier wird eine neue Instanz des Date Objekts erstellt. JSX verwendet JavaScript-Code, dank dessen wir die Methode date.getHours() aufrufen, die jetzt eine Stunde ist. date.getHours() konvertieren wir die Zeit in ein 12-Stunden-Format, indem wir den Rest der Division dieser Zahl durch 12 berechnen. In ähnlicher Weise können wir durch Überprüfen der Zeit die Linie bilden, die wir benötigen. Zum Beispiel könnte es so aussehen:

 function App() { const date = new Date() const hours = date.getHours() let timeOfDay if (hours < 12) {   timeOfDay = "morning" } else if (hours >= 12 && hours < 17) {   timeOfDay = "afternoon" } else {   timeOfDay = "night" } return (   <h1>Good {timeOfDay}!</h1> ) } 

Es gibt eine Variable timeOfDay if die aktuelle Zeit mit dem if Konstrukt analysieren, ermitteln Sie die Tageszeit und schreiben sie in diese Variable. Danach verwenden wir die Variable in der vom JSX-Code zurückgegebenen Komponente.

Wie üblich wird empfohlen, mit dem zu experimentieren, was wir heute gelernt haben.

Zusammenfassung

In dieser Lektion haben wir über einige der in diesem Kurs verwendeten Codestilfunktionen sowie über die Interaktion von JSX und JavaScript gesprochen. Die Verwendung von JavaScript-Code in JSX eröffnet große Möglichkeiten, deren praktischen Nutzen wir in der nächsten Lektion spüren werden, wenn wir uns mit integrierten Stilen befassen.

Liebe Leser! Verwenden Sie Semikolons in Ihrem JavaScript-Code?