So erstellen Sie eine App zum Erstellen und Reagieren mit einer Node-Back-End-API

Dies ist eine sehr häufige Frage unter neueren React-Entwicklern und eine Frage, die ich hatte, als ich mit React und Node.js anfing. In diesem kurzen Beispiel zeige ich Ihnen, wie Sie create-react-appmit Node.js und Express Back-End arbeiten.

create-react-app

Erstellen Sie ein Projekt mit create-react-app.

npx create-react-app example-create-react-app-express

Erstellen Sie ein /clientVerzeichnis unter example-create-react-app-expressVerzeichnis und verschieben Sie den gesamten von React Boilerplate-Code, der von erstellt wurde, create-react-appin dieses neue Client-Verzeichnis.

cd example-create-react-app-expressmkdir client

Der Node Express Server

Erstellen Sie eine package.jsonDatei im Stammverzeichnis ( example-create-react-app-express) und kopieren Sie den folgenden Inhalt:

{ "name": "example-create-react-app-express", "version": "1.0.0", "scripts": { "client": "cd client && yarn start", "server": "nodemon server.js", "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\"" }, "dependencies": { "body-parser": "^1.18.3", "express": "^4.16.4" }, "devDependencies": { "concurrently": "^4.0.1" } }

Beachten Sie, dass ich concurrently die React-App und den Server gleichzeitig ausführen kann. Das –kill-others-on-failFlag beendet andere Prozesse, wenn einer mit einem Statuscode ungleich Null beendet wird.

nodemon Global installieren und die Serverabhängigkeiten:

npm i nodemon -g yarn

Erstellen Sie eine server.jsDatei und kopieren Sie den folgenden Inhalt:

const express = require('express'); const bodyParser = require('body-parser'); const app = express(); const port = process.env.PORT || 5000; app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); app.get('/api/hello', (req, res) => { res.send({ express: 'Hello From Express' }); }); app.post('/api/world', (req, res) => { console.log(req.body); res.send( `I received your POST request. This is what you sent me: ${req.body.post}`, ); }); app.listen(port, () => console.log(`Listening on port ${port}`));

Dies ist ein einfacher Express-Server, der auf Port 5000 ausgeführt wird und über zwei API-Routen verfügt: GET- /api/hellound POST- /api/world.

Zu diesem Zeitpunkt können Sie den Express-Server mit dem folgenden Befehl ausführen (noch im Stammverzeichnis):

node server.js

Navigieren //localhost:5000/api/helloSie nun zu und Sie erhalten Folgendes:

Wir werden die POSTRoute testen , sobald wir die React-App erstellt haben.

Die React App

Wechseln Sie nun in das clientVerzeichnis, in dem sich unsere React-App befindet.

Fügen Sie der package.jsonvon erstellten Datei die folgende Zeile hinzu create-react-app.

"proxy": "//localhost:5000/"

Der Schlüssel zur Verwendung eines Express-Back-End-Servers mit einem mit erstellten Projekt create-react-appist die Verwendung eines Proxys. Dadurch wird der Web-Pack-Entwicklungsserver angewiesen, unsere API-Anforderungen an unseren API-Server weiterzuleiten, sofern unser Express-Server ausgeführt wird localhost:5000.

Ändern Sie nun ./client/src/App.js, um unser Express-API- Backend aufzurufen. Änderungen sind fett gedruckt.

import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { state = { response: '', post: '', responseToPost: '', }; componentDidMount() { this.callApi() .then(res => this.setState({ response: res.express })) .catch(err => console.log(err)); } callApi = async () => { const response = await fetch('/api/hello'); const body = await response.json(); if (response.status !== 200) throw Error(body.message); return body; }; handleSubmit = async e => { e.preventDefault(); const response = await fetch('/api/world', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ post: this.state.post }), }); const body = await response.text(); this.setState({ responseToPost: body }); }; render() { return ( 

Edit src/App.js and save to reload.

Learn React

{this.state.response}

Post to Server:

this.setState({ post: e.target.value })} /> Submit

{this.state.responseToPost}

); } } export default App;

Wir erstellen eine callApiMethode für die Interaktion mit unserer GETExpress-API-Route, rufen diese Methode auf componentDidMountund setzen den Status schließlich auf die API-Antwort, die Hello From Express lautet .

