8 רעיונות לפרויקט React.js שיעזרו לך להתחיל ללמוד על ידי עשייה

אחת הדרכים הטובות ביותר ללמוד היא על ידי עשייה. אך לעתים קרובות מפתחים נאבקים בשאלה הגדולה "מה עלי לבנות?"

להלן 8 רעיונות לפרויקט, עם סיכומי פרויקטים ורעיונות פריסה, כדי להתחיל ללמוד על ידי עשייה.

  • עסקים ועולם אמיתי: לוח המחוונים לסטטיסטיקה של מפות
  • כיף ומעניין: כלי נגינה
  • אישי ופורטפוליו: בלוג
  • פריון: מחברת
  • פאזלים ומשחקים: פולשי החלל
  • כלים וספריות: נושא מסגרת
  • תוספות לפרויקט: Webmentions
  • שיבוטים: ציד מוצרים

זוהי תצוגה מקדימה של ספרים אלקטרוניים בחינם 50 פרויקטים עבור תגובה והאינטרנט הסטטי. אתה יכול למצוא את 50 הרעיונות המלאים לפרויקט כולל 8 אלה ב 50reactprojects.com.

לוח מחוונים לסטטיסטיקה של מפות

קטגוריה: עסקים ועולם אמיתי

צור לוח מחוונים של מפות המציג נתונים סטטיסטיים ומידע גיאוגרפי על COVID-19.

קָצָר

הטיפול במגפה עולמית פירושו כי נגיפים כמו נגיף הכורון משפיעים על העולם באופן שונה על פי מיקום גיאוגרפי.

השגת מפה עם פירוט הנתונים הסטטיסטיים של כל מדינה היא דרך שימושית לקבוע דברים כמו המדינות שהושפעו ביותר.

שלב 1

הדרך הקלה ביותר לראות סטטיסטיקה מדינה לארץ היא לקבל מפה בה אתה יכול לדפדף עם הסטטיסטיקה של כל מדינה זמינה לצד אותה מדינה.

צור אפליקציית מיפוי המשתמשת ב- API של coronavirus של disease.sh כדי להוסיף סמנים למפה עבור כל מדינה יחד עם מספר המקרים של COVID-19.

שלב 2

למרות שהסטטיסטיקה של כל מדינה מועילה, יכול להיות שימושי להשוות נתונים סטטיסטיים למספר המקרים בעולם כולו.

הוסף לוח מחוונים סטטיסטי המציג את מספר המקרים של COVID-19 ברחבי העולם, כמו גם כל סטטיסטיקה שימושית אחרת מממשק ה- API.

רמה 3

קבלת נתונים סטטיסטיים עדכניים היא דרך טובה להבין את המצב הנוכחי בעולם, אבל איך זה משתווה מבחינה היסטורית?

השתמש בממשק ה- API של נתונים היסטוריים כדי להציג גרפים בלוח המחוונים המספקים הקשר לצמיחה והתפשטות הנגיף.

לעשות

  • צור אפליקציית מפות חדשה
  • אחזר נתוני מדינות API
  • הוסף סמנים למפה
  • הוסף סטטיסטיקה לסמנים
  • אחזר נתונים גלובליים של API
  • צור לוח מחוונים לסטטיסטיקה
  • הוסף נתונים סטטיסטיים גלובליים
  • אחזר נתונים היסטוריים של API
  • הוסף גרפים למפה

ארגז כלים

  • ממשק API פתוח לנתוני מחלות (disease.sh)
  • עלון תגובה (react-leaflet.js.org)
  • Starter בעלון גטסבי (github.com)

הדרכות

  • כיצד ליצור לוח מחוונים ומפה של Coronavirus (COVID-19) ב- React עם Gatsby ו- Leaflet (freecodecamp.org)
  • כיצד להוסיף נתונים סטטיסטיים של Coronavirus (COVID-19) למרכז השליטה שלך ב- React map עם Gatsby (freecodecamp.org)
  • מיפוי עם עלון תגובה (egghead.io)

הַשׁרָאָה

  • לוח מחוונים של COVID-19 על ידי המרכז למדעי מערכות והנדסת (CSSE) באוניברסיטת ג'ונס הופקינס (JHU) (coronavirus.jhu.ed)
  • הדגמת לוח המחוונים של Coronavirus (COVID-19) (coronavirus-map-dashboard.netlify.app)

