Ez egy nagyon gyakori kérdés az újabb React fejlesztők körében, és egy kérdésem volt, amikor a React és a Node.js programmal kezdtem. Ebben a rövid példában megmutatom, hogyan lehet create-react-appműködni a Node.js és az Express Back-end programmal.
create-reagál-app
Hozzon létre egy projektet a create-react-app.
npx create-react-app example-create-react-app-expressHozzon létre egy /clientkönyvtárat a könyvtár alatt, example-create-react-app-expressés helyezze át az összes által létrehozott React kazánlapkódot create-react-appaz új ügyfélkönyvtárba.
cd example-create-react-app-expressmkdir clientA Node Express kiszolgáló
Hozzon létre egy package.jsonfájlt a gyökérkönyvtárban ( example-create-react-app-express), és másolja a következő tartalmat:
{ "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" } }Megjegyzés: concurrently A React alkalmazást és a Szervert egyszerre futtatom. A –kill-others-on-failzászló megöl más folyamatokat, ha az egyik nem nulla állapotkóddal lép ki.
Telepítés nodemon globálisan és a kiszolgáló függőségei:
npm i nodemon -g yarnHozzon létre egy server.jsfájlt, és másolja a következő tartalmat:
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}`));Ez egy egyszerű Express kiszolgáló, amely az 5000-es porton fog futni, és két API-útvonallal rendelkezik: GET- /api/hello, és POST- /api/world.
Ezen a ponton futtathatja az Express kiszolgálót a következő paranccsal (még mindig a gyökérkönyvtárban):
node server.jsMost navigáljon ide //localhost:5000/api/hello, és a következőket fogja kapni:
POSTMiután elkészítjük a React alkalmazást, tesztelni fogjuk az útvonalat.
A React App
Most váltson át arra a clientkönyvtárra, ahol a React alkalmazásunk él.
Adja hozzá a következő sort az package.jsonáltal létrehozott fájlhoz create-react-app.
"proxy": "//localhost:5000/"Az Express háttér-kiszolgáló és a létrehozott projekt használatának kulcsa create-react-appa proxy használata. Ez arra utasítja a Web-pack fejlesztő kiszolgálót, hogy proxyolja meg API-kéréseinket az API-kiszolgálónkhoz, tekintettel arra, hogy az Express-kiszolgálónk fut localhost:5000.
Most módosítsa úgy, ./client/src/App.jshogy hívja az Express API Back-endünket, a változtatások félkövéren vannak feltüntetve.
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;Létrehozunk egy callApimódszert, amellyel interakcióba léphetünk az GETExpress API útvonalunkkal, majd meghívjuk ezt a módszert, componentDidMountés végül beállítjuk az állapotot az API válaszra, amely a Hello From Express lesz .
Vegye figyelembe, hogy nem használtunk teljesen minősített URL- //localhost:5000/api/hellot az API meghívásához, annak ellenére, hogy a React alkalmazásunk egy másik porton fut (3000). Ennek oka azproxysor, amelyet package.jsonkorábban hozzáadtunk a fájlhoz.
Van egy űrlapunk egyetlen bemenettel. Amikor elküldi a hívásokat handleSubmit, amelyek viszont az POSTExpress API útvonalunkat hívják meg, akkor az állapot válaszát elmenti, és üzenetet jelenít meg a felhasználónak: Megkaptam a POST kérését. Ezt küldte nekem: [üzenet a bemenetről] .
Most nyissa meg ./client/src/App.cssés módosítsa az .App-headerosztályt az alábbiak szerint (félkövér betűkkel)
.App-header { ... min-height: 50%; ... padding-bottom: 10px; }Az alkalmazás futtatása
Ha még mindig fut a szerver, menjen előre, és állítsa le a Ctrl + C megnyomásával a terminálon.
A projekt gyökérkönyvtárából futtassa a következőket:
yarn devEz egyúttal elindítja a React alkalmazást és futtatja a szervert.
Most keresse meg a gombot, //localhost:3000és megnyomja a React alkalmazást, megjelenítve az GETExpress útvonalunkról érkező üzenetet . Szép ?!
Írjon be valamit a beviteli mezőbe, és küldje el az űrlapot, és az POSTExpress útvonal válasza megjelenik közvetlenül a beviteli mező alatt.
Végül vessen egy pillantást a termináljára, és látni fogja az üzenetet, amelyet az ügyféltől küldtünk, mert console.logaz POSTExpress útvonalon a kérelem szervet hívjuk meg .
Gyártási telepítés Herokuba
Nyissa meg server.jsés cserélje le a következő tartalommal:
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}`));Nyissa meg, ./package.jsonés adja hozzá a következőket a scriptsbejegyzéshez
"start": "node server.js", "heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build"Heroku startalapértelmezés szerint futtatja a szkriptet, és ez szolgálja az alkalmazásunkat. Ezután meg akarjuk utasítani Herokut, hogy készítse el kliens alkalmazásunkat, ezt heroku-postbuildszkript segítségével tesszük .
Most menjen át Heroku-hoz, és jelentkezzen be (vagy nyisson meg egy fiókot, ha még nincs ilyen).
Hozzon létre egy új alkalmazást, és adjon neki egy nevet
Kattintson a Telepítés fülre, és kövesse a telepítési utasításokat (ami szerintem eléggé magától értetődő, nincs értelme itt lemásolni őket?)
Ez az, megnyithatja az alkalmazást az alkalmazás megnyitásához kattintson a jobb felső sarokban található Alkalmazás megnyitása gombra az alkalmazás Heroku műszerfalán belül.
Látogassa meg az oktatóanyag telepített alkalmazását: //cra-express.herokuapp.com/
Egyéb telepítési lehetőségek
Itt írok más telepítési lehetőségekről:
- Netlify
- Most
- Heoku (részletesebb magyarázat)
Projekt felépítése
Ez lesz a végleges projektszerkezet.
Szerezd meg a teljes kódot a GitHub tárházban.
Köszönöm, hogy elolvastad, és remélem, hogy élvezted. Ha bármilyen kérdése, javaslata van, tudassa velem az alábbi megjegyzéseket!
Kövess engem a Twitteren, a GitHubon, a Mediumon, a LinkedIn-en vagy mindegyiken.
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 ?