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

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

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

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

 `return ( 
  <Dog /> 
 ) 
` 

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