Hallo allerseits!
Im Juli 2018 hielt unser Lehrer im
JavaScript-Entwicklerkurs, Yuri Dvorzhetsky, im Rahmen des zweiten
Kurses ein offenes Webinar zum Thema „Erstellen einer Anwendung auf Webpack + React + Express“ ab, in dem er als Lehrer in einem der JavaScript-Module fungiert. In diesem Material können Sie sich mit dem Video und einer kurzen Nacherzählung der vergangenen Meisterklasse vertraut machen.
Die Arbeiten im offenen Unterricht wurden nach folgendem Plan durchgeführt:
- Einführung in Node JS und Express JS.
- Einführung in Webpack.
- Einführung in React.
Also lass uns gehen!
Knoten JS
Mit dem Aufkommen des neuen ES6-Standards hat die Popularität von JavaScript deutlich zugenommen, wie die gleichen Statistiken über die Anzahl der Pull-Anfragen auf GitHub für 2017 belegen, wo JS an erster Stelle steht.
Einer der JS-Treiber war Node JS, eine Softwareplattform, die auf der V8-Engine basiert (JavaScript in Maschinencode übersetzen) und JavaScript von einer hochspezialisierten Sprache in eine Allzwecksprache umwandelt. Viele Leute nennen Node JS "serverseitiges" JavaScript, aber hier ist die Definition von "Server" anstelle von "Server" angemessener. Beispielsweise verfügt Node JS über eine sehr umfangreiche Umgebung, einschließlich eines eigenen Paketmanagers namens npm, den Sie sicher auf Ihrem Computer ausführen können (das Repository ist unter npmjs.com verfügbar). Und dies ist nicht der einzige Paketmanager, es gibt andere. Die Konfigurationsdatei lautet package.json und es ist leicht zu erraten, dass sie im JSON-Format konfiguriert ist.
Im Rahmen der Einführung in Node JS wurden Benutzer aufgefordert, die folgenden Schritte auszuführen:
- Laden Sie NodeJS von der offiziellen Website nodejs.org/en/ herunter.
- auf einem Computer installieren und die Version überprüfen;
- Stellen Sie sicher, dass der Knoten –v in der Konsole ausgeführt wird.
Der nächste Schritt ist die Erstellung des ersten Node JS-Projekts. Sie können dies auf zwei Arten tun:
- Befehl npm init (weiterhin mit allem einverstanden sein, indem Sie die Eingabetaste drücken);
- indem Sie das Repository von dem Link auf GitHub herunterladen und den Befehl git checkout 0 einführen.
Der nächste Schritt ist das Kennenlernen von Express JS.
Express js
Express JS ist ein beliebter Webserver für Node JS-Umgebungen. In Bezug auf Python ist es so etwas wie Django, nur gibt es tatsächlich nichts als REST-Methoden. Express JS eignet sich perfekt zum Erstellen von REST-Services, die JSON akzeptieren und senden. Im Allgemeinen ist es jedoch ziemlich asketisch, sodass alles, was Sie benötigen, akzeptiert wird, wie es heißt, "geschraubt". Übrigens werden auch andere Webserver auf ihrer Basis hergestellt. In diesem Fall müssen Sie verstehen, dass Express so etwas wie eine Zwischenverbindung (Middleware) ist, die noch konfiguriert und mit Logik gefüllt werden muss.
Im Rahmen des Webinars wurde Express JS mit dem Befehl npm install express mit dem Schalter –save installiert. Sie können auch einfach in einem Git (Git Checkout 1) mit der Schreibweise npm install auschecken. Infolgedessen wurde der Ordner node_modules / erstellt und der Inhalt von package.json geändert (entsprechende Abhängigkeiten wurden angezeigt).
Nach den Vorarbeiten war es Zeit, den Server selbst zu schreiben:
- Erstellung der Datei /server.js im Projektstamm.
- Platzieren Sie bestimmten in JavaScript geschriebenen Code. Der Zweck dieses Skripts ist:
- Express aus den "mysteriösen" node_modules /;
- Hinzufügen eines Handlers zur URL /;
- Starten Sie Node JS (mit dem Befehl node server.js oder npm start).
Sie können auch einfach auf Tag Nummer 2 (Git Checkout 2) auschecken.
JS, ES6 und Transpiling
Wie bereits erwähnt, ist ES6 der aktuelle JS-Standard. Es handelt sich um eine Reihe von Funktionen, die von keinem Browser vollständig unterstützt werden (nur ein Teil der Reihe wird unterstützt). Infolgedessen stellt sich die Frage: Was ist, wenn wir auf modernem ES6 schreiben möchten und nur ES5.1 in Browsern unterstützt wird? Hier kommt das Transpiling zur Rettung. Seine Idee ist wie folgt:
- Wir haben Code in ES6 geschrieben.
- wir kompilieren es (ES6 wird in ES5.1 konvertiert);
- Das resultierende JS-ku kann auf Browserseiten platziert werden.
Dadurch wird es möglich, nicht nur ES6, sondern auch verschiedene Dialekte und Erweiterungen zu verwenden, wodurch die Leistung von JS erhöht wird, zum Beispiel:
- "Typisiertes" JavaScript TypeScript (TS);
- JSX - XHTML in JS (React Framework);
- Durchfluss - statische Typprüfung.
Eine der beliebtesten und mächtigsten Transpilierungen ist Babel. Er war es, der verwendet wurde, um die Probleme der offenen Lektion zu lösen.
Montagevorteile:
- Sie können alle JS-Dateien in einem Bundle sammeln.
- Bündel können minimiert und verschleiert werden;
- Sie können gleichzeitig WENIGER-> CSS usw. ausführen.
Webpack
Webpack ist einer der anspruchsvollsten Sammler. Es ist konzeptionell kompliziert, insbesondere in Bezug auf die Terminologie, aber es ist unübertroffen, und die neueste Version ist einfacher als die vorherigen. Sie sollten jedoch keine Angst davor haben, da das Erstellen einer Konfiguration damit ein einmaliger Job ist. Und ohne Übertreibung kann die Anzahl der in Webpack enthaltenen Brötchen "überessen" sein.
Zum Beispiel wurde webpack.config.js den Webinar-Listenern gezeigt und jede Zeile der Datei wurde detailliert untersucht, um die Terminologie als Ganzes zu verstehen.
Der nächste Schritt besteht darin, einen Client mit vorkonfiguriertem React und Webpack zu erstellen (npx-Client mit minimaler Reaktion oder Befehl git checkout 3 für faule Leute). Danach können Sie zu dem auf diese Weise erstellten CD-Client / Ordner wechseln und die Datei webpack.config.js öffnen, von der ein Fragment etwas früher angezeigt wurde.
Reagiere
Allmählich wurde es Zeit, sich mit React vertraut zu machen - einer Open-Source-JavaScript-Bibliothek für die Entwicklung von Benutzeroberflächen.
Für einen ersten Blick auf React und ein „sanftes“ Eintauchen in die Umgebung wurden die Schüler gebeten, client / src / index.js zu öffnen und, falls nichts passierte, client / src / component / app.js zu öffnen.
Der Kern von React ist JSX. Dies ist ein in JS geschriebener Dialekt von JS und XHTML. Trotz der Tatsache, dass React ohne JSX verwendet werden kann, ist seine gesamte Leistung genau in JSX. React selbst ist laut Hackernoon eines der beliebtesten Frameworks, basierend auf einem Komponentenansatz. Es verfügt über eine große Anzahl von Support-Paketen und eine riesige Infrastruktur. Die Anwendung selbst besteht aus einer Reihe von Komponenten, die deren Markup und Verhalten enthalten.
Reaktionsmerkmale:
- Komponenten können sich gegenseitig nutzen;
- Dieser JS wird im Browser ausgeführt.
- In Wirklichkeit gibt es kein Markup im Browser, aber es wird angezeigt, wenn der Browser des Clients diesen Code ausführt.
- Komponenten rendern ihre Notiz und die verwendeten Komponenten rendern ihre eigenen;
- Das Markup muss nicht statisch sein und ist es auch nicht.
- Sie können Informationen an untergeordnete Komponenten übergeben.
- Komponenten können bedingt gerendert werden.
Nachdem Sie sich mit React vertraut gemacht hatten, wurde der praktische Teil des Webinars fortgesetzt, wodurch die folgenden Schritte ausgeführt wurden:
- Starten Sie das Webpack im Client-Ordner (client / npm run dev).
- Schreiben Sie Ihre eigene einfache Komponente gemäß den Anweisungen des Lehrers oder über Git Checkout 4 (Webpack konnte nicht gestoppt werden).
Als nächstes wurden die Schüler gebeten, Requisitenobjekte zu verwenden und ein typodynamisches Rendering durchzuführen (Git Checkout 5).
Die Nuancen von Requisiten:
- Enthält Eigenschaften von Bauteilen
- Sie können nicht nur Zeichenfolgen, sondern auch Objekte übertragen.
- Im Idealfall basiert die Kommunikation auf der Reaktionskomponentenlinie immer auf Requisiten.
In der letzten Phase des Praktikums wurden das Backend und der Webserver verbunden (Git Checkout 6).
DAS ENDE
Vielen Dank für Ihre Aufmerksamkeit und wie immer warten wir auf Ihre Kommentare und Vorschläge.