Πώς να δημιουργήσετε ένα React frontend και ένα Node / Express backend και να τα συνδέσετε

Σε αυτό το άρθρο, θα σας καθοδηγήσω στη διαδικασία δημιουργίας μιας απλής εφαρμογής React και τη σύνδεσή της με ένα απλό Node / Express API που θα δημιουργήσουμε επίσης.

Δεν θα αναφερθώ σε πολλές λεπτομέρειες σχετικά με τον τρόπο εργασίας με οποιαδήποτε από τις τεχνολογίες που θα αναφέρω σε αυτό το σεμινάριο, αλλά θα αφήσω συνδέσμους, σε περίπτωση που θέλετε να μάθετε περισσότερα.

Μπορείτε να βρείτε όλο τον κώδικα σε αυτό το αποθετήριο που έφτιαξα για το σεμινάριο.

Ο στόχος εδώ είναι να σας δώσει έναν πρακτικό οδηγό για τον τρόπο ρύθμισης και σύνδεσης του πελάτη front-end και του API back-end .

Προτού βρώσουμε τα χέρια μας βρώμικα, βεβαιωθείτε ότι έχετε τρέξει το Node.js στο μηχάνημά σας.

Δημιουργήστε τον κύριο κατάλογο έργου

Στο τερματικό σας, μεταβείτε σε έναν κατάλογο όπου θέλετε να αποθηκεύσετε το έργο σας. Τώρα δημιουργήστε έναν νέο κατάλογο για το έργο σας και μεταβείτε σε αυτόν:

mkdir my_awesome_project cd my_awesome_project

Δημιουργήστε μια εφαρμογή React

Αυτή η διαδικασία είναι πραγματικά απλή.

Θα χρησιμοποιήσω την εφαρμογή create-react-Facebook του Facebook για… το μαντέψατε, δημιουργώντας εύκολα μια εφαρμογή αντιδράσεων με όνομα πελάτη :

npx create-react-app client cd client npm start

Ας δούμε τι έχω κάνει:

  1. Χρησιμοποίησε το npm npx για να δημιουργήσει μια εφαρμογή αντιδράσεων και το ονόμασε πελάτη.
  2. cd (αλλαγή καταλόγου) στον κατάλογο πελατών.
  3. Ξεκίνησε την εφαρμογή.

Στο πρόγραμμα περιήγησής σας, μεταβείτε στη διεύθυνση // localhost: 3000 /.

Αν όλα είναι εντάξει, θα δείτε τη σελίδα υποδοχής. Συγχαρητήρια! Αυτό σημαίνει ότι έχετε πλέον μια βασική εφαρμογή React που εκτελείται στον τοπικό υπολογιστή σας. Εύκολο, σωστά;

Για να σταματήσετε την εφαρμογή σας, απλώς πατήστε Ctrl + cστο τερματικό σας.

Δημιουργήστε μια εφαρμογή Express

Εντάξει, αυτό θα είναι τόσο απλό όσο το προηγούμενο παράδειγμα. Μην ξεχάσετε να μεταβείτε στον κορυφαίο φάκελο του έργου σας.

Θα χρησιμοποιήσω το Express Application Generator για να δημιουργήσω γρήγορα ένα σκελετό εφαρμογής και να το ονομάσω api:

npx express-generator api cd api npm install npm start

Ας δούμε τι έχω κάνει:

  1. Χρησιμοποίησε το npm του npx για να εγκαταστήσει γεννήτρια express παγκοσμίως.
  2. Χρησιμοποίησε το express-generator για να δημιουργήσει μια γρήγορη εφαρμογή και το ονόμασε api.
  3. cd στον κατάλογο API.
  4. Εγκαταστάθηκαν όλες οι εξαρτήσεις.
  5. Ξεκίνησε την εφαρμογή.

Στο πρόγραμμα περιήγησής σας, μεταβείτε στη διεύθυνση // localhost: 3000 /.

Εάν όλα είναι εντάξει, θα δείτε τη ρητή σελίδα καλωσορίσματος. Συγχαρητήρια! Αυτό σημαίνει ότι έχετε πλέον μια βασική εφαρμογή Express που εκτελείται στον τοπικό υπολογιστή σας. Εύκολο, σωστά;

Για να σταματήσετε την εφαρμογή σας, απλώς πατήστε Ctrl + cστο τερματικό σας.

Διαμόρφωση νέας διαδρομής στο Express API

Εντάξει, ας βρώσουμε τα χέρια μας. Ώρα να ανοίξετε τον αγαπημένο σας επεξεργαστή κώδικα (χρησιμοποιώ τον κωδικό VS) και να μεταβείτε στον φάκελο του έργου σας.

