8 أفكار لمشروع React.js لمساعدتك على بدء التعلم من خلال العمل

من أفضل الطرق للتعلم هو العمل. ولكن غالبًا ما يواجه المطورون صعوبة في التعامل مع السؤال الكبير "ما الذي يجب أن أقوم ببنائه؟"

فيما يلي 8 أفكار لمشروع ، كاملة مع ملخصات المشروع وأفكار التخطيط ، لتبدأ التعلم بالممارسة.

  • الأعمال والعالم الحقيقي: لوحة معلومات إحصائيات الخريطة
  • ممتعة ومثيرة للاهتمام: آلة موسيقية
  • الشخصية والمحفظة: مدونة
  • إنتاجية: Notebook
  • الألغاز والألعاب: غزاة الفضاء
  • الأدوات والمكتبات: موضوع الإطار
  • الوظائف الإضافية للمشروع: Webmentions
  • الحيوانات المستنسخة: Product Hunt

هذه معاينة للكتاب الإلكتروني المجاني 50 مشروعًا لـ React & the Static Web. يمكنك العثور على 50 فكرة مشروع كاملة بما في ذلك هذه الأفكار الثمانية على موقع 50reactprojects.com

لوحة معلومات إحصائيات الخريطة

الفئة: الأعمال والعالم الحقيقي

قم بإنشاء لوحة معلومات خريطة تعرض إحصائيات ومعلومات جغرافية حول COVID-19.

نبذة

إن التعامل مع جائحة عالمي يعني أن فيروسات مثل فيروس كورونا تؤثر على العالم بشكل مختلف بناءً على الموقع الجغرافي.

يعد وجود خريطة مع تفاصيل إحصائيات كل دولة طريقة مفيدة للقدرة على تحديد أشياء مثل البلدان التي تأثرت أكثر من غيرها.

المستوى 1

أسهل طريقة لمشاهدة الإحصائيات من دولة إلى أخرى هي أن يكون لديك خريطة يمكنك تصفحها مع إحصاءات كل دولة المتاحة بجوار ذلك البلد.

أنشئ تطبيقًا لرسم الخرائط يستخدم disease.sh Coronavirus API لإضافة علامات إلى الخريطة لكل بلد بالإضافة إلى عدد حالات COVID-19.

المستوي 2

في حين أن الحصول على الإحصائيات الخاصة بكل بلد أمر مفيد ، فقد يكون من المفيد أن تكون قادرًا على مقارنة هذه الإحصائيات بعدد الحالات في العالم بأسره.

أضف لوحة معلومات إحصائية تعرض عدد حالات COVID-19 حول العالم بالإضافة إلى أي إحصائيات أخرى مفيدة من واجهة برمجة التطبيقات.

مستوى 3

يعد الحصول على الإحصاءات الحالية طريقة جيدة لفهم الحالة الراهنة للعالم ، ولكن كيف يمكن مقارنة ذلك تاريخيًا؟

استخدم واجهة برمجة تطبيقات البيانات التاريخية لعرض الرسوم البيانية على لوحة المعلومات التي توفر سياقًا لنمو الفيروس وانتشاره.

لكى يفعل

  • أنشئ تطبيق خرائط جديدًا
  • إحضار بيانات بلدان API
  • إضافة علامات إلى الخريطة
  • أضف الإحصائيات إلى العلامات
  • إحضار بيانات API العالمية
  • إنشاء لوحة تحكم الإحصائيات
  • أضف الإحصائيات العالمية
  • إحضار البيانات التاريخية لواجهة برمجة التطبيقات
  • أضف الرسوم البيانية إلى الخريطة

صندوق الأدوات

  • Open Disease Data API (disease.sh)
  • نشرة رد الفعل (رد فعل-leaflet.js.org)
  • Gatsby Leaflet Starter (github.com)

