Sådan oprettes en React-frontend og en Node / Express-backend og forbind dem

I denne artikel vil jeg lede dig gennem processen med at oprette en simpel React-app og forbinde den til en simpel Node / Express API, som vi også opretter.

Jeg vil ikke gå meget i detaljer om, hvordan man arbejder med nogen af ​​de teknologier, jeg vil nævne i denne vejledning, men jeg vil forlade links, hvis du vil lære mere.

Du kan finde al koden i dette lager, jeg lavede til vejledningen.

Målet her er at give dig en praktisk guide til, hvordan du konfigurerer og forbinder frontend-klienten og back-end API .

Før vi får vores hænder beskidte, skal du sørge for, at Node.js kører på din maskine.

Opret hovedprojektmappen

I din terminal skal du navigere til et bibliotek, hvor du gerne vil gemme dit projekt. Opret nu en ny mappe til dit projekt, og naviger ind i det:

mkdir my_awesome_project cd my_awesome_project

Opret en React-app

Denne proces er virkelig ligetil.

Jeg bruger Facebooks create-react-app til ... du gættede det, lav let en reageringsapp med navnet client :

npx create-react-app client cd client npm start

Lad os se, hvad jeg har gjort:

  1. Brugte npm's npx til at oprette en reageringsapp og navngav den klient.
  2. cd (skift mappe) til klientmappen.
  3. Startede appen.

Gå til // localhost: 3000 / i din browser.

Hvis alt er i orden, vil du se reaktionsvelkomstsiden. Tillykke! Det betyder, at du nu har en grundlæggende React- applikation, der kører på din lokale maskine. Let, ikke?

For at stoppe din reageringsapp skal du bare trykke Ctrl + cpå din terminal.

Opret en Express-app

Ok, dette vil være lige så ligetil som det foregående eksempel. Glem ikke at navigere til din projekts øverste mappe.

Jeg bruger Express Application Generator til hurtigt at oprette et applikationsskelet og navngive det api:

npx express-generator api cd api npm install npm start

Lad os se, hvad jeg har gjort:

  1. Brugt npm's npx til at installere ekspressgenerator globalt.
  2. Brugte ekspressgenerator til at oprette en ekspressapp og kaldte den api.
  3. cd i API-biblioteket.
  4. Installeret alle afhængigheder.
  5. Startede appen.

Gå til // localhost: 3000 / i din browser.

Hvis alt er i orden, vil du se den udtrykkelige velkomstside. Tillykke! Det betyder, at du nu har en grundlæggende Express- applikation, der kører på din lokale maskine. Let, ikke?

For at stoppe din reageringsapp skal du bare trykke Ctrl + cpå din terminal.

Konfiguration af en ny rute i Express API

Ok, lad os få vores hænder beskidte. Tid til at åbne din foretrukne kodeditor (jeg bruger VS-kode) og navigere til din projektmappe.

Hvis du navngav reageringsappen som klient og ekspressappen som api , finder du to hovedmapper: klient og api.

  1. Inde i API- biblioteket skal du gå til bin / www og ændre portnummeret på linje 15 fra 3000 til 9000. Vi kører begge apps på samme tid senere, så dette undgår problemer ved at gøre dette. Resultatet skal være sådan:

2. På api / ruter skal du oprette en testAPI.js- fil og indsætte denne kode:

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

3. Indsæt en ny rute på api / app.js- filen på linje 24:

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

4. Ok, du ”fortæller” udtrykkeligt at bruge denne rute, men du skal stadig kræve den. Lad os gøre det på linje 9:

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

De eneste ændringer er i linje 9 og linje 25. Det skulle ende med noget som dette:

5. Tillykke! Du har oprettet en ny rute.

Hvis du starter din API-app (i din terminal, naviger til API-biblioteket og " npm start" ) og går til // localhost: 9000 / testAPI i din browser, vil du se meddelelsen: API fungerer korrekt.

Tilslutning af React Client til Express API

  1. Lad os arbejde i klientmappen på din kodeeditor . Åbne app.js fil i my_awesome_project / klient / app.js .
  2. Her bruger jeg 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:

Kunne ikke indlæse // localhost: 9000 / testAPI: Ingen 'Access-Control-Allow-Origin' -overskrift er til stede på den ønskede ressource. Oprindelse '// localhost: 3000' er derfor ikke tilladt adgang. Hvis et uigennemsigtigt svar tjener dine behov, skal du indstille anmodningens tilstand til 'no-cors' for at hente ressourcen med CORS deaktiveret.

Dette er let at løse. Vi er bare nødt til at tilføje CORS til vores API for at tillade krydsoprindelsesanmodninger. Lad os gøre netop det. Du kan tjekke her for at finde ud af mere om CORS.

  1. Naviger til API-biblioteket i din terminal og installer CORS- pakken:
npm install --save cors

2. På din kode editor gå til API mappe og åbn my_awesome_project / api / app.js fil.

3. På linje 6 kræves CORS:

var cors = require("cors");

4. Nu på linje 18 “fortæl” express at bruge CORS :

app.use(cors());

API app.js- filen skal ende med noget som dette:

Flot arbejde. Det er gjort !!

Okay! Vi er klar!

Start nu begge dine apps (klient og API) i to forskellige terminaler ved hjælp af kommandoen npm start .

Hvis du navigerer til // localhost: 3000 / i din browser, skal du finde noget som dette:

Selvfølgelig vil dette projekt, som det er, ikke gøre meget, men er starten på en Full Stack-applikation. Du kan finde al den kode i dette arkiv, som jeg har oprettet til vejledningen.

Dernæst vil jeg arbejde på nogle supplerende tutorials, som hvordan man forbinder dette til en MongoDB-database og endda, hvordan man kører det hele inde i Docker-containere.

Som en god ven af ​​mig siger:

Vær stærk og kod på !!!

... og glem ikke at være fantastisk i dag;)