Εάν ονομάσατε την εφαρμογή react ως πελάτη και την εφαρμογή express ως api , θα βρείτε δύο κύριους φακέλους: client και api.

  1. Μέσα στον κατάλογο API , μεταβείτε στο bin / www και αλλάξτε τον αριθμό θύρας στη γραμμή 15 από 3000 σε 9000. Θα εκτελέσουμε και τις δύο εφαρμογές ταυτόχρονα αργότερα, οπότε κάτι τέτοιο θα αποφύγει προβλήματα. Το αποτέλεσμα πρέπει να είναι κάπως έτσι:

2. Στο api / rout , δημιουργήστε ένα αρχείο testAPI.js και επικολλήστε αυτόν τον κώδικα:

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

3. Στο αρχείο api / app.js , εισαγάγετε μια νέα διαδρομή στη γραμμή 24:

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

4. Εντάξει, λέτε «ρητά» στη χρήση αυτής της διαδρομής, αλλά, πρέπει να τη χρειαστείτε. Ας το κάνουμε στη γραμμή 9:

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

Οι μόνες αλλαγές είναι στη γραμμή 9 και στη γραμμή 25. Θα πρέπει να καταλήξει κάπως έτσι:

5. Συγχαρητήρια! Έχετε δημιουργήσει μια νέα διαδρομή.

Εάν ξεκινήσετε την εφαρμογή API (στο τερματικό σας, μεταβείτε στον κατάλογο API και " npm start" ) και μεταβείτε στη διεύθυνση // localhost: 9000 / testAPI στο πρόγραμμα περιήγησής σας, θα δείτε το μήνυμα: Το API λειτουργεί σωστά.

Σύνδεση του React Client με το Express API

  1. Στον επεξεργαστή κώδικα, ας εργαστούμε στον κατάλογο πελατών Ανοίξτε app.js αρχείο βρίσκεται στο my_awesome_project / πελάτη / app.js .
  2. Εδώ θα χρησιμοποιήσω το Fetch APIto 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:

Αποτυχία φόρτωσης // localhost: 9000 / testAPI: Δεν υπάρχει κεφαλίδα «Access-Control-Allow-Origin» στον απαιτούμενο πόρο. Επομένως, δεν επιτρέπεται η πρόσβαση Origin "// localhost: 3000". Εάν μια αδιαφανής απόκριση εξυπηρετεί τις ανάγκες σας, ορίστε τη λειτουργία του αιτήματος σε "no-cors" για να ανακτήσετε τον πόρο με απενεργοποιημένο το CORS.

Αυτό είναι εύκολο να λυθεί. Απλώς πρέπει να προσθέσουμε CORS στο API μας για να επιτρέψουμε αιτήματα πολλαπλής προέλευσης. Ας κάνουμε ακριβώς αυτό. Θα πρέπει να ελέγξετε εδώ για να μάθετε περισσότερα για το CORS.

  1. Στο τερματικό σας, μεταβείτε στον κατάλογο API και εγκαταστήστε το πακέτο CORS :
npm install --save cors

2. Στο πρόγραμμα επεξεργασίας κώδικα σας, πηγαίνετε στον κατάλογο API και ανοίξτε το my_awesome_project / api / app.js αρχείο.

3. Στη γραμμή 6 απαιτούνται CORS:

var cors = require("cors");

4. Τώρα στη γραμμή 18 «πείτε» express για χρήση CORS :

app.use(cors());

Το αρχείο API app.js θα πρέπει να καταλήγει κάπως έτσι:

Καταπληκτική δουλειά. Όλα τελείωσαν !!

Εντάξει! Είμαστε όλοι έτοιμοι!

Τώρα ξεκινήστε και τις δύο εφαρμογές σας (πελάτης και API), σε δύο διαφορετικά τερματικά, χρησιμοποιώντας την εντολή έναρξης npm .

Εάν μεταβείτε στο // localhost: 3000 / στο πρόγραμμα περιήγησής σας, θα πρέπει να βρείτε κάτι τέτοιο:

Φυσικά, αυτό το έργο καθώς δεν θα κάνει πολλά, αλλά είναι η αρχή μιας εφαρμογής Full Stack. Μπορείτε να βρείτε όλο τον κώδικα σε αυτό το αποθετήριο που έχω δημιουργήσει για το σεμινάριο.

Στη συνέχεια, θα δουλέψω σε ορισμένα συμπληρωματικά σεμινάρια, όπως πώς να το συνδέσω σε μια βάση δεδομένων MongoDB και ακόμη, πώς να το τρέχω όλα μέσα σε δοχεία Docker

Όπως λέει ένας καλός φίλος μου:

Να είστε δυνατοί και να κωδικοποιείτε !!!

… Και μην ξεχάσετε να είστε φοβεροί σήμερα;)