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

من الصفر إلى الإنتاج: بناء تطبيق متكامل باستخدام React و TypeScript ووظائف بدون خادم

Majd Muhtaseb07‏/07‏/202512 دقيقة

لنقم ببناء تطبيق متكامل أساسي يوضح كيفية ربط واجهة أمامية React مع خلفية بدون خادم. سنستخدم React و TypeScript للواجهة الأمامية ووظائف JavaScript بدون خادم.

إعداد واجهة React الأمامية

أولاً، قم بإنشاء تطبيق React جديد باستخدام Create React App مع TypeScript:

npx create-react-app my-app --template typescript
cd my-app

بعد ذلك، لنقم بإنشاء مكون بسيط لعرض البيانات التي تم جلبها من وظيفتنا بدون خادم:

// src/App.tsx
import React, { useState, useEffect } from 'react';

interface Data {
  message: string;
}

function App() {
  const [data, setData] = useState<Data | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('/.netlify/functions/hello');
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const jsonData: Data = await response.json();
        setData(jsonData);
      } catch (e: any) {
        setError(e.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

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

export default App;

إعداد الوظيفة بدون خادم (مثال Netlify Functions)

سنستخدم Netlify Functions في هذا المثال. إذا كنت تستخدم موفرًا مختلفًا، فقم بتكييف إنشاء الوظيفة واستدعائها وفقًا لذلك. قم بإنشاء دليل netlify/functions في جذر مشروعك:

mkdir netlify
mkdir netlify/functions

قم بإنشاء ملف hello.js داخل netlify/functions:

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

تكوين Netlify (إذا كنت تستخدم Netlify)

إذا كنت تستخدم Netlify، فستحتاج إلى تكوينه لنشر وظائفك. قم بإنشاء ملف netlify.toml في جذر مشروعك:

# netlify.toml
[build]
  functions = "netlify/functions"
  publish = "build"

[[redirects]]
  from = "/.netlify/functions/*"
  to = "/.netlify/functions/:splat"
  status = 200

البناء والنشر

قم ببناء تطبيق React الخاص بك:

npm run build

وانشره على نظامك الأساسي بدون خادم الذي اخترته. بالنسبة إلى Netlify، يمكنك استخدام Netlify CLI:

npm install -g netlify-cli
netlify deploy --prod

خاتمة

يوضح هذا المثال البنية الأساسية لتطبيق متكامل باستخدام React و TypeScript ووظائف بدون خادم. يمكنك التوسع في ذلك عن طريق إضافة منطق أكثر تعقيدًا وتكاملات قاعدة البيانات والمصادقة. تذكر تكييف إنشاء الوظيفة بدون خادم واستدعائها بناءً على الموفر الذي اخترته (مثل AWS Lambda و Google Cloud Functions و Azure Functions).