Beachten Sie, dass wir keine vollständig qualifizierte URL //localhost:5000/api/hellozum Aufrufen unserer API verwendet haben, obwohl unsere React-App auf einem anderen Port (3000) ausgeführt wird. Das liegt an derproxyZeile, die wir package.jsonzuvor zur Datei hinzugefügt haben.

Wir haben ein Formular mit einer einzigen Eingabe. Bei gesendeten Anrufen handleSubmit, die wiederum unsere POSTExpress-API-Route aufrufen, wird die Antwort auf den Status gespeichert und dem Benutzer eine Nachricht angezeigt: Ich habe Ihre POST-Anfrage erhalten. Folgendes haben Sie mir gesendet: [Nachricht von der Eingabe] .

Öffnen ./client/src/App.cssund ändern Sie nun die .App-headerKlasse wie folgt (Änderungen in Fettdruck)

.App-header { ... min-height: 50%; ... padding-bottom: 10px; }

Ausführen der App

Wenn der Server noch läuft, stoppen Sie ihn, indem Sie in Ihrem Terminal Strg + C drücken.

Führen Sie im Projektstammverzeichnis Folgendes aus:

yarn dev

Dadurch wird die React-App gestartet und gleichzeitig der Server ausgeführt.

Navigieren //localhost:3000Sie nun zu und Sie gelangen auf die React-App, in der die Nachricht von unserer GETExpress-Route angezeigt wird . Nett ?!

Geben Sie nun etwas in das Eingabefeld ein und senden Sie das Formular. Die Antwort von der POSTExpress-Route wird direkt unter dem Eingabefeld angezeigt.

Schauen Sie sich zum Schluss Ihr Terminal an. Sie sehen die Nachricht, die wir vom Client gesendet haben, weil wir den Anfragetext console.logauf der POSTExpress-Route anrufen .

Produktionsbereitstellung für Heroku

Öffnen server.jsund ersetzen Sie durch folgenden Inhalt:

const express = require('express'); const bodyParser = require('body-parser'); const path = require('path'); const app = express(); const port = process.env.PORT || 5000; app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); // API calls app.get('/api/hello', (req, res) => { res.send({ express: 'Hello From Express' }); }); app.post('/api/world', (req, res) => { console.log(req.body); res.send( `I received your POST request. This is what you sent me: ${req.body.post}`, ); }); if (process.env.NODE_ENV === 'production') { // Serve any static files app.use(express.static(path.join(__dirname, 'client/build'))); // Handle React routing, return all requests to React app app.get('*', function(req, res) { res.sendFile(path.join(__dirname, 'client/build', 'index.html')); }); } app.listen(port, () => console.log(`Listening on port ${port}`));

Öffnen ./package.jsonSie den scriptsEintrag und fügen Sie dem Eintrag Folgendes hinzu

"start": "node server.js", "heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build"

Heroku führt das startSkript standardmäßig aus und dies dient unserer App. Dann möchten wir Heroku anweisen, unsere Client-App zu erstellen. Wir tun dies mit einem heroku-postbuildSkript.

Gehen Sie jetzt zu Heroku und melden Sie sich an (oder eröffnen Sie ein Konto, wenn Sie noch keines haben).

Erstellen Sie eine neue App und geben Sie ihr einen Namen

Click on the Deploy tab and follow the deploy instructions (which I think they are pretty self-explanatory, no point on replicating them here ?)

And that is it, you can open your app by clicking on the Open app button at the top right corner within the Heroku dashboard for your app.

Visit the deployed app for this tutorial: //cra-express.herokuapp.com/

Other Deployment Options

I write about other deployments options here:

  • Netlify
  • Now
  • Heoku (more in-depth explanation)

Project Structure

This will be the final project structure.

Get the full code on the GitHub repository.

Thank you for reading and I hope you enjoyed it. Any question, suggestions let me know in the comments below!

You can follow me on Twitter, GitHub, Medium, LinkedIn or all of them.

This post was originally posted on my personal blog website.

Update 8/25/19: I have been building a prayer web app called "My Quiet Time - A Prayer Journal". If you would like to stay in the loop please sign up through the following link: //b.link/mqt  

The app will be released before the end of the year, I have big plans for this app. To see some mockup screenshots follow the following link: //pc.cd/Lpy7

My DMs on Twitter are open if you have any questions regarding the app ?