Kako natjerati aplikaciju za stvaranje-reagiranje da radi s Node Back-end API-jem

Ovo je vrlo često pitanje među novijim React programerima i jedno pitanje koje sam imao kad sam počinjao s Reactom i Node.js. U ovom kratkom primjeru pokazat ću vam kako create-react-appraditi s Node.jsom i Express Back-endom.

stvoriti-reagirati-app

Izradite projekt pomoću create-react-app.

npx create-react-app example-create-react-app-express

Izradite /clientdirektorij u example-create-react-app-expressdirektoriju i premjestite sav reaktorski kôd izrađen create-react-appu novi klijentski direktorij.

cd example-create-react-app-expressmkdir client

Node Express poslužitelj

Stvorite package.jsondatoteku unutar korijenskog direktorija ( example-create-react-app-express) i kopirajte sljedeći sadržaj:

{ "name": "example-create-react-app-express", "version": "1.0.0", "scripts": { "client": "cd client && yarn start", "server": "nodemon server.js", "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\"" }, "dependencies": { "body-parser": "^1.18.3", "express": "^4.16.4" }, "devDependencies": { "concurrently": "^4.0.1" } }

Obavijest koju koristim concurrently za istodobno pokretanje aplikacije React i poslužitelja. Oznaka –kill-others-on-failće ubiti druge procese ako se izađe sa statusnim kodom koji nije nula.

Instalirajte nodemon globalno i ovisnosti poslužitelja:

npm i nodemon -g yarn

Stvorite server.jsdatoteku i kopirajte sljedeći sadržaj:

const express = require('express'); const bodyParser = require('body-parser'); const app = express(); const port = process.env.PORT || 5000; app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); app.get('/api/hello', (req, res) => { res.send({ express: 'Hello From Express' }); }); app.post('/api/world', (req, res) => { console.log(req.body); res.send( `I received your POST request. This is what you sent me: ${req.body.post}`, ); }); app.listen(port, () => console.log(`Listening on port ${port}`));

Ovo je jednostavan Express poslužitelj koji će se izvoditi na portu 5000 i imati dvije API rute: GET- /api/hello, i POST- /api/world.

U ovom trenutku možete pokrenuti Express poslužitelj sa sljedećom naredbom (još uvijek unutar korijenskog direktorija):

node server.js

Sada se pomaknite do //localhost:5000/api/helloi dobit ćete sljedeće:

Testirat ćemo POSTrutu nakon što napravimo aplikaciju React.

Aplikacija React

Sada se prebacite u clientdirektorij u kojem živi naša aplikacija React.

Dodajte sljedeći redak u package.jsondatoteku koju je stvorio create-react-app.

"proxy": "//localhost:5000/"

Ključ upotrebe Express back-end poslužitelja s projektom stvorenim s create-react-appje uporaba proxyja. To govori poslužitelju za razvoj web-paketa da posreduje naše API zahtjeve našem API poslužitelju, s obzirom da je naš Express poslužitelj pokrenut localhost:5000.

Sada izmijenite ./client/src/App.jsda biste pozvali naš Express API Back-end, promjene su podebljane.

import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { state = { response: '', post: '', responseToPost: '', }; componentDidMount() { this.callApi() .then(res => this.setState({ response: res.express })) .catch(err => console.log(err)); } callApi = async () => { const response = await fetch('/api/hello'); const body = await response.json(); if (response.status !== 200) throw Error(body.message); return body; }; handleSubmit = async e => { e.preventDefault(); const response = await fetch('/api/world', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ post: this.state.post }), }); const body = await response.text(); this.setState({ responseToPost: body }); }; render() { return ( 

Edit src/App.js and save to reload.

Learn React

{this.state.response}

Post to Server:

this.setState({ post: e.target.value })} /> Submit

{this.state.responseToPost}

); } } export default App;

Stvaramo callApimetodu za interakciju s našom GETExpress API rutom, zatim pozivamo ovu metodu componentDidMounti konačno postavljamo stanje na API odgovor, koji će biti Hello From Express .

Primijetite da nismo koristili potpuno kvalificirani URL //localhost:5000/api/helloza pozivanje našeg API-ja, iako se naša aplikacija React izvodi na drugom priključku (3000). To je zbogproxyredak koji smo package.jsonranije dodali u datoteku.

