Was ist der MERN-Stack und wie arbeitet man damit?

Hallo Habr!

Es war einmal ein Pilotprojekt auf dem MEAN-Stack (Mongo, Express, Angular, Node), das uns im Allgemeinen nicht enttäuschte. Wir haben uns jedoch entschieden, zu diesem Zeitpunkt keine zusätzlichen Drucke und Aktualisierungen vorzunehmen - im Gegensatz zu Manning, das dieses Buch aktualisiert hat . Trotzdem suchen wir weiter in diese Richtung und möchten heute mit Ihnen über den zugehörigen MERN-Stack sprechen, in dem sich React auf dem Client befindet, nicht auf Angular. Das Wort wird Tim Smith gegeben .



Warnung: Der gesamte Code für diesen Artikel ist hier .

In diesem MERN-Stack-Handbuch schreiben wir ein einfaches Blog mit React.js, Node.js, Express.js und MongoDB, um unser Full-Stack-Arsenal zu erweitern.

Was ist ein Stapel?

Vielleicht ist das erste, was zu diskutieren ist, die Idee eines "Stapels" als solchen. Es gibt viele verschiedene Stapel, und alle sind nur verschiedene Wege, um das gleiche Ziel zu erreichen. Beim Erstellen einer Full-Stack-Anwendung stellen wir den Client-Teil bereit, mit dem der Benutzer interagieren wird, und derselbe Client-Teil vermittelt die Arbeit mit dem Server und der Datenbank, wodurch dieser gesamte Prozess so einfach und verwaltbar wie möglich wird.

Wir können sagen, dass der Stapel eine bestimmte Reihe von Technologien ist, die zur Lösung dieses Problems verwendet werden.

Obwohl es viele Stapel gibt, über die es sich zu sprechen lohnt, sind einige von ihnen heute beliebter als andere. Einer dieser beliebten Stapel heißt MEAN und besteht aus:

• M ongoDb
• E xpress.js
• A ngular.js
• N ode.js.

Heute werden wir über den MERN-Stack sprechen, der MEAN sehr ähnlich ist, außer dass Angular.js hier durch React.js ersetzt wird. Daher können wir MongoDB als Datenbank verwenden, Node.js bzw. Express für den Server und das Routing sowie React.js, um den Client-Teil zu erstellen, mit dem der Benutzer interagieren wird.

Wie erfolgt die Entwicklung mit diesem Stack?

Bevor wir zu allen Feinheiten übergehen, werfen wir einen allgemeinen Blick darauf, wie all diese Elemente zusammenarbeiten. Persönlich habe ich eine Weile gebraucht, um mich damit zu befassen, da mein Hintergrund mit PHP zusammenhängt, wo die Client- und Serverteile etwas durcheinander sind.

1. Der Serverteil (Node und Express.js) und der Clientteil (React.js)

Zunächst müssen Sie verstehen, dass der Serverteil und der Clientteil separate Entitäten sind. Der Client-Teil befindet sich möglicherweise im selben Repository wie der Server oder in einem völlig anderen.

2. API-Terminals werden für die Kommunikation verwendet

Wenn Sie bereits darüber nachdenken, wie Sie Freunde aus den Client- und Serverteilen gewinnen können, werde ich antworten: Dies erfolgt über die API. Auf dem Server wird eine API (Application Program Interface) erstellt, über die wir „Terminals“ erhalten, über die die im Client-Teil befindliche Anwendung mit dem Server interagieren kann.

Lassen Sie uns an den Fingern erklären: Stellen Sie sich vor, Ihre linke Hand ist die Serverseite und Ihre rechte Hand ist die Clientseite.

Falten Sie nun Ihre Hände und drehen Sie Ihre Finger zusammen, als ob Sie Ihre eigene Hand schütteln würden. So funktionieren Vorlagensprachen. Mit ihnen können Sie einfach ein Markup zusammen mit den mit den Servern gespeicherten Daten anzeigen - und in ihnen überlappen sich die Client- und Serverkomponenten weitgehend.

