Kako stvoriti React sučelje i Node / Express pozadinu i povezati ih

U ovom članku provest ću vas kroz postupak stvaranja jednostavne React aplikacije i povezivanja s jednostavnim Node / Express API-jem koji ćemo također stvoriti.

Neću ulaziti u detalje o radu s bilo kojom tehnologijom koju ću spomenuti u ovom vodiču, ali ostavit ću veze, ako želite saznati više.

Sav kod možete pronaći u ovom spremištu koje sam izradio za tutorial.

Cilj je ovdje dati vam praktični vodič o tome kako postaviti i povezati prednji klijent i pozadinski API .

Prije nego što zaprljamo ruke, provjerite imate li na računalu pokrenut Node.js.

Stvorite direktorij Glavnog projekta

U svom terminalu dođite do direktorija u koji želite spremiti svoj projekt. Sada stvorite novi direktorij za svoj projekt i uđite u njega:

mkdir my_awesome_project cd my_awesome_project

Stvorite aplikaciju React

Ovaj je postupak zaista jednostavan.

Koristit ću Facebook-ovu aplikaciju create-React-za ... pogađate, lako stvorim aplikaciju za reakciju nazvanu client :

npx create-react-app client cd client npm start

Da vidimo što sam učinio:

  1. Upotrijebio je npm-ov npx za stvaranje aplikacije za reakciju i imenovao je klijent.
  2. cd (promjena direktorija) u klijentski direktorij.
  3. Pokrenuo aplikaciju.

U svom pregledniku idite na // localhost: 3000 /.

Ako je sve u redu, vidjet ćete stranicu dobrodošlice za reakciju. Čestitamo! To znači da sada imate osnovni React program pokrenut na vašem lokalnom računalu. Lako zar ne?

Da biste zaustavili aplikaciju za reagiranje, samo pritisnite Ctrl + cterminal.

Izradite Express aplikaciju

Ok, ovo će biti jednako izravno kao i prethodni primjer. Ne zaboravite prijeći na gornju mapu vašeg projekta.

Koristit ću Express Application Generator za brzo stvaranje kostura aplikacije i imenovanje api:

npx express-generator api cd api npm install npm start

Da vidimo što sam učinio:

  1. Upotrijebio je npm npm za globalnu instalaciju express-generatora.
  2. Upotrijebio je express-generator za stvaranje ekspresne aplikacije i nazvao ga api.
  3. cd u API direktorij.
  4. Instalirali sve ovisnosti.
  5. Pokrenuo aplikaciju.

U svom pregledniku idite na // localhost: 3000 /.

Ako je sve u redu, vidjet ćete stranicu izričite dobrodošlice. Čestitamo! To znači da na vašem lokalnom računalu sada imate osnovnu Express aplikaciju. Lako zar ne?

Da biste zaustavili aplikaciju za reagiranje, samo pritisnite Ctrl + cterminal.

Konfiguriranje nove rute u Express API-ju

Ok, uprljajmo ruke. Vrijeme je da otvorite svoj omiljeni uređivač koda (koristim VS Code) i otvorite mapu vašeg projekta.

Ako ste aplikaciju za reakciju imenovali klijentom, a ekspresnu aplikaciju api , pronaći ćete dvije glavne mape: klijent i api.

  1. Unutar API direktorija idite na bin / www i promijenite broj porta na liniji 15 s 3000 na 9000. Kasnije ćemo istodobno pokretati obje aplikacije, pa će to izbjeći probleme. Rezultat bi trebao biti otprilike ovaj:

2. Na api / rutama stvorite datoteku testAPI.js i zalijepite ovaj kod:

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

3. U datoteku api / app.js umetnite novu rutu u redak 24:

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

4. Ok, kažete expressu da koristi ovu rutu, ali svejedno morate to zahtijevati. Učinimo to u retku 9:

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

Jedine promjene su u retku 9 i retku 25. To bi trebalo završiti otprilike ovako:

5. Svaka čast! Stvorili ste novu rutu.

Ako pokrenete svoju API aplikaciju (u vašem terminalu, idite do API direktorija i " npm start" ) i idite na // localhost: 9000 / testAPI u svom pregledniku, vidjet ćete poruku: API radi ispravno.

Povezivanje React klijenta na Express API

  1. Na vašem uređivaču koda, radimo u direktoriju klijenta . Otvoreno app.js datoteku koja se nalazi u my_awesome_project / klijenta / app.js .
  2. Ovdje ću koristiti API Fetchza preuzimanje podataka iz API-ja. Samo zalijepite ovaj kod nakon deklaracije klase i prije metode generiranja:
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. Unutar metode generiranja pronaći ćete oznaku < ; p>. Promijenimo ga tako da prikazuje s apiRes ponse :

;{this.state.apiResponse}

Na kraju, ova datoteka trebala bi izgledati otprilike ovako:

Znam!!! Ovo je bilo malo previše. Copy paste je vaš prijatelj, ali morate razumjeti što radite. Da vidimo što sam ovdje radio:

  1. U retke 6 do 9 umetnuli smo konstruktor koji inicijalizira zadano stanje.
  2. U retke 11 do 16 umetnuli smo metodu callAPI () koja će dohvatiti podatke iz API-ja i pohraniti odgovor na 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:

Nije uspjelo učitavanje // localhost: 9000 / testAPI: Na traženom resursu nema zaglavlja 'Access-Control-Allow-Origin'. Izvoru '// localhost: 3000' stoga nije dopušten pristup. Ako neprozirni odgovor služi vašim potrebama, postavite način zahtjeva na 'no-cors' da biste dohvatili resurs s onemogućenim CORS-om.

Ovo je jednostavno riješiti. Samo moramo dodati CORS u naš API kako bismo omogućili zahtjeve za međusobno podrijetlo. Učinimo upravo to. Ovdje biste trebali provjeriti kako biste saznali više o CORS-u.

  1. U vašem terminalu dođite do API direktorija i instalirajte CORS paket:
npm install --save cors

2. Na uređivač koda ide na API imenik i otvoriti my_awesome_project / api / app.js datoteku.

3. Na liniji 6 potrebni su CORS:

var cors = require("cors");

4. Sada na liniji 18 "recite" expressu da koristite CORS :

app.use(cors());

Datoteka API app.js trebala bi završiti otprilike ovako:

Dobar posao. Sve je gotovo !!

U redu! Svi smo spremni!

Sada pokrenite obje aplikacije (klijent i API), u dva različita terminala, pomoću naredbe npm start .

Ako dođete do // localhost: 3000 / u vašem pregledniku, trebali biste pronaći nešto poput ovoga:

Naravno, ovaj projekt kakav jest neće učiniti puno, ali je početak aplikacije Full Stack. Možete pronaći sav kôd u ovom spremištu koje sam stvorio za vodič.

Dalje, radit ću na nekim komplementarnim vodičima, poput toga kako to povezati s MongoDB bazom podataka, pa čak i kako to sve pokrenuti unutar Dockerovih spremnika.

Kao što kaže moj dobar prijatelj:

Budite jaki i kodirajte !!!

... i ne zaboravite danas biti super;)