آیا تا به حال یک فیلم جذاب تماشا کرده اید یا از یک محصول فوق العاده استفاده کرده اید و می خواهید تجربه خود را به اشتراک بگذارید؟ در دنیای امروز، بازخورد بسیار مهم است و رتبه بندی ها مانند ارز هستند.

سیستم‌های رتبه‌بندی همه جا هستند، از رتبه‌بندی ستاره‌های کلاسیک در وب‌سایت‌های نقد فیلم گرفته تا نظرات شست بالا/پایین در پلتفرم‌های پخش جریانی. آنها انتخاب های ما را هدایت می کنند، نظرات ما را شکل می دهند و در نهایت بر موفقیت محصولات و خدمات تأثیر می گذارند.

در این مقاله، با استفاده از الگوی Compound Component در React، یک جزء رتبه بندی با موضوع فیلم ایجاد می کنیم. من شما را از طریق ساختار بخشی، مدیریت وضعیت آن، و طراحی یک رابط کاربری تعاملی که جوهر رتبه بندی را به تصویر می کشد، راهنمایی می کنم.

پیش نیازها

در حالی که این مقاله تا حد امکان در سطح پایین طراحی شده است، داشتن درک پایه از الگوی اجزای ترکیبی React مفید است.

اگر تجربه ای در مورد آن ندارید، نگران نباشید - من شما را دارم! فقط کافی است به این مقاله اجزای ترکیبی بروید، جایی که من آن را به طور گسترده تر تجزیه و تحلیل می کنم. سایر پیش نیازها عبارتند از.

مبانی HTML، CSS و Tailwind CSS

مبانی جاوا اسکریپت، React و React Hooks.

آنچه را پوشش خواهیم داد:

درک اجزای رتبه بندی
- آنچه شامل یک جزء رتبه بندی است
- مزایای کامپوننت رتبه بندی

چگونه یک جزء رتبه بندی بسازیم - روش واکنش منظم
- روش اجزای مرکب

نحوه ارتقاء مولفه رتبه بندی

و فقط برای سرگرمی

نتیجه

درک اجزای رتبه بندی

مولفه های رتبه بندی بخشی ضروری از برنامه های کاربردی وب مدرن هستند، به ویژه در زمینه هایی که بازخورد کاربر حیاتی است. این مولفه ها یک رابط کاربر پسند برای افراد فراهم می کند تا نظرات خود را اغلب به روشی قابل اندازه گیری بیان کنند.

مولفه رتبه بندی چه چیزی را شامل می شود؟

جزء رتبه بندی یک عنصر رابط کاربری است که به کاربران اجازه می دهد تا رتبه بندی را معمولاً در مقیاس ثابت ارائه دهند. در اینجا عناصر معمولی که یک جزء رتبه بندی را تشکیل می دهند آورده شده است:

نمادها یا نمادها : اینها نمایش های بصری مقیاس رتبه بندی هستند. مثال‌های رایج عبارتند از ستاره‌ها، قلب‌ها، شست‌ها یا مقادیر عددی.

حالت های تعاملی : این مؤلفه ها اغلب بر اساس تعامل کاربر، مانند شناور کردن یا کلیک کردن، ظاهر خود را تغییر می دهند.

مکانیسم بازخورد : برخی از اجزای رتبه‌بندی بازخورد فوری را نشان می‌دهند، مانند برجسته کردن نمادهای انتخاب شده یا نشان دادن مقدار رتبه‌بندی.

آپشن های دسترس‌پذیری : اطمینان از اینکه مؤلفه برای همه کاربران در دسترس است، از جمله پیمایش صفحه کلید و صفحه‌خوان‌ها، بسیار مهم است.

بازخورد سفارشی : برخی از اجزای رتبه بندی شامل یک ناحیه متنی هستند که به کاربران اجازه می دهد نظر بدهند. این بازخورد به روشن شدن دلایل رتبه بندی آنها کمک می کند و آنها را قادر می سازد تا هر مشکلی را که با آن مواجه می شوند مطرح کنند.

