ما وظيفة الكود التالي والمنطق الخاص به

Zen Eddin Allaham · 24 مايو

هل يمكنكم شرح لي هذه الكود بشكل افضل,

import Prayer from "./components"
import React,{useEffect, useState} from "react"


function App() {

  const [prayerTimes , setPrayerTimes] = useState({})
  const [dateTime , setDateTime] = useState("")
  const [citi , setCiti] = useState("Cairo")

  const citys = [  
    {name :"القاهرة" , value:"Cairo"},
    {name :"الأسكندرية" , value:"Alexandria"},
    {name : "الجيزة" , value: "Giza"},
    {name :"المنصورة" , value:"Monsoura"},
    {name :"الأسوان" , value:"Aswan"},
    {name :"الأقصر" , value:"Luxor"},
  ]



  useEffect(() => {
    const fetchPrayerTime = async () => {
      try{
        const response = await fetch(`https://api.aladhan.com/v1/timingsByCity/24-05-2025?city=Eg&country=${citi}`);
        const data_Prayar = await response.json()

        setPrayerTimes(data_Prayar.data.timings)
        setDateTime(data_Prayar.data.date.gregorian.date)

        console.log(data_Prayar.data.date.gregorian.date);


      }catch(error){
        console.log(error)
      }

    }

  fetchPrayerTime()

  },[citi])


  const formateTimes = (time) =>{
    if(!time){
      return "00:00";
    }
    let [hours , minutes] = time.split(":").map(Number)
    const perd = hours >= 12 ? "PM" : "AM";
    hours = hours % 12 || 12;
    return`${hours}:${minutes < 10 ? "0" + minutes : minutes} ${perd}`
  }

  return (
    <>
     <section>
      <div className="container">
        <div className="top-section">
          <div className="city">
            <h3>المدينة</h3>
            <select name="" id="" onChange={(e) => setCiti(e.target.value)}>
          {citys.map((city) => (
            <option key={city.value} value={city.value}>{city.name}</option>
          ))}
            </select>
          </div>

          <div className="date">
            <h3>التاريخ</h3>
            <h4>{dateTime}</h4>
          </div>
        </div>
        <Prayer name="الفجر" time={formateTimes(prayerTimes.Fajr)}/>
        <Prayer name="الظهر" time={formateTimes(prayerTimes.Dhuhr)}/>
        <Prayer name="العصر" time={formateTimes(prayerTimes.Asr)}/>
        <Prayer name="المغرب" time={formateTimes(prayerTimes.Maghrib)}/>
        <Prayer name="العشاء" time={formateTimes(prayerTimes.Isha)}/>
      </div>
     </section>
    </>
  )
}

export default App

اعتذر ان كان الامر مزعج بالنسبة لكم

محمد_عاطف · 24 مايو

بتاريخ 2 دقائق مضت قال Hxfhf Ucicic:
import Prayer from "./components"
import React,{useEffect, useState} from "react"

أولا هنا في هذا السطر نحن نقوم بإستيراد المكون Prayer من مجلد components .

وفي السطر الثاني نقوم بإستيراد الخطافات :

useState: وهذا الخطاف يستخدم لإدارة حالة المكون. حيث يسمح لك بتخزين البيانات التي يمكن أن تتغير بمرور الوقت وتحديث الواجهة تلقائيا عندما تتغير هذه البيانات.
useEffect: وهو يستخدم لتنفيذ تأثيرات جانبية في المكونات .و التأثيرات الجانبية هي الأمور التي تتم في الخلفية مثل جلب البيانات من API أو التعامل مع الأحداث المستمعين وغيرها.

بتاريخ 8 دقائق مضت قال Hxfhf Ucicic:

  const [prayerTimes , setPrayerTimes] = useState({})
  const [dateTime , setDateTime] = useState("")
  const [citi , setCiti] = useState("Cairo")

هنا في هذا الجزء نقوم بتريف المتغيرات التي نستخدمها في البرنامج مع إستخدام الخطاف useState لإدارة الحالة لتلك المتغيرات .

والمتغير prayerTimes تقوم فيه بتخزين أوقات الصلاة ككائن والقيمة الأولية له هي كائن فارغ {} قبل إرسال الطلب API و setPrayerTimes دالة تستخدم لتحديث قيمة هذا المتغير prayerTimes.

