حسنی در دوران تنبلیاش، همهی فیلمهای برتر سینمای جهان را مشاهده کرد و علاقهی او به سینما از همانجا آغاز شد.
بعد از سالها، او به تازگی یک توسعهدهندهی Front-end شده است و به او پیشنهاد شده که سایت سینما شلمرود را پیادهسازی کند. اون نیز به دلیل علاقهی زیادی که به سینما دارد این پروژه را به سرعت قبول کرد.
این پروژه یک وبسایت ساده برای نمایش اطلاعات فیلمهای در حال اکران است. در صفحهی اصلی، لیست فیلمها به صورت تعدادی کارت به نمایش در میآید.
و با کلیک روی نام هر فیلم به صفحهی جزئیات آن فیلم هدایت میشویم.
از آنجایی که حسنی کار با React را یاد گرفته، پروژه را با این کتابخانه آغاز میکند
اما در میانهی کار متوجه میشود که این کتابخانه به تنهایی کافی نیست
و باید راهی برای مدیریت مسیر (Route
) های مختلف پیدا کند.
پیشنهاد ما به او استفاده ازreact-router-dom
است اما حسنی هیچ دانشی از این کتابخانه ندارد، او را در این مسیر کمک کنید.
پروژه اولیه را از اینجا دانلود کنید.
برای اجرای پروژه، باید NodeJS
و npm
(یا pnpm
) را از قبل نصب کرده باشید.
cinema
، دستور npm install
را برای نصب نیازمندیها اجرا کنید.pnpm install
استفاده کنید.npm run server
را برای راهاندازی سرور اجرا کنید.npm start
را برای راهاندازی کلاینت اجرا کنید.http://localhost:3000/
میتوانید نتیجه را ببینید.هدف این سؤال، سنجش مهارت شما در استفاده از کتابخانهی react-router-dom
است.
کارهایی که باید انجام دهید در ادامه آمده است.
Route
) های صحیح در مؤلفهی App
به طوری که با دسترسی به هر مسیر مؤلفهی مشخصشده نمایش داده شود./
: مؤلفهی Movies
/movies/{movie_id}
: مؤلفهی MovieDetail
NotFound
MovieCard
باید لینک به صفحهی جزئیات همان فیلم باشد.MovieDetail
یکی از متدهای lifecycle
مناسب را override
کنید
به طوری که بلافاصله پس از load
شدن مؤلفه اطلاعات مربوط به فیلم را از سرور دریافت
و state
مولفه را بروز کنید.دریافت اطلاعات جزئی یک فیلم از سرور:
localhost:9000/movies/{movie_id}
GET
App.js
، MovieCard.js
و MovieDetail.js
هستید.node_modules
در فایل ارسالی نباشد.