de João Henrique

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

Cum sa creati un frontend React si un backend Node
„Două lumini LED pătrate albastre” de israel palacio pe Unsplash

Î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 Am făcut pentru tutorial.

Obiectivul aici este de a vă oferi un ghid practic cu privire la modul de configurare și conectare a client front-end si API back-end.

Înainte de a ne murdări mâinile, asigurați-vă că aveți Node.js care rulează 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

Creeaza o Reacţiona Aplicație

Acest proces este foarte simplu.

Voi folosi Facebook-urile creați-reacționați-aplicație pentru a … ați ghicit-o, creați cu ușurință o aplicație de reacție numită client:

npx create-react-app client
cd client
npm start

Să vedem ce am făcut:

  1. NPM-uri folosite npx 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 http: // localhost: 3000 /.

Dacă totul este în regulă, veți vedea pagina de întâmpinare React. Felicitări! Asta înseamnă că acum aveți o bază Reacţiona aplicație 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 terminalul tău.

Creaza un Expres Aplicație

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 Generator 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 http: // localhost: 3000 /.

Dacă totul este în regulă, veți vedea pagina de întâmpinare expresă. Felicitări! Asta înseamnă că acum aveți o bază Expres aplicație 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 terminalul tău.

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 (Eu folosesc Cod VS) și navigați la folderul proiectului.

Dacă ați numit reacționează aplicația ca client si exprimați aplicația ca API, veți găsi două foldere principale: client și api.

  1. În interiorul API director, accesați coș / 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 acest lucru va evita problemele. Rezultatul ar trebui să fie ceva de genul acesta:
Cum sa creati un frontend React si un backend Node
my_awesome_project / api / bin / www

2. Pornit api / rute, creeaza o testAPI.js fișier ș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. Pe api / app.js fișier, introduceți un traseu nou pe linia 24:

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

4. Bine, „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 rândul 25. Ar trebui să ajungă la așa ceva:

1611707706 467 Cum sa creati un frontend React si un backend Node
my_awesome_project / api / app.js

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

Dacă porniți aplicația API (în terminal, navigați la directorul API și „npm start ”), și du-te la http: // 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 client director. Deschis app.js fișier situat în my_awesome_project / client / app.js.
  2. Aici voi folosi Fetch API pentru 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("http://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 un <; p> etichetă. Să o schimbăm astfel încât să redeas apiReleponse:

<p className="App-intro">;{this.state.apiResponse}</p>

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

1611707706 283 Cum sa creati un frontend React si un backend Node

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. Pe liniile 18-20, am inserat o metodă a ciclului de viață a reacției numită componentDidMount (), care va executa callAPI () metoda după montarea componentei.
  4. În ultimul rând, pe linia 29, am folosit <; p> tag pentru a afișa un paragraf pe pagina noastră de client, cu textul pe care l-am preluat din API.

Ce naiba!! CORS ?

Oh da dragă! Aproape am terminat. Dar dacă pornim ambele aplicații (client și API) și navigăm la http: // localhost: 3000 /, tot nu veți găsi rezultatul așteptat afișat pe pagină. Dacă deschideți instrumente de dezvoltare Chrome, veți afla de ce. În consolă, veți vedea această eroare:

Incarcarea a esuat http: // localhost: 9000 / testAPI: Nu există antet „Access-Control-Allow-Origin” pe resursa solicitată. Origine ‘http: // localhost: 3000 ‘ prin urmare nu este permis accesul. 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. Tu ar trebui verifica aici pentru a afla mai multe despre CORS.

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

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

3. În linia 6 necesită CORS:

var cors = require("cors");

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

app.use(cors());

API-ul app.js fișierul ar trebui să ajungă la așa ceva:

1611707706 200 Cum sa creati un frontend React si un backend Node
my_awesome_project / api / app.js

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 npm start comanda.

Dacă navigați la http: // localhost: 3000 / în browserul dvs. ar trebui să găsiți așa ceva:

1611707706 684 Cum sa creati un frontend React si un backend Node

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 le-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;)