Mustafa Suleiman

بالنسبة للأحياء فستحتاج إلى مكتبة خاصة ببيانات منطقة جغرافية معينة أو قم بإنشاء جدول في قاعدة البيانات مخصص للأحياء، بينما الدول والولايات والمدن والعملات والمناطق الزمنية فذلك متاح من خلال المكتبات التالية: nnjeim/world وهي الأفضل altwaireb/laravel-world nerdsnipe/laravel-countries igaster/laravel_cities sufyan/laravel-countries-states-cities

تستطيع حل بعض المسائل على موقع Codewars: وبجانبه حاول حل التمارين التالية لإختبار استيعابك فيما تعلمته على إفتراض أنّ المستوى الخاص بك هو متوسط: اكتب دالة تستقبل سلسلة نصية كمدخل وتعيد السلسلة النصية معكوسة. دالة تستقبل جملة كمدخل وتعيد أطول كلمة في الجملة. دالة تتحقق مما إن كانت الكلمة المدخلة تُقرأ بنفس الشكل من اليمين لليسار ومن اليسار لليمين، ويجب تجاهل حالة الأحرف والمسافات. دالة تستقبل مصفوفة كمدخل وتعيد مصفوفة جديدة تحتوي على العناصر الفريدة فقط بدون تكرار. لديك مصفوفة من الكائنات، كل كائن يمثل منتج له اسم وسعر، فاكتب دالة تحسب المجموع الكلي لأسعار المنتجات. لديك مصفوفة من الطلاب، كل طالب له اسم والفصل الذي ينتمي إليه، أنشيء دالة تقوم بتجميع الطلاب حسب فصولهم. وكتمارين على الـ DOM: 1- فأنشئ صفحة HTML تحتوي على: عنوان <h2> يعرض الرقم 0. زر زيادة (+). زر نقصان (-). واكتب كود جافا سكريبت بحيث عند الضغط على زر زيادة يزيد الرقم المعروض، وعند الضغط على نقصان يقل الرقم. 2- قائمة مهام بسيطة To-Do List من خلال صفحة HTML تحتوي على: حقل إدخال نصي زر إضافة. قائمة غير مرتبة. ومن خلال جافا سكريبت اكتب منطق بحيث عندما يكتب المستخدم مهمة في حقل الإدخال ويضغط على إضافة، تتم إضافة المهمة كعنصر جديد <li> داخل القائمة <ul>. 3- بناء واجهة بسيطة تسمح للمستخدم بإدخال اسم مدينة وعرض درجة الحرارة الحالية فيها، وذلك من خلال استخدام API مجاني للطقس مثل OpenWeatherMap. وتعامل مع حالات الخطأ، مثل إدخال اسم مدينة غير موجود.

المُتاح هو نشر المقالات، وعليكِ: إرسال فكرة عامة حول المقال المُراد كتابته أو رابط للمقال المُراد ترجمته (أو المقال كاملًا إن كان جاهزًا)، فيُمكن أن يكون الموضوع خارج اهتماماتنا، أو أن هناك مقالات قيد الكتابة حوله، أو أن الموضوع قد سبق الحديث عنه، ولا نرغب في تضييع جهدك سُدًى. بعد الحصول على المُوافقة المبدئية تقوم بتحرير المقال وإرسال مُسودة "جاهزة للنشر" يفضل أن يُرسل المقال على هيئة ملف markdown، ملف odt أو ملف docx (على هذا الترتيب). تتم المُراجعة التقنية للمقال من طرف عُضو في فريق التحرير، والذي سيتولى اقتراح تعديلات أو تصحيحات إن كانت هناك حاجة لذلك. بعد الفراغ مما سبق يمر المقال إلى مرحلة التدقيق اللغوي يُنشر المقال وستجدي تفصيل هنا: https://academy.hsoub.com/pages/write-for-us/publication-process/ وتلك هي قواعد كتابة المقالات المناسبة للنشر بالأكاديمية: https://academy.hsoub.com/pages/write-for-us/style-guide/ بينما الكُتب، غير مُتاح نشرها إلا من قبل فريق الأكاديمية نفسه ويتم إختيار مواضيع معينة للكتب للعمل على كتابتها ونشرها.

