Installieren von React.js auf einem Mac

Die Software ist eine kostenlose Open-Source-Front-End-JavaScript-Bibliothek. 2013 wurde React.JS von Facebook gegründet.

Es ist eine Benutzerschnittstellenbibliothek (UI), die zum Erstellen und Bearbeiten von UI-Komponenten verwendet wird. Es ist ein Paket, mit dem Entwickler hocheffiziente datengesteuerte SPA-Apps erstellen können.

Es basiert auf funktionaler Programmierung, stützt sich auf das Konzept der Unveränderlichkeit und fördert eine komponentenbasierte Architektur, die auf dem Prinzip der einmaligen Wiederverwendbarkeit basiert.

In diesem Artikel gehen wir die Verfahren zur Installation von React auf einem Mac durch. Nachdem Sie die Installationsphasen abgeschlossen haben, empfehlen wir Ihnen dringend, an der React-Schulung online teilzunehmen.

Lassen Sie uns einige Begriffe untersuchen, bevor Sie

NodeJS und NPM

• Sie müssen zuerst NodeJS und NPM installieren, um die Installation von React auf dem Mac zu erhalten.
• Es ist eine JavaScript-Engine, mit der Sie es außerhalb des Browsers ausführen können.
• NPM (Node Package Manager) wird auf der Kommandozeile verwendet. Es soll Bibliotheken wie ReactJS installieren.
• Sie können NodeJS über die offizielle Website installieren. Wenn Sie NodeJS installieren, wird es auch NPM für Sie herunterladen.
• Nachdem Sie NodeJS von ihrer Website heruntergeladen haben, finden Sie die „.pkg“-Datei. Doppelklicken Sie einfach darauf. Es wird ein Popup-Fenster für die Installation starten.
• Sie werden zum Installationsvorgang weitergeleitet. Klicken Sie auf „Installieren“ oder „Installationsort ändern“
• Wenn der Vorgang abgeschlossen ist, werden Sie mit einer abschließenden Meldung aufgefordert. Ihr NodeJS und NPM sind installiert.

ReactJS unter MacOS installieren

Nach der Installation von NodeJS und NPM kann man ReactJS installieren. Dies geschieht durch Ausführen von npm install-save respond respond-dom.

Erstellen Sie ein ReactJS-Projekt

Da wir ReactJS installiert haben, kann man ein neues React-Projektverzeichnis erstellen. Dies geschieht durch Ausführen von npx create respond project. Erstellen-Reagieren-App.

Reagieren - Einführung

Bevor wir mit der Installation der React-Lib auf dem Mac fortfahren, müssen wir uns zunächst ein grundlegendes Verständnis von React aneignen.

• React ist ein Paket, das Webentwickler und -architekten dabei unterstützt, die Erwartungen von Kunden zu erfüllen, die einen hohen Datenfluss und schnell reagierende Benutzeroberflächen im Zusammenhang mit Daten benötigen.
• Es basiert auf einer komponentenbasierten Architektur. Die Webseite kann durch Parent- und Child-Komponenten dargestellt werden.
• Es stützt sich weitgehend auf Virtual DOM, das als Leistungsoptimierer für DOM-Vorgänge fungiert.
• Eine HTML-Webseite hat einen DOM-Baum, den der Browser zum Rendern der Webseite verwendet.

Wenn ein Benutzer mit einer Seite interagiert, beinhaltet dies das Hinzufügen und Einfügen von Informationen basierend auf der Aktion des Benutzers. wie in Ein Benutzer hat einen Artikel in den Warenkorb gelegt. Der Warenkorb zeigt nun den geänderten Artikel als Ergebnis der Entscheidung des Benutzers an.

Hinter den Kulissen wird das HTML-Dokument einer Transformation unterzogen, die es ermöglicht, die geänderte Seite zu teilen.

Wie bereits erwähnt, repräsentiert der DOM-Baum das HTML-Dokument. Im vorherigen Fall erfordert das DOM einige Anpassungen, die das Einfügen und Löschen bestimmter HTML-Knoten umfassen.

Dies hilft bei der Anzeige der wesentlichen Informationen, die symbolisieren, was ein Benutzer im Zusammenhang mit der Überarbeitung seiner zu tun versucht