Jetzt öffne deine Hände. Spreizen Sie Ihre Finger so weit wie möglich und achten Sie darauf, dass sich Ihre linke und rechte Hand nur mit Ihren Fingerspitzen berühren. So funktioniert der MERN-Stack. Der Serverteil bietet Terminals (Fingerspitzen von der linken Hand) für den Zugriff auf den Server, an den der Client Anrufe sendet (über die Fingerspitzen der rechten Hand) und über diese Kontaktpunkte Informationen mit dem Server austauscht (linke Hand).

Ich hoffe, es ist etwas klarer geworden, und wenn nicht, vergessen Sie all diese Metapher, als hätte ich sie nicht erwähnt.

Unsere Serverseite von Node.js und Express.js

Obwohl ich hier keine schrittweisen Anweisungen zum Erstellen dieses Stapels geben werde (dies ist ein Thema für einen separaten Artikel), möchte ich die verschiedenen Elemente des Stapels berücksichtigen, die normalerweise verwendet werden oder darin verwendet werden können. Ich selbst habe mehrere Handbücher gelesen, in denen erklärt wurde, wie der Server konfiguriert wird, aber nicht erklärt, warum diese speziellen Bibliotheken dafür verwendet werden.

Nachdem wir die Datei app.js erstellt haben, müssen Sie eine Reihe von Paketen installieren. Das Folgende sind die häufigsten Pakete, die ich zuvor in meinen Projekten mit Express.js verwendet habe - vielleicht sind sie auch für Sie nützlich.

• Express.js ist ein Framework zum Erstellen von Webanwendungen. Es verfügt über eine integrierte Funktionalität, um viele Probleme zu lösen, insbesondere um das Routing einzurichten.
• Mongoose ist ein Objektdatenmanager (ODM), der Interoperabilität zwischen einer express.js-Anwendung und einer MongoDB-Datenbank bietet.
• BodyParser ist eine Bibliothek, mit der die Anwendung express.js den Text (d. H. Den Inhalt) eingehender Anforderungen lesen kann.
• DotENV - Ermöglicht die Verwendung von Dateien mit der Erweiterung .env, um mit vertraulichen Daten zu arbeiten.
• Passport.js - bietet Authentifizierung in unserer Anwendung und bietet verschiedene Authentifizierungsmethoden.
• Validator - einfache Validierung vieler Datentypen
• bCrypt - Verschlüsselung sensibler Daten wie Passwörter
• Nodemon - "Hot Reboot" für unseren Node-Server, falls sich die Situation ändert; Dank Nodemon können Sie den Server nach Änderungen nicht stoppen oder neu starten.

Natürlich gibt es viele andere Pakete, aber meiner Erfahrung nach werden diese Bibliotheken am häufigsten verwendet.

Nachdem wir einige der am häufigsten verwendeten Pakete aussortiert haben, schauen wir uns den Code an. Um loszulegen - unser Server:



Dies ist ein einfacher API-Server. Wie Sie sehen können, ist es mit der grundlegenden CRUD-Funktionalität (Create-Read-Update-Delete) ausgestattet - nichts Übernatürliches. Bei näherer Betrachtung wird res.json() dass res.json() hier verwendet wird, um Ausgabedaten für eine bestimmte URL bereitzustellen. Das heißt, HTML oder eine andere Vorlage wird nicht für die Ausgabe verwendet. Auf diese Weise erstellen wir unsere APIs, indem wir den Datenzugriff auf React.js öffnen.

Möglicherweise stellen Sie auch fest, dass ich Mungo gerade auf meinen eigenen Mongodb-Server gezeigt habe, der auf meinem Computer installiert ist. Damit ein solcher Mechanismus ordnungsgemäß funktioniert, muss MongoDB auf Ihrem Computer installiert sein und funktionieren. Wenn es nicht funktioniert, öffnen Sie einfach das Konsolenfenster und geben Sie den folgenden Befehl ein:



Der MongoDB-Server wird auf Ihrem lokalen Computer gestartet. Da dies alles lokal erfolgt, können Sie meine Beiträge nicht sehen, wenn Sie den Code aus dem Repository ausführen. Wir müssen selbst neue Inhalte schreiben. Wenn Sie einen Content-Stub benötigen, empfehle ich den hervorragenden Fillerama.io- Generator, der Text aus einigen meiner Lieblingsfilme und -fernsehshows schneidet .

Wenn Sie den Server selbst testen möchten, können Sie ihn mit dem folgenden Befehl starten:



Nachdem der Server gestartet wurde und uns mitgeteilt hat, dass er auf Port 3333 funktioniert und mit MongoDB verbunden ist, können Sie Postman öffnen und dort unsere Routen testen. Bei den GET-Optionen können Sie einfach die Route einfügen und auf "Senden" klicken. Im Falle von POST müssen Sie "Body" auswählen und die Felder für die Kopfzeile und den Hauptinhalt ausfüllen.

Client-Randnotiz

Nachdem wir unseren Server konfiguriert und gestartet haben, können wir mit der Arbeit an dem Client beginnen, mit dem unsere Benutzer interagieren werden. Der Client wird in React.js geschrieben, und dies kann auf verschiedene Arten erfolgen.

Die erste besteht darin, einfach alle für die Clientseite erforderlichen Bibliotheken ( package.json -Dom, package.json -Router usw.) derselben Datei package.json , in der wir die package.json geschrieben haben. In diesem Projekt habe ich genau das getan, aber ich muss sagen, dass ich diese Option nicht für optimal halte. Ich denke, dass mit dem Wachstum unseres Projekts die Codebasis immer verwirrender wird. Wenn Sie nur diese Methode verwenden, wird die Arbeit damit in Zukunft komplizierter. Ich habe diesen Pfad in der beschriebenen Anwendung genau deshalb bevorzugt, weil ich sicher weiß: Er wird nicht wachsen und sich überhaupt nicht ändern. Diese Anwendung wurde ausschließlich zu Demonstrationszwecken geschrieben.

Der zweite und (meiner Meinung nach) optimalere Ansatz besteht darin, ein separates Repository für die Serverseite und ein separates für den Client zu erstellen. Wir können das Client-Teil-Repository weiterhin problemlos mit unserem Projekt in das Verzeichnis .gitignore . .gitignore einfach sicher, dass das Client-Teil in unserer .gitignore Datei aufgeführt ist. In der Dateistruktur für diese Anwendung befindet sich beispielsweise ein client Verzeichnis, in dem sich der gesamte Client-Teilecode befindet. Wir könnten es in ein völlig separates Repository bringen und dann einfach den folgenden Eintrag zur .gitignore Datei unseres Repositorys auf der Serverseite hinzufügen:



Durch Hinzufügen des client Ordners zur .gitignore Datei stellen wir .gitignore , dass das System diesen Ordner nicht als zweites Repository im Projekt wahrnimmt. Darüber hinaus erleichtert dieser Ansatz das Neugestalten oder Ersetzen des Client-Teils, da der Server-Teil überhaupt nicht betroffen ist.

Wie genau Ihre Full-Stack-Anwendung entworfen wird, liegt ganz bei Ihnen. Mir scheint nur, dass die Struktur der Anwendung etwas genauer ist, wenn Sie separate Repositorys für die Client- und Serverteile verwalten.

Wir erstellen einen Client-Teil auf React.js

Nachdem wir nun die Organisation des Projekts verstanden haben, sprechen wir über den Client-Code. Unten ist meine app.js Datei für eine Anwendung auf React.js. Ich werde in diesem Beitrag nicht für jede Komponente Code einfügen. Ich lasse einfach einen Link zum Repository und erkläre, was jede der React-Komponenten tut.

Und so sieht der Screenshot der Hauptseite unserer Anwendung aus:



Wie Sie sehen können, ist app.js absolut nichts kompliziertes. Es gibt einen <Router>, mit dem Sie in React.js Routen einrichten können, die verschiedene Komponenten basierend auf ihrer URL anzeigen. Hier sind die anderen Komponenten, die in unserer React.js-Anwendung verwendet werden:

• Kopfzeile - Die Navigationsleiste am oberen Bildschirmrand
• Index - Listet verfügbare Blogeinträge auf
• Neu - Das Formular, mit dem der Benutzer einen neuen Beitrag erstellen kann
• Single - Zeigt einen bestimmten Blogeintrag basierend auf seiner id
• Bearbeiten - Das Formular, über das der Benutzer den nach id gefundenen Blogeintrag aktualisieren kann

Wir verwenden Axios, um http-Aufrufe an die API-Terminals durchzuführen, und verwenden dann React.js, um die Daten nach Belieben anzuzeigen. In diesem Beitrag werde ich Index.js Code geben, um klarer zu machen, wie alles zusammenarbeitet.



Im obigen Code ist eine Klassenkomponente enthalten, mit der wir Status- und Lebenszyklusmethoden verwenden können. Dies ist erforderlich, da Axios-Aufrufe in der Lebenszyklusmethode componentDidMount() werden müssen. Es ist zu beachten, dass beim Versuch, meine lokale API aufzurufen, ein CORS-Fehler aufgetreten ist. Um dieses Problem zu lösen, habe ich der Datei server.js auf meinem Express-Server mehrere Header hinzugefügt - und es hat funktioniert. Dieser Code wird in den Kommentaren zur Datei server.js vermerkt.

Stellen wir sicher, dass Such-Bots unsere React.js-App normal lesen.

Abschließend möchte ich kurz auf das Rendern eingehen. Wenn Sie unsere Website starten und direkt zu einem Blog-Beitrag gehen, kann es zu Problemen bei der Anzeige von Inhalten kommen. In diesem Fall ist das Durchsuchen der Website nicht nur für Benutzer unpraktisch, sondern auch für die Suche nach Robotern, die Inhalte indizieren. Um dieses Problem zu umgehen, empfehle ich die Verwendung von Tools wie Gatsby js oder Next js. Diese beiden Lösungen unterscheiden sich voneinander, aber beide können nützlich sein, je nachdem, was genau Sie benötigen.

Gatsby js ist ein statischer Site-Generator. Sie können eine Site auf React.js schreiben, und dann wandelt Gatsby sie während des Builds in statische Dateien um, wodurch die Site superschnell wird. Gatsby enthält viele nützliche Plugins, die das Tool nahezu universell machen. Meine Seite wurde übrigens mit Gatsby.js erstellt! Da statische Dateien während der Montage erstellt werden, muss die Site immer dann neu erstellt werden, wenn sich der ursprüngliche Inhalt ändert.

Next.js ist wiederum eine Serverkomponente zum Anzeigen von React.js-Sites. Darin sind viele nützliche Funktionen integriert, insbesondere Routing, Code-Aufteilung, entworfene Komponenten und vieles mehr. Server-Rendering bedeutet, dass die Daten automatisch aktualisiert werden, wie dies auf dem Server erfolgt. Bevor sie jedoch im Browserfenster angezeigt werden, findet die Rendering-Phase statt. Aus diesem Grund sollte es keine Probleme mit der Anzeige von Daten für den Benutzer geben, und auch Suchroboter erledigen ihre Arbeit ohne Probleme.

Es gibt viele andere Lösungen dieser Art, aber ich habe am meisten über diese beiden gehört, und als ich an diesem Projekt arbeitete, habe ich sie verwendet. Beide sind hervorragend dokumentiert, so dass es einfach ist, schnell mit beiden umzugehen und zur Sache zu kommen.

Letzte Gedanken zum MERN-Stack

Hoffentlich hat Ihnen dieser Artikel dabei geholfen, die Funktionsweise des MERN-Stacks etwas genauer zu bestimmen. Darin nehmen wir einfach MongoDB, Express.js und Node.js und erstellen daraus einen Server, der bereits API-Terminals bereitstellt, über die unsere React.js-Anwendung auf Daten zugreifen kann. Jetzt verstehst du viel, es ist Zeit, großartige Dinge zu tun!