רעיון פריסה

כלי נגינה

קטגוריה: כיף ומעניין

צור פסנתר אינטראקטיבי שבו תוכל להשתמש כדי לנגן מוסיקה עם המקלדת שלך.

קָצָר

לא לכולם יש את המותרות להיות בעלים של כלי נגינה, אבל אולי לאנשים האלה יש מחשב נייד, טלפון או טאבלט. להיות עם פסנתר הוא דרך עוצמתית לאפשר לאנשים לנגן מוזיקה גם אם לא הייתה להם הזדמנות לפני כן.

שלב 1

באמצעות ממשקי ה- API של הדפדפן ואודיו ברשת, אנו יכולים ליצור צלילים שכאשר הם מורכבים יכולים למעשה להישמע כמו מוזיקה.

צור סט כפתורים שמשמיע הערות בקנה מידה כאשר לוחצים עליו.

שלב 2

אמנם לא כולם ניגנו בעבר בכלי, אך הקונספט והממשק של כלי כמו פסנתר הם בדרך כלל אינטואיטיביים יותר מחבורת כפתורים.

צור פריסת פסנתר באמצעות לחצנים הפועלים על ידי לחיצה על הכפתור או באמצעות המקלדת הפיזית.

רמה 3

יכול להיות שיש לנו מקום מוגבל בדפדפן, אבל יש מגוון רחב של תווים, סולמות וצלילים שמקלדת חשמלית עשויה ליצור עם כמה אפקטים שנוספו.

צור מתגי אפקט המשנים את צליל התווים בעת הפעלתם.

לעשות

  • צור כפתורים
  • השמע צליל בלחיצה עליו
  • סדרו הערות בסולם
  • צור פריסת פסנתר
  • הגדר אירועים במקלדת
  • צור פריסת אפקטים
  • החלף אפקטים של שמע

ארגז כלים

  • תגובת HotKeys (github.com)

הדרכות

  • בניית פסנתר עם ווים מגיבים (dev.to)
  • כיצד לבנות מקלדת לפסנתר באמצעות וניל JavaScript (freecodecamp.org)
  • בניית פסנתר עם tone.js! (dev.to)
  • איך עשיתי פסנתר רק בקיבולת JavaScript אחת (frankforce.com)

הַשׁרָאָה

  • תגובת גיטרה (react-guitar.com)

רעיון פריסה

בלוג

קטגוריה: אישי ותיק

צור בלוג שבו תוכל להשתמש כדי לשתף את חוויות הקריירה והפרויקטים שלך.

קָצָר

בכל קריירה, קיום בלוג לחלוק את חוויותיך הוא דרך טובה להודיע ​​לאנשים על מה אתה עובד ולעזור לאחרים ללמוד מהחוויות שלך.

זו גם דרך לחזק את מה שלמדת כדי שתוכל להתייחס אליו בעתיד.

שלב 1

כדי שתוכלו לשתף את החוויות שלכם, אתם זקוקים למבנה אתר שיאפשר לכם ליצור תוכן חדש ולנהל תוכן קיים.

אחת הדרכים לעשות זאת היא על ידי יצירת קבצי סימון שמקור האתר שלך ליצירת דפים חדשים ולהצגת הפוסטים.

צור בלוג באמצעות קבצי סימון כמקור התוכן.

שלב 2

הכנסת התוכן לקבצי הסימון היא דרך טובה לנהל תוכן סטטי, אך ייתכן שלא תרצה לערוך קוד בכל פעם שאתה כותב או עורך פוסט.

שלב מערכת ניהול תוכן המאפשרת להוסיף תוכן חדש או לערוך את הקיים בעזרת ממשק משתמש נחמד.

רמה 3

אם אתה משתף קוד בבלוג שלך, HTML תומך באופן מקורי בקוד ובתגי הקדם המסייעים לך לעצב את הקוד בצורה קריאה. אך זה לא כולל הדגשת תחביר המסייעת בשיפור הקריאה.

שילוב סימון תחביר שהופך את חסימות הקוד לקריאות יותר.

