كيفية إنشاء تطبيق React مع واجهة خلفية Node: الدليل العملي الكامل

يُعد الجمع بين React في الواجهة الأمامية وNode.js في الواجهة الخلفية خياراً قوياً لبناء تطبيقات ويب حديثة وسريعة التطوير. في هذا الدليل، ستتعرّف على طريقة إنشاء مشروع Full-Stack من الصفر باستخدام React وExpress، ثم ربط الطرفين معاً، وأخيراً نشر التطبيق على الويب.

الأدوات المطلوبة قبل البدء

قبل إنشاء المشروع، تأكد من تجهيز البيئة البرمجية التالية:

• تثبيت Node.js وNPM على جهازك، ويمكن تنزيلهما من موقع nodejs.org.
• استخدام محرر أكواد مناسب مثل VSCode، وهو خيار ممتاز للعمل على مشاريع JavaScript.
• تثبيت Git، لأنه مطلوب عند نشر المشروع باستخدام Heroku.
• امتلاك حساب على منصة Heroku لإتمام عملية النشر.

الخطوة الأولى: إنشاء الواجهة الخلفية باستخدام Node وExpress

ابدأ بإنشاء مجلد رئيسي للمشروع، وليكن اسمه react-node-app. بعد ذلك افتح هذا المجلد داخل محرر الأكواد.

لتهيئة مشروع Node، نفّذ الأمر التالي داخل الطرفية:

npm init -y

سيؤدي هذا إلى إنشاء ملف package.json، وهو الملف المسؤول عن إدارة الاعتماديات والأوامر الخاصة بالمشروع.

بعد ذلك، أنشئ مجلداً باسم server ليحتوي على كود الخادم، ثم أضف داخله ملفاً باسم index.js.

استخدم الكود التالي لإنشاء خادم بسيط يعمل عبر Express على المنفذ 3001 ما لم يتم توفير قيمة للمتغير PORT:

// server/index.js
const express = require("express");
const PORT = process.env.PORT || 3001;
const app = express();

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

الآن ثبّت مكتبة Express كاعتمادية داخل المشروع:

npm i express

ثم أضف أمر التشغيل داخل ملف package.json:

{
  "scripts": {
    "start": "node server/index.js"
  }
}

بعد ذلك شغّل الخادم عبر الأمر التالي:

npm start

إذا تم الإعداد بشكل صحيح، فستظهر لك رسالة تفيد بأن الخادم يعمل على المنفذ 3001.

الخطوة الثانية: إنشاء نقطة API داخل الخادم

الهدف من استخدام Node وExpress هنا هو توفير API يمكن لتطبيق React التواصل معه لجلب البيانات أو تعديلها أو تنفيذ عمليات منطقية على الخادم.

في هذا المثال، سننشئ مساراً بسيطاً باسم /api يعيد رسالة بصيغة JSON:

// server/index.js
const express = require("express");
const PORT = process.env.PORT || 3001;
const app = express();

app.get("/api", (req, res) => {
  res.json({ message: "Hello from server!" });
});

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

من المهم وضع دالة app.get() قبل app.listen() للحفاظ على ترتيب واضح ومنطقي في ملف الخادم.

بعد تعديل الكود، أوقف الخادم ثم أعد تشغيله باستخدام npm start. بعد ذلك افتح الرابط http://localhost:3001/api داخل المتصفح، وستجد الاستجابة على هيئة JSON.

الخطوة الثالثة: إنشاء الواجهة الأمامية باستخدام React

بعد تجهيز الواجهة الخلفية، انتقل إلى إنشاء الواجهة الأمامية. افتح نافذة طرفية جديدة ونفّذ الأمر التالي لإنشاء مشروع React باسم client:

npx create-react-app client

عند انتهاء العملية، سيكون لديك تطبيق React جاهز مع جميع الاعتماديات الأساسية.

الخطوة المهمة التالية هي إضافة الخاصية proxy داخل ملف client/package.json، حتى تتمكن الواجهة الأمامية من إرسال الطلبات إلى الخادم دون الحاجة إلى كتابة http://localhost:3001 في كل مرة:

{
  "proxy": "http://localhost:3001"
}

بعدها ادخل إلى مجلد client وشغّل التطبيق:

cd client
npm start

سيعمل تطبيق React عادة على الرابط http://localhost:3000.

الخطوة الرابعة: إرسال طلبات HTTP من React إلى Node

الآن بعد أن أصبح لدينا تطبيق React يعمل بشكل سليم، يمكننا استخدامه للتواصل مع الواجهة الخلفية. سنقوم بجلب البيانات من المسار /api الذي أنشأناه سابقاً.

افتح الملف App.js داخل المجلد src واستبدل محتواه بالكود التالي:

// client/src/App.js
import React from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetch("/api")
      .then((res) => res.json())
      .then((data) => setData(data.message));
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{!data ? "Loading..." : data}</p>
      </header>
    </div>
  );
}

export default App;

يعتمد هذا المثال على الخطوات التالية:

• استخدام React.useState() لتخزين الرسالة القادمة من الخادم.
• استخدام React.useEffect() لتنفيذ الطلب عند تحميل المكون.
• إرسال طلب GET عبر fetch() إلى المسار /api.
• تحويل الاستجابة إلى JSON ثم عرض الرسالة داخل الصفحة.

إذا لم تصل البيانات بعد، سيعرض التطبيق النص Loading... إلى أن يتم تحميل الرسالة.

الخطوة الخامسة: نشر تطبيق React وNode على Heroku

بعد اكتمال الربط بين الواجهة الأمامية والخلفية، نصل إلى مرحلة النشر على الإنترنت باستخدام Heroku.

إزالة مستودع Git من مجلد client

عند إنشاء مشروع React بواسطة create-react-app، قد يتم إنشاء مستودع Git داخلي. ولأننا نريد إدارة المشروع بالكامل من المجلد الرئيسي، يجب حذف هذا المستودع:

cd client
rm -rf .git

تهيئة الخادم لخدمة ملفات React بعد البناء

عند النشر، سيتم تقديم كل من تطبيق React وخادم Node من نفس النطاق. لذلك نحتاج إلى جعل الخادم يقدّم ملفات الواجهة الأمامية المبنية للإنتاج.

عد إلى الملف server/index.js وأضف الكود التالي:

// server/index.js
const path = require('path');
const express = require('express');
const PORT = process.env.PORT || 3001;
const app = express();

app.use(express.static(path.resolve(__dirname, '../client/build')));

app.get("/api", (req, res) => {
  res.json({ message: "Hello from server!" });
});

app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '../client/build', 'index.html'));
});

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

هذا الكود يؤدي مهمتين أساسيتين:

• خدمة الملفات الثابتة لتطبيق React عبر express.static().
• إرجاع ملف index.html لأي طلب GET لا يطابق المسار /api.

إضافة أمر build إلى package.json

حتى يتمكن الخادم من بناء تطبيق React للإنتاج، أضف أمر build إلى ملف package.json في جذر المشروع:

{
  "scripts": {
    "start": "node server/index.js",
    "build": "cd client && npm install && npm run build"
  }
}

تحديد إصدار Node المستخدم

من الجيد تحديد إصدار Node.js بشكل صريح لتفادي أي مشاكل توافق أثناء النشر. يمكنك معرفة الإصدار عبر الأمر node -v، ثم إضافته في الحقل engines:

{
  "engines": {
    "node": "your-node-version"
  }
}

تثبيت Heroku CLI وتسجيل الدخول

بعد إنشاء تطبيق جديد من لوحة تحكم Heroku، ستحتاج إلى تثبيت أداة سطر الأوامر الخاصة بالمنصة:

sudo npm i -g heroku

ثم سجّل الدخول عبر الأمر التالي:

heroku login

تهيئة Git وربط المشروع بـ Heroku

الآن نفّذ الأوامر التالية من المجلد الرئيسي للمشروع:

git init
heroku git:remote -a insert-your-app-name-here
git add .
git commit -am "Deploy app to Heroku"

وأخيراً، انشر التطبيق عبر دفع المشروع إلى المستودع البعيد الخاص بـ Heroku:

git push heroku master

وبذلك يصبح تطبيقك متاحاً على الويب.

كيفية تحديث التطبيق بعد النشر

كلما أجريت تعديلات جديدة على المشروع، يمكنك نشرها مجدداً باستخدام أوامر Git التالية:

git add .
git commit -m "my commit message"
git push heroku master

بهذه الطريقة، يمكنك الحفاظ على دورة تطوير ونشر سريعة ومنظمة.

أفضل ممارسات عند بناء مشروع React مع Node

• افصل منطق API عن الواجهة قدر الإمكان لتسهيل الصيانة.
• استخدم متغيرات البيئة مثل PORT وبيانات الاتصال الحساسة بدلاً من تضمينها مباشرة في الكود.
• احرص على اختبار المسارات مثل /api بشكل مستقل قبل ربطها بالواجهة.
• تأكد من بناء تطبيق React للإنتاج قبل النشر حتى تحصل على أداء أفضل.
• نظّم هيكل المشروع من البداية لتجنب التعقيد عند التوسع لاحقاً.

الخلاصة التقنية

إن بناء تطبيق يجمع بين React وNode.js يمنحك مرونة كبيرة في تطوير واجهة تفاعلية مدعومة بخادم قادر على إدارة البيانات والمنطق الخلفي بكفاءة. هذا الأسلوب مناسب جداً للتطبيقات الحديثة، خصوصاً عندما تحتاج إلى فصل واضح بين الواجهة وAPI مع إمكانية نشرهما ضمن مشروع واحد. وإذا تم تنظيم البنية البرمجية جيداً منذ البداية، فسيكون التوسع والصيانة أسهل بكثير على المدى الطويل.