Kaufentscheidung.

Wir können das DOM als einen Baum sehen, um es besser zu verstehen.

Der Baum hat sowohl Wurzeln als auch Äste. In ähnlicher Weise befindet sich das HTML-Element oben im DOM, und Knoten darunter sind mit dem übergeordneten Knoten verbunden. In Bezug auf die Baumanalogie kann der übergeordnete Knoten als Stamm dargestellt werden, wobei andere Knoten mit dem Stamm verbunden sind. Und React wird verwendet, um die Einfüge- und Löschvorgänge auf diesen Knoten zu verbessern.

Mit dieser Einfüge- und Löschoperation im HTML-DOM ist eine Speichereinbuße verbunden. In Bezug auf DOM-Aktualisierungsvorgänge fungiert virtuelles DOM als Leistungsoptimierer.

Es bewahrt zwei Kopien auf: eine des echten DOM (react DOM) und eine der vorzunehmenden Aktualisierungen. Der Prozess der Minimierung von Modifikationen am Reaktions-DOM wird ebenfalls als Teil des Abstimmungsprozesses erforscht.

Node.js und npm

Node.js führt den Code von JavaScript aus. Es ist eine Open-Source- und plattformübergreifende JavaScript-Laufzeitumgebung. Angetrieben wird er vom Chrome-V8-Motor. Die Chrome V8-Engine ist in C++ geschrieben. Node ist mit Windows, Mac und Linux kompatibel.

Nach der Installation von Node.js können wir die React-basierte App während der Entwicklung lokal auf unserem System ausführen. Dadurch können wir unser Programm auch auf dem Produktionsserver bereitstellen.

Node.js enthält die folgenden Funktionen:

• Verwendet JavaScript als Kernsprache
• Nicht blockierende E/A
• Unterstützt asynchrone Programmierung
• Kann zahlreiche Verbindungsanforderungen mithilfe eines einzigen Servers verwalten.

Npmjs.org ist ein Online-Code-Repository mit Tausenden von Modulen (npm), das es uns ermöglicht, Knotenmodule mit einfachen Befehlen zu installieren.

Einige Module sind in sich abgeschlossen, während andere eine gegenseitige Abhängigkeit erfordern, um richtig zu funktionieren. Mit Node.js können wir Lese- und Schreibvorgänge auf dem Server durchführen. Es ermöglicht Ihnen auch, mit Datenbanken zu arbeiten.

Anstatt Funktionalität von Grund auf neu zu erstellen, können wir nach einem Modul suchen und seine Funktionalität wiederverwenden und erweitern.

Entwicklerinitiativen sind in der Regel mit Zeit- und Budgetbeschränkungen verbunden. Wenn es um Node geht. js-basierte Entwicklung ist npmjs.org eine Lebensader für die Entwickler-Community.

Um zusammenzufassen

In diesem Tutorial haben wir React.js und den komponentenbasierten Architekturansatz in React.js kennengelernt. Wir haben uns auch einen allgemeinen Überblick über das virtuelle DOM verschafft.

Wir haben das Konzept der Abstimmung, die Verwendung von Node.js in der Welt von JavaScript und seine Fähigkeit besprochen, nicht blockierende E/A-Ausgaben zu verwalten, um Client-Verbindungsanfragen gleichzeitig zu erfüllen.

Wir haben zwei Techniken zum Installieren von Node.js getestet: eine mit der Paketverwaltung und eine mit der Befehlszeile.

Um schnell mit React.js zu beginnen, haben wir das Modul create-react-app verwendet. Wir können auch die Befehlszeile verwenden, um React.js zu installieren.

Um nicht mit zu vielen Details überladen zu werden, haben wir für dieses Tutorial die Create-React-App-Technik verwendet. Wir haben gesehen, wie unsere erste React-App nach der Entwicklung ausgeführt wurde. Wir haben schnell die wichtigen Dateien ausgewertet, die die App betreiben, um uns mit dem Code aus Entwicklungssicht vertraut zu machen.

Lesen Sie auch:

• Mac-Viren leben! Töten Sie sie und verweilen Sie in Ruhe!