8 ایده پروژه React.js برای کمک به شما در شروع یادگیری با انجام کار عملی

یکی از بهترین راههای یادگیری انجام دادن پروژه است. اما غالباً توسعه دهندگان با این سوال بزرگ که “چه چیزی باید بسازم؟” مواجه میشوند؟

در اینجا 8 ایده پروژه آورده شده است که با خلاصه پروژه و ایده های طرح ارائه می شود تا با انجام کار یادگیری را شروع کنید.

این پیش نمایشی از  کتاب الکترونیکی 50 پروژه رایگان برای React & the Static Web است. شما می توانید 50 ایده کامل پروژه از جمله این 8 ایده را در  50reactprojects.com پیدا کنید.

Map Statistics Dashboard

Category: Business & Real-World

یک داشبورد نقشه ایجاد کنید که آمار و اطلاعات جغرافیایی COVID-19 را نشان دهد.

خلاصه:

مقابله با یک بیماری همه گیر جهانی به این معنی است که ویروس هایی مانند ویروس کرونا بر اساس موقعیت جغرافیایی بر جهان تأثیر می گذارند.

داشتن یک نقشه با تجزیه و تحلیل آمار هر کشور ، یک روش مفید برای تعیین توانایی مواردی است که بیشترین تأثیر را بر کشورها داشته اند.

سطح 1

ساده ترین راه برای دیدن آمار کشور به کشور ، داشتن نقشه ای است که می توانید با آمار هر کشور را در کنار آن کشور مرور کنید.

یک برنامه نقشه برداری ایجاد کنید که ازdisease.sh Coronavirus API برای اضافه کردن نشانگرها به نقشه برای هر کشور همراه با تعداد موارد COVID-19 استفاده کنید.

سطح 2

اگرچه داشتن آمار برای هر کشور مفید است ، اما بد نیست که بتوانید این آمار را با تعداد موارد در کل جهان مقایسه کنید.

داشبورد آماری را اضافه کنید که تعداد موارد COVID-19 در سراسر جهان و همچنین هر آمار مفید دیگری از API را نشان می دهد.

سطح 3

دریافت آمار فعلی روش خوبی برای درک وضعیت فعلی جهان است ، اما این چگونه از نظر تاریخی مقایسه می شود؟

از historical data API برای نشان دادن نمودارهایی روی داشبورد استفاده کنید که زمینه رشد و شیوع ویروس را فراهم می کند.

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

  • یک برنامه نقشه جدید ایجاد کنید
  • فراخوانی API داده های کشورها
  • نشانگرها را به نقشه اضافه کنید
  • آمار را به نشانگرها اضافه کنید
  • فراخوانی API داده های سراسری
  • داشبورد آمار ایجاد کنید
  • آمار جهانی را اضافه کنید
  • فراخوانی API داده های تاریخی
  • نمودارها را به نقشه اضافه کنید.

جعبه ابزار موردنیاز:

آموزشهای موردنیاز:

الهام گیری:

ایده طرح بندی

 

Musical Instrument

Category: Fun & Interesting

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

خلاصه

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

سطح 1

با استفاده از مرورگر و API های صوتی وب ، می توانیم صداهایی ایجاد کنیم که اگر کنار هم قرار بگیرند ، در حقیقت می توانند مانند موسیقی به نظر برسند.

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

سطح 2

اگرچه همه قبلاً ساز نمی نواختند ، مفهوم و رابط کاربری ساز مانند پیانو عموماً بیشتر از دسته دکمه ها بصری تر است.

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

مرحله 3

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

ضامن های جلوه ای ایجاد کنید که هنگام خاموش شدن صدای نت ها را تغییر دهد.

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

  • دکمه ها را ایجاد کنید
  • با کلیک روی آن صدا پخش شود
  • نت ها ها را در یک مقیاس مرتب کنید
  • طرح پیانو ایجاد کنید
  • رویدادهای صفحه کلید را تنظیم کنید
  • طرح جلوه ها را ایجاد کنید
  • جلوه های صوتی را تغییر دهید

جعبه ابزار موردنیاز:

آموزشهای موردنیاز:

الهام گیری:

ایده طرح بندی:

 

Blog

Category: Personal & Portfolio

وبلاگی ایجاد کنید که بتوانید از آن برای به اشتراک گذاشتن تجربیات و پروژه های شغلی خود استفاده کنید.

خلاصه:

با داشتن هر شغلی، داشتن یک وبلاگ برای به اشتراک گذاشتن تجربیات خود یک روش خوب است که به افراد اجازه می دهد از کار شما با خبر شوند و به دیگران کمک کند تا از تجربیات شما یاد بگیرند.

این همچنین راهی برای تقویت آموخته ها است تا بتوانید در آینده به آن مراجعه کنید.

سطح 1

برای اینکه بتوانید تجربیات خود را به اشتراک بگذارید ، به یک ساختار وب سایت نیاز دارید که به شما امکان ایجاد محتوای جدید و مدیریت محتوای موجود را می دهد.