مزایای کامپوننت های رتبه بندی

مولفه های رتبه بندی مزایای متعددی را هم برای کاربران و هم برای توسعه دهندگان ارائه می دهند:

تعامل کاربر : آنها ارائه بازخورد را برای کاربران آسان و لذت بخش می کنند، که می تواند تعامل را افزایش دهد.

بازخورد قابل سنجش : رتبه‌بندی‌ها داده‌های واضح و قابل اندازه‌گیری را ارائه می‌دهند که به راحتی می‌توان آن‌ها را برای سنجش رضایت کاربر تحلیل کرد.

تصمیمات راهنما : برای سایر کاربران، رتبه‌بندی به تصمیم‌گیری آگاهانه درباره فیلم‌ها، محصولات، خدمات و موارد دیگر کمک می‌کند.

بهبود محصولات : برای کسب‌وکارها، رتبه‌بندی برای درک اولویت‌های کاربر و زمینه‌های بهبود بسیار ارزشمند است.

چگونه یک جزء رتبه بندی بسازیم

من یک مخزن GitHub با فایل های شروع کننده برای سرعت بخشیدن به کار آماده کرده ام. به سادگی این مخزن را شبیه سازی کنید و وابستگی ها را نصب کنید.

را شروع کنیم" width="498" height="277" loading="lazy">

در این بخش، یک جزء رتبه بندی واحد را با React معمولی می سازیم و سپس آن را با الگوی CC بازسازی می کنیم.

روش واکنش منظم

احتمالاً از خود می‌پرسید که چرا ما برای اولین بار در ساخت کامپوننت بدون الگوی کامپوننت دچار مشکل شده‌ایم.

خوب، در حین یادگیری الگوی کامپوننت، من به سختی سرم را به طور کامل در اطراف منطق قرار دادم و در نهایت با چند اشکال مواجه شدم که می‌توانستند با درک بهتر از آن جلوگیری کنیم.

برای کمک به این موضوع، متوجه شدم که ساختن یک نسخه کوچکتر از ویژگی قبل از اجرای کامل CCP، در نهایت روند توسعه من را تسریع کرد.

برای شروع، یک RatingComponent ایجاد کنید و آن را به جزء App خود وارد کنید.

 import RatingComponent from "./RatingComponent"; import { Toaster } from "react-hot-toast"; export default function App() { return ( <main className=" bg-[#EAF2F8] gap-4 min-h-[100dvh] flex justify-center items-center flex-col"> <Toaster /> <h1 className="text-3xl ">My Ratings Component</h1> <RatingComponent /> </main> ); }

سپس به RatingComponent خود بروید و مقداری دیگ بخار اولیه را برای ایجاد یک رابط کاربری رتبه بندی استاندارد اضافه کنید.

 import { FiStar } from "react-icons/fi"; export default function RatingComponent() { return ( <div className="flex bg-white items-center justify-between border border-black rounded-md min-w-[600px] p-2"> <div className="p-2 text-base font-semibold"> Intersteller <span className="text-gray-400 ">(2014)</span> </div> <div className="flex gap-4 p-2"> {Array.from({ length: 5 }).map((_, index) => ( <div key={index} className="flex justify-center"> <FiStar size={25} strokeWidth={0} fill={"gold"} cursor="pointer" className="star" /> </div> ))} </div> </div> ); }

این باعث می شود UI شما به این شکل باشد:

در حال حاضر، UI شما ثابت است و راهی برای تغییر مقادیر رتبه بندی ندارد. برای گفت ن تعامل، حالتی ایجاد کنید که مقدار اولیه رتبه را در خود نگه دارد.

 const [stars, setStarts] = useState(0);

سپس کنترل کننده تنظیمات را وصل کنید تا وقتی روی یک ستاره کلیک می کنید، مقدار ستاره ها به روز شود.

 <FiStar size={25} strokeWidth={0} fill={"gold"} cursor="pointer" className="star" onClick={() => setStarts(index + 1)} />

