Categories
Latest

So installieren und einrichten Sie React JS unter Windows

Einführung

In diesem Tutorial erfahren Sie, wie Sie React.js unter Windows installieren.

React.js ist eine Bibliothek, die uns beim Erstellen und Erstellen von Front-End-Schnittstellen für Anwendungen mit nur einer Seite hilft und die Leistung des virtuellen DOM nutzt.

React.js war ein internes Projekt von Facebook und wurde im Jahr 2013 der Öffentlichkeit zugänglich gemacht. Die Einführung von React.js hat seit der Realisierung seiner Vorteile eine Aufwärtskurve erfahren. Verschiedene Startups und etablierte Organisationen übernehmen jetzt die Technologie und aktualisieren ihren Technologie-Stack.

1. Voraussetzung für Windows

Um React unter Windows zu installieren, benötigt Ihr System die folgende Mindestkonfiguration:

  1. Windows XP, Windows 7 (32/64 Bit) oder höher
  2. Mindestens 4 GB RAM und höher
  3. 10 GB verfügbarer Speicherplatz auf der Festplatte
  4. Mindestens ein Internetbrowser, z. Chrome, Firefox, Microsoft Edge usw.
  5. Node.js
  6. Aktive Internetverbindung Mindestgeschwindigkeit 512 kbps und höher.
  7. Mindestens ein installierter Code-Editor zum Testen und Debuggen Ihres Codes, z.

2. Einführung in React.js

React.js ist eine in TypeScript geschriebene Bibliothek. Es verwendet die Syntax der modernen Version von JavaScript, wie sie von ES6 und seiner höheren Version beschrieben wird.

Mit React.js erstellte Anwendungen verwenden das Prinzip der Einzelwiederverwendbarkeit. Dies befürwortet die Idee, Webseiten und Anwendungen mithilfe von Komponenten und unidirektionalem Fluss zu erstellen. In React.js haben wir das Konzept der Zustände und das Konzept der Unveränderlichkeit. Komponenten haben eine Hierarchie in Bezug auf übergeordnete und untergeordnete Komponenten. Eine Komponente im Fall von React.js kann als Code betrachtet werden, der auf dem Prinzip der reinen Funktionen basiert. Wir werden später auf die reine Komponente eingehen. Lassen Sie uns zunächst verstehen, was ein Staat ist. Zum Beispiel Um Mitglied eines Dienstes zu werden, gibt der Benutzer seine Informationen auf der Registrierungsseite ein. Während des Füllens der Details kann es viele Zustände des Formulars geben, z. Wenn das Formularfeld leer ist oder wenn im Formularfeld ein Fehler in einem bestimmten Feld aufgetreten ist, der korrigiert werden muss; oder wenn nach der Korrektur die Formulardaten validiert wurden und zur Übermittlung bereit sind. Auf einer breiten Ebene hat das Registrierungsformular verschiedene Staaten durchlaufen. Diese Zustände geben an, auf welcher Ebene sich die Anwendung im Hinblick auf die Interaktion mit dem Endbenutzer befindet. Jede Interaktionsebene für dieses Formular wird durch den Status dargestellt, von einem leeren Formular bis zu einem vollständig ausgefüllten Formular mit der Anzeige eines Fehlers für bestimmte Felder und das validierte Formular. In React.js haben wir die Komponente, die auf der reinen Funktion basiert. Eine reine Funktion kann als Code gespeichert werden, der eine Aufgabe erledigt und es ziemlich gut macht. Für eine bestimmte Eingabe wird immer dieselbe Ausgabe zurückgegeben. Dies bedeutet, dass wir die Vorhersagbarkeit des Codes erhöhen. Da React.js einem bestimmten Codemuster und bestimmten Prinzipien folgt, um zu funktionieren, wird die Kurve der Wissenslücke verringert. ob Sie eine Person oder ein Team von Entwicklern sind, die gemeinsam arbeiten.

3. Einführung in Node.js und NPM unter Windows

Zum Ausführen von React.js benötigen wir Node.js auf unserem System. Node.js ist ein Server, der uns beim Ausführen des React.js-Codes hilft. Er basiert auf nicht blockierenden Ein- und Ausgaben und der Chrome V8-JavaScript-Engine. Der Node.js-Code ist Open Source.

NPM, eine Abkürzung für Node Package Manager, npmjs.com, wird von verschiedenen Entwicklern auf der ganzen Welt unterstützt. Es verfügt über verschiedene Knotenmodule, mit denen Entwickler ihre Module in der Open-Source-Community hosten und veröffentlichen können. Es hostet Module in privater und öffentlicher Sichtbarkeit. Ein Modul enthält Code, der für Funktionen auf hoher oder niedriger Ebene vorhanden ist. In Bezug auf die Code-Übernahme und Verfügbarkeit verschiedener Module bietet es einen Vorteil und versucht, den Entwickler produktiver zu machen.

