العودة للمقالات

بناء تطبيق متكامل باستخدام React و Vite وخلفية برمجية بدون خادم

Majd Muhtaseb12‏/11‏/202512 دقيقة

مقدمة

سيرشدك هذا البرنامج التعليمي خلال إنشاء تطبيق بسيط ومتكامل باستخدام React و Vite على الواجهة الأمامية وخلفية برمجية بدون خادم باستخدام خدمة مثل Netlify Functions أو AWS Lambda. سنركز على المفاهيم الأساسية ونقدم مثالًا أساسيًا لتبدأ.

إعداد الواجهة الأمامية باستخدام React و Vite

أولاً ، لنقم بإعداد الواجهة الأمامية باستخدام Vite. يوفر Vite تجربة تطوير سريعة وحديثة.

npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run dev

يقوم هذا بإنشاء مشروع React جديد باستخدام Vite ويبدأ خادم التطوير.

إنشاء مكون React بسيط

لنقم بإنشاء مكون بسيط لجلب البيانات من الخلفية البرمجية بدون خادم. قم بإنشاء ملف src/components/DataDisplay.jsx بالمحتوى التالي:

import { useState, useEffect } from 'react';

function DataDisplay() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('/.netlify/functions/getData'); // اضبط المسار بناءً على إعدادك للخادم بدون خادم
        if (!response.ok) {
          throw new Error(`خطأ HTTP! الحالة: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  if (loading) return <p>جار التحميل...</p>;
  if (error) return <p>خطأ: {error.message}</p>;
  if (!data) return <p>لا توجد بيانات للعرض</p>;

  return (
    <div>
      <h1>بيانات من وظيفة بدون خادم:</h1>
      <p>{data.message}</p>
    </div>
  );
}

export default DataDisplay;

دمج المكون

الآن ، قم بدمج هذا المكون في ملف App.jsx الخاص بك:

import DataDisplay from './components/DataDisplay';

function App() {
  return (
    <div className="App">
      <DataDisplay />
    </div>
  );
}

export default App;

خلفية برمجية بدون خادم (مثال Netlify Functions)

لهذا المثال ، سنستخدم Netlify Functions. إذا كنت تستخدم نظامًا أساسيًا آخر بدون خادم ، فقم بالتعديل وفقًا لذلك.

1. إعداد Netlify: تأكد من وجود ملف netlify.toml في جذر مشروعك تم تكوينه لـ Netlify Functions. مثال أساسي هو:

   [build]
   functions = "netlify/functions"
   publish = "dist"
   command = "npm run build"
   

2. إنشاء وظيفة: قم بإنشاء دليل netlify/functions في جذر مشروعك. في الداخل ، قم بإنشاء ملف باسم getData.js:

exports.handler = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify({ message: "مرحباً من وظيفتك بدون خادم!" }),
  };
};

البناء والتوزيع

1. بناء الواجهة الأمامية:

   npm run build
   

2. توزيع على Netlify:

   باستخدام Netlify CLI: netlify deploy --prod أو قم بتوصيل المستودع الخاص بك بـ Netlify لعمليات التوزيع التلقائي.

خاتمة

يوفر هذا أساسًا أساسيًا لبناء تطبيق متكامل باستخدام React و Vite وخلفية برمجية بدون خادم. يمكنك التوسع في هذا عن طريق إضافة المزيد من الميزات المعقدة وتخزين البيانات والمصادقة. تذكر ضبط المسارات والتكوينات لتتناسب مع بيئة الخادم الخاصة بك.