یکی از راه های این کار ایجاد فایل های نشانه گذاری است که وب سایت شما از آنها برای ایجاد صفحات جدید و نمایش پست ها استفاده می کند.

با استفاده از پرونده های markdown به عنوان منبع محتوا ، وبلاگی ایجاد کنید.

سطح 2

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

یک سیستم مدیریت محتوا را ادغام کنید که به شما امکان می دهد محتوای جدید اضافه کنید یا با رابط کاربری خوب ویرایش موجود را انجام دهید.

سطح 3

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

یک برجسته کننده گرامری ادغام کنید که بلوک های کد را بیشتر خوانا می کند.

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

  • ایجاد یک وبلاگ
  • اولین محتوای استاتیک را اضافه کنید
  • منبع محتوای استاتیک
  • ادغام CMS
  • کد را به محتوا اضافه کنید
  • برجسته سازی گرامری را اضافه کنید

جعبه ابزار موردنیاز:

آموزشهای موردنیاز:

الهام گیری:

ایده طرح بندی:

 

Notebook

Category: Productivity

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

خلاصه

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

سطح 1

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

برای افزودن یادداشت های جدید و مشاهده آنها در یک لیست ، فرم ایجاد کنید.

سطح 2

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

توانایی برچسب گذاری یا دسته بندی یادداشت ها و ورودی برای جستجوی آنها را اضافه کنید.

سطح 3

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

برای ایجاد شبکه ای از افکار ، پیوند یادداشت های مبتنی بر تحقیق Roam را اضافه کنید.

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

  • فرم ایجاد کنید
  • یادداشت های جدید را ذخیره کنید
  • یادداشت ها را لیست کنید
  • برچسب ها یا دسته ها را اضافه کنید
  • جستجوی یادداشت را اضافه کنید
  • افزودن شبکه یادداشت

جعبه ابزار موردنیاز:

آموزشهای موردنیاز:

الهام گیری:

ایده طرح بندی:

 

Space Invaders

Category: Puzzles & Games

مهاجمان فضایی بازی تیرانداز فضاپیما را برای شلیک چندین موج از کشتی های دشمن ایجاد می کند.

خلاصه:

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

سطح 1

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

یک سفینه فضایی ایجاد کنید که بتواند به اطراف حرکت کند و به بیگانگان غیرفعال شلیک کند.

سطح 2

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

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

سطح 3

شما تنها هستید، اما خوشبختانه می توانید از برخی محافظت ها برخوردار شوید. شما سپرهایی دارید که می توانید در پشت آنها پنهان شوید و به شما در محافظت از دشمنان شما کمک می کنند.

چندین سپر در مقابل فضاپیمای بازیکن ایجاد کنید که می تواند میزان آسیب را کاهش دهد.

کارهایی که باید انجام دهید

  • یک بازی جدید ایجاد کنید
  • بیگانگان ساکن ایجاد کنید
  • یک فضاپیمای پخش کننده ایجاد کنید
  • کنترل های فضاپیما را اضافه کنید
  • سلاح فضاپیما را اضافه کنید
  • پیکربندی آسیب های بیگانه را انجام دهید
  • بیگانگان را به عقب برگردانید
  • بیگانگان را به حرکت وا دارد
  • فواصل بیگانه را اضافه کنید
  • سپرها را اضافه کنید

آموزشهای موردنیاز:

الهام گیری:

ایده طرح بندی:

 

Framework Theme

Category: Tools & Libraries

یک تم گتسبی ایجاد کنید که با چارچوب Tailwind CSS یک پروژه را تنظیم کند.

خلاصه

به عنوان توسعه دهنده ، معمولاً هر زمان که پروژه جدیدی ایجاد می کنیم ، باید یک سری مراحل مشابه را انجام دهیم. اما ابزارهایی مانند مضامین به ما اجازه می دهند آن مراحل را انتزاع کرده و آنها را به روشی آسان برای استفاده آماده کنیم که می تواند برای هر پروژه جدیدی کار کند.

سطح 1

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

این در واقع باعث می شود که واقعاً هر کاری را که می خواهیم در یک سایت گتسبی انجام دهیم ، انجام می دهد ، اما باعث می شود آن را برای هر سایت گتسبی قابل استفاده مجدد کنیم.

طرح زمینه جدید گتسبی ایجاد کنید که در صورت استفاده ، صفحه راهنمای سبک جدیدی را در هر پروژه ای که به آن اضافه شده ایجاد می کند.

سطح 2

هدف از مضامین فقط ایجاد صفحات نیست ، بلکه افزودن کارایی است که باعث تولید ما می شود. این شامل مواردی مانند چارچوب ها و پیکربندی های پروژه است.

یک چارچوب CSS به موضوع گتسبی اضافه کنید که به پروژه اضافه شده اجازه می دهد تا از آن چارچوب استفاده کند.