توجه : ما 1 را به مقدار مجموعه اضافه می کنیم زیرا آرایه ها مبتنی بر صفر هستند.

برای تأیید مقدار ستاره ای که روی کلیک تنظیم شده است، یک مقدار پر پویا به هر ستاره اضافه کنید.

 <FiStar size={25} strokeWidth={0} fill={index + 1 <= stars ? "gold" : "#D6DBDF"} cursor="pointer" className="star" onClick={() => setStarts(index + 1)} />

که نتایج زیر را به همراه دارد:

برای بهبود بیشتر بازخورد کاربران، می‌توانیم معنای هر ستاره را تبدیل کرده و به آنها نمایش دهیم.

با ایجاد مجموعه ای از برچسب ها و رنگ ها برای ستاره ها شروع کنید.

 const ratingData = [ { label: "Poor", color: "#E74C3C" }, { label: "Bad", color: "#E59866" }, { label: "Okay", color: "#F7DC6F" }, { label: "Good", color: "#76D7C4" }, { label: "Great", color: "#229954" }, ];

سپس این داده‌ها را اعمال کنید تا هر چه رتبه‌بندی‌های فعلی را نشان دهد.

 export default function RatingComponent() { const [stars, setStarts] = useState(0); const ratingData = [ { label: "Poor", color: "#E74C3C" }, { label: "Bad", color: "#E59866" }, { label: "Okay", color: "#F7DC6F" }, { label: "Good", color: "#76D7C4" }, { label: "Great", color: "#229954" }, ]; return ( <div className="flex bg-white items-center justify-between border border-black rounded-md min-w-[600px] p-2"> <div className="p-2 text-base font-semibold"> Intersteller <span className="text-gray-400 ">(2014)</span> </div> <div className="flex gap-4 p-2"> {Array.from({ length: 5 }).map((_, index) => ( <div key={index} className="flex justify-center"> <FiStar size={25} strokeWidth={0} fill={index + 1 <= stars ? "gold" : "#D6DBDF"} cursor="pointer" className="star" onClick={() => setStarts(index + 1)} /> </div> ))} </div> {stars > 0 ? ( <div className="font-semibold min-w-[60px] p-2" style={{ color: ratingData[stars - 1]?.color }}> {ratingData[stars - 1]?.label} </div> ) : ( <p className="font-semibold text-gray-400">No ratings yet...</p> )} </div> ); }

که این را می دهد:

و تا-دا! جزء رتبه‌بندی‌های شما کاملاً کاربردی است و هر کاربر می‌تواند به طور مؤثر از آن برای ارائه یک تحلیل دقیق استفاده کند.

روش اجزای مرکب

برای این روش، ما آن را یک گام فراتر می‌گذاریم و چندین مؤلفه رتبه‌بندی ایجاد می‌کنیم، زیرا اگر بیشترین انجام را نداشته باشیم، چه می‌کنیم؟ 😌

با ایجاد زمینه برای کامپوننت شروع کنید.

 const RatingContext = createContext(); const MultiRatingsComponent = ({ children, ratingsData, }) => { return ( <RatingContext.Provider value={{ ratingsData, }}> <div className="relative">{children}</div> </RatingContext.Provider> ); };

از آنجایی که قرار است با مجموعه‌های متعددی از داده‌ها برای ایجاد مؤلفه‌های رتبه‌بندی متعدد کار کنیم، ساختار داده‌های ارسالی متفاوت خواهد بود.

 export default function App() { const multiRatings = [ { name: "The Dark Knight", year: 2008, length: 5, rating: 0 }, { name: "Knives Out", year: 2019, length: 5, rating: 0 }, { name: "Serendipity", year: 2001, length: 5, rating: 0 }, { name: "The Dressmaker", year: 2015, length: 5, rating: 0 }, { name: "The Grand Budapest Hotel", year: 2015, length: 5, rating: 0 }, ]; const [ratings, setRatings] = useState(multiRatings); return ( <main className="bg-[#EAF2F8] gap-4 min-h-[100vh] flex justify-center items-center flex-col"> <Toaster /> <h1 className="text-3xl">My Ratings Component</h1> <MultiRatingsComponent ratingsData={ratings}> </MultiRatingsComponent> </main> ); }

