مشروع عملي: بناء تطبيق طقس في React خطوة بخطوة

تخيّل أنك تفتح تطبيقًا صغيرًا وتكتب اسم مدينة لتعرف حالة الطقس فورًا. هذا المشروع سيعلّمك كيف تربط React بـ API حقيقي وتعرض النتائج بشكل واضح.

ماذا سنبني؟

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

الخطوة 1: إعداد الحالة (State)

import { useState } from "react";

function App() {
  const [city, setCity] = useState("");
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  return <div>تطبيق طقس</div>;
}

الخطوة 2: دالة جلب البيانات

async function fetchWeather() {
  if (!city.trim()) return;
  setLoading(true);
  setError("");

  try {
    const res = await fetch(`https://api.example.com/weather?q=${city}`);
    if (!res.ok) throw new Error("فشل جلب البيانات");
    const json = await res.json();
    setData(json);
  } catch (err) {
    setError(err.message);
  } finally {
    setLoading(false);
  }
}

الخطوة 3: واجهة البحث والعرض

<div>
  <input
    value={city}
    onChange={(e) => setCity(e.target.value)}
    placeholder="اكتب المدينة..."
  />
  <button onClick={fetchWeather}>عرض الطقس</button>
</div>

{loading && <p>جاري التحميل...</p>}
{error && <p className="text-danger">{error}</p>}

{data && (
  <div>
    <h2>{data.name}</h2>
    <p>{data.temp}°C</p>
    <p>{data.description}</p>
  </div>
)}

تحسين اختياري: تحويل الوحدات

const celsius = Math.round(data.temp - 273.15);

كثير من الـ APIs ترجع الحرارة بالكلفن. يمكن تحويلها إلى مئوية بهذه المعادلة.

أفضل الممارسات

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

الأسئلة الشائعة — FAQ

ما الهدف من مشروع تطبيق الطقس؟

فهم جلب البيانات من API في React وعرضها للمستخدم.

هل نحتاج API مدفوع؟

لا، توجد APIs مجانية تكفي للتجربة.

كيف أتعامل مع الأخطاء؟

عبر state للأخطاء ورسالة واضحة عند الفشل.

هل يمكن إضافة توقّعات للأيام القادمة؟

نعم، عبر endpoint خاص بالتوقعات.

كيف أطور المشروع لاحقًا؟

أضف تحديد الموقع أو خرائط أو تصميم متقدم.