Voraussetzungen für das Erlernen von ReactJS

Einführung

React JS ist eine Open-Source-Frontend-Bibliothek. Ihr Hauptziel ist die Entwicklung schneller und ansprechender Benutzeroberflächen für Web- und Mobilanwendungen.

ReactJS, entwickelt von Facebook, verleiht Websites ein attraktives Aussehen und ist daher bei vielen Entwicklern beliebt. Viele machen jedoch den Fehler, sich direkt in ReactJS (oder eine andere Bibliothek bzw. ein Framework) zu stürzen, ohne die Voraussetzungen zu verstehen. Ein unüberlegter Einstieg kann sowohl beim Erlernen der Bibliothek als auch in Vorstellungsgesprächen zu erheblichen Problemen führen.

Wesentliche Voraussetzungen für das Erlernen von ReactJS

HTML und CSS

Die Bausteine des Webs sind HTML und CSS. Die Sprache, mit der die einzelnen Komponenten einer Website in Ihrem Webbrowser beschrieben werden, heißt HTML (Hypertext Markup Language). Dadurch können Sie Überschriften, Absätze, Links, Einbettungen und vieles mehr mithilfe von HTML definieren. Dies hilft Ihrem Browser zu verstehen, wie die angezeigte Webseite strukturiert sein soll.

Die Sprache CSS (Cascading Style Sheets) verleiht Webseiten ihr Aussehen und Layout. Mit anderen Worten: CSS dient dazu, attraktive Webseiten mit schönen Schriftarten, lebendigen Farben, beeindruckenden Hintergründen und sogar ansprechenden Übergängen und 3D-Effekten zu erstellen.

Jeder Frontend-Entwickler beginnt mit HTML und CSS. Wenn Sie also lernen, wie man React verwendet, sollten Sie HTML und CSS beherrschen.

Die erste Voraussetzung für das Erlernen von ReactJS ist der Einstieg in HTML und CSS. Sie müssen wissen, wie man semantische HTML-Tags erstellt, CSS-Selektoren schreibt, Klassen und CSS-Überschreibungen verwendet, das Boxmodell implementiert und auf Border-Box und Flexbox umstellt – neben HTML und CSS für Frontend-Anwendungen und responsive Web-Apps. .

JavaScript- und ES6-Grundlagen

Die nächste Version von JavaScript, ECMAScript 6 oder ES6, bringt viele Änderungen und neue Funktionen mit sich. Dank der beeindruckenden neuen Features und der neuen JavaScript-Syntax von ES6 wird Ihr Code moderner und lesbarer. Sie erreichen mehr mit weniger Code. Wir lernen einige der großartigen neuen Funktionen von ES6 kennen, wie Module, Template-Strings, Klassendestruktoren und Flash-Funktionen.

Bevor Sie React lernen, sollten Sie ES6 beherrschen, da Hooks die klassenbasierten Komponenten ersetzt haben. Sie werden feststellen, dass Hooks ES6-Funktionen umfassend nutzen.

Die Verwendung von React wird für Sie eine Herausforderung darstellen, wenn Sie sich mit dem Schreiben von Pfeilfunktionen nicht wohlfühlen, da mehrere Hooks das Verschachteln von Pfeilfunktionen erfordern, was verwirrend sein kann.

Da React JS ES6 vollständig unterstützt, wird das Erlernen und Verstehen von ES6 Ihr Leben als React JS- und Javascript-Entwickler verbessern, da es das Lesen und Schreiben von React JS-Code deutlich erleichtert.

Git und CLI (Befehlszeilenschnittstelle)

Im Softwareentwicklungsprozess ist Git ein sehr wichtiges und effektives Werkzeug.

Git ist im Wesentlichen ein verteiltes Versionskontrollsystem zur Nachverfolgung von Quellcodeänderungen während der Anwendungsentwicklung. Git kann zur Überwachung des Fortschritts auf jedem Dateisystem verwendet werden, selbst wenn es ursprünglich zur Erleichterung der Zusammenarbeit zwischen Entwicklern entwickelt wurde.

