Hogyan hozhat létre React frontendet és Node / Express backendet, és hogyan kapcsolhatja össze őket

Ebben a cikkben végigvezetek egy egyszerű React alkalmazás létrehozásának folyamatán, és összekapcsoljuk azt egy egyszerű Node / Express API-val, amelyet mi is létrehozunk.

Nem részletezem részletesen, hogyan kell működni az ebben az oktatóanyagban megemlített technológiákkal, de hagyok linkeket arra az esetre, ha többet szeretne megtudni.

Az összes kód megtalálható ebben a lerakatban , amelyet az oktatóanyaghoz készítettem.

A cél itt az, hogy gyakorlati útmutatót adjon a front-end kliens és a back-end API beállításáról és összekapcsolásáról .

Mielőtt beszennyeznénk a kezünket, győződjön meg arról, hogy a Node.js fut a gépén.

Hozza létre a Fő projekt könyvtárat

A terminálon keresse meg azt a könyvtárat, ahová el szeretné menteni a projektjét. Most hozzon létre egy új könyvtárat a projekthez, és navigáljon bele:

mkdir my_awesome_project cd my_awesome_project

Hozzon létre egy React alkalmazást

Ez a folyamat valóban egyszerű.

Arra fogom használni a Facebook Create-Reago-alkalmazását, hogy ... kitalálta, könnyen hozzon létre egy ügyfél nevű reakció alkalmazást :

npx create-react-app client cd client npm start

Lássuk, mit tettem:

  1. Az npm npx-jével létrehozta a reakcióalkalmazást, és ügyfélnek nevezte el.
  2. cd (könyvtár megváltoztatása) az ügyfél könyvtárba.
  3. Elindította az alkalmazást.

Keresse meg böngészőjében a // localhost: 3000 / címet.

Ha minden rendben van, akkor megjelenik a reagálási üdvözlő oldal. Gratulálunk! Ez azt jelenti, hogy most már működik egy alap React alkalmazás a helyi gépen. Könnyű, igaz?

A reakcióalkalmazás leállításához egyszerűen nyomja Ctrl + cmeg a terminált.

Hozzon létre egy Express alkalmazást

Ok, ez ugyanolyan egyszerű lesz, mint az előző példa. Ne felejtsen el navigálni a projekt legfelső mappájába.

Az Express Application Generator segítségével gyorsan létrehozhatok egy alkalmazáscsontvázat és elnevezhetem api:

npx express-generator api cd api npm install npm start

Lássuk, mit tettem:

  1. Az npm npx-jét használta az express-generátor globális telepítésére.
  2. Express-generátort használt egy expressz alkalmazás létrehozására, és API-nek nevezte el.
  3. cd az API könyvtárba.
  4. Telepítette az összes függőséget.
  5. Elindította az alkalmazást.

Keresse meg böngészőjében a // localhost: 3000 / címet.

Ha minden rendben van, akkor megjelenik az expressz üdvözlő oldal. Gratulálunk! Ez azt jelenti, hogy a helyi gépen most fut egy alapvető Express alkalmazás. Könnyű, igaz?

A reakcióalkalmazás leállításához egyszerűen nyomja Ctrl + cmeg a terminált.

Új útvonal konfigurálása az Express API-ban

Ok, koszoljuk be a kezünket. Ideje megnyitni kedvenc kódszerkesztőjét (VS Code-t használok), és navigáljon a projekt mappájához.

Ha a reakcióalkalmazást kliensnek , az expressz alkalmazást pedig apinak nevezte el , két fő mappát talál: klienst és apit.

  1. Az API könyvtárban lépjen a bin / www címre, és változtassa meg a 15. sor portszámát 3000-ről 9000-re. Később mindkét alkalmazást egyszerre fogjuk futtatni, így ezzel elkerülheti a problémákat. Az eredménynek valami ilyennek kell lennie:

2. Az api / route -on hozzon létre egy testAPI.js fájlt, és illessze be ezt a kódot:

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

3. Az api / app.js fájlba illesszen be egy új útvonalat a 24. sorba:

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

4. Ok, you are “telling” express to use this route but, you still have to require it. Let’s do that on line 9:

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

The only changes are in line 9 and line 25. It should end up something like this:

5. Congratulations! You have created a new route.

If you start your API app (in your terminal, navigate to the API directory and “npm start”), and go to //localhost:9000/testAPI in your browser, you will see the message: API is working properly.

Connecting the React Client to the Express API

  1. On your code editor, let’s work in the client directory. Open app.js file located in my_awesome_project/client/app.js.
  2. Here I will use the 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:

Nem sikerült betölteni // localhost: 9000 / testAPI: A kért erőforrásban nincs 'Access-Control-Allow-Origin' fejléc. A '// localhost: 3000' eredet ezért nem engedélyezett. Ha egy átláthatatlan válasz kielégíti az Ön igényeit, állítsa a kérés módját „nem engedélyezett” -re az erőforrás lekéréséhez letiltott CORS esetén.

Ez egyszerűen megoldható. Csak hozzá kell adnunk a CORS-t az API-hoz, hogy engedélyezzük a kereszt-származási kérelmeket. Csináljuk csak ezt. Itt ellenőrizheti a CORS-ról.

  1. Keresse meg a termináljában az API könyvtárat, és telepítse a CORS csomagot:
npm install --save cors

2. A kódszerkesztőn lépjen az API könyvtárba, és nyissa meg a my_awesome_project / api / app.js fájlt.

3. A 6. vonalon CORS szükséges :

var cors = require("cors");

4. Most a 18. sorban mondja meg az expressznek, hogy használja a CORS-t :

app.use(cors());

Az API app.js fájlnak ilyennek kell lennie:

Nagyszerű munka. Minden kész !!

Rendben! Mindannyian készen állunk!

Most indítsa el az alkalmazásokat (kliens és API) két különböző terminálon, az npm start paranccsal.

Ha a // localhost: 3000 / webhelyre navigál a böngészőjében, valami ilyesmit kell találnia:

Természetesen ez a projekt, mivel van, nem sokat fog tenni, de a Full Stack alkalmazás elindítása. Az összes kód megtalálható ebben a lerakatban , amelyet az oktatóanyaghoz készítettem.

Ezután néhány kiegészítő oktatóanyagon fogok dolgozni, például hogyan lehet ezt összekapcsolni egy MongoDB adatbázissal, sőt, hogyan futtatni mindezt a Docker konténerekben.

Ahogy egy jó barátom mondja:

Légy erős és kódolj !!!

… És ne felejtsd el, hogy ma félelmetes legyél;)