ما هي الدورة المقصودة؟ وما هو عمرك وهل تنوي العمل على منصات العمل الحر أم تستهدف سوق العمل في بلدك؟

بالطبع الفترة التأسيسية هي 6 أشهر، وتصل أحيانًا إلى سنة حسب المجهود المبذول والخبرات السابقة والفروقات الفردية من شخص لشخص، وكذلك الوقت المخصص للدراسة ومدى الإلتزام بالمدة المحددة. وفي حال الإلتزام في السنة الأولى والدراسة بشكل مُكثف أي بحد أدنى 4 إلى 5 ساعات يوميًا، فمن المفترض الوصول لمستوى Junior، أي أنك قادر على تطوير مشاريع حقيقية والمساهمة في مشاريع قائمة بالفعل، ولكن بحاجة إلى التوجيه والإشراف من المطورين الأكثر خبرة. في الـ 6 أشهر أولى عليك بالتركيز على الأساسيات مع التطبيق على مشاريع صغيرة، وعند الوصول لمستوى تصبح به قادر على تنفيذ مشاريع بلغة جافاسكريبت فقط دون نسخ أعمى من دروس يوتيوب، بمعنى أصبحت قادر على تنفيذ مشروع Weather App كامل مثلاً، بعدها انتقل إلى تعلم React وخصص لها شهر ثم تعلم TypeScript والتطبيق على ذلك في مشاريع React لمدة شهر، ثم Next.js لمدة شهر. ولا مشكلة ولو وصلت لتلك المرحلة خلال ثلاثة أو أربعة أشهر فبإمكانك البدء في React مباشرة، مع الاستمرار في تعميق الأساسيات بالتوازي، أما لو احتجت ستة أشهر لإتقانها فلا مشكلة، فسرعة التعلم تختلف من شخص لآخر. لأنّ React لا تُعلمك أساسيات الويب بل تفترض أنك على علم بها، ومعظم المشكلات التي ستواجهها في React أصلها JavaScript أو CSS. ثم تعلم كيف تقوم بإختبار مشروعك من خلال Unit و E2E tests.

هناك إجابات غير صحيحة، لذا لا يتم السماح لك باستكمال عملية التسجيل إلا بعد توفير إجابات صحيحة. قم بقراءة التالي أولاً بالضغط على تبويب المستقلون وعام أيضًا، وقراءة المحتوى الخاص بهم: https://mostaql.com/p/terms بعد ذلك قم بالعودة والإجابة على الأسئلة من جديد.

ستجد تفصيل هنا: https://support.mostaql.com/create-account https://support.mostaql.com/joining-as-freelancer

اسم المستخدم يجب أن لا يقل عن 4 أحرف، بينما أنت كتبت 3 أحرف فقط zen لذا قم بكتابة zeen

ذلك ما قصدته، في حال لا يظهر لك اسم المكون عند كتابته وبالضغط عليه يتم الاستيراد تلقائيًا، قم بإنشاء ملف باسم jsconfig.json في مجلد المشروع الرئيسي وضع به التالي: { "exclude": ["node_modules"] } لاحظ عليك الضغط على اسم المكون ليتم استيراده عندما يظهر في الإقتراحات:

ما تعلمته هو الأساسيات ومن خلال المشاريع العملية في باقي الدورة ستتعلم المزيد، وستصل لمستوى متوسط من خلال المشاريع التي في الدورة عند استيعاب ما تم شرحه. حيث سيتم التعمق في استخدام الخطافات خاصًة المهم منها وهم: useState useEffect useContext useRef وأيضًا سيتم التعمق في مفهوم إدارة الحالة على نطاق أوسع، ففي المشاريع المتوسطة والكبيرة ستحتاج إلى مكان مركزي لإدارة الحالة التي نشاركها مكونات كثيرة، وذلك من خلال مكتبة بسيطة وسهلة وهي Zustand. بالإضافة إلى التعمق في طريقة التعامل مع الخوادم والبيانات الخارجية، وكيفية استخدام react router للتنقل بين الصفحات المختلفة دون إعادة تحميل الصفحة بالكامل. واستخدام Tailwind CSS والذي هو إطار عمل CSS الأشهر حاليًا، وتعلمه سيجعلك تقوم ببناء الواجهات بشكل سريع. بجانب ما سبق قم بالبحث وتعلم عن useReducer و useCallback وuseMemo، وكذلك تعلم كيفية إنشاء خطافات مخصصة.

