Kuidas luua Reacti esiosa ja Node / Expressi taustaprogramm ning ühendada need

Selles artiklis tutvustan teid lihtsa rakenduse React loomise ja selle ühendamise lihtsa Node / Expressi API-ga, mida samuti loome.

Ma ei hakka eriti üksikasjalikult kirjeldama, kuidas töötada selles õpetuses mainitud tehnoloogiatega, kuid jätan lingid juhuks, kui soovite rohkem teada saada.

Kogu koodi leiate sellest hoidlast, mille ma juhendaja jaoks tegin.

Siin on eesmärk anda teile praktiline juhend, kuidas seadistada ja ühendada esiotsa klient ja taustaprogrammi API .

Enne kui meie käed määrduvad, veenduge, et teie masinas töötab Node.js.

Looge kataloog Põhiprojekt

Navigeerige oma terminalis kataloogi, kuhu soovite oma projekti salvestada. Nüüd looge oma projektile uus kataloog ja navigeerige sinna:

mkdir my_awesome_project cd my_awesome_project

Looge rakendus Reageeri

See protsess on tõesti lihtne.

Ma kasutan Facebooki loodud-reageeri-rakendust selleks, et ... sa arvasid seda, looge lihtsalt reageerimisrakendus nimega klient :

npx create-react-app client cd client npm start

Vaatame, mida ma olen teinud:

  1. Kasutas reageeriva rakenduse loomiseks npm-i NPX-i ja nimetas selle kliendiks.
  2. cd (kataloogi muutmine) kliendikataloogiks.
  3. Käivitati rakendus.

Liikuge brauseris saidile // localhost: 3000 /.

Kui kõik on korras, näete reageerimise tervituslehte. Palju õnne! See tähendab, et teie kohalikus masinas töötab nüüd põhirakendus React . Lihtne, eks?

Reageeriva rakenduse peatamiseks vajutage Ctrl + clihtsalt terminali.

Looge Expressi rakendus

Ok, see on sama otsekohene kui eelmine näide. Ärge unustage navigeerida oma projekti ülemisse kausta.

Kasutan rakenduse skeleti loomiseks ja rakenduse nimeks api kiireks rakenduste generaatoriks :

npx express-generator api cd api npm install npm start

Vaatame, mida ma olen teinud:

  1. Ekspressgeneraatori ülemaailmseks installimiseks kasutas npm's npx.
  2. Kasutas ekspress-generaatorit ekspressrakenduse loomiseks ja pani sellele nimeks api.
  3. cd API kataloogi.
  4. Paigaldatud kõik sõltuvused.
  5. Käivitati rakendus.

Liikuge brauseris saidile // localhost: 3000 /.

Kui kõik on korras, näete kiiret tervituslehte. Palju õnne! See tähendab, et teie kohalikus masinas töötab nüüd põhiline Express- rakendus. Lihtne, eks?

Reageeriva rakenduse peatamiseks vajutage Ctrl + clihtsalt terminali.

Uue marsruudi konfigureerimine Express API-s

Ok, laseme käed määrduda. Aeg avada oma lemmikkoodiredaktor (kasutan VS-koodi) ja navigeerige oma projekti kausta.

Kui nimetasite reageeriva rakenduse kliendiks ja ekspressrakenduse api-ks , leiate kaks peamist kausta: klient ja api.

  1. Toas API kataloogi minna bin / www ja muuta pordi number real 15 alates 3000 kuni 9000. Me töötab nii apps samal ajal hiljem, nii seda teed vältida probleeme. Tulemus peaks olema umbes selline:

2. Looge api / marsruudil fail testAPI.js ja kleepige see kood:

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

3. Lisage failile api / app.js uus marsruut 24. reale:

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

4. Ok, käskite ekspressil seda marsruuti kasutada, kuid peate siiski seda nõudma. Teeme seda 9. real:

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

Ainsad muudatused on 9. ja 25. real. See peaks lõppema umbes järgmisega:

5. Palju õnne! Olete loonud uue marsruudi.

Kui käivitate oma API-rakenduse (navigeerige oma terminalis API-kataloogi ja „ npm start” ) ja minge oma brauseris aadressile // localhost: 9000 / testAPI, näete teadet: API töötab korralikult.

React Client'i ühendamine Express API-ga

  1. Töötame teie koodiredaktoris kliendikataloogis . Open app.js faili asub my_awesome_project / kliendi / app.js .
  2. Siin kasutan Fetch API-dandmete hankimiseks API-st. Lihtsalt kleepige see kood pärast klassi deklaratsiooni ja enne renderdamismeetodit:
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. Renderdusmeetodi sees leiate sildi < ; p>. Muutkem seda nii, et see muudaks apiRide mõtte :

;{this.state.apiResponse}

Lõpuks peaks see fail välja nägema umbes selline:

Ma tean!!! See oli natuke liiga palju. Copy paste on teie sõber, kuid peate aru saama, mida teete. Vaatame, mida ma siin tegin:

  1. Ridadele 6 kuni 9 sisestasime konstruktori, mis lähtestab vaikeseisundi.
  2. Ridadele 11 kuni 16 sisestasime meetodi callAPI () , mis tõmbab andmed API-st ja salvestab vastuse saidile 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 laadimine nurjus. Taotletud ressursil puudub päis „Access-Control-Allow-Origin”. Päritolule '// localhost: 3000' pole seetõttu juurdepääsu lubatud. Kui läbipaistmatu vastus vastab teie vajadustele, määrake ressursi toomiseks keelatud CORS-i abil päringu režiimiks "no-cors".

Seda on lihtne lahendada. Algsete päringute lubamiseks peame lihtsalt lisama oma API-le CORS-i. Teeme just seda. CORS-i kohta leiate lisateavet siit.

  1. Navigeerige oma terminalis API kataloogi ja installige pakett CORS :
npm install --save cors

2. Minge oma koodiredaktoris API kataloogi ja avage fail my_awesome_project / api / app.js.

3. 6. liinil on vaja CORS-i:

var cors = require("cors");

4. Nüüd real 18 „ käskige ” väljendada CORS-i kasutamist :

app.use(cors());

API- fail app.js peaks lõppema umbes järgmiselt:

Suur töö. See kõik on tehtud !!

Okei! Oleme kõik valmis!

Käivitage nüüd mõlemad rakendused (klient ja API) kahes erinevas terminalis, kasutades käsku npm start .

Kui navigeerite brauseris // localhost: 3000 /, peaksite leidma midagi sellist:

Muidugi ei tee see projekt sellisena nagu see on, palju, kuid see on Full Stacki rakenduse algus. Selle koodi leiate kogu sellest hoidlast, mille olen juhendaja jaoks loonud.

Järgmisena töötan mõnede täiendavate õpetuste kallal, näiteks kuidas ühendada see MongoDB andmebaasiga ja isegi kuidas seda kõike Dockeri konteinerites käivitada.

Nagu mu hea sõber ütleb:

Ole tugev ja kood sisse !!!

... ja ära unusta olla täna vinge;)