سطح 3

گاهی اوقات مضامین فقط به عنوان ابزار بهتر هستند ، گاهی اوقات نظر دادن مفید است. یکی از راه های افزودن قابلیت های مفید به چارچوب CSS ایجاد مولفه های سهام است.

با استفاده از چارچوب CSS که می تواند در پروژه مورد نظر اضافه شود ، مولفه های React قابل استفاده مجدد ایجاد کنید.

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

  • طرح زمینه جدیدی ایجاد کنید
  • پروژه را به عنوان مثال اضافه کنید
  • صفحه سبک جدید ایجاد کنید
  • چارچوب CSS را اضافه کنید
  • به عنوان مثال از CSS استفاده کنید
  • مولفه ها را ایجاد کنید
  • از مولفه ها استفاده کنید

ابزارهای موردنیاز:

آموزشهای موردنیاز:

الهام گیری:

ایده طرح بندی:

 

Webmentions

Category: Project Add-Ons

ادغام عنوان های وب را به وب سایتی اضافه کنید که تعاملات توییتر با وب سایت را نشان می دهد.

خلاصه

تعامل اجتماعی روشی تأثیرگذار برای جذب بیشتر مخاطب و گفتگو به موضوعاتی است که درباره آنها می نویسیم.

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

سطح 1

برای استفاده از Webmentions ، یک وب سایت باید با برچسب های متا برای ارائه اطلاعات پیکربندی شود.

متا تگ های مناسب را به یک وب سایت اضافه کنید و استفاده از آن را با webmention.io تأیید کنید.

سطح 2

Webmentions API راهی است برای دیدن برنامه ای ارتباطات در تعاملات اجتماعی از طریق URL وب سایت شما. به شما امکان می دهد نوع تعامل و حتی آواتار نمایه شخص را دریافت کنید.

یک وب سایت را به Webmentions متصل کنید و لیستی از تعاملات اجتماعی را به صفحات ارسال وبلاگ اضافه کنید.

سطح 3

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

یک پیوند اجتماعی اضافه کنید که با کلیک روی آن ، یک توئیت با پیوند به صفحه ایجاد شود.

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

  • اضافه کردن برچسب های متا به وب سایت
  • تأیید برچسب های متا
  • به Webmention متصل شوید
  • social را به Bridgy متصل کنید
  • تعاملات را فهرست کنید
  • دکمه توییت را اضافه کنید

ابزارهای موردنیاز:

آموزشهای موردنیاز:

الهام گیری:

ایده طرح بندی:

 

Product Hunt

Category: Clones

یک Clone Product Hunt ایجاد کنید که به شما امکان می دهد محصول جدیدی با رتبه بندی ارسال کنید.

خلاصه

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

در حالی که تعداد زیادی محصول در جهان وجود دارد ، جستجوی خوب و بد ممکن است دشوار باشد. ابزارهایی مانند Product Hunt بستری را برای یادگیری ابزارهای جدید و دریافت واکنش ها و نظرات دیگران فراهم می کنند.

سطح 1

مهمترین قسمت در مورد یادگیری محصولات جدید ، خود محصول است. ما می خواهیم بدانیم محصول چیست ، چه شکلی است و چگونه کار می کند.

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

سطح 2

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

این توانایی را به افراد اضافه کنید که درباره هر محصول نظرات خود را اضافه کنند.

سطح 3

مردم محصولات را دوست دارند ، بنابراین تعداد زیادی از آنها در جهان وجود دارد. راه های زیادی وجود دارد که سعی در مرتب سازی دستی دارند ، بنابراین ما به مکانیزمی برای جستجو و مرور نیاز داریم.

توانایی جستجوی محصولات و مرور بر اساس دسته را اضافه کنید.

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

  • وب سایت محصول ایجاد کنید
  • پایگاه داده ایجاد کنید
  • فرم محصول را اضافه کنید
  • افزودن محصول به پایگاه داده
  • درخواست محصول برای صفحه
  • فرم بررسی را اضافه کنید
  • بررسی ها را به پایگاه داده اضافه کنید
  • نظرات را به محصول اضافه کنید
  • جستجوی محصول را اضافه کنید
  • دسته های محصول را اضافه کنید

ابزارهای موردنیاز:

آموزشهای موردنیاز:

ایده طرح بندی:

 

پروژه های بیشتر:

اگر ایده های بیشتری برای پروژه می خواهید ، به آدرس 50 Projects for React & the Static web! سری بزنید.

 

منبع:

https://www.freecodecamp.org/news/8-reactjs-project-ideas-to-start-learning-by-doing/

 

مقاله قبلی:

 

کلمات کلیدی: reactjs، react، مقاله، وب، طراحی وب، مقالات، ایده، پروژه، ایده پروژه، یادگیری، عملی.

 

ما را در شبکه های اجتماعی دنبال کنید:

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

اسکرول به بالا