ليس كذلك، بل في الواقع العملي ستجد مزيج هجين من أساليب برمجية مختلفة، حيث يتم استخدام كل أسلوب للمهمة المناسبة، بمعنى البرمجة الوظيفية والإجرائية 60-70% كالتالي: import pandas as pd import numpy as np from sklearn.model_selection import train_test_split from sklearn.preprocessing import StandardScaler data = pd.read_csv('data.csv') def preprocess_data(df): df = df.dropna() df['feature'] = df['feature'].apply(lambda x: x.strip()) return df def train_model(X, y): X_train, X_test, y_train, y_test = train_test_split(X, y) scaler = StandardScaler() X_train_scaled = scaler.fit_transform(X_train) والبرمجة الكائنية 20-30% كالتالي لبناء pipelines معقدة أو مكتبات، أو تغليف النماذج فبدلاً من وجود متغيرات متناثرة للنموذج والمحوّلات وإعدادات المعالجة، الأفضل إنشاء صنف ModelWrapper يحتوي على كل ما يتعلق بالنموذج من كيفية تحميله، كيفية معالجة المدخلات، كيفية التنبؤ، وكيفية تفسير المخرجات، وذلك يسهل بشكل كبير عملية نشر النموذج. class DataProcessor: def __init__(self, config): self.config = config self.scaler = StandardScaler() def fit(self, data): self.scaler.fit(data) return self def transform(self, data): return self.scaler.transform(data)

مكتبة خاصة بإضافة إشعارات ذات تصميم جميل، وبشكل سريع سهل مع إمكانية التخصيص، وتلك الإشعارات تُعرف باسم Toasts، وهي الرسائل الصغيرة التي تظهر في زاوية الشاشة لإعلام المستخدم بشيء ما حدث، مثل تم الحفظ بنجاح، حدث خطأ، أو جاري التحميل. ومن خلالها تستطيع عرض إشعار بسطر كود واحد فقط: import toast, { Toaster } from 'react-hot-toast'; const notify = () => toast('تم الحفظ بنجاح!'); function App() { return ( <div> <button onClick={notify}>احفظ</button> <Toaster /> </div> ); } كذلك تدعم الـ Promises وتلك من أقوى ميزاتها، أي بسهولة بإمكانك عرض إشعارات مختلفة بناءًا على حالة الـ Promise، بمعنى جاري التنفيذ، نجاح أو فشل، وذلك مناسب للعمليات غير المتزامنة مثل طلبات API. const myPromise = fetchData(); toast.promise(myPromise, { loading: 'جاري الحفظ...', success: <b>تم الحفظ بنجاح!</b>, error: <b>فشل الحفظ.</b>, }); وللعلم يوجد مكتبة أخرى وهي React-Toastify بها خيارات تخصيص متقدمة جدًا، كتغيير شكل شريط التقدم وغيره من التخصيصات.

ما تقصده يسمى Auto import وذلك متاح بالفعل في vscode، تأكد من أنه مُفعل بالضغط على File بالأعلى ثم اختر preferences ثم Settings وابحث عن التالي في شريط البحث: javascript.suggest.autoImports تأكد من أنّ تلك الميزة مُفعلة وبجانبها علامة صح. في حال ما زلت تواجه مشكلة، فقم بتحديد وسم البداية للمكون وليس النهاية، واضغط على CTRL + زر المسافة في لوحة المفاتيح وسيظهر لك إقتراح باستيراده اضغط عليه كالتالي: لاحظ قمت بتحديد كلمة Register فقط في البداية وليس النهاية.

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