دروس

  • كيفية إنشاء تطبيق لوحة المعلومات والخرائط الخاص بفيروس كورونا (COVID-19) في React with Gatsby and Leaflet (freecodecamp.org)
  • كيفية إضافة إحصائيات حالة فيروس كورونا (COVID-19) إلى لوحة معلومات خريطة React باستخدام Gatsby (freecodecamp.org)
  • رسم الخرائط باستخدام React Leaflet (egghead.io)

وحي - الهام

  • لوحة معلومات COVID-19 من قبل مركز علوم وهندسة النظم (CSSE) في جامعة جونز هوبكنز (JHU) (virus.jhu.ed)
  • عرض توضيحي للوحة المعلومات الخاصة بفيروس كورونا (COVID-19) (virus-map-dashboard.netlify.app)

فكرة التخطيط

آلة موسيقية

التصنيف: تسلية ومثيرة للاهتمام

قم بإنشاء بيانو تفاعلي يمكنك استخدامه لتشغيل الموسيقى باستخدام لوحة المفاتيح.

نبذة

لا يتمتع الجميع برفاهية امتلاك آلة موسيقية ، ولكن ربما يمتلك هؤلاء الأشخاص جهاز كمبيوتر محمول أو هاتفًا أو جهازًا لوحيًا. يعد الحصول على بيانو طريقة قوية للسماح للأشخاص بتشغيل الموسيقى حتى لو لم تتح لهم الفرصة من قبل.

المستوى 1

باستخدام المتصفح وواجهات برمجة تطبيقات صوت الويب ، يمكننا إنشاء أصوات يمكن أن تبدو مثل الموسيقى عند وضعها معًا.

قم بإنشاء مجموعة من الأزرار التي تقوم بتشغيل ملاحظات على مقياس عند النقر فوقها.

المستوي 2

على الرغم من أن الجميع لم يعزفوا على آلة موسيقية من قبل ، فإن مفهوم وواجهة أداة مثل البيانو يكون بشكل عام أكثر سهولة من مجموعة من الأزرار.

قم بإنشاء تخطيط بيانو باستخدام الأزرار التي تعمل إما بالنقر فوق الزر أو باستخدام لوحة المفاتيح الفعلية.

مستوى 3

قد يكون لدينا مساحة محدودة في المتصفح ، ولكن هناك مجموعة واسعة من الملاحظات والمقاييس والأصوات التي قد تكون لوحة المفاتيح الكهربائية قادرة على صنعها ببعض التأثيرات المضافة.

إنشاء مفاتيح تبديل التأثير التي تغير صوت الملاحظات عند التبديل.

لكى يفعل

  • إنشاء الأزرار
  • تشغيل الصوت عند النقر فوقه
  • رتّب الملاحظات في مقياس
  • إنشاء تخطيط البيانو
  • تعيين أحداث لوحة المفاتيح
  • إنشاء تخطيط التأثيرات
  • تبديل المؤثرات الصوتية

صندوق الأدوات

  • React HotKeys (github.com)

دروس

  • بناء بيانو باستخدام خطافات React (dev.to)
  • كيفية بناء لوحة مفاتيح البيانو باستخدام Vanilla JavaScript (freecodecamp.org)
  • بناء بيانو مع tone.js! (dev.to)
  • كيف صنعت بيانوًا في 1 كيلوبايت فقط من JavaScript (frankforce.com)

وحي - الهام

  • رد الفعل Guitar (رد فعل- guitar.com)

فكرة التخطيط

مدونة

التصنيف: الشخصية والمحفظة

أنشئ مدونة يمكنك استخدامها لمشاركة خبراتك ومشاريعك المهنية.

نبذة

في أي مهنة ، يعد امتلاك مدونة لمشاركة تجاربك طريقة جيدة لإعلام الناس بما تعمل عليه ومساعدة الآخرين على التعلم من تجاربك.

إنها أيضًا طريقة لتعزيز ما تعلمته حتى تتمكن من الرجوع إليه في المستقبل.

