So erstellen Sie ein React-Frontend und ein Node / Express-Backend und verbinden sie

In diesem Artikel werde ich Sie durch den Prozess des Erstellens einer einfachen React-App und des Verbindens mit einer einfachen Node / Express-API führen, die wir ebenfalls erstellen werden.

Ich werde nicht näher auf die Arbeit mit den Technologien eingehen, die ich in diesem Tutorial erwähnen werde, aber ich werde Links hinterlassen, falls Sie mehr erfahren möchten.

Sie finden den gesamten Code in diesem Repository, das ich für das Tutorial erstellt habe.

Ziel ist es, Ihnen eine praktische Anleitung zum Einrichten und Verbinden des Front-End-Clients und der Back-End-API zu geben .

Stellen Sie sicher, dass Node.js auf Ihrem Computer ausgeführt wird, bevor wir uns die Hände schmutzig machen.

Erstellen Sie das Hauptprojektverzeichnis

Navigieren Sie in Ihrem Terminal zu einem Verzeichnis, in dem Sie Ihr Projekt speichern möchten. Erstellen Sie nun ein neues Verzeichnis für Ihr Projekt und navigieren Sie hinein:

mkdir my_awesome_project cd my_awesome_project

Erstellen Sie eine React App

Dieser Prozess ist wirklich unkompliziert.

Ich werde die Create-React-App von Facebook verwenden, um… Sie haben es erraten, einfach eine React-App mit dem Namen client zu erstellen :

npx create-react-app client cd client npm start

Mal sehen, was ich getan habe:

  1. Mit npm's npx wurde eine Reaktions-App erstellt und als Client bezeichnet.
  2. cd (Verzeichnis wechseln) in das Client-Verzeichnis.
  3. App gestartet.

Navigieren Sie in Ihrem Browser zu // localhost: 3000 /.

Wenn alles in Ordnung ist, wird die Begrüßungsseite angezeigt. Herzliche Glückwünsche! Das bedeutet, dass auf Ihrem lokalen Computer jetzt eine grundlegende React- Anwendung ausgeführt wird. Einfach richtig?

Um Ihre Reaktions-App zu stoppen, drücken Ctrl + cSie einfach in Ihrem Terminal.

Erstellen Sie eine Express-App

Ok, das ist so einfach wie im vorherigen Beispiel. Vergessen Sie nicht, zu Ihrem obersten Projektordner zu navigieren.

Ich werde den Express Application Generator verwenden, um schnell ein Anwendungsskelett zu erstellen und es als API zu bezeichnen:

npx express-generator api cd api npm install npm start

Mal sehen, was ich getan habe:

  1. Verwendet npm's npx, um den Express-Generator global zu installieren.
  2. Mit dem Express-Generator wurde eine Express-App erstellt und als API bezeichnet.
  3. CD in das API-Verzeichnis.
  4. Alle Abhängigkeiten installiert.
  5. App gestartet.

Navigieren Sie in Ihrem Browser zu // localhost: 3000 /.

Wenn alles in Ordnung ist, sehen Sie die Express-Begrüßungsseite. Herzliche Glückwünsche! Das bedeutet, dass auf Ihrem lokalen Computer jetzt eine grundlegende Express- Anwendung ausgeführt wird. Einfach richtig?

Um Ihre Reaktions-App zu stoppen, drücken Ctrl + cSie einfach in Ihrem Terminal.

Konfigurieren einer neuen Route in der Express-API

Ok, lass uns die Hände schmutzig machen. Es ist Zeit, Ihren bevorzugten Code-Editor zu öffnen (ich verwende VS-Code) und zu Ihrem Projektordner zu navigieren.

Wenn Sie die React-App als Client und die Express-App als API benannt haben , finden Sie zwei Hauptordner: Client und API.

  1. Gehen Sie im API- Verzeichnis zu bin / www und ändern Sie die Portnummer in Zeile 15 von 3000 auf 9000. Wir werden später beide Apps gleichzeitig ausführen, um Probleme zu vermeiden. Das Ergebnis sollte ungefähr so ​​aussehen:

2. Erstellen Sie auf API / Routen eine testAPI.js- Datei und fügen Sie diesen Code ein:

var express = require(“express”); var router = express.Router(); router.get(“/”, function(req, res, next) { res.send(“API is working properly”); }); module.exports = router;

3. Fügen Sie in der Datei api / app.js eine neue Route in Zeile 24 ein:

app.use("/testAPI", testAPIRouter);

4. Ok, Sie sagen Express, dass Sie diese Route verwenden sollen, aber Sie müssen sie trotzdem benötigen. Machen wir das in Zeile 9:

var testAPIRouter = require("./routes/testAPI");

Die einzigen Änderungen sind in Zeile 9 und Zeile 25. Es sollte ungefähr so ​​enden:

5. Herzlichen Glückwunsch! Sie haben eine neue Route erstellt.

Wenn Sie Ihre API-App starten (navigieren Sie in Ihrem Terminal zum API-Verzeichnis und zu „ npm start“ ) und in Ihrem Browser zu // localhost: 9000 / testAPI gehen, wird die Meldung angezeigt: API funktioniert ordnungsgemäß.

Verbinden des React-Clients mit der Express-API

  1. Lassen Sie uns in Ihrem Code-Editor im Client- Verzeichnis arbeiten. Öffnen app.js Datei in sich my_awesome_project / client / app.js .
  2. Hier werde ich die Fetch API verwendento retrieve data from the API. Just paste this code after the Class declaration and before the render method:
constructor(props) { super(props); this.state = { apiResponse: "" }; } callAPI() { fetch("//localhost:9000/testAPI") .then(res => res.text()) .then(res => this.setState({ apiResponse: res })); } componentWillMount() { this.callAPI(); }

3. Inside the render method, you will find a <;p> tag. Let’s change it so that it renders the apiResponse:

;{this.state.apiResponse}

At the end, this file should look something like this:

I know!!! This was a bit too much. Copy paste is your friend, but you have to understand what you are doing. Let’s see what I did here:

  1. On lines 6 to 9, we inserted a constructor, that initializes the default state.
  2. On lines 11 to 16, we inserted the method callAPI() that will fetch the data from the API and store the response on this.state.apiResponse.
  3. On lines 18 to 20, we inserted a react lifecycle method called componentDidMount(), that will execute the callAPI() method after the component mounts.
  4. Last, on line 29, I used the <;p> tag to display a paragraph on our client page, with the text that we retrieved from the API.

What the heck!! CORS ?

Oh yeah, baby! We are almost done. But if we start both our apps (client and API) and navigate to //localhost:3000/, you still won't find the expected result displayed on the page. If you open chrome developer tools, you will find why. In the console, you will see this error:

Fehler beim Laden von // localhost: 9000 / testAPI: In der angeforderten Ressource ist kein Header 'Access-Control-Allow-Origin' vorhanden. Origin '// localhost: 3000' ist daher kein Zugriff gestattet. Wenn eine undurchsichtige Antwort Ihren Anforderungen entspricht, setzen Sie den Anforderungsmodus auf "no-cors", um die Ressource mit deaktiviertem CORS abzurufen.

Das ist einfach zu lösen. Wir müssen unserer API nur CORS hinzufügen, um Ursprungsübergreifende Anforderungen zuzulassen. Lass uns genau das tun. Sie sollten hier nachsehen, um mehr über CORS zu erfahren.

  1. Navigieren Sie in Ihrem Terminal zum API-Verzeichnis und installieren Sie das CORS- Paket:
npm install --save cors

2. Gehen Sie in Ihrem Code-Editor zum API-Verzeichnis und öffnen Sie die Datei my_awesome_project / api / app.js.

3. In Zeile 6 benötigen Sie CORS:

var cors = require("cors");

4. Nun in Zeile 18 "Tell" Express, um CORS zu verwenden :

app.use(cors());

Die API- Datei app.js sollte ungefähr so aussehen:

Gute Arbeit. Es ist alles fertig!!

OK! Wir sind alle da!

Starten Sie nun beide Apps (Client und API) in zwei verschiedenen Terminals mit dem Befehl npm start .

Wenn Sie in Ihrem Browser zu // localhost: 3000 / navigieren, sollten Sie Folgendes finden:

Natürlich wird dieses Projekt nicht viel bewirken, aber es ist der Beginn einer Full-Stack-Anwendung. Sie finden den gesamten Code in diesem Repository , das ich für das Tutorial erstellt habe.

Als nächstes werde ich an einigen ergänzenden Tutorials arbeiten, wie man diese mit einer MongoDB-Datenbank verbindet und sogar wie man alles in Docker-Containern ausführt.

Wie ein guter Freund von mir sagt:

Sei stark und Code On !!!

… Und vergiss nicht, heute großartig zu sein;)