Cum să creați un frontend React și un backend Node / Express și să le conectați

Programare

În acest articol, vă voi prezenta procesul de creare a unei aplicații simple React și conectarea la o simplă API Node / Express pe care o vom crea și noi.

Nu voi intra în prea multe detalii despre cum să lucrez cu oricare dintre tehnologiile pe care le voi menționa în acest tutorial, dar voi lăsa link-uri, în cazul în care doriți să aflați mai multe.

Puteți găsi tot codul în acest depozit pe care l-am făcut pentru tutorial.

Obiectivul de aici este să vă oferim un ghid practic despre cum să configurați și să conectați clientul front-end și API-ul back-end .

Înainte de a ne murdări mâinile, asigurați-vă că aveți Node.js rulat pe mașina dvs.

Creați directorul proiectului principal

În terminalul dvs., navigați la un director în care doriți să salvați proiectul. Acum creați un director nou pentru proiectul dvs. și navigați în el:

mkdir my_awesome_project cd my_awesome_project

Creați o aplicație React

Acest proces este foarte simplu.

Voi folosi aplicația create-react-Facebook pentru ... ați ghicit, creați cu ușurință o aplicație react numită client :

npx create-react-app client cd client npm start

Să vedem ce am făcut:

  1. S-a folosit npx npm pentru a crea o aplicație react și a numit-o client.
  2. cd (schimbare director) în directorul client.
  3. A pornit aplicația.

În browserul dvs., navigați la // localhost: 3000 /.

Dacă totul este în regulă, veți vedea pagina de întâmpinare React. Felicitări! Asta înseamnă că acum aveți o aplicație de bază React care rulează pe mașina dvs. locală. Ușor nu?

Pentru a opri aplicația de reacție, trebuie doar să apăsați Ctrl + cîn terminal.

Creați o aplicație Express

Ok, acest lucru va fi la fel de simplu ca exemplul anterior. Nu uitați să navigați la dosarul principal al proiectului.

Voi folosi Generatorul de aplicații expres pentru a crea rapid un schelet de aplicație și a-l denumi api:

npx express-generator api cd api npm install npm start

Să vedem ce am făcut:

  1. S-a folosit npx npm pentru a instala expres-generator la nivel global.
  2. S-a folosit expres-generator pentru a crea o aplicație expresă și a denumit-o api.
  3. cd în directorul API.
  4. Instalate toate dependențele.
  5. A pornit aplicația.

În browserul dvs., navigați la // localhost: 3000 /.

Dacă totul este în regulă, veți vedea pagina de întâmpinare expresă. Felicitări! Asta înseamnă că acum aveți o aplicație Express de bază care rulează pe computerul dvs. local. Ușor nu?

Pentru a opri aplicația de reacție, trebuie doar să apăsați Ctrl + cîn terminal.

Configurarea unui nou traseu în API-ul Express

Ok, hai să ne murdărim mâinile. Este timpul să vă deschideți editorul de cod preferat (folosesc codul VS) și să navigați la folderul proiectului.

Dacă ați numit aplicația React ca client și aplicația expres ca API , veți găsi două foldere principale: client și API.

  1. În directorul API , accesați bin / www și schimbați numărul portului de pe linia 15 de la 3000 la 9000. Vom rula ambele aplicații în același timp mai târziu, astfel încât să faceți acest lucru va evita problemele. Rezultatul ar trebui să fie ceva de genul acesta:

2. Pe api / routes , creați un fișier testAPI.js și lipiți acest cod:

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

3. În fișierul api / app.js , introduceți un nou traseu pe linia 24:

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

4. Bine, „îi spuneți” expres să utilizați această rută, dar trebuie totuși să o solicitați. Să facem asta pe linia 9:

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

Singurele modificări sunt la rândul 9 și la rândul 25. Ar trebui să ajungă la așa ceva:

5. Felicitări! Ați creat un traseu nou.

Dacă porniți aplicația API (în terminalul dvs., navigați la directorul API și „ npm start” ) și accesați // localhost: 9000 / testAPI în browserul dvs., veți vedea mesajul: API funcționează corect.

Conectarea clientului React la API-ul Express

  1. Pe editorul de cod, să lucrăm în directorul client . Deschideți app.js fișierul situat în my_awesome_project / client / app.js .
  2. Aici voi folosi API-ul Fetchpentru a prelua date din API. Lipiți acest cod după declarația clasei și înainte de metoda de redare:
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. În interiorul metodei de redare, veți găsi o etichetă < ; p>. Să-l schimbăm astfel încât să redea s apiRes ponse:

;{this.state.apiResponse}

La final, acest fișier ar trebui să arate cam așa:

Stiu!!! A fost cam prea mult. Copy paste este prietenul tău, dar trebuie să înțelegi ce faci. Să vedem ce am făcut aici:

  1. Pe liniile 6-9, am inserat un constructor, care inițializează starea implicită.
  2. Pe liniile 11-16, am inserat metoda callAPI () care va prelua datele din API și va stoca răspunsul pe 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:

Nu s-a încărcat // localhost: 9000 / testAPI: Nu există antet „Access-Control-Allow-Origin” pe resursa solicitată. Prin urmare, originea „// localhost: 3000” nu are acces permis. Dacă un răspuns opac servește nevoilor dvs., setați modul cererii la „no-cors” pentru a prelua resursa cu CORS dezactivat.

Acest lucru este simplu de rezolvat. Trebuie doar să adăugăm CORS la API-ul nostru pentru a permite cereri de origine încrucișată. Să facem exact asta. Ar trebui să verificați aici pentru a afla mai multe despre CORS.

  1. În terminalul dvs. navigați la directorul API și instalați pachetul CORS :
npm install --save cors

2. În editorul de cod mergeți la directorul API și deschide my_awesome_project / api / app.js fișier.

3. Pe linia 6 necesită CORS:

var cors = require("cors");

4. Acum, pe linia 18 „spuneți” expres să folosiți CORS :

app.use(cors());

Fișierul API app.js ar trebui să ajungă la așa ceva:

Buna treaba. S-a făcut totul !!

O.K! Suntem cu toții pregătiți!

Acum porniți ambele aplicații (client și API), în două terminale diferite, folosind comanda npm start .

Dacă navigați la // localhost: 3000 / în browserul dvs. ar trebui să găsiți ceva de genul acesta:

Desigur, acest proiect, așa cum este, nu va face prea mult, dar este începutul unei aplicații Full Stack. Puteți găsi tot codul în acest depozit pe care l-am creat pentru tutorial.

În continuare, voi lucra la câteva tutoriale complementare, cum ar fi cum să conectez acest lucru la o bază de date MongoDB și chiar, cum să rulez totul în containerele Docker.

După cum spune un bun prieten de-al meu:

Fii puternic și codifică-te !!!

... și nu uitați să fiți minunat astăzi;)