Как да направя приложението за създаване-реакция да работи с API на Node Back-end

Това е много често срещан въпрос сред по-новите разработчици на React и един въпрос, който имах, когато започвах с React и Node.js. В този кратък пример ще ви покажа как да направите create-react-appработа с Node.js и Express Back-end.

създайте-реагирайте-приложение

Създайте проект с помощта на create-react-app.

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

Създайте /clientдиректория в example-create-react-app-expressдиректорията и преместете целия реален код на React, създаден от create-react-appтази нова клиентска директория.

cd example-create-react-app-expressmkdir client

Сървърът Node Express

Създайте package.jsonфайл в основната директория ( example-create-react-app-express) и копирайте следното съдържание:

{ "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" } }

Забележете, че използвам concurrently за стартиране на приложението React и сървъра едновременно. На –kill-others-on-failзнамето ще убие други процеси, ако един изходи с нулев код без статут.

Инсталирайте nodemon глобално и зависимостите на сървъра:

npm i nodemon -g yarn

Създайте server.jsфайл и копирайте следното съдържание:

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}`));

Това е прост Express сървър, който ще работи на порт 5000 и ще има два API маршрута: GET- /api/hello, и POST- /api/world.

На този етап можете да стартирате Express сървъра със следната команда (все още в основната директория):

node server.js

Сега отидете до //localhost:5000/api/helloи ще получите следното:

Ще тестваме POSTмаршрута, след като изградим приложението React.

Приложението React

Сега преминете към clientдиректорията, в която живее нашето приложение React.

Добавете следния ред към package.jsonфайла, създаден от create-react-app.

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

Ключът към използването на Express back-end сървър с проект, създаден с, create-react-appе да се използва прокси. Това казва на сървъра за разработка на Web-пакет да проксира нашите API заявки към нашия API сървър, като се има предвид, че нашият Express сървър работи localhost:5000.

Сега модифицирайте, за ./client/src/App.jsда извикате нашия Express API Back-end, промените са получер.

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;

Ние създаваме callApiметод за взаимодействие с нашия GETExpress API маршрут, след това извикваме този метод componentDidMountи накрая задаваме състоянието на API отговор, който ще бъде Hello From Express .

Забележете, че не използвахме напълно квалифициран URL адрес //localhost:5000/api/helloза извикване на нашия API, въпреки че приложението ни React работи на различен порт (3000). Това се дължи наproxyред, който добавихме към package.jsonфайла по-рано.

Имаме формуляр с един вход. При изпратени повиквания handleSubmit, които от своя страна POSTизвикват маршрута ни за Express API, след това записват отговора в състояние и показват съобщение на потребителя: Получих вашата POST заявка. Това ми изпратихте: [съобщение от входа] .

Сега отворете ./client/src/App.cssи модифицирайте .App-headerкласа, както следва (промени в получер шрифт)

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

Стартиране на приложението

Ако все още сървърът работи, продължете и го спрете, като натиснете Ctrl + C във вашия терминал.

От основната директория на проекта изпълнете следното:

yarn dev

Това ще стартира приложението React и ще стартира сървъра едновременно.

Сега отидете до //localhost:3000и ще натиснете приложението React, показващо съобщението, идващо от нашия GETекспресен маршрут. Хубаво ?!

Сега въведете нещо в полето за въвеждане и изпратете формуляра, ще видите отговора от POSTExpress маршрута, показан точно под полето за въвеждане.

Накрая погледнете вашия терминал, ще видите съобщението, което изпратихме от клиента, защото ние се обаждаме console.logна тялото на заявката в POSTекспресния маршрут.

Внедряване на производството в Heroku

Отворете server.jsи заменете със следното съдържание:

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}`));

Отворете ./package.jsonи добавете следното към scriptsзаписа

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

Heroku ще стартира startскрипта по подразбиране и това ще обслужва нашето приложение. След това искаме да инструктираме Heroku да изгради нашето клиентско приложение, правим това със heroku-postbuildскрипт.

Сега отидете на Heroku и влезте (или отворете акаунт, ако нямате такъв).

Създайте ново приложение и му дайте име

Click on the Deploy tab and follow the deploy instructions (which I think they are pretty self-explanatory, no point on replicating them here ?)

And that is it, you can open your app by clicking on the Open app button at the top right corner within the Heroku dashboard for your app.

Visit the deployed app for this tutorial: //cra-express.herokuapp.com/

Other Deployment Options

I write about other deployments options here:

  • Netlify
  • Now
  • Heoku (more in-depth explanation)

Project Structure

This will be the final project structure.

Get the full code on the GitHub repository.

Thank you for reading and I hope you enjoyed it. Any question, suggestions let me know in the comments below!

You can follow me on Twitter, GitHub, Medium, LinkedIn or all of them.

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 ?