Kuinka luodaan React-käyttöliittymä ja Node / Express-tausta ja yhdistetään ne

Tässä artikkelissa käyn läpi yksinkertaisen React-sovelluksen luomisen ja yhdistämisen yksinkertaiseen Node / Express-sovellusliittymään, jonka myös luomme.

En käsittele paljon yksityiskohtia siitä, miten voit työskennellä minkä tahansa tekniikan kanssa, jonka mainitsen tässä opetusohjelmassa, mutta jätän linkit, jos haluat oppia lisää.

Löydät kaikki koodit tästä arkistosta, jonka tein opetusohjelmaa varten.

Tavoitteena on antaa sinulle käytännön opas käyttöliittymän ja back-end-sovellusliittymän määrittämiseen ja yhdistämiseen .

Ennen kuin likaamme kätemme, varmista, että koneellasi on Node.js.

Luo pääprojektihakemisto

Siirry päätelaitteessasi hakemistoon, johon haluat tallentaa projektisi. Luo nyt projektillesi uusi hakemisto ja siirry siihen:

mkdir my_awesome_project cd my_awesome_project

Luo React-sovellus

Tämä prosessi on todella suoraviivainen.

Aion käyttää Facebookin create-reagoi-sovellusta… arvasit sen, luo helposti reagoiva sovellus nimeltä asiakas :

npx create-react-app client cd client npm start

Katsotaanpa, mitä olen tehnyt:

  1. Käytti npm: n NPX: tä reaktiosovelluksen luomiseen ja nimitti sen asiakkaaksi.
  2. cd (muuta hakemistoa) asiakashakemistoksi.
  3. Käynnisti sovelluksen.

Siirry selaimessasi osoitteeseen // localhost: 3000 /.

Jos kaikki on kunnossa, näet vastauksen tervetulosivun. Onnittelut! Tämä tarkoittaa, että sinulla on nyt React- perussovellus käynnissä paikallisella koneellasi. Helppo, eikö?

Voit lopettaa reagoivan sovelluksen painamalla Ctrl + cvain päätelaitteessa.

Luo Express-sovellus

Ok, tämä on yhtä suoraviivaista kuin edellinen esimerkki. Älä unohda siirtyä projektisi yläkansioon.

Käytän Express Application Generator -ohjelmaa luomaan nopeasti sovelluksen luuranko ja nimeämään sen api:

npx express-generator api cd api npm install npm start

Katsotaanpa, mitä olen tehnyt:

  1. Asetti pikageneraattorin maailmanlaajuisesti npm: n NPX: llä.
  2. Luo pikasovelluksen pikageneraattorilla ja nimitti sen apiksi.
  3. cd API-hakemistoon.
  4. Asennettu kaikki riippuvuudet.
  5. Käynnisti sovelluksen.

Siirry selaimessasi osoitteeseen // localhost: 3000 /.

Jos kaikki on kunnossa, näet nimenomaisen tervetulosivun. Onnittelut! Tämä tarkoittaa, että sinulla on nyt Express Express -sovellus käynnissä paikallisella koneellasi. Helppo, eikö?

Voit lopettaa reagoivan sovelluksen painamalla Ctrl + cvain päätelaitteessa.

Uuden reitin määrittäminen Express-sovellusliittymässä

Okei, likaistaan ​​kätemme. Aika avata suosikkikoodieditori (käytän VS-koodia) ja siirtyä projektikansioon.

Jos nimitit reagoivan sovelluksen asiakkaaksi ja pikasovelluksen apiksi , löydät kaksi pääkansiota: asiakas ja api.

  1. Sisällä API hakemistoon, siirry bin / www ja muuttaa portin numeron rivillä 15 3000 9000. Tulemme käynnissä että sovelluksia samanaikaisesti myöhemmin, joten näin vältetään kysymyksiä. Tuloksen pitäisi olla jotain tällaista:

