كيف تظهر واجهة React في الصفحة؟

في الدرس السابق وصفنا الواجهة التي نريدها. أين سيعرضها React؟

لا يبدأ React بإدارة الصفحة تلقائيا. نعطيه عنصرا موجودا في الصفحة ثم نخبره بما نريد عرضه داخله.

ابدأ بمشروع Vite

أنشئ مشروع learning-dashboard:

pnpm create vite learning-dashboard --template react
cd learning-dashboard
pnpm install
pnpm dev

افتح الرابط الذي يظهر في الطرفية. يوفر Vite مشروع البداية و خادم التطوير. أما الواجهة فسنكتبها باستخدام React.

أين سيعرض React الواجهة؟

افتح index.html. ستجد حاوية للواجهة و سطرا يحمل ملف الدخول:

<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>

يبدأ التطبيق من main.jsx. أما العنصر الذي يحمل id="root" فهو الحاوية (container) التي سيعرض React الواجهة داخلها. استبدل محتوى src/main.jsx بهذا الكود:

import { createElement } from "react";
import { createRoot } from "react-dom/client";
 
const container = document.getElementById("root");
 
if (!container) {
  throw new Error("The #root container was not found.");
}
 
const root = createRoot(container);
root.render(createElement("h1", null, "Learning Dashboard"));

نبحث أولا عن الحاوية باسمها. إذا لم نجدها، نتوقف برسالة خطأ واضحة. بعدها نعطي الحاوية إلى createRoot ليتمكن React من إدارة ما بداخلها.

إنشاء root وحده لا يعرض شيئا. ننشئ العنوان باستخدام createElement ثم نمرره إلى root.render. هكذا يعرف React أين يعرض الواجهة و ماذا يعرض.

ماذا يحدث لو كان اسم الحاوية في index.html مختلفا عن الاسم في getElementById؟ لن يجدها الكود و ستكون قيمة container هي null.

جرب في المحرر

المعاينة مجهزة مسبقا فلا تحتاج إلى إنشاء مشروع Vite آخر. فيها حاوية اسمها dashboard-root، لكن index.jsx يبحث عن dashboard. توقع ما سيحدث ثم افتح المعاينة و أصلح الكود.

بعد الإصلاح شغل المعاينة و اشرح لماذا لم يظهر العنوان في البداية و لماذا احتجنا إلى root.render.

تذكر

نبدأ بالحاوية. ننشئ لها root و نعرض الواجهة داخله. في هذا التطبيق يكفي root واحد؛ لا ننشئ واحدا جديدا لكل عنوان. استخدمنا createElement الآن و في الدرس القادم سنكتب الواجهة باستخدام JSX.

اختبر معلوماتك