freeCodeCamp/guide/arabic/certifications/front-end-libraries/react/use-react-to-render-nested-components/index.md

---
title: Use React to Render Nested Components
localeTitle: استخدم React لتقديم العناصر المتداخلة
---
## استخدم React لتقديم العناصر المتداخلة

لقد تعلمت في الدروس السابقة ، أن هناك طريقتين لإنشاء مكون React:

1.  مكون وظيفي عديم الحالة - باستخدام وظيفة JavaScript.
    
2.  حدد مكون React باستخدام بنية ES6.
    

في هذا الاختبار ، قمنا بتعريف مكونين وظيفيين عديمي الأهلية ، أي استخدام وظائف JavaScript. تذكر ، بمجرد إنشاء مكون ، يمكن تقديمه بنفس طريقة علامة HTML ، باستخدام اسم المكون داخل أقواس فتح وإغلاق HTML. على سبيل المثال ، لتضمين مكون يدعى Dog داخل مكون رئيسي يسمى Animals ، يمكنك ببساطة إرجاع مكون Dog من مكون الحيوانات مثل:

```javascript
return (
  <Dog />
)
``` 

جرب هذا مع مكونات TypesOfFruit و Fruits.