Lernen, React-Gerüste zu bauen

1. Komplexität des Front-End-Engineerings

Wenn wir nur ein paar kleine Demoprogramme entwickeln, müssen wir uns nie mit einigen komplexen Problemen befassen:

Beispielsweise, wie die Verzeichnisstruktur organisiert und aufgeteilt wird, wie die Abhängigkeiten zwischen Dateien verwaltet werden, wie die Abhängigkeiten von Modulen von Drittanbietern verwaltet werden, wie das Projekt vor der Veröffentlichung komprimiert und verpackt wird usw.

Moderne Frontend-Projekte sind immer komplexer geworden:

• Es ist nicht mehr so ​​einfach, wie ein paar CSS-Dateien, ein paar selbst geschriebene JS-Dateien oder JS-Dateien von Drittanbietern in HTML zu importieren;
• Beispielsweise kann CSS mithilfe von Präprozessoren wie Less oder Sass geschrieben werden und wir müssen sie in normales CSS konvertieren, damit es vom Browser analysiert werden kann.
• Beispielsweise wird JavaScript-Code nicht mehr nur in ein paar Dateien geschrieben, sondern modular in Hunderten oder Tausenden von Dateien zusammengestellt. Wir müssen modulare Technologie verwenden, um die gegenseitigen Abhängigkeiten zwischen ihnen zu verwalten.
• Wenn ein Projekt beispielsweise auf viele Bibliotheken von Drittanbietern angewiesen ist, wie können wir diese besser verwalten (z. B. ihre Abhängigkeiten, Versionsupgrades usw.)?
  

Um die oben genannten Probleme zu lösen, müssen wir einige weitere Tools erlernen:

• Zum Beispiel Babel, Webpack und Gulp. Konfigurieren Sie ihre Konvertierungsregeln, Verpackungsabhängigkeiten, Hot-Updates usw.
• Die Einführung von Gerüsten soll uns bei der Lösung dieser Reihe von Problemen helfen.

2. Was ist Scaffolding?

Unter traditionellem Gerüst versteht man eine Struktur in der Architektur: ein temporäres Gerüst, das beim Bau eines Gebäudes oder einer Struktur errichtet wird;

Das in der Programmierung erwähnte Gerüst ist eigentlich ein Werkzeug, das uns hilft, schnell die technische Struktur des Projekts zu erstellen.

• Jedes Projekt erzielt ein anderes Ergebnis, aber ihre grundlegende technische Struktur ist ähnlich;
• Da sie ähnlich sind, müssen wir nicht jedes Mal von Grund auf neu bauen. Wir können einige Tools verwenden, die uns bei der Erstellung grundlegender technischer Vorlagen helfen.
• Für verschiedene Projekte können Sie auf Grundlage dieser Vorlage Projekte entwickeln oder einige einfache Konfigurationsänderungen vornehmen.
• Dadurch kann auch indirekt die grundlegende strukturelle Konsistenz des Projekts sichergestellt und die spätere Wartung erleichtert werden.
  

Zusammenfassung: Scaffolding macht den gesamten Prozess von der Projektkonstruktion über die Entwicklung bis hin zur Bereitstellung schnell und bequem.

3. Frontend-Gerüst

Die drei beliebtesten Frameworks verfügen mittlerweile alle über ein eigenes Scaffolding:

• Vue-Gerüst: vue-cli
• Angular-Gerüst: angular-cli
• React-Scaffolding: React-App erstellen

Ihre Aufgabe besteht darin, uns bei der Generierung einer gemeinsamen Verzeichnisstruktur und der Konfiguration der benötigten Engineering-Umgebung zu unterstützen.
Worauf sind diese Gerüste angewiesen?

• Derzeit sind diese Scaffolds alle in Node geschrieben und basieren auf Webpack.
• Also müssen wir die Knotenumgebung auf unserem Computer installieren;

Hier lernen wir hauptsächlich React, daher verwenden wir weiterhin das Scaffolding-Tool von React: create-react-app als Erklärung;

4. Knoten installieren

Das React-Scaffolding selbst muss auf Node basieren, daher müssen wir die Node-Umgebung installieren:

Unabhängig davon, ob es sich um Windows oder Mac OS handelt, können Sie es direkt von der offiziellen Node-Website herunterladen.

Offizielle Website-Adresse: https://nodejs.org/en/download/ Hinweis: Es wird empfohlen, die LTS-Version (Long-Term Support) herunterzuladen, die eine Version mit Langzeitsupport ist und stabiler ist.

Nach dem Download per Doppelklick installieren:
1. Während des Installationsvorgangs werden Umgebungsvariablen automatisch konfiguriert.
2. Während der Installation hilft es uns auch bei der Installation des npm-Verwaltungstools.

Geben Sie den folgenden Befehl ein:

Knoten --Version
npm --version

Wenn die Versionsnummer angezeigt wird, war die Installation erfolgreich.

5. Paketverwaltungstools

Was ist npm?

• Der vollständige Name lautet Node Package Manager, was „Knotenpaketmanager“ bedeutet;
• Die Rolle besteht definitiv darin, uns bei der Verwaltung abhängiger Toolkits (wie etwa React, React-Dom, Axios, Babel, Webpack usw.) zu helfen.
• Der Autor hat dies entwickelt, um das Problem der „schlechten Modulverwaltung“ zu lösen;

Darüber hinaus gibt es ein bekanntes Node-Paketverwaltungstool namens Yarn:

• Yarn ist ein neues JS-Paketverwaltungstool, das gemeinsam von Facebook, Google, Exponent und Tilde eingeführt wurde.
• Yarn wurde entwickelt, um einige der Mängel von npm auszugleichen.
• Frühe npm hatten viele Mängel, wie z. B. eine langsame Installation von Abhängigkeiten, verwirrende Versionsabhängigkeiten und eine Reihe anderer Probleme;
• Obwohl es seit npm5 viele Upgrades und Verbesserungen gegeben hat, verwenden viele Leute immer noch gerne Yarn.
• Das React-Scaffolding verwendet standardmäßig auch Garn.

npm install -g Garn

Geben Sie yarn --version ein. Wenn die Versionsnummer ausgegeben wird, war die Installation erfolgreich.

6. Vergleich von Yarn- und npm-Befehlen

7. Gerüst installieren

Ergänzung: In China kann es in einigen Fällen vorkommen, dass die Verwendung von npm und Garn eine Bibliothek nicht richtig installieren kann. Derzeit können wir uns für die Verwendung cnpm entscheiden

npm install -g cnpm --registry=https://registry.npm.taobao.org

Als letztes müssen Sie das Gerüst zum Erstellen eines React-Projekts installieren:

npm install -g Erstellen-Reagieren-App

Geben Sie create-react-app --version ein. Wenn die Versionsnummer ausgegeben wird, bedeutet dies, dass die Installation erfolgreich war.

8. Erstellen Sie ein React-Projekt

Jetzt können wir durch Scaffolding ein React-Projekt erstellen.

Der Befehl zum Erstellen eines React-Projektes lautet wie folgt:

Hinweis: Projektnamen dürfen keine Großbuchstaben enthalten.

Es gibt weitere Möglichkeiten, Projekte zu erstellen. Weitere Informationen finden Sie in der Readme-Datei von GitHub.

create-react-app-Projektname 

Nachdem die Erstellung abgeschlossen ist, wechseln Sie in das entsprechende Verzeichnis und führen Sie das Projekt aus:

CD 01-Test-Reactyarn-Start 

9. Verzeichnisstrukturanalyse

10. PWA verstehen

Die gesamte Verzeichnisstruktur ist sehr einfach zu verstehen, mit Ausnahme des PWA-Konzepts:

• PWA steht für Progressive Web App, also eine progressive Web-Anwendung;
• Eine PWA-Anwendung ist zunächst eine Webseite, und eine Webanwendung kann mithilfe von Webtechnologie geschrieben werden.
• Fügen Sie dann App Manifest und Service Worker hinzu, um die PWA-Installation und Offlinefunktionen zu implementieren.
• Wir nennen diese Form der Web-Existenz auch eine Web-App;
  

Welche Probleme löst PWA?

• Kann zum Startbildschirm hinzugefügt werden. Klicken Sie auf das Startbildschirmsymbol, um die Animation zu starten und die Adressleiste auszublenden.
• Implementieren Sie eine Offline-Caching-Funktion, sodass Benutzer auch dann noch einige Offline-Funktionen nutzen können, wenn ihre Mobiltelefone kein Netzwerk haben.
• Nachrichten-Push implementiert;
• Und eine Reihe von Funktionen ähnlich der nativen App;

11. Was ist Webpack?

Wir haben gesagt, dass das Gerüst von React basierend auf Webpack konfiguriert ist:

• webpack ist ein statischer Modul-Bundler für moderne JavaScript-Anwendungen;
• Wenn webpack eine Anwendung verarbeitet, erstellt es rekursiv ein Abhängigkeitsdiagramm, das alle Module enthält, die die Anwendung benötigt, und verpackt dann alle diese Module in ein oder mehrere Pakete.
  

12. Webpack im Scaffolding

Wir werden hier nicht auf Webpack eingehen, da der Inhalt sehr umfangreich ist (später wird es ein spezielles Thema zu Webpack geben).
Aber es ist seltsam: Wir sehen nichts Webpack-bezogenes in der Verzeichnisstruktur?

Der Grund dafür ist, dass das React-Gerüst die webpackbezogene Konfiguration verbirgt (tatsächlich ist sie seit Vue CLI3 auch verborgen).

Was müssen wir tun, wenn wir die Konfigurationsinformationen von webpack sehen möchten?

• Wir können ein Skript in einer package.json-Datei ausführen: "eject": "react-scripts eject"
• Dieser Vorgang ist irreversibel, daher werden wir während der Ausführung dazu aufgefordert;

Garnauswurf

13. Webpack im Scaffolding

14. Dateistruktur löschen

Nachdem das Projekt mithilfe eines Scaffolding-Programms erstellt wurde, haben viele Studenten immer noch das Gefühl, dass die Verzeichnisstruktur zu kompliziert ist. Daher plane ich, alle dazu anzuleiten, den Code von Grund auf neu zu schreiben.
Löschen wir zunächst alle unnötigen Dateien:

Löschen Sie alle Dateien unter „src“. Löschen Sie alle Dateien außer „favicon.ico“ und „index.html“ unter „public“.

15. Beginnen Sie mit dem Schreiben von Code

Erstellen Sie im src-Verzeichnis eine Datei „index.js“, da dies der Einstiegspunkt für die Webpack-Verpackung ist.
Beginnen Sie mit dem Schreiben des React-Codes in index.js:

Wir werden feststellen, dass die Logik des Codes mit dem übereinstimmt, was wir geschrieben haben. Nur müssen wir bei der modularen Entwicklung React und ReactDOM manuell importieren, da sie sich in den von uns installierten Modulen befinden.

Wenn wir nicht zu viel Code direkt in ReactDOM.render schreiben möchten, können wir eine Komponente App.js separat extrahieren:

Dies ist das Ende dieses Artikels zum Erlernen des Aufbaus eines React-Gerüsts. Weitere relevante Inhalte zum React-Gerüst finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!