{"id":"l-rf-4-1","courseId":"react-fundamentals","lang":"ar","kind":"lesson","summary":"اجمع Watchlist المكتمل من components صغيرة، مع الـ state عند مالك واحد، وقيم مشتقّة، ومعالجات تُمرَّر إلى الأسفل، وقائمة محفوظة في localStorage.","html":"

كل قطعة من Watchlist موجودة الآن، موزّعة على الدروس: الـ components من القسم 1، والـ props والقوائم من القسم 2، والـ state والنماذج والـ effects من القسم 3. هذا الدرس يجمعها في تطبيق واحد ستكون مرتاحًا لعرضه في مقابلة عمل، ويشرح كل قرار لتتّخذ القرارات نفسها في مشروعك التالي.

\n

شكل التطبيق

\n

هذا هو الترتيب النهائي للملفات في مشروع Vite:

\n
Text
src/\n  main.jsx\n  App.jsx               state, handlers, derived values\n  storage.js            load and save to localStorage\n  components/\n    Header.jsx          title and "N to watch"\n    AddMovieForm.jsx    controlled title input\n    FilterBar.jsx       All / To watch / Watched\n    MovieList.jsx       list or empty state\n    MovieItem.jsx       one movie: toggle and remove
\n

ملفّان فقط فيهما منطق يستحق الاختبار: App.jsx الذي يملك الـ state، وstorage.js. وكل component في components/ يستقبل props ويُرجع JSX. هذا هو التقسيم الذي تريده: طبقة رقيقة من الـ state والمنطق في الأعلى، وطبقة عريضة من القطع البسيطة تحتها.

\n

التخزين، معزولًا

\n

ابدأ بالـ module الذي يتحدّث مع المتصفّح:

\n
src/storage.js
const KEY = 'watchlist.movies';\n\nexport function loadMovies() {\n  try {\n    const saved = JSON.parse(localStorage.getItem(KEY));\n    return Array.isArray(saved) ? saved : [];\n  } catch {\n    return [];\n  }\n}\n\nexport function saveMovies(movies) {\n  try {\n    localStorage.setItem(KEY, JSON.stringify(movies));\n  } catch {\n    // Storage full or blocked: the app still works, it just won't remember.\n  }\n}
\n

قد يرمي localStorage أخطاء (محظور في بعض أوضاع الخصوصية، أو امتلأت سعته)، وقد يحتوي على أي شيء، بما في ذلك بيانات من نسخة أقدم من تطبيقك. فحص Array.isArray والتقاط الأخطاء يعنيان أن القيمة المعطوبة تعطيك قائمة فارغة بدل شاشة بيضاء. ولا ترى الـ components أي شيء من هذا.

\n

الـ App: المالك

\n
src/App.jsx
import { useEffect, useState } from 'react';\nimport { loadMovies, saveMovies } from './storage.js';\nimport Header from './components/Header.jsx';\nimport AddMovieForm from './components/AddMovieForm.jsx';\nimport FilterBar from './components/FilterBar.jsx';\nimport MovieList from './components/MovieList.jsx';\n\nexport default function App() {\n  const [movies, setMovies] = useState(loadMovies);\n  const [filter, setFilter] = useState('all');\n\n  useEffect(() => {\n    saveMovies(movies);\n  }, [movies]);\n\n  const left = movies.filter((m) => !m.watched).length;\n  const visible = movies.filter((m) =>\n    filter === 'all' ? true : filter === 'watched' ? m.watched : !m.watched,\n  );\n\n  function handleAdd(title) {\n    setMovies([...movies, { id: crypto.randomUUID(), title, watched: false }]);\n  }\n\n  function handleToggle(id) {\n    setMovies(movies.map((m) => (m.id === id ? { ...m, watched: !m.watched } : m)));\n  }\n\n  function handleRemove(id) {\n    setMovies(movies.filter((m) => m.id !== id));\n  }\n\n  return (\n    <main className=\"app\">\n      <Header left={left} total={movies.length} />\n      <AddMovieForm onAdd={handleAdd} />\n      <FilterBar value={filter} onChange={setFilter} />\n      <MovieList movies={visible} onToggle={handleToggle} onRemove={handleRemove} />\n    </main>\n  );\n}
\n

اقرأه من الأعلى إلى الأسفل وستعرف التطبيق كله. قطعتان من الـ state. effect واحد، للشيء الوحيد الموجود خارج React. قيمتان مشتقّتان. ثلاثة معالجات، كلٌّ منها سطر واحد، وكلٌّ منها إجراء مسمّى يستطيع المستخدم القيام به. ثم التخطيط. وحين يصل بلاغ خطأ («حذف فيلم يعيده بعد تحديث الصفحة»)، تعرف بالضبط أي الأسطر قد تكون معنية.

\n

تأتي المعرّفات من crypto.randomUUID()، وتُنشأ مرة واحدة في handleAdd وتُخزَّن مع الفيلم، تمامًا كما أوصى درس الـ keys. وهي تعمل على localhost وعبر HTTPS، وهذا يغطّي التطوير وVercel.

\n

القطع التي تحت

\n

الـ components الخاصة بالقائمة والعنصر قصيرة لأنها لا تفعل سوى عرض الـ props وتمرير الأحداث:

\n
src/components/MovieList.jsx
import MovieItem from './MovieItem.jsx';\n\nexport default function MovieList({ movies, onToggle, onRemove }) {\n  if (movies.length === 0) {\n    return <p className=\"empty\">No movies here yet.</p>;\n  }\n\n  return (\n    <ul className=\"movie-list\">\n      {movies.map((movie) => (\n        <MovieItem key={movie.id} movie={movie} onToggle={onToggle} onRemove={onRemove} />\n      ))}\n    </ul>\n  );\n}
\n
src/components/MovieItem.jsx
export default function MovieItem({ movie, onToggle, onRemove }) {\n  return (\n    <li className={movie.watched ? 'movie watched' : 'movie'}>\n      <span className=\"title\">{movie.title}</span>\n      <button aria-pressed={movie.watched} onClick={() => onToggle(movie.id)}>\n        {movie.watched ? 'Watched' : 'Mark watched'}\n      </button>\n      <button aria-label={`Remove ${movie.title}`} onClick={() => onRemove(movie.id)}>\n        Remove\n      </button>\n    </li>\n  );\n}
\n

أمّا AddMovieForm وFilterBar فهما النسختان اللتان بنيتهما في الدروس السابقة، وصار Header يستقبل الرقمين اللذين يعرضهما بدل القائمة كاملة. ويحصل زر Remove على aria-label يسمّي الفيلم، لأن مستخدم الـ screen reader الذي يتنقّل بمفتاح Tab بين عشرة أزرار «Remove» يحتاج إلى معرفة الزر الذي يقف عليه.

\n
\n النقر على Mark watched في MovieItem يستدعي onToggle، فتُنفَّذ handleToggle في App. تُطلق setMovies إعادة render؛ فتنزل props جديدة إلى Header وMovieList، ويكتب effect الحفظ في localStorage.\n \n MovieItem\n onToggle(id)\n \n App\n setMovies(…)\n \n Re-render\n \n Header\n \n MovieList\n \n effect بعد الـ commit\n saveMovies(movies)\n \n \n \n \n \n
نقرة واحدة، من البداية إلى النهاية
\n

لماذا تصمد هذه البنية

\n

انظر إلى ما يحتاجه كل component ليُفحص. يحتاج MovieList إلى مصفوفة ودالتين. أعطه مصفوفة فارغة ويجب أن يعرض «No movies here yet.»؛ وأعطه فيلمين ويجب أن يرسم عنصرين. ويحتاج MovieItem إلى فيلم واحد، والنقر على Remove يجب أن يستدعي onRemove بمعرّف ذلك الفيلم. لا يحتاج أيٌّ منهما إلى localStorage، ولا إلى نموذج حقيقي، ولا إلى بقية التطبيق. هذا ما تعنيه «قطع صغيرة قابلة للاختبار» عمليًا: لكل قطعة بضعة مدخلات وبضعة مخرجات مرئية.

\n

وحين تضيف اختبارات آلية لاحقًا (Vitest مع React Testing Library هو الثنائي الشائع لمشاريع Vite)، فهذه هي الاختبارات التي ستكتبها أولًا. وحتى قبل أن تكون لديك اختبارات، تؤتي البنية ثمارها: حين تبدو الحالة الفارغة خاطئة، تفتح ملفًا واحدًا من 10 أسطر، لا component من 300 سطر.

\n

حين تكبر المعالجات

\n

ثلاثة معالجات من سطر واحد سهلة المتابعة. لكن إن أضفت التعديل وإعادة الترتيب والتراجع، فسيمتلئ App بمنطق التحديث. هذه هي اللحظة التي تفكّر فيها في useReducer: إنه ينقل كل قواعد «كيف تتغيّر الأفلام» إلى دالة نقية واحدة، moviesReducer(movies, action)، يمكنك اختبارها من دون رسم أي شيء. لا تبدأ من هناك. ابدأ بـ useState، والجأ إلى reducer حين تحدّث عدّة معالجات الـ state نفسه بطرق مترابطة ويصبح الـ component صعب القراءة.

\n\n\n

Watchlist يعمل. لكن شكله ليس مميّزًا بعد، وهذا موضوع الدرس التالي: تنسيقه باستخدام Tailwind CSS.

\n","toc":[{"id":"sec-1","text":"شكل التطبيق","level":2},{"id":"sec-2","text":"التخزين، معزولًا","level":2},{"id":"sec-3","text":"الـ App: المالك","level":2},{"id":"sec-4","text":"القطع التي تحت","level":2},{"id":"sec-5","text":"لماذا تصمد هذه البنية","level":2},{"id":"sec-6","text":"حين تكبر المعالجات","level":2}],"takeaways":["يحتفظ التطبيق المكتمل بقطعتين فقط من الـ state الحقيقي في App، هما الأفلام والفلتر، ويشتقّ كل ما عداهما أثناء الـ render.","كل التغييرات على الأفلام تحدث في عدد قليل من المعالجات المسمّاة داخل App، ويستدعيها الأبناء عبر الـ props.","الـ components العرضية الصغيرة التي لا تفعل سوى استقبال الـ props سهلة القراءة وإعادة الاستخدام والاختبار.","اعزل واجهات المتصفّح مثل localStorage في module صغير مع معالجة للأخطاء، لتبقى الـ components بسيطة.","امشِ في كل مسار استخدام بيدك، بما فيه تحديث الصفحة والحالات الفارغة والاستخدام بلوحة المفاتيح، قبل أن تعدّ العمل منتهيًا."],"further":[{"title":"Thinking in React","url":"https://react.dev/learn/thinking-in-react"},{"title":"Extracting State Logic into a Reducer","url":"https://react.dev/learn/extracting-state-logic-into-a-reducer"},{"title":"Window.localStorage (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage"}],"quiz":[{"q":"

توسّع Watchlist المكتمل بزر «Clear watched» يكون معطّلًا حين لا يوجد فيلم مُشاهَد، إلى جانب العدد والقائمة المصفّاة. كم استدعاءً لـ useState يحتاج App؟

","options":[{"text":"خمسة، واحد لكلٍّ من الأفلام والفلتر والعدد والأفلام الظاهرة وحالة تعطيل الزر.","why":"العدد والقائمة الظاهرة وحالة التعطيل كلها تُحسب من الأفلام والفلتر. وتخزينها ينشئ نُسخًا تنحرف."},{"text":"واحد، كائن يحمل كل شيء.","why":"يمكنك ذلك، لكن الأفلام والفلتر يتغيّران باستقلال. قطعتان منفصلتان من الـ state أبسط في التحديث."},{"text":"اثنان، للأفلام والفلتر. وكل ما عداهما يُشتقّ أثناء الـ render.","why":"صحيح. مسوّدة العنوان تعيش في النموذج، وكل ما عدا ذلك يُحسب من هاتين القطعتين."}],"answer":2},{"q":"

يعلّم المستخدم فيلمًا كمُشاهَد بالنقر على زرّه في MovieItem. بأيّ ترتيب تحدث الأشياء؟

","options":[{"text":"يضبط MovieItem الـ state الخاص به watched، ثم يُخبر App عبر effect.","why":"لا يملك MovieItem أي state خاص به في هذا التصميم، ومزامنة الـ state عبر effect هي النمط الذي يجب تجنّبه."},{"text":"يستدعي MovieItem الدالة onToggle(id)، فيستدعي معالج App الدالة setMovies، ويعيد App الـ render، وتنزل الـ props الجديدة إلى الترويسة والقائمة.","why":"صحيح. تصعد الأحداث إلى المالك، ويحدّث المالك الـ state، وتنزل البيانات الجديدة إلى كل component يعرضها."},{"text":"يفحص App الـ DOM دوريًا بحثًا عن مربّعات الاختيار المعلَّمة ويحدّث الـ state الخاص به.","why":"لا تقرأ React الـ state من الـ DOM أبدًا. الـ DOM يُرسم من الـ state، لا العكس."},{"text":"يعدّل MovieItem كائن الفيلم الذي استقبله، فتلاحظ React التغيير.","why":"الـ props للقراءة فقط، وReact لا تكتشف التعديلات المباشرة. لن يُعاد رسم أي شيء."}],"answer":1},{"q":"

لماذا يضع الدرس loadMovies وsaveMovies في module منفصل اسمه storage.js؟

","options":[{"text":"ليبقى API المتصفّح ومعالجة أخطائه ومفتاح التخزين في مكان واحد، فلا تتعامل الـ components إلا مع مصفوفات عادية.","why":"صحيح. إذا انتقلت لاحقًا إلى خادم أو IndexedDB، فستغيّر ملفًا صغيرًا واحدًا، ويبقى كود App كما هو."},{"text":"لأن الـ components في React لا يُسمح لها باستدعاء localStorage.","why":"يمكن للـ components استدعاء أي API من المتصفّح داخل المعالجات والـ effects. الفصل مسألة وضوح، لا إذن."},{"text":"لأن localStorage لا يعمل إلا في الملفات التي تنتهي بـ .js.","why":"امتداد الملف لا يغيّر شيئًا في واجهات المتصفّح. ملفات .jsx تشغّل JavaScript نفسها."}],"answer":0},{"q":"

بعد إضافة «Clear watched» صار في App معالجات للإضافة والتبديل والحذف ومسح المُشاهَد، وكلها تستدعي setMovies بمنطق مختلف. متى يستحق useReducer العناء؟

","options":[{"text":"فورًا، لأن useState لا يجب أن يُستخدم مع المصفوفات.","why":"تتعامل useState مع المصفوفات بشكل ممتاز، كما يُثبت هذا التطبيق كله."},{"text":"فقط حين يستخدم التطبيق TypeScript.","why":"تعمل الـ reducers بالطريقة نفسها في JavaScript وTypeScript؛ اللغة ليست العامل الحاسم."},{"text":"أبدًا، لأن useReducer أصبح متوقّفًا (deprecated) في React 19.","why":"الـ useReducer هو hook حالي ومدعوم بالكامل. لم يُوقف React 19 أي شيء فيه."},{"text":"حين يكبر منطق التحديث بما يكفي لأن يصبح جمعه في دالة نقية واحدة، خارج الـ component، أسهل في القراءة والاختبار.","why":"صحيح. ينقل الـ reducer «كيف يتغيّر الـ state» إلى دالة واحدة يمكنك اختبارها من دون render. ومع أربعة معالجات قصيرة، ما زال useState مناسبًا."}],"answer":3}],"exercise":{"kind":"web","mode":"react","starter":{"jsx":"import { useState } from 'react';\n\nconst INITIAL = [\n { id: 1, title: 'Arrival', watched: true },\n { id: 2, title: 'Past Lives', watched: false },\n { id: 3, title: 'Dune: Part Two', watched: false },\n];\nlet nextId = 4; // in a real app: crypto.randomUUID()\n\nfunction AddMovieForm({ onAdd }) {\n const [title, setTitle] = useState('');\n const trimmed = title.trim();\n\n function handleSubmit(e) {\n e.preventDefault();\n if (!trimmed) return;\n onAdd(trimmed);\n setTitle('');\n }\n\n return (\n
\n setTitle(e.target.value)} />\n \n
\n );\n}\n\nfunction FilterBar({ value, onChange }) {\n const options = [['all', 'All'], ['to-watch', 'To watch'], ['watched', 'Watched']];\n return (\n
\n {options.map(([key, label]) => (\n \n ))}\n
\n );\n}\n\nfunction MovieItem({ movie, onToggle, onRemove }) {\n return (\n
  • \n {movie.title}\n \n \n
    • \n );\n}\n\nfunction MovieList({ movies, onToggle, onRemove }) {\n if (movies.length === 0) {\n return

    No movies here yet.

    ;\n }\n return (\n \n );\n}\n\nexport default function App() {\n // Wire it up: state for movies and filter, derived values, and handlers.\n const movies = INITIAL;\n\n return (\n
    \n

    Watchlist

    \n

    0 to watch

    \n {}} />\n {}} />\n {}} onRemove={() => {}} />\n
    \n );\n}\n"},"solution":{"jsx":"import { useState } from 'react';\n\nconst INITIAL = [\n { id: 1, title: 'Arrival', watched: true },\n { id: 2, title: 'Past Lives', watched: false },\n { id: 3, title: 'Dune: Part Two', watched: false },\n];\nlet nextId = 4; // in a real app: crypto.randomUUID()\n\nfunction AddMovieForm({ onAdd }) {\n const [title, setTitle] = useState('');\n const trimmed = title.trim();\n\n function handleSubmit(e) {\n e.preventDefault();\n if (!trimmed) return;\n onAdd(trimmed);\n setTitle('');\n }\n\n return (\n
    \n setTitle(e.target.value)} />\n \n
    \n );\n}\n\nfunction FilterBar({ value, onChange }) {\n const options = [['all', 'All'], ['to-watch', 'To watch'], ['watched', 'Watched']];\n return (\n
    \n {options.map(([key, label]) => (\n \n ))}\n
    \n );\n}\n\nfunction MovieItem({ movie, onToggle, onRemove }) {\n return (\n
  • \n {movie.title}\n \n \n
    • \n );\n}\n\nfunction MovieList({ movies, onToggle, onRemove }) {\n if (movies.length === 0) {\n return

    No movies here yet.

    ;\n }\n return (\n \n );\n}\n\nexport default function App() {\n const [movies, setMovies] = useState(INITIAL);\n const [filter, setFilter] = useState('all');\n\n const left = movies.filter((m) => !m.watched).length;\n const visible = movies.filter((m) =>\n filter === 'all' ? true : filter === 'watched' ? m.watched : !m.watched,\n );\n\n function handleAdd(title) {\n setMovies([...movies, { id: nextId++, title, watched: false }]);\n }\n\n function handleToggle(id) {\n setMovies(movies.map((m) => (m.id === id ? { ...m, watched: !m.watched } : m)));\n }\n\n function handleRemove(id) {\n setMovies(movies.filter((m) => m.id !== id));\n }\n\n return (\n
    \n

    Watchlist

    \n

    {left} to watch

    \n \n \n \n
    \n );\n}\n"},"checks":[{"id":"count","test":"return text('#count') === '2 to watch';"},{"id":"add","test":"const titles = () => $$('li .title').map((s) => text(s)).join('|'); const row = (t) => $$('li').find((li) => text(li.querySelector('.title')) === t); const filterBtn = (t) => $$('.filters button').find((b) => text(b) === t); await input('#title', 'Paddington 2'); const __f = $('form'); if (__f) __f.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true })); else await click($('button')); await tick(20); return titles() === 'Arrival|Past Lives|Dune: Part Two|Paddington 2' && text('#count') === '3 to watch';"},{"id":"toggle","test":"const titles = () => $$('li .title').map((s) => text(s)).join('|'); const row = (t) => $$('li').find((li) => text(li.querySelector('.title')) === t); const filterBtn = (t) => $$('.filters button').find((b) => text(b) === t); await click(row('Past Lives').querySelector('.toggle')); return text('#count') === '2 to watch' && text(row('Past Lives').querySelector('.toggle')) === 'Watched';"},{"id":"filter","test":"const titles = () => $$('li .title').map((s) => text(s)).join('|'); const row = (t) => $$('li').find((li) => text(li.querySelector('.title')) === t); const filterBtn = (t) => $$('.filters button').find((b) => text(b) === t); await click(filterBtn('Watched')); if (titles() !== 'Arrival|Past Lives') return false; await click(filterBtn('To watch')); return titles() === 'Dune: Part Two|Paddington 2';"},{"id":"remove","test":"const titles = () => $$('li .title').map((s) => text(s)).join('|'); const row = (t) => $$('li').find((li) => text(li.querySelector('.title')) === t); const filterBtn = (t) => $$('.filters button').find((b) => text(b) === t); await click(row('Dune: Part Two').querySelector('.remove')); return titles() === 'Paddington 2' && text('#count') === '1 to watch';"},{"id":"empty","test":"const titles = () => $$('li .title').map((s) => text(s)).join('|'); const row = (t) => $$('li').find((li) => text(li.querySelector('.title')) === t); const filterBtn = (t) => $$('.filters button').find((b) => text(b) === t); await click(row('Paddington 2').querySelector('.remove')); return !$('ul') && text('.empty') === 'No movies here yet.' && text('#count') === '0 to watch';"}],"title":"اجمع تطبيق Watchlist","prompt":"

    كل الـ components مكتوبة، لكن App غير موصول. اجعله يعمل:

    \n\n

    غيّر App فقط. (الحفظ في localStorage مستبعد هنا: ساحة التجربة تحظر التخزين. في مشروع Vite الخاص بك، استخدم الـ module المسمّى storage.js من الدرس.)

    \n","hints":["استدعاءان لـ useState: useState(INITIAL) وuseState('all').","اشتقّ left وvisible منهما أثناء الـ render؛ لا يجب أن يكون أيٌّ منهما state.","ثلاثة معالجات: الإضافة ([...movies, { id: nextId++, title, watched: false }])، والتبديل (movies.map(…) مع spread)، والحذف (movies.filter(…)). مرّرها مع setFilter إلى الأسفل."],"explanation":"

    يملك App قطعتين بالضبط من الـ state. العدد والقائمة الظاهرة يُشتقّان في كل render، فلا يمكن أن يختلفا أبدًا عن الأفلام. وكل معالج يستبدل المصفوفة بدل تعديلها (spread للإضافة، وmap للتبديل، وfilter للحذف)، والأبناء لا يفعلون سوى استدعاء الدوال التي تُعطى لهم. لاحظ أن الحالة الفارغة وأزرار aria-pressed والحقل المشذَّب جاءت كلها مجانًا من components كتبتها من قبل: لم يتبقَّ إلا التوصيل.

    \n","checkLabels":{"count":"يعرض “2 to watch” في البداية","add":"إضافة “Paddington 2” تُلحقه بالقائمة وتحدّث العدد","toggle":"زر Mark watched على Past Lives يحدّث زرّه والعدد","filter":"الفلتران Watched وTo watch يعرضان الأفلام الصحيحة","remove":"زر Remove يحذف فيلمًا ويحدّث العدد","empty":"حذف آخر فيلم ظاهر يعرض “No movies here yet.”"}},"words":639,"readMinutes":4}