در مرحله بعد، بقیه کامپوننت مورد نیاز برای اینکه رابط کاربری ما شبیه کامپوننت واحدی باشد که قبلاً ایجاد کرده بودیم را بسازید.

 const MultiRatingsComponent = ({ children, ratingsData, }) => { const [userFeedback, setUserFeedback] = useState([]); return ( <RatingContext.Provider value={{ ratingsData, }}> <div className="relative ">{children}</div> </RatingContext.Provider> ); }; const Label = ({ name, year }) => { return ( <div className="flex flex-col justify-center gap-1 text-base font-semibold min-w-[220px]"> <h3>{name}</h3> <span className=" text-[12px] text-[#AAB7B8]">{year}</span> </div> ); }; const RatingsContainer = () => { const { ratingsData, updateRating } = useContext(RatingContext); return ( <div className="min-w-[600px] bg-white rounded-md flex flex-col"> {ratingsData && ratingsData.map((singleData, index) => ( <div key={index} className="flex items-center px-4 py-6 border-[#f7f8f9] gap-[75px] border-[0.5px]"> <Label name={singleData.name} year={singleData.year} /> <div className="flex gap-4 "> {Array.from({ length: 5 }).map((_, starIndex) => ( <RatingIcon key={starIndex} filled={starIndex < singleData.rating} /> ))} </div> </div> ))} </div> ); }; const RatingIcon = ({ filled }) => { return ( <FiStar size={25} strokeWidth={0} fill={filled ? "gold" : "#AAB7B8"} cursor="pointer" className="star" /> ); };

سپس هر جزء را به والد خود اختصاص دهید تا جزء مرکب را تشکیل دهد.

 MultiRatingsComponent.Label = Label; MultiRatingsComponent.RatingsContainer = RatingsContainer; MultiRatingsComponent.RatingIcon = RatingIcon;

برای مشاهده رابط کاربری مؤلفه خود، RatingsContainer در والد آن (جزء App ) قرار دهید.

 export default function App() { const multiRatings = [ { name: "The Dark Knight", year: 2008, length: 5, rating: 0 }, { name: "Knives Out", year: 2019, length: 5, rating: 0 }, { name: "Serendipity", year: 2001, length: 5, rating: 0 }, { name: "The Dressmaker", year: 2015, length: 5, rating: 0 }, { name: "The Grand Budapest Hotel", year: 2015, length: 5, rating: 0 }, ]; const [ratings, setRatings] = useState(multiRatings); return ( <main className="bg-[#EAF2F8] gap-4 min-h-[100vh] flex justify-center items-center flex-col"> <Toaster /> <h1 className="text-3xl">My Ratings Component</h1> <MultiRatingsComponent ratingsData={ratings}> <MultiRatingsComponent.RatingsContainer /> </MultiRatingsComponent> </main> ); }

با این کار، UI شما باید به شکل زیر باشد:

برای گفت ن عملکرد قبلی‌مان که می‌توانستیم رتبه‌بندی‌ها را تنظیم کنیم، و همچنین معنای آنها را از طریق برچسب‌ها نشان دهیم، با ایجاد یک تابع به‌روزرسانی در مؤلفه App شروع کنید.

 const updateRating = (index, newRating) => { setRatings((prevRatings) => prevRatings.map((r, i) => (i === index ? { ...r, rating: newRating } : r)) ); console.log(ratings); };

این تابع از شاخص مؤلفه کلیک شده برای یافتن داده های خاص استفاده می کند، ویژگی رتبه بندی را بر اساس ستاره ای که روی آن کلیک می کنید تغییر می دهد.