לעשות

  • צור בלוג
  • הוסף תוכן סטטי ראשון
  • תוכן סטטי מקור
  • שילוב CMS
  • הוסף קוד לתוכן
  • הוסף הדגשת תחביר

ארגז כלים

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

הדרכות

  • יצירת בלוג Gatsby עם Netlify CMS (gatsbyjs.org)
  • כיצד לבנות את בלוג הקידוד שלך מ- Scratch באמצעות Gatsby ו- MDX (freecodecamp.org)

הַשׁרָאָה

  • Starter Cats של Gatsby Netlify (gatsby-netlify-cms.netlify.app)

רעיון פריסה

מחברת

קטגוריה: פריון

צור אפליקציית מחברת להוספה, ניהול וארגון של קבוצת הערות.

קָצָר

רישום הערות הוא דרך נהדרת לוודא שאנחנו עוקבים אחר המחשבות שלנו או נזכור את המנות החשובות מפגישה. היכולת לנהל אותם בקלות ולארגן אותם חשובה למציאתם בהמשך!

שלב 1

הדרישה הראשונה של מחברת היא היכולת לרשום הערות. זה יכול להיות די פשוט להתחיל, איפה באמת אתה זקוק לאיזשהו קלט שאוסף את מה שאתה כותב ומאחסן אותו איפשהו להמשך.

צור טופס להוספת הערות חדשות והצגתן ברשימה.

שלב 2

על מנת למצוא את ההערות שלך מאוחר יותר, אתה רוצה דרך לארגן את ההערות ודרך לחפש אותן. זה כולל הוספת קטגוריות או מערכת תיוג וכן ממשק משתמש לביצוע חיפושים.

הוסף את היכולת לתייג או לסווג הערות וקלט לחיפוש דרכם.

רמה 3

בין אם אנו מבינים זאת ובין אם לא, אנו יכולים למצוא קשרים בין מחשבותינו וחשוב מכך להערות שלנו, שם נוכל לנצל את אותה רשת מחשבות למחברת שלנו.

הוסף קישור פתקים של מחקר נדידה ליצירת רשת מחשבות.

לעשות

  • צור טופס
  • אחסן הערות חדשות
  • רשימת הערות
  • הוסף תגים או קטגוריות
  • הוסף חיפוש הערות
  • הוסף רשת פתקים

ארגז כלים

  • נושא המוח של גטסבי (github.com)
  • Fuse.js (fusejs.io)

הדרכות

  • כיצד להוסיף חיפוש לאפליקציית תגובה באמצעות Fuse.js (freecodecamp.org)

הַשׁרָאָה

  • קצף (foambubble.github.io)
  • מחקר שיטוט (roamresearch.com)
  • נושא גן גטסבי (github.com)

רעיון פריסה

פולשי החלל

קטגוריה: פאזלים ומשחקים

צור משחק יורה של חללי פולשים לחלל כדי לירות מספר רב של גלים של ספינות אויב.

קָצָר

Invaders Space היא קלאסיקה בארקייד שמכניסה אותך לחללית נגד פלישת חייזרים. כשאתה מנסה להפיל אותם, הם יורים לאחור, ויש לך הגנה מוגבלת רק לפני שאתה פתוח להכות.

שלב 1

החלק המרכזי במשחק הוא שאתה מסתובב בחללית ומנסה להכות חבורה של חייזרים עם כלי הנשק שלך. אמנם יש אחד מכם, אך רבים מהם.

צור חללית שיכולה להסתובב ולירות בחייזרים שלא זזים.

שלב 2

מה שהופך את המשחק למסובך, הוא שהחייזרים נעים כל הזמן. בכל פעם שהם פוגעים בקצה אזור המשחקים, הם צונחים ומזרזים ומתקרבים לספינה שלך.

הוסף תנועה לחייזרים ההולכים זה לצד זה על אזור המשחק. בכל פעם שהחייזרים מגיעים לצד אחד הם צריכים לרדת לרמה. הם צריכים להאיץ גם במרווחים מסוימים.

רמה 3

אתה לבדך, אך למרבה המזל אתה יכול לקבל הגנה מסוימת. יש לך מגנים שתוכל להסתיר מאחוריהם שעוזרים להגן עליך כל עוד הם נמשכים.