الأمر يتوقف على حجم الصيدلية ووجود سلاسل لها من عدمه، وأيضًا الاحتياجات المُرادة من البرنامج، وبغض النظر عن البرنامج، فالعامل الأكثر أهمية هو توافر الربط الآلي والسلس مع المنصات الحكومية الثلاث الإلزامية: نظام رصد: لتتبع الأدوية من هيئة الغذاء والدواء. خدمة وصفتي: لاستقبال وإدارة الوصفات الإلكترونية. الفوترة الإلكترونية ZATCA: من هيئة الزكاة والضريبة والجمارك. ولا تقبلي بأي نظام يتطلب رفع البيانات يدويًا لتلك المنصات، فيجب أن تكون العملية مؤتمتة بالكامل داخل البرنامج لتجنب الأخطاء والمخالفات. وعامًة يتوفر نظام Aumet كخيار جيد، بسبب بنيته السحابية، ويستخدم الذكاء الاصطناعي لتحسين إدارة المخزون والمبيعات. ويتوفر أيضًا نظام Pharmacare و نظام Titan كأنظمة قوية ومجربة على نطاق واسع في السوق السعودي، ويوفران تحكم كامل في البيانات، ويتم استضافة النظام على خوادم خاصة وليس على السحابة ويتم شراءالرخصة مرة واحدة فقط على عكس Aumet ذو الإشتراك السنوي. والأمر بحاجة إلى مقارنة، لذا الملف التالي به مقارنة شاملة مقارنة بين أنظمة الصيدليات بالسعودية.xlsx

ميثود خاصة بالمصفوفات في جافاسكريبت، للتحقق مما إن كان عنصر واحد على الأقل في المصفوفة يحقق شرط معين، حيث يتم تمرير دالة callback إليها ويتم البحث في المصفوفة بناءًا على المنطق الذي في تلك الدالة، ولو تم إعادة القيمة true لأي عنصر، فدالة some() تتوقف عن العمل فورًا وتُعيد true. const numbers = [1, 3, 5, 7, 8, 9]; const hasEvenNumber = numbers.some(function(number) { return number % 2 === 0; }); console.log(hasEvenNumber); قمت بالتحقق من وجود عدد زوجي في المصفوفة، ونتيجة الطباعة هي True بسبب وجود 8. وكمثال آخر للتحقق من عدم وجود منتج معين في المخزون: const products = [ { name: 'Laptop', inStock: true }, { name: 'Mouse', inStock: true }, { name: 'Keyboard', inStock: false }, { name: 'Monitor', inStock: true } ]; const hasOutOfStockProduct = products.some(product => !product.inStock); console.log(hasOutOfStockProduct); فهنا الدالة some() تبحث عن منتج واحد على الأقل يحقق الشرط !product.inStock أي product.inStock قيمتها false، وعندما تصل إلى 'Keyboard'، يتحقق الشرط، وتُعيد true مباشرًة.

بسبب "type": "module" في package.json، والتي تفرض عليك تضمين امتداد الملف .js في جميع عبارات الاستيراد، أي عليك تحديث جميع عبارات الاستيراد في مشروعك لتتضمن .js

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

لا مشكلة تستطيع القيام بمشاريع صغيرة سواء Landing Pages, مواقع شخصية أو تطبيقات React بسيطة، تحويل تصاميم PSD/Figma إلى كود HTML. لكن الأفضل هو الإنتظار قليلاً لحين بناء متجر إلكتروني بكامل وظائفه من حيث الواجهة الأمامية، وبعدها تستطيع التقدم على وظائف بأريحية، وأيضًا تعلم أساسيات Next.js فهي لا غنى عنها لمشاريع React حاليًا وليس شرطًا قبل البدء، لكن ستفتح لك فرص أكثر، لذا ابدأ بتعلم الأساسيات أثناء العمل الحر. ثم التعمق في Next.js لتتمكن من تطوير مشاريع Full-stack.

بالطبع ممكن، وذلك متاح عبر منصات العمل الحر مثل مستقل وخمسات وبعيد، أو العمل عن بُعد مع الشركات، لكن يجب تحديد إتجاهك فلو هدفك العمل الحر، فقم بتفقد تلك المنصات ونوعية المشاريع المطلوبة وتعلم المهارات اللازمة لكي تستطيع طرح عرضك على تلك المشاريع ويكون لديك فرصة ومعرض أعمال مناسب. نفس الأمر لو أردت العمل عن بُعد تفقد الوظائف من نوعية Remotely المعروضة على مواقع التوظيف مثل LinkedIn و Indeed وتفقد المهارات اللازمة، لكن المشكلة في وظائف الـ Remotely أنها تتطلب خبرة سنتين أو ثلاث على الأقل. لذا الأنسب لك هو منصات العمل الحر لحين اكتساب خبرة مناسبة لوظائف الـ Remotely.