برای استفاده از آن، آن را از طریق props به MultiRatingsComponent منتقل کنید، سپس آن را با همه فرزندانش با زمینه اش به اشتراک بگذارید.

 const MultiRatingsComponent = ({ children, ratingsData, updateRating, }) => { const [userFeedback, setUserFeedback] = useState([]); return ( <RatingContext.Provider value={{ ratingsData, updateRating, }}> <div className="relative ">{children}</div> </RatingContext.Provider> ); };

سپس آن زمینه را در RatingsContainer مصرف کنید.

 const RatingsContainer = () => { const { ratingsData, updateRating } = useContext(RatingContext); return ( <div className="min-w-[600px] bg-white rounded-md flex flex-col"> {ratingsData && ratingsData.map((singleData, index) => ( <div key={index} className="flex items-center px-4 py-6 border-[#f7f8f9] gap-[75px] border-[0.5px]"> <Label name={singleData.name} year={singleData.year} /> <div className="flex gap-4 "> {Array.from({ length: 5 }).map((_, starIndex) => ( <RatingIcon key={starIndex} filled={starIndex < singleData.rating} onClick={() => updateRating(index, starIndex + 1)} /> ))} </div> </div> ))} </div> ); };

درست قبل از اینکه رابط کاربری را تحلیل کنید، یک جزء RatingsLabel ایجاد کنید تا معنای هر ستاره را درست در کنار هر ستاره نشان دهد.

 const RatingLabel = ({ ratingValue }) => { const ratingLabel = [ { label: "Poor", color: "#E74C3C" }, { label: "Bad", color: "#E59866" }, { label: "Okay", color: "#F7DC6F" }, { label: "Good", color: "#76D7C4" }, { label: "Great", color: "#229954" }, ]; return ( <> {ratingValue > 0 ? ( <div className="font-semibold min-w-[60px] p-2" style={{ color: ratingLabel[ratingValue - 1]?.color }}> {ratingLabel[ratingValue - 1]?.label} </div> ) : ( <p className="font-semibold text-gray-400">No ratings yet...</p> )} </> ); }; MultiRatingsComponent.RatingLabel = RatingLabel;

و آن را در RatingsContainer لانه کنید.

 const RatingsContainer = () => { const { ratingsData, updateRating } = useContext(RatingContext); return ( <div className="min-w-[600px] bg-white rounded-md flex flex-col"> {ratingsData && ratingsData.map((singleData, index) => ( <div key={index} className="flex items-center px-4 py-6 border-[#f7f8f9] gap-[75px] border-[0.5px]"> <Label name={singleData.name} year={singleData.year} /> <div className="flex gap-4 "> {Array.from({ length: 5 }).map((_, starIndex) => ( <RatingIcon key={starIndex} filled={starIndex < singleData.rating} onClick={() => updateRating(index, starIndex + 1)} /> ))} </div> <RatingLabel ratingValue={singleData.rating} /> </div> ))} </div> ); };

درامول، لطفا…

با این پیاده سازی، شما به راحتی می توانید چندین نوار رتبه بندی داشته باشید، و مدیریت هر حالت کار سختی خواهد بود.

نحوه ارتقاء مؤلفه رتبه بندی

افسوس، یک قابلیت وجود دارد که ما آن را اجرا نکرده ایم. هیچ جزء رتبه‌بندی عالی بدون فرمی که به کاربران اجازه می‌دهد نظرات خود را پس از چند ستاره بیان کنند، کامل نمی‌شود.

برای ایجاد یک کامپوننت، یک فرم و یک حالت برای مدیریت آن فرم ایجاد کنید.

 const Comment = () => { const [comment, setComment] = useState(""); return ( <div className="w-full mt-2 "> <label className="p-2 text-base font-semibold ">Comment</label> <form className="relative " onSubmit={(e)=> handleSubmit(e)}> <textarea name="comment" placeholder="Add a review" value={comment} onChange={(e) => setComment(e.target.value)} className="w-full p-4 rounded-md resize-none min-h-20"></textarea> <button className="font-semibold absolute -bottom-1/2 right-0 border bg-[#5499C7] transition-all hover:bg-[#21618C] rounded-md py-2 px-4 text-white"> Submit </button> </form> </div> ); }; MultiRatingsComponent.Comment = Comment;

