اثنا عشر سؤالًا تغطي الدورة كلها. احصل على 70% أو أكثر لتنجح وتفتح شهادتك. يمكنك إعادته متى شئت.
أنهِ كل الدروس لتحصل على الشهادة، ويمكنك خوض الاختبار في أي وقت.
السؤال 1 من 12
يزيد component متغيّرًا اسمه renderCount في مستوى الـ module داخل جسمه ويعرضه. الرقم مختلف بين التطوير والإنتاج. لماذا؟
renderCount
السؤال 2 من 12
أيّ تعبير يعرض النص «Watched» فقط حين تكون movie.watched قيمتها true، ولا شيء في غير ذلك؟
movie.watched
{movie.watched ? "Watched"}
{if (movie.watched) "Watched"}
{movie.watched && "Watched"}
{movie.watched || "Watched"}
السؤال 3 من 12
تكتب في حقل داخل صف من قائمة، فيفقد التركيز بعد كل ضغطة مفتاح. والقائمة تستخدم key={Math.random()}. ما الذي يحدث؟
key={Math.random()}
Math.random()
السؤال 4 من 12
داخل معالج نقرة تستدعي setFilter("watched") ثم console.log(visible.length)، حيث visible مشتقّة من filter أثناء الـ render. ماذا يُطبع؟
setFilter("watched")
console.log(visible.length)
visible
filter
السؤال 5 من 12
يخزّن Watchlist القيمة visibleMovies في الـ state ويحدّثها حين يتغيّر الفلتر. الأفلام المضافة حديثًا لا تظهر حتى يُنقر الفلتر من جديد. ما أفضل إصلاح؟
visibleMovies
movies
السؤال 6 من 12
بمجرّد تحميل الصفحة، تبلّغ React بالخطأ «Too many re-renders». عناصر القائمة تحتوي على <button onClick={handleRemove(movie.id)}>Remove</button>. ما الإصلاح؟
<button onClick={handleRemove(movie.id)}>Remove</button>
handleRemove
useEffect
onClick={handleRemove}
onClick={() => handleRemove(movie.id)}
onMouseUp
onClick
السؤال 7 من 12
كُتب مربّع اختيار «Watched» بالشكل <input type="checkbox" value={watched} onChange={(e) => setWatched(e.target.value)} />. النقر عليه لا يُظهر علامة الاختيار أبدًا. ما الخطأ؟
<input type="checkbox" value={watched} onChange={(e) => setWatched(e.target.value)} />
e.preventDefault()
watched
checked
e.target.checked
value
السؤال 8 من 12
يحمّل Watchlist الأفلام المحفوظة في useEffect(() => setMovies(load()), []) ويحفظها في effect آخر على [movies]. يبلّغ المستخدمون أن قائمتهم تُمسح أحيانًا عند إعادة التحميل. ما التصميم الأفضل؟
useEffect(() => setMovies(load()), [])
[movies]
useState(load)
setTimeout
السؤال 9 من 12
يحتفظ AddMovieForm بالعنوان المكتوب في الـ state الخاص به، ويملك App الأفلام. أين يجب أن يعيش منطق «مسح الحقل بعد الإضافة»؟
AddMovieForm
App
clear
onAdd
السؤال 10 من 12
تريد أن يكون لزر الفلترة النشط تنسيق مختلف، وأنت تضبط أصلًا aria-pressed={value === key} على كل زر. أيّ نهج في Tailwind هو الأنسب؟
aria-pressed={value === key}
aria-pressed:bg-indigo-600 aria-pressed:text-white
tailwind.config.js
active
السؤال 11 من 12
يستدعي تطبيقك API أفلام مدفوعًا باستخدام import.meta.env.VITE_MOVIE_API_SECRET. لماذا هذه مشكلة؟
import.meta.env.VITE_MOVIE_API_SECRET
VITE_
السؤال 12 من 12
استخرجت component اسمه Card يرسم حدودًا وحشوًا و{children}، واستخدمته لعناصر الأفلام وللحالة الفارغة. ما الفائدة الأساسية؟
Card
{children}
12 سؤالًا بلا إجابة