والمتغير dateTime هو لتخزين التاريخ الحالي كسلسلة نصية والقيمة الأولية له هي سلسلة فارغة "" وsetDateTime هي الدالة الخاصة بتحديث قيمة dateTime.

والمتغير citi متغير لتخزين اسم المدينة التي تم إختيارها والقيمة الأولية هي Cairo و setCiti هي الدالة الخاصة بتحديث قيمة citi.

بتاريخ 13 دقائق مضت قال Hxfhf Ucicic:

 const citys = [  
    {name :"القاهرة" , value:"Cairo"},
    {name :"الأسكندرية" , value:"Alexandria"},
    {name : "الجيزة" , value: "Giza"},
    {name :"المنصورة" , value:"Monsoura"},
    {name :"الأسوان" , value:"Aswan"},
    {name :"الأقصر" , value:"Luxor"},
  ]

وهنا أنت تقوم بتعريف المدن التي ستستخدمها لعرضها في القائمة المنسدلة ليختار المستخدم منها المدينة الخاصة لعرض أوقات الصلاة لها حيث تحتوي على :

name: وهو الإسم العربي للمدينة والتي تقوم بعرضه للمستخدم.
value: وهو الاسم الإنجليزي للمدينة والتي تقوم بإرساله إلى API.

بتاريخ 14 دقائق مضت قال Hxfhf Ucicic:

useEffect(() => {
    const fetchPrayerTime = async () => {
      try{
        const response = await fetch(`https://api.aladhan.com/v1/timingsByCity/24-05-2025?city=Eg&country=${citi}`);
        const data_Prayar = await response.json()

        setPrayerTimes(data_Prayar.data.timings)
        setDateTime(data_Prayar.data.date.gregorian.date)

        console.log(data_Prayar.data.date.gregorian.date);


      }catch(error){
        console.log(error)
      }

    }

  fetchPrayerTime()

  },[citi])

وفي هذا الجزء نستخدم الخطاف useEffect وهو المسؤول عن إعادة تحديث المكون عند تغير قيمة المتغير في مصفوفة الترابطات وهنا وضعت [citi] أى إنه ى تغير يحدث في القيمة citi سيتم تنفيذ ما بداخل الخطاف.

وبعد ذلك قمت بتعريف الدالة fetchPrayerTime وهي دالة غير متزامنة (asynchronous) والتي تستخدمها لجلب البيانات من API.

بعد ذلك تقوم بجلب البيانات من ال API من خلال إرسال طلب بإستخدام fetch وتقوم في الطلب بإرسال المتغير citi والذي إختاره المستخدم لجلب أوقات الصلاة لتلك المدينة وتقوم بوضع الرد في الثابت response.

بعد ذلك تقوم بتحويل البيانات في response إلى json ووضعه في الثابت data_Prayar .

بتاريخ 19 دقائق مضت قال Hxfhf Ucicic:

        setPrayerTimes(data_Prayar.data.timings)
        setDateTime(data_Prayar.data.date.gregorian.date)

بعد ذلك هنا تقوم بوضع قيم prayerTimes وتحديث حالتها بأوقات الصلاة التي إستلمناها من ال API وأيضا تحديث حالة dateTime بالتاريخ الميلادي المستلم من ال API.

بتاريخ 20 دقائق مضت قال Hxfhf Ucicic:
  fetchPrayerTime()

وإخيرا هنا تقوم بإستدعاء الدالة بداخل الخطاف حيث في كل تعديل لقيمة citi يتم إستدعاء هذه الدالة تلقائيا وإحضار البيانات من ال API ووضع النتائج في المتغيرات التي عرفناها في البداية.

بتاريخ 21 دقائق مضت قال Hxfhf Ucicic:

  const formateTimes = (time) =>{
    if(!time){
      return "00:00";
    }
    let [hours , minutes] = time.split(":").map(Number)
    const perd = hours >= 12 ? "PM" : "AM";
    hours = hours % 12 || 12;
    return`${hours}:${minutes < 10 ? "0" + minutes : minutes} ${perd}`
  }

هنا في تلك الدالة تقوم بإستقبال معامل time و وهو وقت بصيغة 24 ساعة مثل "13:30" وتقوم بتحويله إلى صيغة 12 ساعة مع AM/PM أى صباحا/مساءا مثل "1:30 PM".

وفي أول جزء نقوم بالتحقق من time وإذا كان فارغا أى وقت فارغ أو تم تمرير أى قيمة فارغة سيتم إعادة الوقت "00:00".