سپس یک تابع handler برای آن فرم ایجاد کنید.

 const handleSubmit = (e) => { e.preventDefault(); if (comment.length < 3) { toast.error("Please add more text"); return; } // Clear the comment input setComment(""); };

برای مشاهده نظرات پس از ارسال فرم توسط کاربر، وضعیتی ایجاد کنید تا آن نظرات در زمینه والد نگهداری شود.

 const MultiRatingsComponent = ({ children, ratingsData, updateRating, }) => { const [userFeedback, setUserFeedback] = useState([]); return ( <RatingContext.Provider value={{ ratingsData, updateRating, userFeedback, setUserFeedback, }}> <div className="relative ">{children}</div> </RatingContext.Provider> ); };

سپس آن زمینه را مصرف کنید و داده های ارسالی را در زمینه والد ذخیره کنید.

 const { userFeedback, setUserFeedback,} = useContext(RatingContext); const handleSubmit = (e) => { e.preventDefault(); if (comment.length < 3) { toast.error("Please add more text"); return; } // Create a new feedback object const newFeedback = { comment }; // Update the userFeedback state setUserFeedback([...userFeedback, newFeedback]); // Clear the comment input setComment(""); };

برای مشاهده تمام نظرات ارسال شده توسط کاربران، یک مؤلفه UserFeedback ایجاد کنید:

 const UserFeedback = () => { const { userFeedback } = useContext(RatingContext); return ( <div className="absolute top-0 px-8 py-2 translate-x-full bg-white rounded-md max-w-[300px] -right-5"> {userFeedback.length > 0 ? ( <> <h3 className="mb-2 text-xl font-semibold"> Here are what user think </h3> <ul> {userFeedback.map((user, index) => ( <li key={index} className="px-2 "> <h4> {index + 1}.{" "} <span className="font-semibold ">{user.name} </span> --{" "} {user.text} </h4> </li> ))} </ul> </> ) : ( <p className="font-semibold ext-xl">No user feedback yet...</p> )} </div> ); }; MultiRatingsComponent.UserFeedback = UserFeedback;

این مؤلفه حالت نگه داشتن نظرات کاربر را مصرف می کند و آنها را روی صفحه نمایش می دهد.

درست قبل از اینکه آن را آزمایش کنیم، می‌خواستم هر زمان که کسی اسناد شما را مشاهده می‌کند، یک نکته جالب را که از Google متوجه می‌شوم تکرار کنم. آنها به هر کاربر یک نام تصادفی اختصاص می دهند و ما نیز همینطور.

به مؤلفه App خود بروید و این آرایه را ایجاد کنید:

 const randomNames = [ "Anonymous Llama", "Mysterious Moose", "Stealthy Sloth", "Phantom Panda", "Incognito Iguana", "Unknown Unicorn", "Enigmatic Elephant", "Ghostly Giraffe", "Shadowy Shark", "Cryptic Cobra", "Silent Swan", "Nameless Narwhal", "Obscure Octopus", "Unseen Uakari", "Hidden Hedgehog", "Masked Macaw", "Veiled Vulture", "Concealed Chameleon", "Covert Cockatoo", "Invisible Impala", ];

سپس آن را از طریق props به MultiRatingsComponent خود منتقل کنید.

 const MultiRatingsComponent = ({ children, ratingsData, updateRating, randomNames, }) => { const [userFeedback, setUserFeedback] = useState([]); return ( <RatingContext.Provider value={{ ratingsData, updateRating, userFeedback, setUserFeedback, randomNames, }}> <div className="relative ">{children}</div> </RatingContext.Provider> ); };

در نهایت، تابع کنترل فرم خود را تغییر دهید تا یک نام تصادفی همراه با نظر ارسال شود.

 const Comment = () => { const [comment, setComment] = useState(""); const { userFeedback, setUserFeedback, randomNames } = useContext(RatingContext); const handleSubmit = (e) => { e.preventDefault(); if (comment.length < 3) { toast.error("Please add more text"); return; } // Generate a random name between 1 and the length of the array const randomName = randomNames[Math.floor(Math.random() * randomNames.length)]; // Create a new feedback object const newFeedback = { name: randomName, comment }; // Update the userFeedback state setUserFeedback([...userFeedback, newFeedback]); // Clear the comment input setComment(""); };

در نهایت، مولفه‌های Comment و UserFeedback را در والد خود در داخل مؤلفه App رندر کنید.

 export default function App() { const multiRatings = [ { name: "The Dark Knight", year: 2008, length: 5, rating: 0 }, { name: "Knives Out", year: 2019, length: 5, rating: 0 }, { name: "Serendipity", year: 2001, length: 5, rating: 0 }, { name: "The Dressmaker", year: 2015, length: 5, rating: 0 }, { name: "The Grand Budapest Hotel", year: 2015, length: 5, rating: 0 }, ]; const randomNames = [...]; const [ratings, setRatings] = useState(multiRatings); const updateRating = (index, newRating) => { setRatings((prevRatings) => prevRatings.map((r, i) => (i === index ? { ...r, rating: newRating } : r)) ); }; return ( <main className="bg-[#EAF2F8] gap-4 min-h-[100vh] flex justify-center items-center flex-col"> <Toaster /> <h1 className="text-3xl">My Ratings Component</h1> <MultiRatingsComponent ratingsData={ratings} updateRating={updateRating} randomNames={randomNames}> <MultiRatingsComponent.RatingsContainer /> <MultiRatingsComponent.Comment /> <MultiRatingsComponent.UserFeedback /> </MultiRatingsComponent> </main> ); }

و… پرستو!

جزء رتبه بندی شما با قابلیت گفت ه نظرات تکمیل شده است. ⭐
سواری در طول این ساخت را چگونه ارزیابی می کنید؟ 5 ستاره؟ 😉

اطلاعات تکمیلی

در اینجا پیوندهایی به تمام منابعی که ممکن است از این مقاله نیاز داشته باشید وجود دارد.

فایل های شروع کننده

الگوی واکنش منظم

الگوی اجزای مرکب

و فقط برای سرگرمی ...

از آنجایی که ما یک مؤلفه رتبه بندی با محوریت فیلم ها ایجاد کردیم، در اینجا 5 فیلمی که به نظر من ارزش 5 ستاره را بدون ترتیب خاصی دارند، آورده شده است.

هتل بزرگ بوداپست (کمدی/جنایی)

The Magnificent Seven (وسترن/اکشن)

Django Unchained (وسترن/اکشن)

فورد در مقابل فراری (ورزشی/اکشن)

آغاز (اکشن/علمی تخیلی)

نتیجه

در پایان، ایجاد یک جزء رتبه بندی با موضوع فیلم با استفاده از الگوی Compound Component در React یک موفقیت مطمئن برای پروژه های شما است. این رویکرد شما را قادر می سازد یک پایگاه کد براق، مدولار و قابل نگهداری ایجاد کنید.

تسلط بر این تکنیک تضمین می کند که سیستم رتبه بندی شما هم کاربردی و هم برای آینده آماده است. چراغ ها، دوربین، اکشن - ممکن است سفر برنامه نویسی شما با تحلیل های پنج ستاره و تشویق های ایستاده خیره شود!

مقالات من را دوست دارید؟

با خیال راحت برای من قهوه بخرید تا مغزم را درگیر نگه دارم و مقالات بیشتری از این قبیل ارائه دهید.

اطلاعات تماس

می خواهید به من وصل شوید یا با من تماس بگیرید؟ در صورت تمایل به من در مورد موارد زیر ضربه بزنید:

توییتر / X: @jajadavid8

لینکدین: دیوید جاجا

ایمیل: Jajadavidjid@gmail.com

خبرکاو