פרויקט ריאקט ראשון עם API אמיתי - אפליקציית מזג אוויר שבאמת עובדת

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

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

מה בונים בפועל

אפליקציה שבה המשתמש מקליד שם של עיר, ומקבל בחזרה טמפרטורה נוכחית, תיאור מזג אוויר (מעונן, בהיר, גשום) ואולי לחות ומהירות רוח. יש הרבה שירותי API חינמיים למזג אוויר (OpenWeatherMap הוא הפופולרי ביותר), ורובם דורשים API key חינמי שנרשמים אליו בכמה דקות.

ניהול המצב עם useState

לפני שכותבים שורת קוד אחת שמדברת עם השרת, תחשבו על המצבים (states) שהאפליקציה שלכם יכולה להיות בהם:

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

ארבעה מצבים אלה הם בדיוק מה שהופך פרויקט "מגניב" לפרויקט מקצועי. מתחילים נוטים לכתוב רק את מסלול ההצלחה ולשכוח שהמשתמש עלול להקליד "אדfsdf" בתור שם עיר. תכננו את זה מראש עם כמה משתני state: weatherData, loading, error.

שליפת המידע עם useEffect ו-fetch

כאן קורה הקסם. כשהמשתמש שולח חיפוש, אתם קוראים לפונקציית fetch שפונה לכתובת ה-API עם שם העיר וה-API key שלכם:

useEffect(() => {
  if (!city) return;
  setLoading(true);
  setError(null);

  fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric&lang=he`)
    .then((res) => {
      if (!res.ok) throw new Error("העיר לא נמצאה");
      return res.json();
    })
    .then((data) => setWeatherData(data))
    .catch((err) => setError(err.message))
    .finally(() => setLoading(false));
}, [city]);

שימו לב לשני דברים חשובים כאן. הראשון - הטיפול בשגיאות עם catch, כי כל בקשת רשת יכולה להיכשל. השני - מערך התלויות [city] בסוף ה-useEffect, שגורם לקוד לרוץ מחדש בכל פעם שהעיר משתנה. זו בדיוק הסיבה ש-useEffect קיים - להריץ קוד "בתגובה" לשינוי במידע.

תיבת החיפוש כקומפוננטה נשלטת

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

מבנה קומפוננטות

חלקו את זה לפחות לשלוש קומפוננטות: SearchBar (תיבת החיפוש והכפתור), WeatherCard (הצגת המידע כשהוא מגיע), ו-App שמחזיקה את ה-state המשותף ומעבירה props למטה. זה תרגול מצוין ב"הרמת state" (lifting state up) - עיקרון מרכזי בריאקט שאתם תפגשו שוב ושוב בפרויקטים גדולים יותר.

על הטיפול ב-API key

אל תשכחו - אם אתם שמים את ה-API key ישירות בקוד ומעלים אותו ל-GitHub, כל אחד יכול לראות אותו. לפרויקט לימודי זה בסדר גמור, אבל שווה כבר עכשיו להתרגל להשתמש בקובץ .env ולהוציא את המפתח מהקוד עצמו. זו הרגל שישרת אתכם בכל פרויקט אמיתי מכאן והלאה.

המכשולים הכי נפוצים

הרבה מתחילים נתקעים בגלל שהם שוכחים לבדוק אם weatherData בכלל קיים לפני שהם מנסים להציג weatherData.main.temp, ומקבלים שגיאה מכוערת של "cannot read property of undefined". הפתרון - רינדור מותנה. אם אין מידע, אל תנסו להציג אותו.

למה זה פרויקט טוב להתחיל בו

הפרויקט הזה מכריח אתכם להתמודד עם כל הדברים שריאקט אמיתי דורש: state, effects, אירועים, וגישה ל-API חיצוני. זה בדיוק סוג העבודה שתעשו ביום-יום כמפתחי פרונט, ולכן זה גם פרויקט מצוין להראות בראיונות עבודה. אם אתם רוצים להבין את התשתית התיאורטית שמאחורי useState ו-useEffect לפני שאתם קופצים לפרויקט, בקורס פיתוח צד לקוח אני עובר על כל זה צעד אחר צעד, כולל תרגילים שמכינים אתכם בדיוק לסוג הפרויקט הזה.

סיכום

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

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

וכדי לא להיתקע לבד כשמשהו לא עובד - יש קהילה שתומכת בדיוק ברגעים כאלה.

הצטרפו לקהילה בדיסקורד