مكونك الأول

حان الوقت لكتابة أول مكون لك. ألقِ نظرة على App.jsx. إنها دالة ترجع JSX:

export default function App() {
    return (
        <div>

        </div>
    );
}

في الوقت الحالي تعيد عنصر <div> فارغًا، لذا فإن المعاينة فارغة. أي JSX تضعه بالداخل سيتم عرضه (عناوين، فقرات، أزرار، أي شيء):

<h1 id="title">Hello, React!</h1>

لاحظ خاصية id: فهي تعمل تمامًا كما في HTML، وتستخدم اختباراتنا المعرفات (ids) للعثور على عناصرك. الملفان الآخران هما الأساس البرمجي للتطبيق: حيث يستضيف index.html التطبيق وتقوم main.jsx بتركيب App في الصفحة. هما مقفلان. ملف App.jsx هو المكان الذي تعمل فيه.