بعد ذلك نقوم بفصل السلسلة النصية بناء على ":" . أى أنه سيتم فصل السلسلة إلى جزئين جزء قبل علامة : وهو الساعات ووضعه في المتغير hours وجزء بعد : وهو الدقائق ويتم وضع في المتغير minutes .

بعد ذلك نتحقق من أن الساعات hours أكبر من أو تساوي 12 وبما أنها أكبر من 12 إذا الوقت هو مساءا ولهذا يتم إستخدام "PM" أما إذا لم تكن كذلك فإذا الوقت هو صباحا.

بتاريخ 25 دقائق مضت قال Hxfhf Ucicic:
    hours = hours % 12 || 12;

بعد ذلك هنا نقوم بتحويل الساعات من صيغة 24 ساعة إلى 12 ساعة مثل 13 ستصبح 1. حيث أن علامة % تعني باقي القسمة أى أن 13%12 تعني أنه لدينا 1 باقي القيمة ويتم تحويلها إلى صيغة 24 . اما إذا كان باقة القسمة 0 فهذا يعني أن الساعه 0 أى 12 صباحا لهذا يتم إستخدام 12.

بتاريخ 28 دقائق مضت قال Hxfhf Ucicic:
    return`${hours}:${minutes < 10 ? "0" + minutes : minutes} ${perd}`

وهنا يتم إعادة السلسلة النصية التي تعبر عن الساعة حيث يتم وضع الساعات والدقائق وبعدها AM أو PM . ولاحظ أننا ننظر إلى الدقائق فلو كانت أقل من 10 نريد وضع 0 قبلها فمثلا لو كانت 3 نريد أن تكون "03" وليس "3" والتي من الممكن أن يتم إعتبارها كأنها 30 وليس 3 في الوقت.

وأخيرا نقوم بعرض عناصر ال HTML لدينا .

بتاريخ 30 دقائق مضت قال Hxfhf Ucicic:

<select name="" id="" onChange={(e) => setCiti(e.target.value)}>
          {citys.map((city) => (
            <option key={city.value} value={city.value}>{city.name}</option>
          ))}
            </select>

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

ولاحظ أننا في العنصر select إستخدمنا الدالة onChange والتي يتم تنفيذها عند كل تغير في قيمة select أى عند إختيار أى مدينة من القائمة المنسدلة وهكذا عند إختيار أى قيمة يتم تغير قيمة المتغير citi والتي بدورها تقوم بتشغيل الخطاف useEffect والتي تقوم بإرسال طلب API وإستقبال البيانات ووضعها لديك لعرضها في الموقع.

بتاريخ 33 دقائق مضت قال Hxfhf Ucicic:

        <Prayer name="الفجر" time={formateTimes(prayerTimes.Fajr)}/>
        <Prayer name="الظهر" time={formateTimes(prayerTimes.Dhuhr)}/>
        <Prayer name="العصر" time={formateTimes(prayerTimes.Asr)}/>
        <Prayer name="المغرب" time={formateTimes(prayerTimes.Maghrib)}/>
        <Prayer name="العشاء" time={formateTimes(prayerTimes.Isha)}/>

وهنا تقوم بعرض المكون Prayer بعد تمرير أوقات الصلاة له وسيتم عرض الصلاة مع الوقت الذي تم إعادته من ال API.

Abdulrahman Muhammad · 24 مايو

أكيد، لفهم افضل سنقوم بتقسيم كل جزء وشرحه بشكل منفصل:
الاستيراد

import Prayer from "./components"
import React, { useEffect, useState } from "react"

Prayer: مكون لعرض وقت الصلاة.
useState و useEffect: أدوات من React لتخزين الحالة وتشغيل كود عند تغيير البيانات.

المتغيرات والحالة

const [prayerTimes, setPrayerTimes] = useState({}) 
const [dateTime, setDateTime] = useState("") 
const [citi, setCiti] = useState("Cairo")

prayerTimes: يخزن أوقات الصلاة القادمة من API.
dateTime: يخزن التاريخ القادم من نفس الـ API.
citi: المدينة الحالية المختارة.

المدن المتاحة

const citys = [ 
  {name: "القاهرة", value: "Cairo"}, 
  {name: "الأسكندرية", value: "Alexandria"}, 
  ... 
]

مصفوفة تحتوي على المدن التي يمكن اختيارها.

جلب بيانات الصلاة