Imamo obrazac s jednim ulazom. Kada se pošalju pozivi handleSubmit, koji zauzvrat pozivaju našu POSTExpress API rutu, zatim spremaju odgovor u stanje i prikazuju poruku korisniku: Primio sam vaš POST zahtjev. Ovo ste mi poslali: [poruka s unosa] .

Sada otvorite ./client/src/App.cssi izmijenite .App-headerklasu na sljedeći način (promjene podebljane)

.App-header { ... min-height: 50%; ... padding-bottom: 10px; }

Pokretanje aplikacije

Ako i dalje imate poslužitelj, nastavite i zaustavite ga pritiskom na Ctrl + C na vašem terminalu.

Iz korijenskog direktorija projekta pokrenite sljedeće:

yarn dev

Ovo će istodobno pokrenuti aplikaciju React i pokrenuti poslužitelj.

Sada se pomaknite do //localhost:3000i otvorit ćete aplikaciju React koja prikazuje poruku koja dolazi s naše GETbrze rute. Lijepo ?!

Sada unesite nešto u polje za unos i pošaljite obrazac, vidjet ćete odgovor s POSTExpress rute prikazan odmah ispod polja za unos.

Napokon pogledajte svoj terminal, vidjet ćete poruku koju smo poslali od klijenta, jer zovemo console.logtijelo zahtjeva u POSTExpress ruti.

Uvođenje proizvodnje u Heroku

Otvorite server.jsi zamijenite sljedećim sadržajem:

const express = require('express'); const bodyParser = require('body-parser'); const path = require('path'); const app = express(); const port = process.env.PORT || 5000; app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); // API calls app.get('/api/hello', (req, res) => { res.send({ express: 'Hello From Express' }); }); app.post('/api/world', (req, res) => { console.log(req.body); res.send( `I received your POST request. This is what you sent me: ${req.body.post}`, ); }); if (process.env.NODE_ENV === 'production') { // Serve any static files app.use(express.static(path.join(__dirname, 'client/build'))); // Handle React routing, return all requests to React app app.get('*', function(req, res) { res.sendFile(path.join(__dirname, 'client/build', 'index.html')); }); } app.listen(port, () => console.log(`Listening on port ${port}`));

Otvorite ./package.jsoni dodajte sljedeće scriptsunosu

"start": "node server.js", "heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build"

Heroku će startprema zadanim postavkama pokrenuti skriptu i to će poslužiti našoj aplikaciji. Zatim želimo uputiti Herokua da izradi našu klijentsku aplikaciju, i to sa heroku-postbuildskriptom.

Sada idite na Heroku i prijavite se (ili otvorite račun ako ga nemate).

Izradite novu aplikaciju i dajte joj ime

Kliknite karticu Rasporedi i slijedite upute za postavljanje (za koje mislim da ih prilično objašnjavaju, nema svrhe ovdje ih replicirati?)

I to je to, svoju aplikaciju možete otvoriti klikom na gumb Otvori aplikaciju u gornjem desnom kutu na Heroku nadzornoj ploči za svoju aplikaciju.

Posjetite postavljenu aplikaciju za ovaj vodič: //cra-express.herokuapp.com/

Ostale mogućnosti implementacije

Ovdje pišem o drugim mogućnostima postavljanja:

  • Netlify
  • Sada
  • Heoku (detaljnije objašnjenje)

Struktura projekta

Ovo će biti konačna struktura projekta.

Preuzmite cjeloviti kod na spremište GitHub.

Hvala vam što ste pročitali i nadam se da ste uživali. Sva pitanja, prijedloge javite mi u komentarima ispod!

Možete me pratiti na Twitteru, GitHubu, Mediumu, LinkedInu ili svima njima.

This post was originally posted on my personal blog website.

Update 8/25/19: I have been building a prayer web app called "My Quiet Time - A Prayer Journal". If you would like to stay in the loop please sign up through the following link: //b.link/mqt  

The app will be released before the end of the year, I have big plans for this app. To see some mockup screenshots follow the following link: //pc.cd/Lpy7

My DMs on Twitter are open if you have any questions regarding the app ?