Wir können das Modul ein- und ausstecken. Einige Module sind von anderen Modulen abhängig. Dies ist als Abhängigkeit zwischen Modulen definiert.

Während der Erstellung einer Anwendung kann ein Entwickler das Modul auswählen, es an die Anforderungen der Anwendung anpassen und neu mischen und es dann für die Open-Source-Community freigeben. Anstatt das Rad neu zu erfinden, ist es so, als würde man ein Rad (npm-Modul) von npmjs.com auswählen, es weiter in Schwung bringen und es der Open-Source-Community zurückgeben.

4. Laden Sie Node.js herunter und installieren Sie es

Um Node.js zu installieren, müssen wir zur URL gehen https://nodejs.org

Abhängig von unserer Windows-Betriebssystemversion in Bezug auf 32-Bit oder 64-Bit können wir das Installationsprogramm auswählen und diese Version installieren.

In diesem Tutorial verwende ich Windows 8, 64 Bit.

Das Node.js-Installationsprogramm enthält NPM. Es ist am besten, die gerade nummerierte Version von NPM zu installieren.

Abhängig von Ihrem Betriebssystem werden auf der Nodejs.org-Homepage die Schaltfläche Herunterladen und die empfohlene LTS-Version angezeigt.

Nachdem der Download abgeschlossen ist, gehen wir zum Download-Ordner und führen das Installationsprogramm aus.

Das Installationsprogramm zeigt den folgenden Setup-Assistenten an. Weiter klicken.

Im nächsten Bildschirm werden Sie nach der Endbenutzer-Lizenzvereinbarung gefragt. Aktivieren Sie das Kontrollkästchen unten rechts, um Ihre Zustimmung zu erteilen, und klicken Sie auf Weiter, um mit der Installation fortzufahren.

Das Installationsprogramm fragt nach dem Zielordner. Der bei der Installation festgelegte Standardpfad lautet C: Programme nodejs
Klicken Sie auf die Schaltfläche Weiter

Der obige Bildschirm ist ein wichtiger Schritt im Installationsprozess. Wenn Sie genau hinsehen, werden auch die Umgebungspfadvariablen unter Windows als Eingabeaufforderung festgelegt.

Klicken Sie auf Weiter, um mit der Installation fortzufahren.

Das Windows-Betriebssystem fordert Sie möglicherweise auf, die Installation von Node.js zuzulassen und Änderungen vorzunehmen. Klicken Sie auf die Schaltfläche Ja.

Wenn Sie während der Installation die Installation von Chocolatey und der erforderlichen Module für C ++ und Python zugelassen haben, wird die folgende Benutzeroberfläche in der Eingabeaufforderung angezeigt. Diese Installation erfordert 3 GB freien Speicherplatz. In diesem Tutorial ist dieser Schritt nicht erforderlich. Wir überspringen diesen Schritt, indem wir das Fenster schließen.

Wenn Sie daran interessiert sind, es zu installieren, drücken Sie die Eingabetaste, um fortzufahren.

Nach Abschluss der Installation müssen Sie die Installation von Node.js überprüfen.

Dazu verwenden wir die Eingabeaufforderung.

Eingabeaufforderung ausführen

Drücken Sie die Tasten Win + R.

Und geben Sie cmd in das Fenster unten ein.

Weiter Klicken Sie auf OK oder drücken Sie die Eingabetaste auf der Tastatur.

5. Installation von React

Nach der Installation von Node.js müssen wir React installieren. Um die Node.js-Version zu überprüfen, öffnen Sie die Windows-Eingabeaufforderung.

Drücken Sie Win + R und geben Sie cmd ein.

Geben Sie in die Befehlszeile ein

Knoten -v um seine Version zu sehen.

Mit dem folgenden Befehl können wir auch nach der npm-Version suchen, die mit Node.js installiert ist

npm -v

Nachdem Sie diese Befehle ausgeführt haben, können Sie die Knotenversion v14.15.1 und die npm-Version 6.14.8 überprüfen

Nachdem wir die Installation von Node.js bestätigt haben, können wir mit den nächsten Schritten fortfahren.

Während wir in der Eingabeaufforderung waren, haben wir zu einem Ordner namens Codefactory navigiert, indem wir dem Befehl gefolgt sind cd Codefactory

In diesem Ordner haben wir einen Ordner namens erstellt Reaktionsfenster mit dem Befehl mkdir reaktionsfenster.

Nach dem Ordner Reaktionsfenster erstellt wurde, ändern wir das Verzeichnis in Reaktionsfenster mit dem Befehl

CD-Reaktionsfenster

React.js kann auf verschiedene Arten installiert werden.