Lernen Sie die Verwendung von Befehlen wie push, pull, append, commit usw., da Sie diese benötigen, um die Version Ihrer Dateien zu verfolgen. Lernen Sie außerdem, wie Sie Dateien zusammenführen, Branches erstellen und Merge-Konflikte verwalten.

Die Befehlszeilenschnittstelle (CLI) hilft Ihnen bei allen Aktionen in React. Sie sollten sich mit der CLI vertraut machen, da sie für viele verschiedene Aufgaben eingesetzt werden kann, z. B. zum Installieren von Paketen, Verwenden von NPM, Erstellen und Ausführen von React-Anwendungen und vieles mehr.

Paketmanager (Node + Npm)

Bei der Verwendung von ReactJS ist es unerlässlich, mehrere kleinere Softwarepakete zu installieren. Node-Pakete sind JavaScript-Bibliotheken, die alle notwendigen Dateien enthalten. Module sind JavaScript-Bibliotheken, die in Node-Projekte eingebunden werden. Pakete bestehen aus zwei Komponenten: JS-Dateien und package.json-Dateien. Für die Einrichtung dieser Pakete benötigen Sie ein leistungsstarkes Installationsprogramm, das Ihnen das Herunterladen und Einrichten der Anwendung erleichtert, ohne dass Sie sich um Abhängigkeiten kümmern müssen.

Hier kommt der Node Package Manager (NPM) ins Spiel, der Ihnen bei der Installation und Verwaltung von JavaScript-Anwendungen hilft. Sie können NPM installieren, indem Sie zuerst Node.js installieren. NPM wird bei der Installation von Node.js automatisch eingerichtet.

Sie können Node.js von der offiziellen Website herunterladen. Klicken Sie hier.

Der beste Weg, um mit der Entwicklung einer neuen Single-Page-Anwendung in React zu beginnen, ist die Verwendung von Create React App, einer komfortablen Umgebung zum Erlernen von React.

Die folgenden Befehle erstellen ein Beispielprojekt für Sie. Gehen Sie wie folgt vor, um zu beginnen:

npx create-react-app my-app
cd my-app
npm start

Bevor Sie sich also mit React beschäftigen, sollten Sie mit dem NPM-Repository (Node Package Manager) und den Techniken zur Paketinstallation vertraut sein. Kurz gesagt: Das NPM-Repository ist die zentrale Anlaufstelle für Entwickler, um die benötigte Software für ihre Entwicklung zu finden.

ES6-Variablen – Let und Const

Vor ES6 deklarierten Entwickler Variablen entweder mit dem Schlüsselwort `var` oder ohne. Doch das hat sich komplett geändert!

Mit ES6 begann für JavaScript die moderne Ära. ES6 führte zwei neue Schlüsselwörter zur Definition von Variablen ein: `let` und `const`. Sie unterscheiden sich in ihrem Gültigkeitsbereich, der festlegt, wo und ob eine Variable verwendet werden kann. Variablen können innerhalb einer Funktion, innerhalb eines Blocks oder außerhalb von Funktionen und Blöcken definiert werden.

var: Funktionsbereichsebene – Dieses Schlüsselwort erlaubt keinen Zugriff auf Variablen, die innerhalb von Funktionen deklariert wurden, von außerhalb.

let: Blockbereichsebene – Das Schlüsselwort let macht Variablen auch außerhalb des Deklarationsbereichs zugänglich.

const: Blockebene-Gültigkeitsbereich – Das Schlüsselwort const ist vergleichbar mit Variablen, die mit dem Schlüsselwort let deklariert werden. Der Wert einer Konstanten kann durch erneute Deklaration oder Speicherneuzuweisung nicht geändert werden.

Pfeilfunktionen

Arrow-Funktionen sind ein neues Feature in der ES6-Version von JavaScript. Im Vergleich zu regulären Funktionen ermöglichen sie ein einfacheres Schreiben von Funktionen.

• Es vereinfacht den Code und macht ihn leichter lesbar.
• Der größte Vorteil von kontextbezogenem «this» besteht darin, dass es die Notwendigkeit beseitigt, Funktionen zu «verknüpfen».
• Pfeilfunktionen werden von den meisten gängigen Browsern unterstützt.

let x = (x, y) => x * y;

Exporte und Importe

Mit ES6 können wir in JavaScript Module erstellen. Ein Modul kann Klassen, Funktionen, Variablen und Objekte enthalten. Durch die Verwendung von JavaScript-Modulen lässt sich der Code in verschiedene Dateien aufteilen. Dadurch wird die Codebasis übersichtlicher und einfacher zu pflegen.

Mithilfe der Befehle `export` und `import` können wir alle Elemente in einer anderen Datei verfügbar machen. Das Exportieren und Importieren von Elementen eines Moduls erfolgt über die Schlüsselwörter `export` und `import`.

Ruhe- und Ausbreitungsbediener

In JavaScript werden der Spread- und der Rest-Operator durch drei Punkte (…) dargestellt. Diese beiden Operatoren sind jedoch nicht identisch. Der Hauptunterschied besteht darin, dass beim Rest-Operator ein JavaScript-Array mit dem Rest einer vom Benutzer angegebenen Wertemenge gefüllt wird. Die Expanded-Syntax hingegen erweitert ein iterierbares Objekt zu seinen Elementen.

Destrukturierung von Objekt- und Array-Strukturen

Destrukturierung ist der Prozess, bei dem die einzelnen Komponenten eines Objekts oder Arrays entpackt werden. Durch Destrukturierung können Elemente nach dem Entpacken je nach gewünschter Aktion verändert und ausgetauscht werden.

JavaScript verwendet eckige Klammern [], um Arrays zu zerstören. Dies ermöglicht es uns, den Namen einer Variablen zu speichern, die dem Namen des Arrays zugewiesen ist, das das Element enthält.

Wenn wir ein Objekt zerstören, verwenden wir geschweifte Klammern mit dem exakten Namen des darin enthaltenen Objekts. Im Gegensatz zu Arrays, bei denen wir beliebige Variablennamen verwenden können, können wir bei Objekten nur den Namen der gespeicherten Daten verwenden, um das Element zu öffnen.

Template-Literale

ES6 führt mit Template Literals neue Funktionen ein, die es ermöglichen, Zeichenketten flexibler als mit dynamischen Zeichenketten zu generieren. Eine Zeichenkette wird üblicherweise mit einfachen (') oder doppelten Anführungszeichen (") erzeugt.

Ein Literal ist eine Zeichenkette, die eingebettete Ausdrücke mithilfe von Backticks ( ) ermöglicht. Zeichenketteninterpolation und mehrzeilige Zeichenketten können damit verwendet werden. Diese Zeichenkette war früher als Musterzeichenkette bekannt.

Kartenfilter und Reduzierung

In JavaScript gibt es drei Array-Funktionen: map, reduce und filter. Jede von ihnen führt eine Transformation oder Operation an einem Array durch und iteriert dabei über die Elemente. Jede Funktion erzeugt als Ergebnis ein neues Array.

Mit der map()-Methode wird ein Array erstellt, indem eine Funktion auf jedes Element des alten Arrays angewendet wird.

Die Methode `filter()` wendet eine Bedingung auf jedes Element des Arrays an. Wenn die Bedingung wahr ist, wird das Element dem Ausgabearray hinzugefügt. Wenn die Bedingung falsch ist, werden die Elemente nicht dem Ausgabearray hinzugefügt.

Wertearrays werden mithilfe der `reduce()`-Methode auf eine einzelne Zahl reduziert. Jedes Element des Arrays wird durch eine Reduzierfunktion geleitet, um den Ausgabewert zu erzeugen.

Klassen

JavaScript ES6 führt Klassen als neues Feature ein. Objekte werden mithilfe von Klassen definiert. Objekte können aus Klassen erzeugt werden.

Diese Klasse lässt sich mit einem einfachen Hausprototyp vergleichen. Sie enthält alle Informationen zu Räumen, Eingängen usw. Anhand dieser Beschreibung wird das Haus gebaut. Das Objekt ist das Haus. Wir können mehrere Objekte aus derselben Klasse generieren, da mit denselben Spezifikationen mehrere Häuser gebaut werden können.

// creation of a class
class Home {
constructor(area) {
this.area = area;
}
}
// creation of an object
const home1 = New Home(100);

Beginnen Sie mit dem Studium funktionaler Komponenten. React Hooks sind einfacher zu verwenden und benötigen weniger Codezeilen, um die gleichen Ziele zu erreichen als ihre klassenbasierten Pendants.

Auch wenn nicht jeder seine Anwendung mithilfe funktionaler Komponenten neu schreibt, sollten Sie sich dennoch mit Klassenkomponenten vertraut machen. Denn die meisten Anwendungen werden mithilfe von Klassenkomponenten entwickelt.

Im Vergleich zu funktionalen Komponenten ist die Erstellung von React JS-Klassenkomponenten komplexer. Eine React JS-Klasse enthält Konstruktoren, Lebenszyklusmethoden, Rendering-Funktionen und sogar Zustandsverwaltung zur Datenverwaltung.

Dies im Browser

In JavaScript verhält sich das Schlüsselwort `this` einer Funktion etwas anders als in anderen Sprachen. Es unterscheidet außerdem zwischen strikten und nicht-strikten Fällen.

Der Wert von `THIS` hängt üblicherweise von der Art des Funktionsaufrufs (Laufzeitausführung) ab. Bei jedem Funktionsaufruf kann er einen anderen Wert haben, da er während der Ausführung nicht per Zuweisung festgelegt werden kann. Mit der `bind()`-Methode lässt sich dieser Wert jedoch unabhängig von der Art des Aufrufs festlegen.

Promises und Async Awaiting

In JavaScript und Node.js gibt es verschiedene Möglichkeiten, Operationen zu verwalten. Bei der asynchronen Ausführung werden verschiedene Operationen gleichzeitig ausgeführt, und die Ausgabe jeder Operation wird verarbeitet, sobald darauf zugegriffen wird.

Ein Promise in NodeJS ist vergleichbar mit einem Versprechen in der realen Welt. Es gibt die Zusicherung, dass eine Aktion ausgeführt wird. Ein Promise steuert, was nach dem Eintreten eines asynchronen Ereignisses geschieht und verfolgt, ob das Ereignis ausgeführt wurde oder nicht.

Promises werden mithilfe von asynchronen Methoden und Async/Await verarbeitet. Der Code wurde kürzlich überarbeitet, um Promises lesbarer und einfacher nutzbar zu machen. Dadurch wird die asynchrone Programmierung vereinfacht, da sie synchronem Code ähnlicher wird.

Warum bevorzugen Unternehmen Reactjs?

1. Komponenten werden flüssiger geschrieben – die Effizienz des JavaScript-Codes kann mit JSX gesteigert werden.
2. Neben der Steigerung der Effizienz vereinfacht es auch die zukünftige Wartung.
3. Das Rendering wird dadurch beschleunigt.
4. Es sind nützliche Entwicklertools enthalten.
5. SPA (Single Page Application)
6. Die Datenverbindung ist unidirektional, ähnlich einem unidirektionalen Datenfluss.
7. SEO-freundlich

Ergebnis

React JS ist eine Open-Source-Frontend-Bibliothek. Ihr Hauptziel ist die Entwicklung schneller und ansprechender Benutzeroberflächen für Web- und Mobilanwendungen. Grundvoraussetzungen für React JS sind HTML und CSS, JavaScript und die Grundlagen von ES6, Git und die Kommandozeile (CLI) sowie ein Paketmanager (Node + npm). Sie sollten lediglich ES6-Variablen, Arrow-Funktionen, Exporte und Importe, Rest- und Spread-Operatoren, Objektdestruktoren und Arrays sowie das `this`-Schlüsselwort in JavaScript kennen. Ein Pattern-Alphabet ist ein String-Literal, das eingebettete Ausdrücke mithilfe von Backticks ermöglicht. JavaScript bietet drei Array-Funktionen: `map`, `reduce` und `filter`, um Operationen während der Iteration über ein Array durchzuführen.