Share
React war in der Vergangenheit dafür bekannt, dass es schwierig war, mit der Erstellung von Apps zu beginnen, da man wirklich wissen musste, wie man Build-Tools manuell konfiguriert. Dies gilt sogar, bevor Sie eine einzelne Zeile mit React-Code schreiben.
Das Create-React-App-Tool ist bei diesem Problem enorm hilfreich, da es jedem ermöglicht wird, eine voll funktionsfähige React-App zu erstellen, ohne dass Kenntnisse in der Konfiguration der Build-Tools erforderlich sind. Die Realität ist, dass Create-React-App für die meisten Apps geeignet ist, insbesondere, wenn Sie mit React noch nicht vertraut sind.
Wenn Sie mehr Erfahrung mit React sammeln, haben Sie möglicherweise bestimmte Anforderungen an Ihre Apps, für die eine benutzerdefinierte Konfiguration der Setup-Dateien erforderlich ist. In diesem Fall müssen Sie die React Build-Tools manuell einrichten können, da diese von create -react-app standardmäßig verborgen werden.
In diesem Tutorial zeige ich Ihnen, wie Sie eine React-App einrichten, indem Sie die Build-Tools manuell konfigurieren. Dies gibt Ihnen hoffentlich die Sicherheit, mit komplexeren Setups zu experimentieren.
Obwohl es anfangs ein wenig abschreckend wirken mag, genießen Sie alle Vorteile einer vollständigen Kontrolle über jede einzelne Konfigurationseinstellung. Und Sie können genau entscheiden, welche Tools in Ihre App aufgenommen werden, die von Projekt zu Projekt variieren kann. Mit diesem Ansatz können Sie auch neue Build-Tools einfach integrieren, da diese häufig vorkommen..
Sind Sie bereit, Ihre erste React-App vollständig von Grund auf zu erstellen? Machen wir das.
Um zu demonstrieren, wie Sie eine React-App über die manuelle Konfiguration der Build-Tools einrichten, erstellen wir die gleiche, sehr einfache React-App aus den vorherigen Tutorials dieser Serie.
Beginnen Sie mit dem Erstellen eines Ordners Mein erster Komponenten-Build, Öffnen Sie dann ein Befehlszeilenfenster, das auf diesen Ordner zeigt.
Art npm init ein erstellen package.json Datei. Diese Datei enthält alle Informationen zu den Tools, die zum Erstellen Ihrer App verwendet werden, sowie die zugehörigen Einstellungen. Akzeptieren Sie alle Standardeinstellungen und schlagen Sie einfach weiter Eingeben (etwa zehnmal) bis zur Fertigstellung.
Wenn Sie alle Standardeinstellungen akzeptiert haben, package.json sieht so aus:
"name": "my-first-components-build", "version": "1.0.0", "description": "", "main": "index.js", "scripts": "test" : "Echo" Fehler: Kein Test angegeben \ "&& Beenden 1", "Autor": "", "Lizenz": "ISC"
Jetzt müssen wir die React- und ReactDOM-Scripts zu unserem Projekt hinzufügen. Wir machen das über npm, den Paketmanager für Node.js.
Geben Sie im selben Befehlszeilenverzeichnis Folgendes ein:
npm install --save reagieren reaktionsdom
Dadurch werden sowohl React als auch ReactDom sowie alle von diesen beiden Modulen erforderlichen Abhängigkeiten installiert. Sie werden feststellen, dass wir jetzt ein neues haben Knotenmodule Verzeichnis, in dem die Module hinzugefügt wurden.
Wenn Sie einen Blick auf die package.json Datei, eine neue Abhängigkeiten Diese Eigenschaft enthält Informationen zu den installierten Knotenmodulen.
"Abhängigkeiten": "Reagieren": "^ 15.6.1", "React-Dom": "^ 15.6.1"
Dies geschah, weil wir das angegeben haben --sparen Option in unserem npm installieren Befehl. Dies teilte npm mit, dass wir die Abhängigkeiten des installierten Projekts nachverfolgen wollten. Dies ist wichtig, wenn wir unser Projekt teilen möchten.
Normalerweise weil die Knotenmodule Ordner ist so groß, dass Sie nicht versuchen möchten, dies direkt zu teilen. Stattdessen teilen Sie Ihr Projekt ohne Knotenmodule Mappe. Wenn dann jemand Ihr Projekt herunterlädt, muss er nur noch tippen npm installieren um das Setup direkt von zu kopieren package.json.
Hinweis: In npm 5.x werden installierte Module automatisch in gespeichert package.json. Sie müssen nicht mehr manuell angeben --sparen Möglichkeit.
In der Mein erster Komponenten-Build Ordner erstellen, einen neuen erstellen src Ordner und fügen Sie ein index.js Datei dazu. Wir werden später darauf zurückkommen, wenn wir mit der Erstellung unserer React-App beginnen, sobald wir die Projekt-Setup-Dateien konfiguriert haben.
Fügen Sie eine index.html-Datei mit demselben Code in demselben Ordner hinzu:
Manuelles Erstellen einer Reakt-App mithilfe von Build-Tools
Wir möchten unsere App in einer einzigen JavaScript-Datei kompilieren und JSX- und ES6-Klassen und -Module verwenden. Dazu müssen die Webpack- und Babel-Module über npm installiert werden.
Lassen Sie uns zuerst Babel installieren. Geben Sie Folgendes in das Befehlszeilenfenster ein:
npm install --save-dev Babel-Core Babel-Loader Babel-Preset-Env Babel-Preset-Rea
Dadurch werden alle Module installiert, die Babel zum Kompilieren von ES6- und JSX-Code in Standard-JavaScript benötigt.
Nun installieren wir Webpack erneut über die Befehlszeile:
npm install --save-dev html-webpack-plugin webpack webpack-dev-server
Dadurch werden alle Module installiert, die für Webpack, einen lokalen Webserver, erforderlich sind, und wir können Webpack anweisen, eine Dynamik zu erstellen index.html Datei in der Öffentlichkeit Ordner basierend auf dem Ordner, den wir dem hinzugefügt haben src Mappe. Wir können der gebündelten JavaScript-Datei bei jeder Erstellung der App auch eine dynamische Referenz in der HTML-Datei hinzufügen.
Nachdem diese neuen Module installiert wurden, wird Ihr package.json Die Datei sieht jetzt so aus:
"Abhängigkeiten": "Reagieren": "^ 15.6.1", "React-Dom": "^ 15.6.1", "DevDependencies": "Babel-Core": "^ 6.25.0", "Babel -loader ":" ^ 7.1.0 "," Babel-Preset-Env ":" ^ 1.5.2 "," Babel-Preset-React ":" ^ 6.24.1 "," HTML-Webpack-Plugin ":" ^ 2.28.0 "," webpack ":" ^ 3.0.0 "," webpack-dev-server ":" ^ 2.5.0 "
Diesmal werden jedoch die Abhängigkeiten von Webpack und Babel gespeichert package.json als dev Abhängigkeiten.
Dies bedeutet, dass diese speziellen Module während der Entwicklungsphase (d. H. Build-Phase) der App benötigt werden. Auf der anderen Seite sind die Abhängigkeiten (z. B. React und ReactDOM) zur Laufzeit erforderlich und werden daher direkt in unseren benutzerdefinierten App-Code aufgenommen.
Damit Webpack unsere App erstellen und in einer einzigen Datei bündeln kann, müssen Sie die Einstellungen konfigurieren. Erstellen Sie in Ihrem Root-App-Ordner webpack.config.js, die zum Speichern von Webpack-spezifischen Build-Einstellungen verwendet wird.
Wir brauchen Webpack, um drei Dinge zu tun:
Innerhalb webpack.config.js, hinzufügen:
Accentsconagua
var path = required ('pfad'); var HtmlWebpackPlugin = required ('html-webpack-plugin'); module.exports = entry: './src/index.js', Ausgabe: Pfad: Pfad.Auflösen (__ Verzeichnis, 'public'), Dateiname: 'build.js', Modul: Rules: [Test : /\.(js)$/, verwenden Sie 'babel-loader'], plugins: [new HtmlWebpackPlugin (template: 'src / index.html')]Machen Sie sich nicht zu viele Gedanken über die hier verwendete Syntax. Verstehen Sie einfach den Überblick, was los ist.
Wir exportieren lediglich ein JavaScript-Objekt mit bestimmten Eigenschaften, die bestimmen, wie Webpack unsere App erstellt. Das Eintrag Diese Eigenschaft gibt den Startpunkt unserer React-App an index.js. Als nächstes die Ausgabe Diese Eigenschaft definiert den Ausgabepfad und den Dateinamen der gebündelten JavaScript-Datei.
Wir möchten, dass Webpack alle JavaScript-Dateien durch den Babel-Compiler leitet, um JSX / ES6 in Standard-JavaScript umzuwandeln. Wir machen das über die Modul Eigentum. Es gibt einfach einen regulären Ausdruck an, der Babel-Umwandlungen ausführt nur für JavaScript-Dateien.
Um das Babel-Setup abzuschließen, müssen wir dem Eintrag einen Eintrag hinzufügen package.json Datei, um anzugeben, welche Babel-Umwandlungen wir für unsere JavaScript-Dateien ausführen möchten. Aufmachen package.json und fügen Sie ein Babel Eigentum:
"babel": "presets": ["env", "reagieren"],
Dadurch werden für jede JavaScript-Datei in unserem Projekt zwei Transformationen ausgeführt. Das env Transformation konvertiert ES6-JavaScript in Standard-JavaScript, das mit allen Browsern kompatibel ist. Und das reagieren Die Umwandlung kompiliert den JSX-Code bis zu createElement () Funktionsaufrufe, was perfekt gültiges JavaScript ist.
Nun zurück zu unserem webpack.config.js Datei.
Die letzte Eigenschaft, die wir haben, ist Plugins, Diese enthält alle speziellen Vorgänge, die während des Erstellungsprozesses ausgeführt werden sollen. In unserem Fall benötigen wir ein Webpack, um eine index.html Datei, die einen Verweis auf die mitgelieferte JavaScript-Datei enthält. Wir zeigen auch ein Bestehendes an index.html Datei (die wir zuvor erstellt haben), die als Vorlage zum Erstellen des endgültigen Pakets verwendet wird index.html Datei.
Fügen wir nun ein Skript Eigentum an package.json. Übrigens können Sie beliebig viele Skripts hinzufügen, um verschiedene Aufgaben auszuführen. Im Moment wollen wir nur Webpack ausführen können, also in package.json löschen Sie das "Prüfung" Skript und ersetzen Sie es mit:
"scripts": "build": "webpack",,
Bevor wir den Build-Prozess testen, fügen wir eine React-Komponente hinzu index.js also müssen wir etwas rendern.
importieren Sie React, Component aus 'reagieren'; importiere ReactDOM von 'reag-dom'; Die Klasse App erweitert die Komponente render () return () ReactDOM.render (Hallo Welt!
, document.querySelector ('#app'));
Das sollte Ihnen schon bekannt vorkommen, wenn Sie die vorherigen Tutorials dieser Serie mitverfolgt haben.
Führen Sie in der Befehlszeile Folgendes aus:
npm run build
Nach kurzer Zeit sollten Sie ein neues sehen Öffentlichkeit Ordner erstellt in Mein erster Komponenten-Build, enthaltend index.html und index.js. Aufmachen index.html um die Ausgabe unserer Testreact-App zu sehen.
Beachten Sie, dass die mitgelieferte JavaScript-Datei für uns hinzugefügt wurde und die Testkomponente in das richtige DOM-Element gerendert wird.
Sobald Sie mehrere Änderungen an Ihrer App vorgenommen haben, werden Sie bald feststellen, dass es ziemlich mühsam ist, eine Datei manuell zu bearbeiten, zu speichern, den Befehl build auszuführen und das Browserfenster neu zu laden, um die Änderungen anzuzeigen.
Glücklicherweise können wir den zuvor installierten Webpack Mini-Server verwenden, um diesen Prozess zu automatisieren. Fügen Sie ein zweites Skript hinzu package.json So sieht die Eigenschaft 'scripts' so aus:
"Skripte": "build": "webpack", "dev": "webpack-dev-server --open",
Jetzt ausführen:
npm run dev
Nach einigen Sekunden wird eine neue Browserregisterkarte geöffnet, während Ihre Webanwendung ausgeführt wird. Die URL verweist jetzt auf einen lokalen Server und nicht auf eine bestimmte lokale Datei. Nehmen Sie eine kleine Änderung vor index.js in dem src Ordner und speichern. Beachten Sie, dass Ihre App automatisch im Browser automatisch aktualisiert wird, um die neuen Änderungen anzuzeigen.
Webpack überwacht nun die Dateien in Ihrer App auf Änderungen. Wenn Änderungen vorgenommen und gespeichert wurden, kompiliert Webpack Ihre App erneut und lädt das Browserfenster automatisch mit den neuen Updates.
Hinweis: Der Webpack-Server baut Ihre App nicht neu auf, sondern speichert Änderungen in einem Cache. Daher kann der Browser so schnell aktualisiert werden. Dies bedeutet, dass Sie die Aktualisierungen nicht in sehen Öffentlichkeit Mappe. Sie können diesen Ordner sogar vollständig löschen, wenn Sie den Webpack-Server verwenden.
Wenn Sie Ihre App erstellen müssen, können Sie sie einfach ausführen npm run build das schaffen Öffentlichkeit Ordner erneut (falls erforderlich) und geben Sie Ihre App-Dateien für die Verteilung aus.
Der Vollständigkeit halber fügen wir die beiden einfachen Komponenten hinzu, die wir in vorherigen Lernprogrammen verwendet haben.
Fügen Sie dem Stammprojektordner zwei neue Dateien hinzu MyFirstComponent.js und MySecondComponent.js zum Hauptordner der App. Im MyFirstComponent.js, Fügen Sie den folgenden Code hinzu:
importieren Sie React, Component aus 'reagieren'; Klasse MyFirstComponent erweitert Component render () return (this.props.number: Hallo von React!
) export default MyFirstComponent;
Und in MySecondComponent.js, hinzufügen:
importieren Sie React, Component aus 'reagieren'; Klasse MySecondComponent erweitert Component render () return (this.props.number: Meine zweite Reaktionskomponente.
) export default MySecondComponent;
Um diese Komponenten in unserer App zu verwenden, aktualisieren Sie index.js Zu dem Folgendem:
importieren Sie React, Component aus 'reagieren'; importiere ReactDOM von 'reag-dom'; importiere MyFirstComponent aus './MyFirstComponent'; importiere MySecondComponent aus './MySecondComponent'; Die Klasse App erweitert die Komponente render () return () ReactDOM.render (Meine ersten Reaktionskomponenten!
, document.querySelector ('#app'));
Dies führt zu der gleichen Ausgabe, die wir zuvor gesehen haben, mit der Ausnahme, dass die React-App manuell zu 100% eingerichtet wird.
Wenn Sie diese manuelle Einrichtung einmal durchlaufen und Konfigurations-Konfigurationsdateien erstellt haben, müssen Sie dies nur von Grund auf durchführen. Für zukünftige Projekte können Sie eine oder mehrere Ihrer vorhandenen Setup-Dateien wiederverwenden, sodass nachfolgende React-Projekte wesentlich schneller eingerichtet werden können.
Sie können sogar eine Reihe von eigens dafür entwickelten React-Starter-Vorlagen erstellen und diese auf GitHub hosten. Es wäre dann ein einfacher Fall, ein Starterprojekt zu klonen und auszuführen npm init um die erforderlichen Node.js-Module zu installieren.
Das React-Projekt für dieses Lernprogramm steht zum Download zur Verfügung, sodass Sie damit herumspielen oder es als Vorlage für neue Projekte verwenden können.
Drücke den Anhang herunterladen Link in der rechten Seitenleiste, um auf die ZIP-Datei des Projekts zuzugreifen. Extrahieren Sie es nach dem Herunterladen und öffnen Sie ein Befehlszeilenfenster. Stellen Sie sicher, dass Sie in der sind Mein erster Komponenten-Build Verzeichnis.
Geben Sie die folgenden Befehle ein, um die React-App zu installieren und zu kompilieren.
npm install npm run dev
Mit dem ersten Befehl werden alle Node.js-Module heruntergeladen, die für das Projekt benötigt werden. Dies dauert ein bis zwei Minuten. Mit dem zweiten Befehl wird die React-App kompiliert und der Mini-Webserver wird im Browser angezeigt.
Nehmen Sie einige Änderungen an Ihrer React-App vor. Bei jedem Speichern der Änderungen wird Ihre App neu kompiliert und das Browserfenster wird automatisch aktualisiert, um die neue Version Ihrer App widerzuspiegeln.
Wenn Sie Ihr Projekt für die Verteilung erstellen möchten, führen Sie einfach den folgenden Befehl aus.
npm run build
In dieser Reihe von Tutorials haben wir verschiedene Möglichkeiten untersucht, wie Sie React-Apps einrichten können. Jede davon erfordert schrittweise weitere Setup-Aufgaben. Der langfristige Vorteil besteht jedoch darin, dass Sie bei der Projektauslegung weitaus mehr Kontrolle und Flexibilität haben.
Wenn Sie das Einrichten von React beherrschen, werden Sie mit dem Entwickeln von Apps sehr viel Spaß haben. Ich würde gerne Ihre Kommentare hören. Lassen Sie mich wissen, was Sie als Nächstes mit React bauen möchten!
