تصدير مكون React

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

تصدير مكون React

1. تصدير المكون

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

   

إعداد بيئة React

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

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

   • افتح Command Prompt أو PowerShell

   • انتقل إلى المجلد الذي تريد إنشاء مشروعك فيه

   • شغّل الأمر التالي لإنشاء مشروع React جديد:

     npx create-react-app my-crew-app

   • انتقل إلى مجلد المشروع:

     cd my-crew-app

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

   npm install react-dom

4. إنشاء مكون CrewLead
   • انقل الملف المُحمّل CrewLead.jsx إلى مجلد src في مشروعك.
5. تعديل 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.
6. بدء خادم التطوير

   • في مجلد مشروعك، شغّل:

     npm start

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

التخصيص

يمكنك بعد ذلك تخصيص CrewLead.jsx لإضافة اللون والعنوان وغيرها.

الخطوات التالية

• خصّص تنسيق المكون ليتوافق مع تصميم تطبيقك
• أضف خصائص إضافية للتهيئة
• ادمج مع إدارة حالة تطبيقك
• أضف معالجة الأخطاء وحالات التحميل