Das Starten eines neuen React-Projekts ist bei so vielen Build-Tools sehr kompliziert. Es verwendet viele Abhängigkeiten, Konfigurationsdateien und andere Anforderungen wie Babel, Webpack, ESLint, bevor eine einzelne Zeile React-Code geschrieben wird. Das CLI-Tool „Create React App“ beseitigt all diese Komplexitäten und macht die React-App einfach. Dazu müssen Sie das Paket mit NPM installieren und dann ein paar einfache Befehle ausführen, um ein neues React-Projekt zu erhalten.

Der Create-React-App ist ein hervorragendes Tool für Anfänger, mit dem Sie React-Projekte sehr schnell erstellen und ausführen können. Es ist keine manuelle Konfiguration erforderlich. Dieses Tool umschließt alle erforderlichen Abhängigkeiten wie Webpack , Babel für das React-Projekt selbst und dann müssen Sie sich nur auf das Schreiben von React-Code konzentrieren. Dieses Tool richtet die Entwicklungsumgebung ein, bietet ein hervorragendes Entwicklererlebnis und optimiert die App für die Produktion.

Anforderungen

Die Create React App wird verwaltet von Facebook und kann auf jedem funktionieren Plattform , zum Beispiel macOS, Windows, Linux usw. Um ein React-Projekt mit create-react-app zu erstellen, müssen Sie die folgenden Dinge in Ihrem System installiert haben.

1. Knotenversion >= 8.10
2. NPM-Version >= 5.6

Lassen Sie uns die aktuelle Version von überprüfen Knoten Und NPM Im System.

Führen Sie den folgenden Befehl aus, um die Knotenversion in der Eingabeaufforderung zu überprüfen.

 $ node -v 

Führen Sie den folgenden Befehl aus, um die NPM-Version in der Eingabeaufforderung zu überprüfen.

 $ npm -v 

Installation

Hier erfahren wir, wie wir React installieren können CRA Werkzeug. Dazu müssen wir die unten aufgeführten Schritte befolgen.

Installieren Sie React

Wir können React mit dem npm-Paketmanager installieren, indem wir den folgenden Befehl verwenden. Sie müssen sich keine Sorgen über die Komplexität der React-Installation machen. Der npm-Paketmanager „create-react-app“ verwaltet alles, was für das React-Projekt benötigt wird.

 C:Usersjavatpoint> npm install -g create-react-app 

Erstellen Sie ein neues React-Projekt

Sobald die React-Installation erfolgreich ist, können wir mit dem Befehl „create-react-app“ ein neues React-Projekt erstellen. Hier wähle ich den Namen „reactproject“ für mein Projekt.

 C:Usersjavatpoint> create-react-app reactproject 

NOTIZ:Wir können die beiden oben genannten Schritte in einem einzigen Befehl kombinieren mitnpx. Npx ist ein Paket-Runner-Tool, das in der Version npm 5.2 und höher enthalten ist.

 C:Usersjavatpoint> npx create-react-app reactproject 

Es wird einige Zeit dauern, bis der obige Befehl React installiert und ein neues Projekt mit dem Namen „reactproject“ erstellt. Jetzt können wir das Terminal wie unten sehen.

Der obige Bildschirm zeigt an, dass das React-Projekt erfolgreich auf unserem System erstellt wurde. Jetzt müssen wir den Server starten, damit wir im Browser auf die Anwendung zugreifen können. Geben Sie den folgenden Befehl in das Terminalfenster ein.

 $ cd Desktop $ npm start 

NPM ist ein Paketmanager, der den Server startet und auf die Anwendung auf dem Standardserver http://localhost:3000 zugreift. Jetzt erhalten wir den folgenden Bildschirm.

Öffnen Sie als Nächstes das Projekt im Code-Editor. Hier verwende ich Visual Studio Code. Die Standardstruktur unseres Projekts sieht wie im folgenden Bild aus.

In der React-Anwendung gibt es mehrere Dateien und Ordner im Stammverzeichnis. Einige davon sind wie folgt:

node_modules:Es enthält die React-Bibliothek und alle anderen benötigten Bibliotheken von Drittanbietern.öffentlich:Es verwaltet das öffentliche Vermögen der Anwendung. Es enthält die index.html, in der React die Anwendung standardmäßig auf dem Element bereitstellt.Quelle:Es enthält die Dateien App.css, App.js, App.test.js, index.css, index.js und serviceWorker.js. Dabei ist die App.js-Datei immer für die Anzeige des Ausgabebildschirms in React verantwortlich.package-lock.json:Es wird automatisch für alle Vorgänge generiert, bei denen das NPM-Paket entweder den node_modules-Baum oder package.json ändert. Es kann nicht veröffentlicht werden. Es wird ignoriert, wenn es einen anderen Ort als das Paket der obersten Ebene findet.package.json:Es enthält verschiedene Metadaten, die für das Projekt erforderlich sind. Es liefert Informationen an npm, die es ermöglichen, das Projekt zu identifizieren und die Abhängigkeiten des Projekts zu verwalten.README.md:Es stellt die Dokumentation zum Lesen von React-Themen bereit.

Umgebungs-Setup reagieren

Öffnen Sie nun die src >> App.js Datei und nehmen Sie Änderungen vor, die Sie auf dem Bildschirm anzeigen möchten. Nachdem Sie die gewünschten Änderungen vorgenommen haben, speichern die Datei. Sobald wir die Datei speichern, kompiliert Webpack den Code neu und die Seite wird automatisch aktualisiert und Änderungen werden auf dem Browserbildschirm angezeigt. Jetzt können wir so viele Komponenten erstellen, wie wir möchten, und die neu erstellte Komponente in importieren App.js Datei und diese Datei wird in unsere Hauptdatei aufgenommen index.html Datei nach dem Kompilieren durch Webpack.

Wenn wir als Nächstes das Projekt für den Produktionsmodus erstellen möchten, geben Sie den folgenden Befehl ein. Dieser Befehl generiert den Produktions-Build, der am besten optimiert ist.

 $ npm build