צרו מספר מגנים מול חללית הנגן שיכולים לגרום לכמות מוגבלת של נזק.

לעשות

  • צור משחק חדש
  • צור חייזרים סטטיים
  • צור חללית נגן
  • הוסף בקרות חלליות
  • הוסף נשק חלליות
  • הגדר נזק זר
  • לגרום לחייזרים לירות בחזרה
  • לגרום לחייזרים לזוז
  • הוסף מרווחי חייזרים
  • הוסף מגנים

הדרכות

  • למד JavaScript על ידי בניית 7 משחקים (freecodecamp.org)

הַשׁרָאָה

  • פולשי חלל (codepen.io)

רעיון פריסה

נושא מסגרת

קטגוריה: כלים וספריות

צור נושא Gatsby שמקים פרויקט במסגרת Tailwind CSS.

קָצָר

כמפתחים, בדרך כלל עלינו לעשות מספר צעדים דומים בכל עת שניצור פרויקט חדש. אך כלים כמו נושאים מאפשרים לנו להפשט את השלבים הללו ולארוז אותם בצורה קלה לשימוש שיכולה לעבוד עבור כל פרויקט חדש.

שלב 1

ערכות הנושא של Gatsby הן מערכת דמוית תוסף בה אנו יכולים לנצל את צינור Gatsby כדי לשתף פונקציונליות כחבילה ב- npm.

זה פותח את הדלת לעשות באמת כל דבר שהיינו עושים באתר גטסבי, אך הופך אותו לשימוש חוזר לכל אתר גטסבי.

צור ערכת Gatsby חדשה, שכאשר משתמשים בה, יוצרת דף מדריך סגנון חדש בכל פרויקט אליו הוא מתווסף.

שלב 2

מטרת הנושאים היא לא רק ליצור עמודים, אלא להוסיף פונקציונליות שהופכת אותנו לפרודוקטיביים. זה כולל דברים כמו מסגרות ותצורות פרויקטים.

הוסף מסגרת CSS לנושא Gatsby המאפשר לפרויקט שהוא הוסיף להשתמש במסגרת זו.

רמה 3

לפעמים נושאים טובים יותר רק ככלי, לפעמים מועיל להיות דעתן. אחת הדרכים להוסיף פונקציונליות שימושית למסגרת CSS היא יצירת רכיבי מלאי.

צור רכיבי React לשימוש חוזר באמצעות מסגרת CSS שניתן להשתמש בהם בפרויקט שעליו הוסיף הנושא.

לעשות

  • צור ערכת נושא חדשה
  • הוסף לפרויקט לדוגמא
  • צור דף סגנון חדש
  • הוסף מסגרת CSS
  • השתמש ב- CSS לדוגמא
  • צור רכיבים
  • השתמש ברכיבים

ארגז כלים

  • עיצובים של גטסבי (gatsbyjs.org)
  • רוח זנב (tailwindcss.com)

הדרכות

  • בניית נושא (gatsbyjs.org)
  • מהו Tailwind CSS וכיצד אוכל להוסיף אותו לאתר או לאפליקציית React? (freecodecamp.org)

הַשׁרָאָה

  • נושא Gatsby Tailwind (github.com)

רעיון פריסה

Webmentions

קטגוריה: תוספות לפרויקט

הוסף שילוב webmentions לאתר המציג אינטראקציות עם Twitter עם האתר.

קָצָר

אינטראקציה חברתית היא דרך משפיעה להביא יותר קהל ושיחה לנושאים עליהם אנו כותבים.

קיום משהו באתר מראה כי אינטראקציה יכולה להיות מועילה הן לעורר אנשים לרצות להיות מעורבים או לתת לאנשים להרגיש שהם יכולים להיות חלק מזה.

שלב 1

על מנת לעשות שימוש ב- Webmentions, יש להגדיר אתר עם מטא תגים כדי לספק מידע.

הוסף את תגיות המטא המתאימות לאתר ואמת את השימוש בו באמצעות webmention.io.

שלב 2

ה- Webmentions API הוא דרך לראות באופן פרוגרמטי קשרים באינטראקציות חברתיות מכתובת אתר של האתר שלך. זה מאפשר לך לקבל את סוג האינטראקציה ואפילו את הסמל האישי של האדם.