ما الغرض من الكود؟ حاليًا أنت تقوم بإنشاء نموذج جديد دونّ عرضه، كذلك الدالة بها منطق خاص بملء حقول نصية (item_code.Text, item_name.Text, وخلافه، وتلك الحقول يجب أن تكون موجودة في النموذج الجديد. عامًة قم بعرض النموذج الجديد items frm = new items(); frm.show_recored_date(dataGridView1); frm.Show(); this.Close(); أو قم باستخدام النموذج الحالي، لو الحقول في نفس النموذج حيث لا يجب إنشاء نسخة جديدة، من خلال حذف Dispose(): this.show_recored_date(dataGridView1); لو استمرت المشكلة حاول تمرير البيانات بشكل أفضل كالتالي: public void show_recored_date(DataGridView dataGridView, items targetForm) { if (dataGridView.CurrentRow == null) { MessageBox.Show("الرجاء تحديد صف في الجدول لعرض البيانات."); return; } string item_code_ = Convert.ToString(dataGridView.CurrentRow.Cells[2].Value); string sql = "select * from items where item_code = @itemCode"; using (SqlCommand cmd = new SqlCommand(sql, Class1.sqlCon)) { cmd.Parameters.AddWithValue("@itemCode", item_code_); SqlDataAdapter adp = new SqlDataAdapter(cmd); DataTable dt = new DataTable(); adp.Fill(dt); if (dt.Rows.Count == 0) { MessageBox.Show("لم يتم العثور على بيانات السجل", "رسالة تنبيه"); } else { DataRow dr = dt.Rows[0]; targetForm.item_code.Text = dr["item_code"].ToString(); targetForm.item_name.Text = dr["item_name"].ToString(); targetForm.item_date.Text = dr["item_date"].ToString(); targetForm.item_price.Text = dr["item_price"].ToString(); targetForm.item_qty.Text = dr["item_qty"].ToString(); } } } والاستدعاء: items frm = new items(); show_recored_date(dataGridView1, frm); frm.ShowDialog(); this.Close();

بسبب أنك قمت بتحديد نفس المسار لمكون Background لاحظ path="/" بالتالي تم تجاهل المكون Home وأصبح يتم عرض Background، الصحيح هو تحديد مسار واحد فقط لكل مكون. وأيضًا في الإصدار 6 من react-router-dom، يجب أن تكون جميع مكونات <Route> موجودة داخل مكون <Routes> ليتمكن الراوتر من اختيار المسار الصحيح وعرضه. import Background from "./Components/Background/Background"; import Navbar from "./Components/Navbar/Navbar"; import Home from "./Components/Home/Home"; import { BrowserRouter, Routes, Route } from 'react-router-dom'; function App() { return ( <BrowserRouter> <Background /> <Navbar /> <Routes> <Route path="/" element={<Home />} /> </Routes> </BrowserRouter> ); } export default App; والمكونات <Background /> و<Navbar /> ستكون ثابتة وستظهر في جميع الصفحات حيث لم أقم بتحديد مسار لهم.

جيد جدًا، من المفترض في مشروع X-O تعلمت كيفية إدارة الـ State والتفاعل مع المستخدم عن طريق الأحداث، ومشروع To-Do List تعملت من خلاله عمليات CRUD (Create, Read, Update, Delete)، وهو أساس معظم التطبيقات. وفي مشاريع Portfolio, Restaurant, Hospital تعلمت بناء واجهات المستخدم، تقسيم التطبيق إلى مكونات، وعرض البيانات القادمة من مصدر ثابت، سواء ملف JSON أو بيانات مكتوبة مباشرة في الكود. لكن هل قمت بذلك من خلال مشاهدة شروحات على اليوتيوب؟ في حال ذلك، حاول إذن إعادة مشروع منهم وتنفيذه بمفردك لقياس مدى استيعابك والوقوف على نقاط الضعف، ثم قم بإضافة ميزة لم تكن موجودة في المشروع تستغرق يوم مثلاً في تنفيذها أي ليست ميزة بسيطة. بعد إتمام ما سبق تستطيع الإنتقال لمشروع متقدم أكثر، مثل تطبيق الطقس حيث ستحتاج إلى التعامل مع APIs خارجية مثل OpenWeatherMap API. بعدها انتقل إلى بناء متجر إلكتروني بسيط من أجل تعلم إدارة حالة أكثر تعقيدًا والتنقل بين صفحات متعددة.

ذلك مكون في مشروع React باسم Home، والغرض منه هو عند تحميل المكون لأول مرة، يقوم بجلب بيانات المنتجات من API خارجي لعدة فئات مختلفة. والفئات التي يتم جلبها هي: const categoryData = [ "smartphones", "mobile-accessories", "laptops", "tablets", "sunglasses", "sports-accessories", ] وذلك عن طريق المرور على المصفوفة categoryData من خلال دالة map: const fetchPrduct = async () => { try{ const results = await Promise.all( categoryData.map(async (category) => { const response = await fetch(`https://dummyjson.com/products/category/${category}`); const data = await response.json(); return {[category] : data.products} }) ) Promise.all هنا هو لجلب البيانات لجميع الفئات بشكل متوازٍ في نفس الوقت، حيث دالة all تنتظر حتى يتم إكمال جميع الـ Promises في المصفوفة بنجاح وتسمح بتنفيذ عدة عمليات غير متزامنة مثل طلبات API في نفس الوقت بشكل متوازٍ، بدلاً من انتظار انتهاء كل طلب لبدء الطلب الذي يليه. ثم جمع كل تلك البيانات في كائن واحد، هنا: return {[category] : data.products} لاحظ [category] سيتم استبدالها باسم الفئة الحالية التي في دورة map، ففي جافاسكريبت تستطيع تعيين أسماء الخواص ديناميكيًا في الكائنات بتلك الطريقة. ويخزن الكائن المجمع في حالة أي State المكون ليتم استخدامه لاحقًا، سواء لعرض المنتجات على الصفحة أو غيره. const productsData = Object.assign({}, ...results); setProduct(productsData); و Object.assign دالة لنسخ خصائص كائن أو عدة كائنات إلى كائن آخر، وهنا تم تحديد كائن فارغ { } ليتم نسخ إليه محتوى مصفوفة results والتي بها كائنات، لاحظ ...results تستخدم الـ Spread Operator لتفكيك المصفوفة.

ذلك خطاف من مكتبة react-router-dom ويسمح بالوصول إلى المعلمات أو الـ parameters الديناميكية الموجودة في رابط URL الحالي. أي الرابط التالي test.com/users/ahmed المُعرف هنا هو ahmed وتلك هي صفحة المستخدم، وهنا test.com/products/123 المعُرف هو 123 وسيتم عرض صفحة المنتج الذي يمتلك ذلك المُعرف. لذا بدلاً من إنشاء مكون منفصل لكل مستخدم أو منتج، ستقوم بإنشاء مسار ديناميكي واحد في React Router باستخدام النقطتين الرأسيتين : <Route path="/users/:username" element={<UserProfile />} /> <Route path="/products/:productId" element={<ProductDetails />} /> أي ستحتاج إلى استخدامه لبناء صفحات ديناميكية، من خلال بناء مكون واحد مثل UserProfile, ProductDetails, ArticlePage قادر على عرض بيانات لآلاف العناصر المختلفة، بمعنى صفحة تفاصيل منتج في أمازون، صفحة بروفايل مستخدم في فيسبوك، صفحة مقال في مدونة، ويختلف محتواها باختلاف المُعرف الذي في الرابط. كذلك جلب البيانات من الـ API بشكل فعال، باستخدام المعرف ID المستخرج من useParams لإرسال طلب محدد إلى الـ API، كالتالي: const { postId } = useParams(); useEffect(() => { fetch(`https://api.test.com/posts/${postId}`) .then(res => res.json()) .then(data => setPost(data)); }, [postId]); أيضًا عند قيام المستخدم بنسخ الرابط وإرساله لشخص آخر، ويفتحه ذلك الشخص، سيرى نفس الصفحة بنفس المحتوى تمامًا، بسبب المُعرف الذي في الرابط.