Wie installiere ich React unter Windows? Der komplette Leitfaden

ReactJS ist eine kostenlose Open-Source-JavaScript-Bibliothek, die uralte Frontend-Entwicklungstechniken erheblich verändert hat. React wurde 2013 veröffentlicht und war ein internes Projekt von Facebook. Seitdem wurde React von verschiedenen Organisationen und Startups übernommen. Frontend-Entwickler mit ausreichenden Kenntnissen in JavaScript, HTML und CSS können interaktive Benutzeroberflächen sowohl für Web- als auch für mobile Anwendungen erstellen. Einer der größten Vorteile von ReactJS ist sein komponentenbasierter Ansatz. Das Erstellen gekapselter wiederverwendbarer Komponenten mit ihrem eigenen unabhängigen Status vereinfacht die komplexen Benutzerschnittstellen.

Interessanterweise mag alles, was wir in ReactJS schreiben, wie HTML erscheinen, ist es aber nicht. Es ist bekannt als JSX, JavaScript XML-Datei. Diese JSX erzeugt React-„Elemente“, die in das Document Object Model gerendert werden. Laienhaft ausgedrückt erlaubt uns JSX, JavaScript-Logik in den HTML-Körper zu schreiben. Dadurch wird React viel einfacher und verständlicher.

Um es optimal zu nutzen, lernen Sie, wie Sie React JS unter Windows installieren.

Wie installiere ich React JS unter Windows?

Systemanforderungen für Windows

Während die Verwendung von ReactJs ziemlich schmerzlos ist, kann der Prozess der Installation von React JS in Windows ziemlich mühsam sein. Da ReactJS ein Open-Source-Projekt ist, ist es nicht so einfach wie das Herunterladen von Software aus dem Internet. In erster Linie gibt es einige Voraussetzungen für die Verwendung von ReactJS unter Windows.

1. Windows-Version: Windows XP, Windows 7 (32/64 Bit) oder höher.
2. Mindestens 4 GB RAM erforderlich.
3. Mindestens 10 GB Speicherplatz auf Ihrer Festplatte.
4. Ein Internetbrowser wie Chrome, Microsoft Edge, Firefox etc.
5. Ein Editor zum Debuggen und Testen von in ReactJS geschriebenem Code.

Lernen Sie Softwareentwicklungskurse online von den besten Universitäten der Welt. Verdienen Sie Executive PG-Programme, Advanced Certificate-Programme oder Master-Programme, um Ihre Karriere zu beschleunigen.

Herunterladen und Installieren von Node.js

Node.js ist der Server, der Ihnen hilft, den ReactJS-Code auf Ihrem System auszuführen. Ähnlich wie ReactJS ist es auch Open Source. Das Node.js-Installationsprogramm enthält NPM (Node Package Manager), das verschiedene Knotenmodule enthält, die Entwickler verwenden, um ihre eigenen Module in Open-Source-Communities zu hosten und zu veröffentlichen. Somit arbeitet der Node Seite an Seite mit der NPM-Registrierung, was die Installation von Paketen mit der NPM-CLI vereinfacht. Der Node verpackt die ReactJS-Anwendung außerdem in ein einzelnes Webpaket, das eine einfache Installation ermöglicht.

Hier ist das schrittweise Verfahren zum Herunterladen und Installieren von Node.js:

1. Um Node.js zu installieren, gehen Sie zu https://nodejs.org/en/ .
2. Abhängig von Ihrer Windows-Betriebssystemversion müssen Sie ein geeignetes Installationsprogramm auswählen.
3. Die Node.js-Startseite empfiehlt abhängig von Ihrem Betriebssystem eine LTS-Version. Ein Klick darauf startet automatisch den Download.
4. Sie finden den Installer im Download-Ordner. Führen Sie das Installationsprogramm aus.
5. Auf dem Bildschirm erscheint ein Einrichtungsassistent, der nach der Endbenutzer-Lizenzvereinbarung fragt. Akzeptieren Sie die Nutzungsbedingungen, um mit der Installation fortzufahren.
6. Dann muss der Benutzer einen Zielordner mit dem Standardpfad des Installationsprogramms auswählen. Klicken Sie auf Weiter, um fortzufahren.
7. Das Installationsprogramm zeigt dann die Features an, die installiert werden, und legt auch die Umgebungspfadvariablen für die Eingabeaufforderung fest. Klicken Sie auf Weiter, um mit der Installation zu beginnen.
8. Überprüfen Sie nach Abschluss der Installation die Node.js in Ihrem System mithilfe der Eingabeaufforderung.
9. Geben Sie „node -v“ in die Eingabeaufforderung ein, um die installierte Version von Node.js zu überprüfen.
10. Geben Sie „npm -v“ in die Eingabeaufforderung ein, um auch die Installation von npm zu überprüfen.

React installieren

Nach der Installation von Node.js können wir React JS unter Windows mit zwei Techniken installieren:

• Mit Webpack und Babel

1. Root-Ordner erstellen

Erstellen Sie vor der Installation von ReactJS einen Stammordner mit dem Namen „reactFile“ mit den folgenden Befehlen in der Eingabeaufforderung.

C:\Benutzer\Benutzername\Desktop>mkdir-reactFile

C:\Benutzer\Benutzername\Desktop>cd-reactFile

Generieren Sie nach dem Erstellen des Verzeichnisses eine package.json-Datei mit dem folgenden Befehl in der Eingabeaufforderung. Eine package.json-Datei hilft beim Erstellen von Modulen.

C:\Benutzer\Benutzername\Desktop>reactFile>npm init

Die Eingabeaufforderung fragt dann nach Informationen zum Modul; Überspringen Sie es, indem Sie die Option „-y“ auswählen.

2. Installieren Sie React und React-Dom

Installieren Sie React- und React-Dom-Pakete mit den folgenden npm-Befehlen und fügen Sie die Pakete mit dem Befehl „-save“ zur Datei „package.json“ hinzu.

C:\Benutzer\Benutzername\Desktop>reactFile> npm install respond –save

C:\Benutzer\Benutzername\Desktop>reactFile> npm install relay-dom –save

Entdecken Sie unsere kostenlosen Kurse zur Softwareentwicklung

3. Webpack installieren

Installieren Sie webpack, webpack-dev-server und webpack-cli mit den folgenden Befehlen.

C:\Benutzer\Benutzername\Desktop>reactFile> npm install webpack webpack-dev-server webpack-cli –save

4. Installieren Sie Babel

Babel ist ein Transpiler, der JavaScript-Code in etwas umwandelt, das der Browser versteht. Daher ist die Installation von Babel und seinen folgenden Plugins, nämlich babel-loader, babel-preset-env, babel-preset-react und html-webpack-plugin, sehr wichtig.

Verwenden Sie den folgenden Befehl, um alle babel-Plugins auf einmal zu installieren.

C:\Benutzer\Benutzername\Desktop\reactFile>npm install babel-core babel-loader babel-preset-env babel-preset-react html-webpack-plugin –save-dev

5. Erstellen Sie ReactJS-Dateien

Um den Installationsvorgang abzuschließen, müssen wir bestimmte Dateien manuell über die Eingabeaufforderung erstellen.

C:\Benutzer\Benutzername\Desktop\reactFile> geben Sie nul ein > index.html

C:\Benutzer\Benutzername\Desktop\reactFile> geben Sie nul ein > App.js

C:\Benutzer\Benutzername\Desktop\reactFile> geben Sie nul ein > main.js

C:\Benutzer\Benutzername\Desktop\reactFile> geben Sie nul ein > webpack.config.js

C:\Benutzer\Benutzername\Desktop\reactFile>geben Sie nul > .babelrc ein

6. Richten Sie Compiler, Server und Loader ein

Sobald diese ReactJS-Dateien im Ordner „reactFile“ erstellt wurden, können Sie den Bereitstellungsserver vorbereiten, indem Sie ihn an Port 8001 oder einem beliebigen Port in webpack.-config.js einrichten.

Verwenden Sie den folgenden Code in der Datei webpack-config.js,

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

Eintrag: './main.js',

Ausgang: {

Pfad: path.join(__dirname, '/bundle'),

Dateiname: 'index_bundle.js'

},

devServer: {

Inline: wahr,

Port: 8001

},

Modul: {

Regeln: [

{

test: /\.jsx?$/,

ausschließen: /node_modules/,

loader: 'babel-loader',

Anfrage: {

Voreinstellungen: ['es2015', 'reagieren']

}

}

]

},

Plugins:[

neues HtmlWebpackPlugin({

Vorlage: './index.html'

})

]

}

7. Einrichten von index.html

Schreiben Sie in die index.html einen regulären HTML-Code mit div id="app" als Root-Element und fügen Sie dann das index_bundle.js-Skript im HTML-Text hinzu.

Gefragte Fähigkeiten in der Softwareentwicklung

8. Einrichten von App.js und main.js

Schreiben Sie die React-Komponente in App.js, um eine Klasse oder Funktion zu rendern. Fügen Sie den Text, den Sie rendern möchten, in die Komponente ein, die nach der Kompilierung im Browser angezeigt wird. Importieren Sie dann die Komponente in unser Root-App-Element in main.js, damit die Ergebnisse im Browser angezeigt werden.

Erstellen Sie eine Datei „.babelrc“ und fügen Sie die folgenden Codezeilen ein,

{

„Voreinstellungen“:[„env“, „reagieren“]

}

9. Anzeigen des Inhalts auf der Webseite

Das Setup ist endlich abgeschlossen und der Server ist betriebsbereit, sobald Sie den folgenden Befehl in die Eingabeaufforderung eingeben.

C:\Benutzer\Benutzername\Desktop\reactFile>npm start

Sobald Sie die Eingabetaste drücken, zeigt Ihnen der Browser die Nachricht, die Sie in der Komponente gerendert haben.

• Verwenden des Befehls create-react-app

1. Installiere create-react-app

Öffnen Sie die Eingabeaufforderung und schreiben Sie den folgenden Code, um die create-react-app zu installieren.

C:\Benutzer\Benutzername\Desktop>npx create-react-app my-app

Dieser Befehl installiert alle erforderlichen Dateien und Ordner im Ordner „my-app“ Ihres Desktops. Diese eine Codezeile schließt die Installation von React in Ihrem System in wenigen Minuten ab.

2. Führen Sie den Server aus

Gehen Sie zur Eingabeaufforderung und geben Sie ein

C:\Benutzer\Benutzername\Desktop>cd my-app

C:\Benutzer\Tutorialspoint\Desktop>my-app> npm start

Ihr React-Projekt wird in Ihrem Browser mithilfe von localhost ausgeführt, das Ihr Projekt auf dem verfügbaren Port hostet.

Erkunden Sie unsere beliebten Softwareentwicklungskurse

Abschluss

ReactJS hat das Frontend-Entwicklungsspiel seit seiner Veröffentlichung verändert und sich zu einer der beliebtesten Open-Source-JavaScript-Bibliotheken entwickelt. Mehrere Unternehmen wie Meta, Netflix und Slack verwenden ReactJS. Einer der größten Vorteile ist die Wiederverwendbarkeit der Komponenten, um Änderungen in die Webseite einzufügen. Mehrere React-Apps werden mithilfe von Azure DevOps in Azure Web App bereitgestellt. Dies ist derzeit eine der gefragtesten Fähigkeiten in der IT-Branche.

Wenn Sie ein React-Entwickler sind, können Sie Ihre Fähigkeiten verbessern, indem Sie Azure DevOps durch das Advanced Certificate Program in DevOps von upGrad von IIIT Bangalore kennen . Der Kurs bietet mehr als 250 Stunden Lernmodule zusammen mit einem Leitfaden zur Vorbereitung auf ein Vorstellungsgespräch. Sie können auch an Karriere-Mentoring-Sitzungen mit DevOps-Experten teilnehmen, die Ihnen einen klaren Fahrplan für die Erwartungen der Branche geben können. Am Ende des Kurses erhalten Sie ein Zertifikat und den IIITB-Alumni-Status, was ihn zu einer außergewöhnlichen Ergänzung Ihres Lebenslaufs macht!