חבר אתר לאתר Webmentions והוסף רשימה של אינטראקציות חברתיות לדפי פוסט בבלוג.

רמה 3

כעת, כאשר האתר מציג את כל האינטראקציות, צריכה להיות דרך קלה להצטרף לשיחה.

הוסף קישור חברתי שכאשר לוחצים עליו יוצר ציוץ עם קישור לדף.

לעשות

  • הוסף מטא תגים לאתר
  • אמת את תגי המטא
  • התחבר ל- Webmention
  • התחבר חברתי לברידי
  • רשימת אינטראקציות
  • הוסף כפתור ציוץ

ארגז כלים

  • Webmention.io (webmention.io)
  • בריגי (brid.gy)
  • תוסף Gatsby Webmention (github.com)

הדרכות

  • Indieweb pt2: שימוש ב- Webmentions ב -11 (mxb.dev)
  • Webmentions של הלקוח (swyx.io)
  • תחילת העבודה עם Webmentions בגטסבי (knutmelvaer.no)
  • בניית תוספי Gatsby Webmentions (christopherbiscardi.com)

הַשׁרָאָה

  • קנוט מלוור (knutmelvaer.no)
  • סוויקס (swyx.io)

רעיון פריסה

מוצר האנט

קטגוריה: שיבוטים

צור שיבוט ציד מוצר המאפשר לאנשים לפרסם מוצר חדש עם דירוגים.

קָצָר

כולנו חיים למוצרים, בין אם זה הטלפונים הניידים שלנו או האפליקציות שאנו משתמשים במחשבים הניידים שלנו.

אמנם יש טונות של מוצרים בעולם, אבל זה יכול להיות קשה לנווט בין טוב לרע. כלים כמו Product Hunt מספקים פלטפורמה ללמוד על כלים חדשים ולקבל תגובות וביקורות מאחרים.

שלב 1

החלק החשוב ביותר על למידה על מוצרים חדשים הוא המוצר עצמו. אנו רוצים לדעת מהו המוצר, איך הוא נראה ואיך הוא עובד.

צור דף המאפשר להוסיף מוצר חדש לאתר עם כותרת, תמונה ותיאור.

שלב 2

כאשר אנו לומדים על מוצרים, ביקורות הן דרך בה אנו יכולים לסמוך על מוצר לפני שנרכוש אותו. זה עוזר לנו להשיג ביטחון במה שאנחנו עומדים לבזבז את הכסף או הזמן שלנו.

הוסף את היכולת של אנשים להוסיף ביקורות על כל מוצר.

רמה 3

אנשים אוהבים מוצרים, ולכן יש המון כאלה בעולם. יש הרבה יותר מדי לנסות למיין ידנית, לכן אנו זקוקים למנגנון לחיפוש ולעיון איתו.

הוסף את היכולת לחפש מוצרים ולעיין לפי קטגוריות.

לעשות

  • צור אתר מוצר
  • צור מסד נתונים
  • הוסף טופס מוצר
  • הוסף מוצר למסד הנתונים
  • בקש מוצר לדף
  • הוסף טופס ביקורת
  • הוסף ביקורות למאגר
  • הוסף ביקורות למוצר
  • הוסף חיפוש מוצרים
  • הוסף קטגוריות מוצרים

ארגז כלים

  • Hasura (hasura.io)

הדרכות

  • בניית אפליקציית משובטים של Product Hunt באמצעות Hasura ו- Next.js (logrocket.com)
  • כיצד לבנות גרסה בסיסית של Product Hunt באמצעות React (freecodecamp.org)

רעיון פריסה

פרויקטים נוספים

אם אתה רוצה רעיונות נוספים לפרויקט, בדוק 50 פרויקטים עבור תגובה והאינטרנט הסטטי!

תפסיק לשאול את עצמך מה עלי לבנות? הורד בחינם בכתובת 50reactprojects.com

עקוב אחרי לקבלת Javascript, UX ודברים מעניינים נוספים!

  • ? עקוב אחריי בטוויטר
  • ? ️ הירשם ל- Youtube שלי
  • ✉️ הירשם לניוזלטר שלי