Jetzt werden wir tippen npm init. Es wird zeilenweise nach der folgenden Konfiguration gefragt.

Geben Sie Ihre Eingabe ein, gefolgt von der Eingabetaste, um mit der nächsten Konfiguration fortzufahren.

Am Ende der Konfiguration werden die von Ihnen eingegebenen Eingaben bestätigt. Wenn Sie mit den Konfigurationsdaten zufrieden sind, geben Sie ein Ja und geben Sie ein, um fortzufahren.

Der npm init hilft uns beim Erstellen eines package.json Datei.

Für den nächsten Schritt zur Installation von React.js müssen wir zur Eingabeaufforderung gehen und den folgenden Befehl in das React-Windows-Verzeichnis eingeben.

npm install – speichern reagieren

Und nach dem obigen Befehl npm install –save react-dom

Hinter den Kulissen rufen diese Befehle das angegebene Modul von npmjs.com ab und laden es in die lokale Codebasis herunter.

Werfen wir einen Blick auf den React-Windows-Ordner. Hier sehen wir einige neu erstellte Verzeichnisse in node_modules.

In diesem Tutorial haben wir gelernt, React und reactDOM zu installieren.

Um das React.js SPA (Single Page App) zu sehen, muss im obigen Code noch mehr Arbeit geleistet werden.

Als alternative und schnelle Methode können wir dies über die Create-React-App tun

Lassen Sie uns in den Codefactory-Ordner und mit dem Befehl wechseln CD.. Erstellen Sie einen anderen Ordner React-Cli

Geben Sie als Nächstes den folgenden Befehl ein mkdir react-cliJetzt verwenden wir das Modul create-react-app und geben den folgenden Befehl ein

Bitte beachte, dass my-fast-app ist der Name Ihrer App. Dies ist ein Beispiel und Sie können kreativ bei der Auswahl Ihres eigenen Namens sein.

npx create-react-app my-fast-app

Wenn wir genau hinschauen, werden die restlichen Installationsschritte erledigt, und React, React-Dom und andere verwandte Module werden automatisch installiert.

Dieser Vorgang ist etwas datenintensiv. Bitte haben Sie etwas Geduld, während der Download und die Installation stattfinden

Wenn der obige Schritt abgeschlossen ist, zeigt die Eingabeaufforderung die folgende Ausgabe an.

Lassen Sie uns nun unsere erste Reaktions-App ausführen, indem Sie wie folgt zum Verzeichnis my-fast-app navigieren

cd my-fast-app

Und geben Sie den nächsten Befehl als ein npm starten

Der Befehl npm zeigt die Anwendung im Browser an. http: // localhost: 3000

Wenn Sie node.js zum ersten Mal mit dem Befehl npm ausführen, werden Sie um Erlaubnis gebeten, den Zugriff zuzulassen, und wir müssen den Zugriff zulassen.

Da wir einen Code-Editor verwenden, können wir uns die Verzeichnisstruktur und einige wichtige Dateien ansehen, z. B. index.html im öffentlichen Ordner, im src-Ordner index.js und App.js. Der Ordner src enthält die Reaktionskomponente, die wir auf dieser Codebasis weiter aufbauen können.

index.js ist der js-Aufrufpunkt für die React-App. Diese index.js ist mit der App.js verknüpft, die für die Anzeige des Inhalts im Browser verantwortlich ist. Das sehen wir auf der Demoseite.

Bearbeiten Sie die App.js, indem Sie in Zeile 10 den folgenden Code hinzufügen

Sprechen ist billig, zeig mir das Code

Sobald Sie die Datei mit Strg + S gespeichert haben

Der Code wird nach dem Kompilieren automatisch im Browser aktualisiert.

Es wird uns die folgende Ausgabe zeigen.

Sie können jetzt Nachrichten ändern und das Seitenlayout und die Struktur für Experimente ändern.

Wenn Sie mit CSS vertraut sind, können Sie den Seitenstil auch mit App.css ändern und den Code basteln.

Zusammenfassung

In diesem Tutorial haben wir Ihnen React.js vorgestellt. Die Auswirkungen auf den Aufbau moderner Front-End-Schnittstellen mithilfe komponentenbasierter Architektur sind erheblich. Wir haben auch das Konzept von Zuständen, Unveränderlichkeit und reinen Funktionen angesprochen.

Wir haben eine kurze Einführung in den Node.js-Server und die NPM-Module, die Funktionen des Node.js-Servers und die Leistungsfähigkeit der Open Source-Community auf npmjs.com.

Für die Installation von React ist die Installation von Node.j erforderlich.

Es gibt verschiedene Installationsmethoden. Sobald wir Node.js installiert haben, kann React entweder mit npm-Befehlen oder mithilfe des Moduls create-react-app installiert werden.

Leave a Reply

Your email address will not be published. Required fields are marked *