Als beliebteste Frontend-Bibliothek möchte jeder React lernen. ReactJS ist im Grunde JavaScript. Aber das bedeutet nicht, dass Sie alles in JavaScript lernen müssen, um zu ReactJS zu wechseln. Das Verständnis der grundlegenden JavaScript-Konzepte wird Ihnen helfen, die React-Konzepte leichter zu verstehen, und letztendlich wird es Ihre Fähigkeit, an Projekten zu arbeiten, beschleunigen.
Lassen Sie uns grundlegende Konzepte skizzieren, die Sie über JavaScript kennen sollten, bevor Sie zu ReactJS wechseln.
1. Pfeilfunktionen
Pfeilfunktionen werden in React häufig verwendet. Ab Version 16.8 wurde React von klassenbasierten Komponenten zu funktionalen Komponenten verschoben. Pfeilfunktionen ermöglichen es Ihnen, Funktionen mit einer kürzeren Syntax zu erstellen.
Lassen Sie uns das in den folgenden Beispielen veranschaulichen:
Regelmäßige Funktion
FunktionGruß() {
zurückkehren'Hallo'
}
Konsole.log (Begrüßung()) //helloPfeilfunktion
lassen Gruß = () =>'Hallo'
Konsole.log (Begrüßung()) //helloDie beiden obigen Funktionen haben die gleiche Ausgabe, obwohl die Syntax unterschiedlich ist. Die Pfeilfunktion sieht kürzer und sauberer aus als die normale Funktion. Normalerweise haben die React-Komponenten die folgende Struktur:
importieren Reagieren aus'reagieren'konst Buch = () => {
zurückkehren (
Buch</div>)
}
ExportStandard Buch
Pfeilfunktionen haben keine Namen. Wenn Sie es benennen möchten, weisen Sie es einer Variablen zu. Der Unterschied zwischen einer regulären und einer Pfeilfunktion ist mehr als nur die Syntax. Erfahren Sie mehr über Pfeilfunktionen in Mozilla Dokumentation der Entwickler.
2. Destrukturieren
Destrukturierung wird verwendet, um Daten aus komplexen Datenstrukturen zu erhalten. In JavaScript können Arrays und Objekte viele Werte speichern. Sie können die Werte manipulieren und sie in verschiedenen Teilen der Anwendung verwenden.
Um diese Werte zu erhalten, müssen Sie die Variable destrukturieren. Abhängig von der Datenstruktur, mit der Sie es zu tun haben, können Sie die Punktnotation (.) oder die Klammernotation verwenden. Zum Beispiel:
konst Schüler = {'Name': 'Maria',
'Adresse': 'Südpark, Bethlehem',
'Alter': 15
}
Destrukturieren:
Konsole.log (student.name) // Maria ausgebenIm obigen Beispiel greift die Punktnotation auf den Wert des Schlüssels „name“ zu. In ReactJS verwenden Sie das Destrukturierungskonzept, um Werte in Ihrer Anwendung zu erhalten und zu teilen. Die Destrukturierung hilft, Wiederholungen zu vermeiden und macht Ihren Code lesbarer.
3. Array-Methoden
Bei der Arbeit an React-Projekten werden Sie mehrmals auf Arrays stoßen. Ein Array ist eine Sammlung von Daten. Sie speichern Daten in Arrays, sodass Sie sie bei Bedarf wiederverwenden können.
Array-Methoden werden hauptsächlich zum Bearbeiten, Abrufen und Anzeigen von Daten verwendet. Einige häufig verwendete Array-Methoden sind Karte(), Filter(), Und reduzieren(). Sie müssen mit der vertraut sein Array-Methoden zu verstehen, wann sie jeweils anzuwenden sind.
Zum Beispiel die Karte() -Methode durchläuft alle Elemente in einem Array. Es wirkt auf jedes Element des Arrays, um ein neues Array zu erstellen.
konst zahlen = [9, 16, 25, 36];
konst squaredArr = Zahlen.map(Mathematik.sqrt) // 3,4,5,6
In ReactJS werden Sie häufig Array-Methoden verwenden. Sie werden sie verwenden, um Arrays in Strings umzuwandeln, zu verknüpfen, Elemente hinzuzufügen und Elemente aus anderen Arrays zu entfernen.
4. Kurze Bedingungen
Bedingungen sind Anweisungen, die JavaScript verwendet, um Entscheidungen im Code zu treffen. Zu den kurzen Bedingungen gehören && (und), II (oder) und der ternäre Operator. Dies sind kürzere Ausdrücke von Bedingungen und die if/else-Anweisungen.
Das folgende Beispiel zeigt, wie ein ternärer Operator verwendet wird.
Code mit if/else-Anweisung:
FunktionÖffnungszeit(Tag) {
Wenn (Tag == SONNTAG) {
zurückkehren12;
}
anders {
zurückkehren9;
}
}Code mit ternärem Operator:
FunktionÖffnungszeit(Tag) {
zurückkehren Tag == SONNTAG? 12: 9;
}Lernen verschiedene Arten von Bedingungen mit besonderem Fokus auf kurze Bedingungen. Diese werden in React häufig verwendet.
5. Vorlagenliterale
Vorlagenliterale verwenden Backticks (``), um eine Zeichenfolge zu definieren. Vorlagenliterale ermöglichen es Ihnen, Zeichenfolgendaten zu manipulieren, um sie dynamischer zu machen. Getaggte Template-Literale ermöglichen es Ihnen, Operationen innerhalb einer Zeichenfolge auszuführen. Dies sind kürzere Ausdrücke von Bedingungen und die if/else-Anweisungen.
Zum Beispiel:
lassen Vorname = "Jane";lassen Nachname = "Damhirschkuh";
lassen Text = „Willkommen ${firstName}, ${lastName}!`; // Willkommen Jane Doe!
6. Spread-Operatoren
Der Spread-Operator (...) kopiert die Werte eines Objekts oder Arrays in ein anderes. Seine Syntax besteht aus drei Punkten, gefolgt vom Namen der Variablen. Zum Beispiel (...Name). Es führt die Eigenschaften von zwei Arrays oder Objekten zusammen.
Das folgende Beispiel zeigt, wie Sie den Spread-Operator verwenden, um die Werte einer Variablen in eine andere zu kopieren.
konst Namen = ['Maria', 'Jane'];
konst Gruppenmitglieder = ['Fred',... Namen, 'Angela']; // ["Fred", "Mary", "Jane", "Angela"]
Sie können den Spread-Operator für eine Reihe von Operationen verwenden. Dazu gehören das Kopieren des Inhalts eines Arrays, das Einfügen eines Arrays in ein anderes, der Zugriff auf verschachtelte Arrays und das Übergeben von Arrays als Argumente. Sie können den Spread-Operator in ReactJS verwenden, um die Zustandsänderungen in Komponenten zu handhaben.
Warum ReactJS lernen?
ReactJS ist aus gutem Grund beliebt. Es hat eine kurze Lernkurve, ist zuverlässig und rendert schnell im DOM. Es unterstützt eigenständige Komponenten und verfügt über hervorragende Debugging-Tools.
ReactJS enthält neue JavaScript-Konzepte von ECMAScript 6 (ES6). Das Erlernen grundlegender Konzepte in JavaScript erleichtert die Entwicklung von Projekten in ReactJS.
Um das Ganze abzurunden, hat ReactJS eine großartige Community, die ständig neue Updates veröffentlicht. Wenn Sie eine JavaScript-Bibliothek lernen möchten, wäre ReactJS eine gute Wahl. Das Next.js-Framework ergänzt die Einschränkungen von ReactJS. Eine Kombination aus beidem macht ReactJS zu einer leistungsstarken Front-End-Bibliothek.