2. Luo api / reitteillä testAPI.js- tiedosto ja liitä tämä koodi:

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

3. Lisää uusi reitti api / app.js- tiedostoon riville 24:

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

4. Ok, "käsket" pikalähetystä käyttämään tätä reittiä, mutta sinun on silti vaadittava sitä. Tehdään se rivillä 9:

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

Ainoat muutokset ovat rivillä 9 ja 25. Sen pitäisi päätyä jotain tällaista:

5. Onnittelut! Olet luonut uuden reitin.

Jos käynnistät API-sovelluksesi (siirry päätelaitteessasi API-hakemistoon ja “ npm start” ) ja siirry selaimessasi // localhost: 9000 / testAPI, näet viestin: API toimii oikein.

React Client -sovelluksen yhdistäminen Express-sovellusliittymään

  1. Työskentelemme koodieditorissa asiakashakemistossa . Avoin app.js tiedosto sijaitsee my_awesome_project / asiakas / app.js .
  2. Tässä käytän Fetch-sovellusliittymäähakea tietoja sovellusliittymästä. Liitä vain tämä koodi Class-ilmoituksen jälkeen ja ennen renderöintimenetelmää:
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. Renderöintimenetelmän sisällä on < ; p> -tunniste. Vaihdetaan se niin, että se saa apiRen miettimään :

;{this.state.apiResponse}

Lopussa tämän tiedoston pitäisi näyttää tältä:

Tiedän!!! Tämä oli vähän liikaa. Copy paste on ystäväsi, mutta sinun on ymmärrettävä, mitä olet tekemässä. Katsotaanpa, mitä tein täällä:

  1. Riveille 6-9 lisättiin konstruktori, joka alustaa oletustilan.
  2. Riville 11-16 lisättiin menetelmä callAPI () , joka noutaa tiedot sovellusliittymästä ja tallentaa vastauksen tähän.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 ei latautunut: Pyydetyssä resurssissa ei ole otsikkoa 'Access-Control-Allow-Origin'. Alkuperää '// localhost: 3000' ei siis sallita. Jos läpinäkymätön vastaus palvelee tarpeitasi, aseta pyynnön tilaksi "ei-cors", jotta resurssi noudetaan, kun CORS on poistettu käytöstä.

Tämä on helppo ratkaista. Meidän on vain lisättävä CORS sovellusliittymään, jotta ristipalvelupyynnöt voidaan sallia. Tehdään juuri niin. Tarkista täältä saadaksesi lisätietoja CORS: sta.

  1. Siirry päätelaitteessasi API-hakemistoon ja asenna CORS- paketti:
npm install --save cors

2. Siirry koodieditorissasi API-hakemistoon ja avaa my_awesome_project / api / app.js- tiedosto.

3. Linjalla 6 vaaditaan CORS:

var cors = require("cors");

4. Nyt rivillä 18 “käske” ilmaista käyttämään CORS :

app.use(cors());

API app.js- tiedoston pitäisi päätyä jotain tällaista:

Hienoa työtä. Kaikki on tehty!

Okei! Olemme kaikki valmiita!

Käynnistä nyt sovelluksesi (asiakas ja sovellusliittymä) kahdessa eri päätelaitteessa npm start -komennolla.

Jos selaat selaimessasi // localhost: 3000 /, sinun pitäisi löytää jotain tällaista:

Tämä projekti ei tietenkään tee paljon, mutta se on Full Stack -sovelluksen alku. Löydät kaikki koodit tästä arkistosta , jonka olen luonut opetusohjelmaa varten.

Seuraavaksi käsittelen joitain täydentäviä opetusohjelmia, kuten kuinka yhdistää tämä MongoDB-tietokantaan ja jopa kuinka ajaa se kaikki Docker-konttien sisällä.

Kuten hyvä ystäväni sanoo:

Ole vahva ja koodaa !!!

... ja älä unohda olla mahtava tänään;)