المستوى 1

لتكون قادرًا على مشاركة تجاربك ، فأنت بحاجة إلى بنية موقع ويب تسمح لك بإنشاء محتوى جديد وإدارة المحتوى الحالي.

تتمثل إحدى طرق القيام بذلك في إنشاء ملفات تخفيض السعر التي يقوم موقع الويب الخاص بك بمصادرتها لإنشاء صفحات جديدة وعرض المنشورات.

قم بإنشاء مدونة باستخدام ملفات markdown كمصدر للمحتوى.

المستوي 2

يعد وجود المحتوى الخاص بك في ملفات markdown طريقة جيدة لإدارة المحتوى الثابت ، ولكن قد لا تحتاج إلى تعديل التعليمات البرمجية في كل مرة تكتب فيها منشورًا أو تعدله.

دمج نظام إدارة المحتوى الذي يسمح لك بإضافة محتوى جديد أو تعديل موجود بواجهة مستخدم لطيفة.

مستوى 3

إذا كنت تشارك رمزًا على مدونتك ، فإن HTML يدعم في الأصل التعليمات البرمجية والعلامات المسبقة التي تساعدك في تنسيق التعليمات البرمجية بطريقة يمكن قراءتها. لكن هذا لا يشمل إبراز بناء الجملة الذي يساعد على تحسين قابلية القراءة.

ادمج أداة تمييز بناء الجملة التي تجعل كتل التعليمات البرمجية أكثر قابلية للقراءة.

لكى يفعل

  • أنشئ مدونة
  • أضف أول محتوى ثابت
  • مصدر المحتوى الثابت
  • دمج CMS
  • أضف التعليمات البرمجية إلى المحتوى
  • أضف تمييز بناء الجملة

صندوق الأدوات

  • Netlify CMS (netlifycms.org)
  • Prism.js (prismjs.com)

دروس

  • إنشاء مدونة Gatsby باستخدام Netlify CMS (gatsbyjs.org)
  • كيفية بناء مدونة الترميز الخاصة بك من الصفر باستخدام Gatsby و MDX (freecodecamp.org)

وحي - الهام

  • Gatsby Netlify CMS Starter (gatsby-netlify-cms.netlify.app)

فكرة التخطيط

دفتر

التصنيف: الإنتاجية

قم بإنشاء تطبيق دفتر ملاحظات لإضافة وإدارة وتنظيم مجموعة من الملاحظات.

نبذة

يعد تدوين الملاحظات طريقة رائعة للتأكد من أننا نتتبع أفكارنا أو نتذكر النقاط المهمة من الاجتماع. من المهم أن تكون قادرًا على إدارتها وتنظيمها بسهولة للعثور عليها لاحقًا!

المستوى 1

الشرط الأول لجهاز الكمبيوتر المحمول هو القدرة على تدوين الملاحظات. قد يكون هذا بسيطًا جدًا للبدء ، حيث تحتاج حقًا إلى نوع من المدخلات يجمع ما تكتبه ويخزنه في مكان ما لوقت لاحق.

قم بإنشاء نموذج لإضافة ملاحظات جديدة وعرضها في قائمة.

المستوي 2

للعثور على ملاحظاتك لاحقًا ، فأنت تريد طريقة ما لتنظيم تلك الملاحظات وطريقة للبحث عنها. يتضمن ذلك إضافة فئات أو نظام وضع علامات بالإضافة إلى واجهة مستخدم لإجراء عمليات بحث منها.

أضف القدرة على تمييز الملاحظات أو تصنيفها ومدخلات للبحث فيها.

مستوى 3

سواء أدركنا ذلك أم لا ، يمكننا إيجاد روابط بين أفكارنا والأهم من ذلك ملاحظاتنا ، حيث يمكننا الاستفادة من شبكة الأفكار هذه في دفتر ملاحظاتنا.

