ازاى اربط الرياكت مع node js

يتم العمل بين ال react وال nodejs عن طريق ما يسمى ال Single page application وهو ما يقوم به ال react وطريقة عمل هذه التطبيقات كالتالي

سير عمل تطبيق صفحة واحدة (single page application)

تطلب الواجهة الأمامية (متصفح العميل) back-end (الخادم الخاص بك) للمحتوى الثابت للتطبيق (myLogo.png، index.html ...) من خلال ال backend أثناء تحميل الصفحة الأولى ويبدأ المستخدم في التفاعل مع التطبيق ، تستمر الواجهة الأمامية في تحميل صفحات أخرى في الخلفيةعندما ينتقل المستخدم إلى صفحة أخرى (react-router) ،

يتم تحميل الصفحة بالفعل ويتم نقل المستخدم إلى هناك دون أي اتصال آخر بالخادم أو إعادة تحميل الصفحةمن ناحية أخرى ، يحتاج ال backend التعامل مع طلبات ال API التي تأتيه من الواجهة الأمامية مثل

myapp.com/user/userId/get/notifications للحصول على بيانات ليست "ثابتة" مثل بيانات json.

مثال على الشرح السابق

myapp.com/my-portfolio هي هي صفحة من صفحات الموقع ويجب معالجتها وتقديمها بواسطة react-router

<Route path="/my-portfolio" component={Portfolio} />
<Route path="/page2" component={Page2} />

myapp.com/user/create أو  myapp.com/api/getMyJson هو طلب API يتم معالجته من خلال back-end من خلال ال express router مثلاً إذا كنت تستخدم إطار العمل  express كالتالي

app.get('/api/getMyJson', (req, res) => {
  res.send('{"my_var":"value"}');
});
app.use(express.static('app/public'))

وللمزيد حول هذه الطريقة يفضل القراءة حول تطبيق الصفحة الواحدة (Single-page application)

بالإضافة إلى ما تم شرحه، فعند استخدام React في تطبيق الويب، يتم استخدام React Router لإدارة المسارات والتنقل بين الصفحات. وعندما يرسل المستخدم طلبًا لمسار محدد، يتم تحميل المكون المناسب لهذا المسار (عادةً ما يتم استخدامه كعنصر في تصميم الصفحة) باستخدام React Router.

من جانب آخر، في Node.js يتم استخدام إطار العمل Express لإنشاء مسارات API والتعامل معها. ويتم استخدام express.Router() لإنشاء مسارات API محددة وربطها بدوال التعامل معها.

بالتالي، يمكنك إنشاء مسارات في تطبيق React باستخدام React Router وربطها بدوال التعامل معها في Node.js باستخدام Express. يمكنك تحديد مسارات React في جزء routes من التطبيق وتحديد المسارات المرتبطة ب API في ملف التعريف (router) الخاص بـ Express.

أما بالنسبة للسؤال المحدد حول كيفية الانتقال إلى صفحات React من خلال Node.js، فيمكن استخدام React Router وتحديد المسار المطلوب للانتقال إليه. وعند الضغط على الزر أو الرابط المرتبط بالمسار الذي تم تحديده، يتم تحميل المكون المناسب للصفحة الجديدة باستخدام React Router.

وبالتالي، يمكن استخدام React Router و Express لإنشاء تطبيق ويب ديناميكي يعمل على الانتقال بين الصفحات والتعامل مع طلبات API.

بمعنى أبسط

عندما تستخدم React في تطوير تطبيق ويب ، يتم استخدام React لإنشاء واجهة المستخدم الأمامية (التي يراها المستخدمون على المتصفح) ، بينما يتم استخدام Node.js و Express.js لإنشاء الجزء الخلفي من التطبيق. تقوم React بتوجيه طلبات إلى Node.js عبر واجهة API خاصة بـ Node.js باستخدام HTTP.

عندما تطلب المتصفح صفحة ويب لأول مرة ، يتم تحميل ملفات HTML و CSS و JavaScript المطلوبة من خلال Node.js. وعندما يتفاعل المستخدم مع التطبيق ويتحول إلى صفحة أخرى ، يقوم React بتحميل المكونات اللازمة للصفحة الجديدة دون الحاجة إلى إعادة تحميل الصفحة.

وبالنسبة لسؤالك، إذا كنت تريد توجيه المستخدمين إلى صفحة محددة في تطبيق React الخاص بك ، فيجب عليك استخدام React Router وتحديد مسار الصفحة الذي يتم الوصول إليه عبر عنوان URL. على سبيل المثال ، إذا كان لديك مسارًا باسم "/home" ، فيمكنك توجيه المستخدمين إلى صفحة "Home" في تطبيق React الخاص بك عن طريق ذكر المسار الذي تريد استخدامه في React Router. ويمكنك استخدام Node.js و Express.js لإرجاع محتوى HTML و CSS و JavaScript الخاص بصفحات تطبيق React الخاص بك بناءً على المسارات التي يطلبها المستخدمون.

مثال

لنفترض أن لديك موقع يستخدم React للجزء الأمامي وNode.js للجزء الخلفي. لتحقيق ذلك، عليك استخدام React Router للتحكم في صفحات الويب وExpress.js لإنشاء API لجزء الخلفي.

في البداية، يجب أن تقوم بتثبيت مكتبة react-router-dom وexpress في المشروع الخاص بك باستخدام npm.

الآن، لإنشاء صفحات React وربطها بعناوين URL، يمكنك استخدام React Router. يمكنك استخدام <BrowserRouter> و <Route> لتحديد عناوين URL ومكونات React المقابلة. على سبيل المثال، إذا كان لديك صفحة Home تريد عرضها عند زيارة العنوان "localhost:3000/"، يمكنك استخدام الكود التالي:

import React from "react";
import { BrowserRouter, Route } from "react-router-dom";
import Home from "./components/Home";

function App() {
  return (
    <BrowserRouter>
      <Route exact path="/" component={Home} />
    </BrowserRouter>
  );
}
export default App;

في الكود السابق، نستخدم BrowserRouter لتحديد مسارات URL المتاحة. ثم، نستخدم Route لربط مكون React مع عنوان URL محدد. في هذه الحالة، عندما يتم زيارة عنوان "localhost:3000/"، سيتم عرض المكون Home.

الآن، لإنشاء API في Node.js، يمكنك استخدام Express.js. يمكنك تحديد مسارات URL مع app.get() وapp.post() وapp.put() وغيرها. يمكنك إرجاع بيانات JSON أو HTML أو ملفات أخرى باستخدام res.send() وres.sendFile() وما إلى ذلك. على سبيل المثال، إذا كنت تريد إنشاء طريقة API لإرجاع بيانات JSON، يمكنك استخدام الكود التالي:

const express = require("express");
const app = express();

app.get("/api/data", (req, res) => {
  const data = { message: "Hello, world!" };
  res.send(data);
});
app.listen(300