React یک کتابخانه قدرتمند JavaScript برای ایجاد رابط های کاربر تعاملی است. هم برای مبتدیان و هم برای توسعه دهندگان با تجربه ، کار روی پروژه های دنیای واقعی یکی از بهترین راه های یادگیری و مهارت های سخت است. در زیر یک لیست سرپوشیده از 23 پروژه React قرار دارد که هر یک برای آموزش جنبه های مختلف توسعه React طراحی شده اند:
کد منبع موجود در زیر ، فراموش نکنید که هر ایده را اظهار نظر کنید
-
یادآوری تولد: برنامه ای ایجاد کنید که لیستی از روزهای تولد افراد را نشان دهد و یادآوری می کند.
-
تورها: یک برنامه مدیریت تور را تهیه کنید که تورهای مختلفی را با جزئیات به نمایش بگذارد و به کاربران امکان رزرو آنها را می دهد.
-
بررسی: مؤلفه ای بسازید که بررسی های کاربر را نشان می دهد ، از جمله رتبه بندی و نظرات.
-
آکاردئون: یک مؤلفه آکاردئون را برای نشان دادن و پنهان کردن بخش های محتوا اجرا کنید.
-
منو: یک منوی پویا را طراحی کنید که بر اساس تعامل کاربر یا تغییر داده ها به روز شود.
-
زبانه: برای سازماندهی محتوا در نمای جداگانه ، یک رابط زبانه ایجاد کنید.
-
کشویی: برای نمایش تصاویر یا محتوا ، یک کشویی تصویر یا چرخ فلک بسازید.
-
لرم بسیار ژنراتور: ابزاری را ایجاد کنید که متن نگهدارنده مکان را برای استفاده در طرح ها ایجاد کند.
-
مولد رنگ: برنامه ای ایجاد کنید که پالت های رنگی یا رنگ های تصادفی را برای اهداف طراحی ایجاد کند.
-
غنچه مواد غذایی: یک برنامه لیست مواد غذایی ساده ایجاد کنید که در آن کاربران بتوانند موارد را اضافه ، ویرایش و حذف کنند.
-
ناوبر: یک نوار ناوبری پاسخگو را طراحی کنید که با اندازه های مختلف صفحه سازگار باشد.
-
نوار کناری و معین: اجرای یک ناوبری نوار کناری و گفتگوی معین برای محتوای یا اقدامات اضافی.
-
چرخ: برای مدیریت موارد انتخاب شده برای خرید ، یک جزء سبد خرید ایجاد کنید.
-
منوی نوار: منویی را با الهام از وب سایت Stripe ، با استفاده از کشویی و انیمیشن های پیچیده تهیه کنید.
-
کلون بدون شک: ساخت یک کلون از وب سایت Unsplash ، به کاربران امکان جستجو و مشاهده تصاویر را می دهد.
-
کوکتل: برنامه ای ایجاد کنید که دستور العمل های کوکتل را نشان دهد و به کاربران امکان جستجوی نوشیدنی را می دهد.
-
پیش نمایش Markdown: یک ویرایشگر Live Markdown را تهیه کنید که پیش نمایش HTML ارائه شده در زمان واقعی است.
-
ژنراتور شخص تصادفی: ابزاری بسازید که پروفایل های کاربر تصادفی را با جزئیاتی مانند نام ، ایمیل و آدرس ایجاد کند.
-
صفحه بندی: اجرای صفحه بندی برای حرکت از طریق مجموعه های زیادی از داده ها یا محتوا.
-
ضامله حالت تاریک: یک ویژگی را اضافه کنید تا بین تم های سبک و تاریک در برنامه خود تغییر دهید.
-
پایگاه داده: برنامه ای ایجاد کنید که اطلاعات مربوط به فیلم ها را از جمله عملکرد جستجو نشان دهد.
-
کلون اخبار هکر: یک کلون از وب سایت اخبار هکر بسازید و داستانهای برتر و نظرات خود را نمایش دهید.
-
برنامه مسابقه: یک برنامه مسابقه با سؤالات چند گزینه ای و ردیابی نمره ایجاد کنید.
این پروژه ها طیف گسترده ای از ویژگی ها را پوشش می دهند و به شما در تمرین مفاهیم مختلف واکنش ، از مدیریت دولت گرفته تا روشهای چرخه عمر مؤلفه کمک می کنند. با کار کردن از طریق این پروژه ها ، تجربه دست و پنجهمی را به دست می آورید و درک خود را از توسعه React عمیق تر می کنید.
برای کد منبع: کد منبع رایگان را از اینجا دریافت کنید
خیلی ممنون از وقت شما