أضف رابط Roam Research-inpsired للملاحظات لإنشاء شبكة من الأفكار.

لكى يفعل

  • قم بإنشاء نموذج
  • تخزين الملاحظات الجديدة
  • ملاحظات القائمة
  • أضف العلامات أو الفئات
  • إضافة بحث المذكرة
  • إضافة شبكة ملاحظة

صندوق الأدوات

  • موضوع Gatsby Brain (github.com)
  • Fuse.js (fusejs.io)

دروس

  • كيفية إضافة بحث إلى تطبيق React باستخدام Fuse.js (freecodecamp.org)

وحي - الهام

  • رغوة (foambubble.github.io)
  • Roam Research (roamresearch.com)
  • غاتسبي جاردن ثيم (github.com)

فكرة التخطيط

غزاة الفضاء

التصنيف: ألغاز وألعاب

قم بإنشاء لعبة إطلاق النار على مركبة فضائية للغزاة الفضائيين لإطلاق موجات متعددة من سفن العدو.

نبذة

Space Invaders هي لعبة أركيد كلاسيكية تضعك في مركبة فضائية في مواجهة غزو أجنبي. أثناء محاولتك إطلاق النار عليهم ، فإنهم يردون ، ولا يكون لديك سوى قدر محدود من الحماية قبل أن تتعرض للضرب.

المستوى 1

يتمثل الجزء الأساسي من اللعبة في أنك تتحرك حول مركبة فضائية تحاول إصابة مجموعة من الفضائيين بأسلحتك. بينما يوجد واحد منكم ، هناك الكثير منهم.

قم بإنشاء مركبة فضائية يمكنها التحرك وإطلاق النار على كائنات فضائية لا تتحرك.

المستوي 2

ما يجعل اللعبة صعبة ، هو أن الكائنات الفضائية تتحرك باستمرار. في كل مرة يصلون فيها إلى حافة منطقة اللعب ، ينزلون ويسرعون ، ويقتربون من سفينتك.

أضف حركة للأجانب يتحركون جنبًا إلى جنب في منطقة اللعب. في كل مرة يصل فيها الفضائيون إلى جانب واحد ، يجب أن ينزلوا مستوى. يجب عليهم أيضًا الإسراع في فترات زمنية معينة.

مستوى 3

أنت بمفردك ، لكن لحسن الحظ يمكنك الحصول على بعض الحماية. لديك دروع يمكنك الاختباء خلفها تساعد على حمايتك طوال فترة وجودها.

قم بإنشاء عدة دروع أمام المركبة الفضائية للاعب والتي يمكن أن تتسبب في قدر محدود من الضرر.

لكى يفعل

  • قم بإنشاء لعبة جديدة
  • خلق كائنات فضائية ثابتة
  • إنشاء مركبة فضائية لاعب
  • أضف ضوابط المركبة الفضائية
  • أضف سلاح المركبة الفضائية
  • تكوين الضرر الفضائي
  • اجعل الفضائيين يردون
  • اجعل الفضائيين يتحركون
  • أضف فترات زمنية من الكائنات الفضائية
  • أضف الدروع

دروس

  • تعلم JavaScript من خلال بناء 7 ألعاب (freecodecamp.org)

وحي - الهام

  • غزاة الفضاء (codepen.io)

فكرة التخطيط

موضوع الإطار

التصنيف: أدوات ومكتبات

قم بإنشاء سمة Gatsby التي تقوم بإعداد مشروع باستخدام إطار عمل Tailwind CSS.

نبذة

بصفتنا مطورين ، يتعين علينا عادةً القيام بمجموعة من الخطوات المماثلة في أي وقت نقوم فيه بإنشاء مشروع جديد. لكن الأدوات مثل السمات تتيح لنا تجريد تلك الخطوات وتجميعها بطريقة سهلة الاستخدام يمكن أن تعمل مع أي مشروع جديد.

