قاعدة الأب الواحد

يمكن للمكون أن يعيد أياً كان قدر الـ JSX الذي تريده، بشرط قاعدة واحدة: يجب أن يكون كل شيء داخل عنصر أب واحد. هذا مثال صحيح:

return (
    <div>
        <h1>My Page</h1>
        <p>Welcome!</p>
    </div>
);

ولكن إرجاع عنصرين جنباً إلى جنب بدون عنصر غلاف يُعد خطأً. فالدالة يمكنها إرجاع شيء واحد فقط:

// BROKEN: عنصران من المستوى الأعلى
return (
    <h1>My Page</h1>
    <p>Welcome!</p>
);

الحل المعتاد هو تغليف كل شيء داخل <div>. شاهد المعاينة: إذا قمت بمخالفة القاعدة، فإن خطأ البناء يخبرك بالمكان بالضبط.