كيفية جعل تطبيق create-react-app يعمل مع واجهة برمجة تطبيقات 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 وله مساران لواجهة برمجة التطبيقات: 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باستخدام وكيل. هذا يخبر خادم تطوير حزمة الويب بتوكيل طلبات API الخاصة بنا إلى خادم API الخاص بنا ، بالنظر إلى أن خادمنا السريع يعمل 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طريقة للتفاعل مع GETمسار Express API الخاص بنا ، ثم نسمي هذه الطريقة في componentDidMountالنهاية ونضبط الحالة على استجابة API ، والتي ستكون Hello From Express .

لاحظ أننا لم نستخدم عنوان URL مؤهلًا بالكامل //localhost:5000/api/helloللاتصال بواجهة برمجة التطبيقات لدينا ، على الرغم من أن تطبيق 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السريع. لطيف ؟!

الآن ، اكتب شيئًا ما في حقل الإدخال وأرسل النموذج ، سترى الرد من POSTالمسار السريع المعروض أسفل حقل الإدخال مباشرة.

أخيرًا ألق نظرة على جهازك ، سترى الرسالة التي أرسلناها من العميل ، وذلك لأننا ندعو 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.

تم نشر هذا المنشور في الأصل على موقع مدونتي الشخصية.

تحديث 8/25/19: لقد كنت أقوم بإنشاء تطبيق ويب للصلاة يسمى " My Quiet Time - A Prayer Journal ". إذا كنت ترغب في البقاء في الحلقة ، يرجى التسجيل من خلال الرابط التالي: //b.link/mqt  

سيصدر التطبيق قبل نهاية العام ، لدي خطط كبيرة لهذا التطبيق. لمشاهدة بعض لقطات الشاشة بالحجم الطبيعي ، اتبع الرابط التالي: //pc.cd/Lpy7

الرسائل المباشرة الخاصة بي على Twitter مفتوحة إذا كان لديك أي أسئلة بخصوص التطبيق؟