المستوى 1

تعد سمات Gatsby نظامًا شبيهًا بالمكونات الإضافية حيث يمكننا الاستفادة من خط أنابيب Gatsby لمشاركة الوظائف كحزمة على npm.

يفتح هذا الباب أمام فعل أي شيء نفعله في موقع Gatsby ، ولكن يجعله قابلاً لإعادة الاستخدام لأي موقع من مواقع Gatsby.

قم بإنشاء سمة Gatsby جديدة والتي ، عند استخدامها ، تنشئ صفحة دليل نمط جديدة في أي مشروع تمت إضافته إليه.

المستوي 2

الهدف من السمات ليس فقط إنشاء صفحات ، ولكن لإضافة وظائف تجعلنا منتجين. يتضمن هذا أشياء مثل الأطر وتكوينات المشروع.

أضف إطار عمل CSS إلى سمة Gatsby التي تتيح للمشروع الذي تمت إضافته لاستخدام هذا الإطار.

مستوى 3

في بعض الأحيان تكون السمات أفضل كأدوات فقط ، وفي بعض الأحيان يكون من المفيد أن يكون لديك رأي. تتمثل إحدى طرق إضافة وظائف مفيدة إلى إطار عمل CSS في إنشاء مكونات المخزون.

أنشئ مكونات React قابلة لإعادة الاستخدام باستخدام إطار عمل CSS الذي يمكن استخدامه في المشروع الذي تمت إضافة السمة إليه.

لكى يفعل

  • أنشئ موضوعًا جديدًا
  • أضف إلى مثال المشروع
  • إنشاء صفحة نمط جديد
  • أضف إطار عمل CSS
  • استخدم CSS في المثال
  • إنشاء المكونات
  • استخدم المكونات

صندوق الأدوات

  • ثيمات غاتسبي (gatsbyjs.org)
  • Tailwind (tailwindcss.com)

دروس

  • بناء موضوع (gatsbyjs.org)
  • ما المقصود بـ Tailwind CSS وكيف يمكنني إضافته إلى موقع الويب الخاص بي أو تطبيق React؟ (freecodecamp.org)

وحي - الهام

  • موضوع Gatsby Tailwind (github.com)

فكرة التخطيط

Webmentions

التصنيف: إضافات المشروع

أضف تكامل webmentions إلى موقع ويب يعرض تفاعلات Twitter مع موقع الويب.

نبذة

يعد التفاعل الاجتماعي طريقة مؤثرة لجلب المزيد من الجمهور والمحادثة إلى الموضوعات التي نكتب عنها.

يُظهر وجود شيء ما على موقع الويب أن التفاعل يمكن أن يكون مفيدًا لإلهام الأشخاص للرغبة في المشاركة أو السماح لهم بالشعور بأنهم جزء منه.

المستوى 1

من أجل الاستفادة من Webmentions ، يجب تكوين موقع ويب بعلامات وصفية لتوفير المعلومات.

أضف العلامات الوصفية المناسبة إلى موقع ويب وتحقق من استخدامها مع webmention.io.

المستوي 2

تعد Webmentions API طريقة لرؤية الاتصالات برمجيًا في التفاعلات الاجتماعية من عنوان URL لموقع الويب الخاص بك. يتيح لك الحصول على نوع التفاعل وحتى الصورة الرمزية لملف تعريف الشخص.

قم بتوصيل موقع ويب بـ Webmentions وأضف قائمة بالتفاعلات الاجتماعية إلى صفحات نشر المدونة.

مستوى 3

الآن وقد أظهر الموقع جميع التفاعلات ، يجب أن تكون هناك طريقة سهلة للانضمام إلى المحادثة.

أضف رابطًا اجتماعيًا يقوم ، عند النقر فوقه ، بإنشاء تغريدة مع رابط إلى الصفحة.

