> ## Documentation Index
> Fetch the complete documentation index at: https://docs.crewai.com/llms.txt
> Use this file to discover all available pages before exploring further.
# تصدير مكون React
> تعلم كيفية تصدير ودمج مكونات React من CrewAI AMP في تطبيقاتك
يشرح هذا الدليل كيفية تصدير طواقم CrewAI AMP كمكونات React ودمجها في تطبيقاتك.
## تصدير مكون React
انقر على القائمة (ثلاث نقاط على يمين طاقمك المنشور) واختر خيار التصدير واحفظ الملف محلياً. سنستخدم `CrewLead.jsx` في مثالنا.
## إعداد بيئة React
لتشغيل مكون React هذا محلياً، ستحتاج لإعداد بيئة تطوير React ودمج هذا المكون في مشروع React.
* حمّل وثبّت Node.js من الموقع الرسمي: [https://nodejs.org/](https://nodejs.org/)
* اختر إصدار LTS (الدعم طويل المدى) للاستقرار.
* افتح Command Prompt أو PowerShell
* انتقل إلى المجلد الذي تريد إنشاء مشروعك فيه
* شغّل الأمر التالي لإنشاء مشروع React جديد:
```bash theme={null}
npx create-react-app my-crew-app
```
* انتقل إلى مجلد المشروع:
```bash theme={null}
cd my-crew-app
```
```bash theme={null}
npm install react-dom
```
* انقل الملف المُحمّل `CrewLead.jsx` إلى مجلد `src` في مشروعك.
* افتح `src/App.js`
* استبدل محتوياته بشيء مثل هذا:
```jsx theme={null}
import React from 'react';
import CrewLead from './CrewLead';
function App() {
return (
);
}
export default App;
```
* استبدل `YOUR_API_BASE_URL` و`YOUR_BEARER_TOKEN` بالقيم الفعلية لـ API.
* في مجلد مشروعك، شغّل:
```bash theme={null}
npm start
```
* سيبدأ خادم التطوير، ويجب أن يفتح متصفح الويب الافتراضي تلقائياً على `http://localhost:3000`، حيث سترى تطبيق React يعمل.
## التخصيص
يمكنك بعد ذلك تخصيص `CrewLead.jsx` لإضافة اللون والعنوان وغيرها.
## الخطوات التالية
* خصّص تنسيق المكون ليتوافق مع تصميم تطبيقك
* أضف خصائص إضافية للتهيئة
* ادمج مع إدارة حالة تطبيقك
* أضف معالجة الأخطاء وحالات التحميل