تصدير مكون React

يشرح هذا الدليل كيفية تصدير طواقم CrewAI AMP كمكونات React ودمجها في تطبيقاتك.

تصدير مكون React

تصدير المكون

انقر على القائمة (ثلاث نقاط على يمين طاقمك المنشور) واختر خيار التصدير واحفظ الملف محلياً. سنستخدم CrewLead.jsx في مثالنا.

إعداد بيئة React

لتشغيل مكون React هذا محلياً، ستحتاج لإعداد بيئة تطوير React ودمج هذا المكون في مشروع React.

تثبيت Node.js

حمّل وثبّت Node.js من الموقع الرسمي: https://nodejs.org/
اختر إصدار LTS (الدعم طويل المدى) للاستقرار.

إنشاء مشروع React جديد

افتح Command Prompt أو PowerShell
انتقل إلى المجلد الذي تريد إنشاء مشروعك فيه
شغّل الأمر التالي لإنشاء مشروع React جديد:
npx create-react-app my-crew-app
انتقل إلى مجلد المشروع:
cd my-crew-app

تثبيت الاعتماديات اللازمة

npm install react-dom

إنشاء مكون CrewLead

انقل الملف المُحمّل CrewLead.jsx إلى مجلد src في مشروعك.

تعديل App.js لاستخدام مكون CrewLead

افتح src/App.js
استبدل محتوياته بشيء مثل هذا:

import React from 'react';
import CrewLead from './CrewLead';

function App() {
    return (
        <div className="App">
            <CrewLead baseUrl="YOUR_API_BASE_URL" bearerToken="YOUR_BEARER_TOKEN" />
        </div>
    );
}

export default App;

استبدل YOUR_API_BASE_URL وYOUR_BEARER_TOKEN بالقيم الفعلية لـ API.

بدء خادم التطوير

في مجلد مشروعك، شغّل:
npm start
سيبدأ خادم التطوير، ويجب أن يفتح متصفح الويب الافتراضي تلقائياً على http://localhost:3000، حيث سترى تطبيق React يعمل.