لكى يفعل

  • إضافة العلامات الوصفية إلى موقع الويب
  • تحقق من صحة العلامات الوصفية
  • الاتصال بـ Webmention
  • ربط الاجتماعية إلى Bridgy
  • قائمة التفاعلات
  • زر إضافة تغريدة

صندوق الأدوات

  • Webmention.io (webmention.io)
  • بريدجي (brid.gy)
  • Gatsby Plugin Webmention (github.com)

دروس

  • Indieweb pt2: استخدام Webmentions في أحد عشر (mxb.dev)
  • Clientside Webmentions (swyx.io)
  • بدء استخدام Webmentions في Gatsby (knutmelvaer.no)
  • بناء Webmentions المكون الإضافي لـ Gatsby (christopherbiscardi.com)

وحي - الهام

  • كنوت ملفير (knutmelvaer.no)
  • Swyx (swyx.io)

فكرة التخطيط

المنتج هانت

التصنيف: الحيوانات المستنسخة

قم بإنشاء نسخة مطاردة المنتج تتيح للأشخاص نشر منتج جديد بتقييمات.

نبذة

نعيش جميعًا من أجل المنتجات ، سواء كانت هواتفنا المحمولة أو التطبيقات التي نستخدمها على أجهزة الكمبيوتر المحمولة الخاصة بنا.

في حين أن هناك الكثير من المنتجات في العالم ، قد يكون من الصعب التنقل بين الجيد والسيئ. توفر أدوات مثل Product Hunt نظامًا أساسيًا للتعرف على الأدوات الجديدة والحصول على ردود الفعل والمراجعات من الآخرين.

المستوى 1

أهم جزء في التعرف على المنتجات الجديدة هو المنتج نفسه. نريد أن نعرف ما هو المنتج وكيف يبدو وكيف يعمل.

قم بإنشاء صفحة تتيح لك إضافة منتج جديد إلى موقع ويب بعنوان ، وصورة ، ووصف.

المستوي 2

عند التعرف على المنتجات ، تعد المراجعات طريقة يمكننا من خلالها الوثوق بالمنتج قبل شرائه. يساعدنا ذلك على اكتساب الثقة فيما نحن بصدد إنفاق أموالنا أو وقتنا عليه.

أضف إمكانية إضافة الأشخاص لمراجعات حول كل منتج.

مستوى 3

يحب الناس المنتجات ، لذلك يوجد الكثير منها في العالم. هناك الكثير من الطرق لمحاولة الفرز يدويًا ، لذلك نحتاج إلى آلية للبحث والتصفح باستخدام.

أضف القدرة على البحث عن المنتجات والتصفح حسب الفئة.

لكى يفعل

  • إنشاء موقع المنتج
  • إنشاء قاعدة بيانات
  • أضف نموذج المنتج
  • إضافة المنتج إلى قاعدة البيانات
  • طلب منتج للصفحة
  • إضافة نموذج مراجعة
  • إضافة التعليقات إلى قاعدة البيانات
  • إضافة مراجعات للمنتج
  • إضافة بحث المنتج
  • أضف فئات المنتجات

صندوق الأدوات

  • حسورة (hasura.io)

دروس

  • إنشاء تطبيق استنساخ Product Hunt باستخدام Hasura و Next.js (logrocket.com)
  • كيفية إنشاء إصدار أساسي من Product Hunt باستخدام React (freecodecamp.org)

فكرة التخطيط

المزيد من المشاريع

إذا كنت تريد المزيد من أفكار المشاريع ، فراجع 50 مشروعًا لـ React & the Static web!

توقف عن سؤال نفسك ماذا يجب أن أبني؟ تنزيل مجانًا من موقع 50reactprojects.com

تابعني لمزيد من Javascript و UX وأشياء أخرى مثيرة للاهتمام!

  • ؟ تابعني على تويتر
  • ؟ ️ اشترك في My Youtube
  • ✉️ اشترك في رسالتي الإخبارية