useEffect(() => { 
  const fetchPrayerTime = async () => { 
    try { 
      const response = await fetch(`https://api.aladhan.com/v1/timingsByCity/24-05-2025?city=Eg&country=${citi}`);
      const data_Prayar = await response.json() setPrayerTimes(data_Prayar.data.timings)
      setDateTime(data_Prayar.data.date.gregorian.date) 
    } 
    catch (error) { 
      console.log(error) 
    } 
  } fetchPrayerTime() 
}, [citi])

كلما تغيّرت المدينة (citi)، يتم جلب بيانات جديدة من موقع aladhan.com.
يتم حفظ أوقات الصلاة والتاريخ في الحالة (useState).

تنسيق الوقت

const formateTimes = (time) => { 
  if (!time) return "00:00"; 
  let [hours, minutes] = time.split(":").map(Number); 
  const perd = hours >= 12 ? "PM" : "AM"; 
  hours = hours % 12 || 12; 
  return `${hours}:${minutes < 10 ? "0" + minutes : minutes} ${perd}`; 
}

يحول الوقت من 24 ساعة إلى 12 ساعة مع AM/PM.

واجهة المستخدم

قائمة لاختيار المدينة.
عرض التاريخ.
عرض أوقات الصلاة باستخدام مكون Prayer.

مثال على استخدام المكون Prayer:

<Prayer name="الفجر" time={formateTimes(prayerTimes.Fajr)} />

يعرض اسم الصلاة ووقتها بعد تنسيقه.

Zen Eddin Allaham · 25 مايو

السلام عليكم اصبحت انفذ مشروع اوقات صلاة بستخدام ريأكت لوحدي, ما المشاريع التي يمكن قيام بها ايضاً واريده يكون اصعب من هذه التطبيق

Abdulrahman Muhammad · 25 مايو

بتاريخ 3 دقائق مضت قال Hxfhf Ucicic:

السلام عليكم اصبحت انفذ مشروع اوقات صلاة بستخدام ريأكت لوحدي, ما المشاريع التي يمكن قيام بها ايضاً واريده يكون اصعب من هذه التطبيق

عمل جيد ، ممتاز أنك أنجزت مشروع أوقات الصلاة باستخدام React.

هذا هو الطريق الصحيح تطبيق المشاريع وتطور في الصعوبة والتقنيات حتى تنمو مهاراتك

بعض الأفكار المناسبة لمستواك الحالي وتُساعدك على التعلم أكثر:

1. تطبيق تحويل العملات

المستخدم يختار عملتين ويُدخل المبلغ.
يظهر له السعر المحوّل مباشرة باستخدام API من الإنترنت.
تتعلم فيه التعامل مع الـ API بشكل أعمق.

2. تطبيق مهام (To-Do List) مطوّر

إضافة مهمة – تعديل – حذف – تعليم كمنتهية.
استخدم طريقة لحفظ المهام مثل LocalStorage أو Firebase..

3. مفكرة الأذكار اليومية

كل يوم تُعرض لك أذكار جديدة.
يُمكن التنقل بين الأذكار وحفظ المفضلة.

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

Zen Eddin Allaham · 25 مايو

هل لديك روابط عبر سوشل ميديا لتطبيقات التي شرحتهم لانني لم اجدهم على يوتيوب من اجل تعلم الشرح

عبدالباسط ابراهيم · 28 مايو

بتاريخ On 25‏/5‏/2025 at 21:12 قال Hxfhf Ucicic:

هل لديك روابط عبر سوشل ميديا لتطبيقات التي شرحتهم لانني لم اجدهم على يوتيوب من اجل تعلم الشرح

يمكنك البحث في اليوتيوب وستجد الكثير من الدورات والفيديوهات التي تشرح بناء هذه التطبيقات ولكن غالباً ستجد ذلك باللغة الإنجليزية ومع ذلك حاول البحث عن Currency Converter react بدلًا من البحث عن تطبيق تحويل عملات React

وأيضاً Real-time Chat Application .

ولكن يجب مراعاة التدرج في الصعوبة والتأكد أيضاً من استخدام التقنيات التي قمت بتعلمها فقط

ما وظيفة الكود التالي والمنطق الخاص به

السؤال

Zen Eddin Allaham

6 أجوبة على هذا السؤال

Recommended Posts

محمد_عاطف

Abdulrahman Muhammad

Zen Eddin Allaham

Abdulrahman Muhammad

Zen Eddin Allaham

عبدالباسط ابراهيم

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية