---
title: "تصدير مكون React"
description: "تعلم كيفية تصدير ودمج مكونات React من CrewAI AMP في تطبيقاتك"
icon: "react"
mode: "wide"
---
يشرح هذا الدليل كيفية تصدير طواقم CrewAI AMP كمكونات React ودمجها في تطبيقاتك.
## تصدير مكون React
انقر على القائمة (ثلاث نقاط على يمين طاقمك المنشور) واختر خيار التصدير واحفظ الملف محلياً. سنستخدم `CrewLead.jsx` في مثالنا.
## إعداد بيئة React
لتشغيل مكون React هذا محلياً، ستحتاج لإعداد بيئة تطوير React ودمج هذا المكون في مشروع React.
- حمّل وثبّت Node.js من الموقع الرسمي: https://nodejs.org/
- اختر إصدار LTS (الدعم طويل المدى) للاستقرار.
- افتح Command Prompt أو PowerShell
- انتقل إلى المجلد الذي تريد إنشاء مشروعك فيه
- شغّل الأمر التالي لإنشاء مشروع React جديد:
```bash
npx create-react-app my-crew-app
```
- انتقل إلى مجلد المشروع:
```bash
cd my-crew-app
```
```bash
npm install react-dom
```
- انقل الملف المُحمّل `CrewLead.jsx` إلى مجلد `src` في مشروعك.
- افتح `src/App.js`
- استبدل محتوياته بشيء مثل هذا:
```jsx
import React from 'react';
import CrewLead from './CrewLead';
function App() {
return (
);
}
export default App;
```
- استبدل `YOUR_API_BASE_URL` و`YOUR_BEARER_TOKEN` بالقيم الفعلية لـ API.
- في مجلد مشروعك، شغّل:
```bash
npm start
```
- سيبدأ خادم التطوير، ويجب أن يفتح متصفح الويب الافتراضي تلقائياً على `http://localhost:3000`، حيث سترى تطبيق React يعمل.
## التخصيص
يمكنك بعد ذلك تخصيص `CrewLead.jsx` لإضافة اللون والعنوان وغيرها.
## الخطوات التالية
- خصّص تنسيق المكون ليتوافق مع تصميم تطبيقك
- أضف خصائص إضافية للتهيئة
- ادمج مع إدارة حالة تطبيقك
- أضف معالجة الأخطاء وحالات التحميل