Mustafa Suleiman

find للبحث في مصفوفة وإعادة أول عنصر يطابق شرط معين نقوم بتعريفه في دالة الاختبار، أي دالة callback التي يتم استدعائها من قبل find، وفي حال لم يتم العثور على عنصر، تعود بقيمة undefined. const numbers = [5, 12, 8, 130, 44]; const found = numbers.find(num => num > 10); console.log(found); في الكود السابق بحثت عن عنصر أكبر من 10 وبما أنّ 12 هو أول رقم أكبر من 10 يتم إيجاده بسبب الـ index الخاص به وهو 1 في المصفوفة، لذا النتيجة هي 12، ولا يُشترط أرقام بالطبع الفكرة هي إرجاع أول عنصر في المصفوفة حتى لو كان كائن: const users = [ { id: 1, name: "أحمد" }, { id: 2, name: "محمد" }, { id: 3, name: "علي" } ]; const user = users.find(user => user.id === 2); console.log(user); بينما الدالة findIndex تشبه find، لكن بدلاً من إعادة العنصر نفسه، تُعيد فهرس أي الـ index لأول عنصر يطابق الشرط، وإن لم يتم العثور على عنصر، تُعيد قيمة -1 const numbers = [5, 12, 8, 130, 44]; const index = numbers.findIndex(num => num > 10); console.log(index); حسب الشرط الرقم 12 هو أول رقم أكبر من 10 ، وفهرسه هو 1. بالنسبة لـ findOne فلا توجد دالة في جافاسكريبت بذلك الاسم، وهي خاصة بقاعدة البيانات MongoDB للبحث عن أول مستند يطابق استعلام معين في قاعدة البيانات. db.student.findOne({}) ستُعيد أول مستند مباشرًة لأننا حددنا كائن الشرط على أنه فارغ. بينما لو كتبت: db.student.findOne({ name: "Zen" }) ستُعيد أول مستند به خاصية name بقيمة Zen

find و findIndex دوال خاصة بلغة جافاسكريبت، بينما findOne خاصة بـ MongoDB، هل السؤال صحيح أم أخطأت في الكتابة؟

السؤال غير واضح، هل تقصد المسارات في دورة علوم الحاسوب؟ المسارات المتعلقة هي التالي: قواعد البيانات إلى عالم الويب البرمجة كائنية التوجه الخوارزميات وبنى المعطيات أنماط التصميم أساسيات هندسة البرمجيات إعادة تصميم البرمجيات Refactoring ستحقق استفادة بدراسة كل ما سبق، وفي حال لم تقصد ذلك ما هي المسارات المقصودة؟ تقصد roadmap؟

الفكرة أنّ محتوى الدورة كبير ولا يمكن تضمينه في دورة واحدة وهي دورة جافاسكريبت، وأيضًا محتوى الدورة مُخصص أكثر لتصميم واجهات المستخدم، بالتالي فصل الدورة منطقي لتغطية المواضيع بشكل أعمق، ولا حاجة لتفصيل مزايا كل دورة، يوجد عرض حاليًا للإشتراك في كلا الدورتين. وبخصوص أنّ اللغات الأساسية بجانب بوتستراب وjQuery غير كافية للعمل على مشاريع حقيقية، لأنّ مثل تلك المشاريع بها واجهات مستخدم معقدة نسبيًا وأيضًا تتطلب الكثير من التفاعل معها، وتنفيذ ذلك بواسطة التقنيات سابقة الذكر أم غير عملي بالمرة، وحتى لو قمت بتنفيذه من خلالها سيكون أداءًا وجودة أقل بكثير من المكتبات والإطارات المتخصصة في إنشاء الواجهة الأمامية التفاعلية مثل React و Vue.js. ستتفهم الأمر عند دراسة React ومفهوم المكونات والحالة state والتحديث التلقائي للواجهة دونّ إعادة تحديث الصفحة، وإمكانية التنقل بين الصفحات بسرعة دونّ تحميل الصفحة.

لن تستطيع حفظ سجل في جدول الصور images يعتمد على مفتاح أجنبي fk_user_id قبل أن يكون المستخدم user قد حُفظ بالفعل وحصل على id. الحل هو في ترتيب العمليات واستخدام المعاملات Transactions لضمان أن كل شيء يتم بنجاح أو لا شيء يتم على الإطلاق، أولاً في نموذج app/Models/User.php عليك تعريف العلاقات كالتالي: namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Foundation\Auth\User as Authenticatable; use Illuminate\Notifications\Notifiable; class User extends Authenticatable { use HasFactory, Notifiable; protected $fillable = [ 'name', 'email', 'password', ]; public function images() { return $this->hasMany(Image::class, 'fk_user_id', 'id'); } } المهم هو تحديد العلاقة في دالة images. ثم في النموذج app/Models/Image.php: namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Image extends Model { use HasFactory; protected $fillable = [ 'fk_user_id', 'path', // أو اسم الحقل الذي يخزن مسار الصورة 'original_name', ]; public function user() { return $this->belongsTo(User::class, 'fk_user_id', 'id'); } } ثم في الـ Controller الخاص بمعالجة ذلك وليكن UserController أو RegisterController: use App\Models\User; use Illuminate\Http\Request; use Illuminate\Support\Facades\DB; use Illuminate\Support\Facades\Hash; use Illuminate\Support\Facades\Storage; class UserController extends Controller { public function store(Request $request) { $validatedData = $request->validate([ 'name' => 'required|string|max:255', 'email' => 'required|string|email|max:255|unique:users', 'password' => 'required|string|min:8|confirmed', 'user_images.*' => 'nullable|image|mimes:jpeg,png,jpg,gif|max:2048' // 'user_images' هو اسم حقل الإدخال للملفات ]); DB::beginTransaction(); // ابدأ المعاملة try { $user = User::create([ 'name' => $validatedData['name'], 'email' => $validatedData['email'], 'password' => Hash::make($validatedData['password']), ]); if ($request->hasFile('user_images')) { foreach ($request->file('user_images') as $file) { $path = $file->store('user_photos', 'public'); $user->images()->create([ 'path' => $path, 'original_name' => $file->getClientOriginalName(), ]); } } DB::commit(); return response()->json(['message' => 'User and images saved successfully!', 'user_id' => $user->id], 201); } catch (\Exception $e) { DB::rollBack(); return response()->json(['message' => 'Failed to save user and images.', 'error' => $e->getMessage()], 500); } } } $request->hasFile('user_images') يتحقق هل الطلب يحتوي على ملفات بالاسم user_images ويجب أن يكون ذلك هو الـ name الخاص بالحقل في نموذج HTML: <input type="file" name="user_images[]" multiple> و $file->store('user_photos', 'public') يخزن الملف الفعلي ويجب عليك إعداد قرص التخزين public وتشغيل أمر php artisan storage:link لجعل الملفات قابلة للوصول عبر الويب. و $user->images()->create([]) تعتمد على العلاقة hasMany (images()) التي عرفناها في نموذج User، حيث يقوم Eloquent تلقائيًا بملء حقل fk_user_id بـ $user->id.

عند الضغط على أي زر هل يتم الاستمرار وظهور واجهة التثبيت؟ أم يتم الإنتقال لنفس النافذة؟ في حال تم الإنتقال لنفس النافذة boot manager فالمشكلة أنك لم تقم بإضافة نسخة ملف ISO بشكل صحيح. قم بحذف النسخة الوهمية من virtual box وأعد إنشائها من جديد، وأضف ملف الـ ISO. ستجد هنا الخطوات:

لا يوجد أداة مخصصة لذلك، لكن قياسًا على ما ذكرته، تستطيعي معرفة من قام بالحظر هل هو آليًا أم يدويًا، أي السرعة في الحظر، فالخوارزميات هي ملكية خاصة للشركات أي تعتبر صندوقاً أسود ولا يتم الكشف عن تفاصيل عملها بشكل كامل، وأيضًا تتغير طبيعة عملها من فترة لأخرى. السبيل الوحيد هو من خلال الإحصائيات ومقارنة البيانات، بمعنى: 1- المقارنة بين المنصات، هل يتم التعامل مع نفس المحتوى أو محتوى مشابه حول نفس القضية بشكل مختلف على منصات مختلفة (فيسبوك، تويتر، انستغرام، يوتيوب، تيك توك)؟ وذلك سيوضح الأمر حول سياسات أو توجهات خوارزمية خاصة بكل منصة. 2- تتبع مدى وصول وتفاعل المحتوى المتعلق بالقضية على فترة زمنية، تفقدي هل هناك انخفاض مفاجئ أو تدريجي غير مبرر في الوصول والتفاعل بعد حدث معين أو عند استخدام كلمات مفتاحية معينة؟ وهل يتم تقييد الفيديو أكثر من النصوص، أو الصور أكثر من الروابط، فيما يتعلق بتلك القضية؟ وللتأكد هل الحسابات التي تتناول القضية بشكل نقدي أو من زاوية معينة تعاني من انخفاض في الوصول مقارنة بحسابات أخرى ذات حجم متابعين مشابه تتناول نفس القضية بشكل مختلف أو لا تتناولها؟ وبالطبع يوجد أدوات لجمع البيانات الخاصة بالمنشورات التي تقومين بنشرها مثل Hootsuite, Sprout Social, Brandwatch. 3- تحليل الكلمات المفتاحية والهاشتاجات لاختبار الحظر الشبحي Shadow Banning، من خلال البحث عن هاشتاجات معينة متعلقة بالقضية من حسابات غير مرتبطة بك أو بحسابات جديدة، ورؤية هل تظهر كل المنشورات التي تستخدم الهاشتاج، أم أن بعضها مخفي؟ أيضًا انشري محتوى مشابه، مرة مع الكلمات المفتاحية والهاشتاجات المشتبه بها، ومرة بدونها مع التحكم في المتغيرات أخرى قدر الإمكان، وقارني مدى الوصول والتفاعل. وعامًة الباحثين يقومون بإنشاء حسابات وهمية أو حسابات دمية تُسمى sock puppet accounts لنشر أنواع مختلفة من المحتوى المتعلق بالقضية، مع تغيير طفيف في الكلمات أو الصور، ومراقبة كيفية تعامل الخوارزميات معها، لمحاولة الهندسة العكسية لسلوك الخوارزمية بشكل محدود. ويتوفر أدوات تتبع الهاشتاجات مثل Brand24, Talkwalker, أو حتى أدوات البحث المتقدم داخل المنصات، لكنها لا تظهر الحجب مباشرة بنسبة دقيقة، بل مفيدة في توضيح حجم الاستخدام والانتشار، وأي انخفاض غير طبيعي يعتبر مؤشر. أما على منصتي tiktok و instagram تتوفر أداة spikerz لحساب مدى تأثير الـ Shadowban. وفي حال لديكِ خبرة برمجية تستطيعي استخدام الـ Web Scraping لجمع البيانات برمجيًا من مواقع الإنترنت. وهناك أبحاث أكاديمية توفر منهجيات متقدمة، مثل ورقة Regulating algorithmic filtering on social media. أيضًا الدراسة التالية مفيدة: Revealing The Secret Power: How Algorithms Can Influence Content Visibility on Social Media

مرحبًا بك بلقاسم، ستحتاج إلى مراسلة إدارة الأكاديمية من خلال البريد الرسمي، وستجد تفصيل هنا بخصوص الإنضمام كمدرب: https://academy.hsoub.com/pages/teach

ما الذي يظهر لك الآن؟ أغلق تلك النافذة ثم أعد تشغيل النظام في حال لم يحدث شيء.

سيتم شرحها خلال الدورة، وأيضًا ستجد تفصيل هنا:

أنت تقصد على virtual box؟ الأمر بسيط، ستقوم بإنشاء نسخة وهمية كما تفعل مع نظام لينكس، وبالطبع ستحتاج إلى تحميل ملف الـ ISO الخاص بنسخة الويندوز وستجدها هنا: Download - Windows 11 Arabic والرابط السابق من موقع مايكروسوفت للتحميل المباشر وصالح لمدة 24 ساعة، في حال أردت التحميل في وقتٍ لاحق، فمن هنا: https://www.microsoft.com/en-us/software-download/windows11 تستطيع إتباع نفس الخطوات التالية على virtual box لكن لنسخة الويندوز:

يجب التدرج في التطبيق العملي وليس الإنتقال لمشروع مُعقد كبناء متجر إلكتروني، حيث يتم تنفيذه في النهاية بعد تنفيذ عدّة مشاريع بسيطة ومتوسطة من خلال React، لكونه يجمع ما بين الكثير المفاهيم ونوظف من خلاله كل ما تعلمناه في React وHTML, CSS, JS. أيضًا يجب تعلم كيفية إدارة الحالة العامة للتطبيق global state فذلك أمر رئيسي في مثل تلك المشاريع، وستتعلم ذلك في دورة جافاسكريبت من خلال مشروع تطبيق دردشة يشبه WhatsApp، حيث سنستخدم مكتبة zustand لإدارة الحالة العامة. بعد الإنتهاء منه واستيعابه وإعادة تنفيذه بمفردك مرة أخرى، تستطيع تنفيذ المشروع الذي تريده، حيث ستتعلم من خلاله جميع المفاهيم اللازمة لبناء متجر إلكتروني. وفي حال واجهت مشكلة فيوجد على اليوتيوب شروحات لتوضيح كيفية بناء متجر إلكتروني من خلال React، ولا مشكلة في الإطلاع عليها والتعلم منها فأنت مازلت في مرحلة التعلم.

الدورة خاصة بتقنيات MERN بالإضافة إلى تقنيات تطوير تطبيقات الهاتف المحمول من خلال React Native و Ionic، لذا الدورة شاملة لتقنيات جافاسكريبت، ولا يتوجب عليك دراسة الدورة بالكامل، فللحصول على الشهادة الخاصة بالدورة تستطيع دراسة 4 مسارات فقط بحد أدنى، وهم: أساسيات لغة JavaScript أساسيات React.js تطبيق دردشة يشبه WhatsApp أساسيات TypeScript ولو أردت الاستزادة تعلم Next.js من خلال: إنشاء تطبيق أسئلة وأجوبة باستخدام Next.js تطبيق تعلم اللغات باستخدام Next.js أيضًا يوجد مسار تطبيقات الويب التقدمية PWA وهي مفيد لك بشكل عام حيث تقنية PWA أصبحت شائعة الآن.

تستطيع مراسلتهم من هنا وتوضيح حجم الطلبات المتوقعة وسيتم الرد عليك. https://formsubmit.co/services في الوقت الحالي ليس عليك فعل شيء ما قمت به كافٍ، وفي حال حدثت مشكلة تستطيع الإنتقال لمنصة أخرى، مثل Netlify Forms لكن بشرط رفع الموقع على Netlify، والاستخدام المجاني لها هو 100 طلب في الشهر.

لن يحدث مشكلة، الإشتراك المجاني بها كافي بالنسبة لحجم الطلبات المذكور، فعدد الطلبات الشهرية المسموح بها في الاستخدام المجاني غير محدود، بناءًا على المستند الرسمي الخاص بهم. لكن قم بتفعيل reCAPTCHA لتجنب الـ spam، وبالطبع في حال وجود 1000 مستخدم في نفس الوقت فالإشتراك المجاني ليس جيد، فستواجه بُطيء في الأداء عند الإرسال. وطالما قُمت بتنفيذ ذلك في المشروع فلا فائدة من طرح بدائل إذن، في حال واجهت مشكلة، فالحل الأسهل هو استخدام tally.so وتضمينها بالصفحة عن طريق ifram. لكن الحل الأفضل هو وجود قاعدة بيانات، وكحل سهل يوجد firebase لمعالجة الطلبات التي تُرسلها من النموذج، أو عن طريق supabase.

شهادة CCNP تفتح لك أبواباً كثيرة في مجال الشبكات وهي مُعتمدة عالميًا بالتالي ستساعدك بالتأكيد في الحصول على وظيفة جيدة، لكن الجمع بينها وبين الخبرة العملية، حتى لو بسيطة في البداية، سيزيد من فرصك بشكل كبير، خاصًة بدون شهادة جامعية. لكن ابدأ بـ CCNA لأنّ CCNP شهادة متقدمة، بينما CCNA هي الأساس، ومعظم الشركات تتوقع أن يكون تمتلك CCNA أولاً، وستجعل دراسة CCNP أسهل بكثير. وأثناء دراستك لـ CCNA ثم CCNP، يجب أن تقضي وقتًا مساويًا إن لم يكن أكثر في التطبيق العملي في المعامل الافتراضية Virtual Labs وهي برامج تحاكي عمل أجهزة الشبكات الحقيقية من راوترات، سويتشات، جدران نارية، وخلافه ولكن على جهاز الكمبيوتر الخاص بك. أي بدلاً من شراء أجهزة باهظة الثمن، تستطيع إنشاء شبكات كاملة واختبارها وضبط إعداداتها افتراضيًا، وكبداية أثناء دراستك لـ CCNA قم بتحميل برنامج Cisco Packet Tracer، ثم عند دراسة CCNP قم بتحميل وتثبيت EVE-NG. وأنشيء ملف مشاريع بتوثيق تصميمات الشبكات المعقدة التي قمت ببنائها في GNS3 أو EVE-NG، والمشكلات التي واجهتك وكيف حللتها. ولا تتوقف عن التعلم فمجال الشبكات يتطور باستمرار، وأيضًا لتمييز نفسك عن الآخرين، وكن واقعيًا في توقعاتك للوظيفة الأولى، فلامشكلة أن لا تبدأ كمهندس شبكات مباشرة بالراتب الذي تحلم به، ابحث عن وظائف مثل: فني شبكات Network Technician مهندس دعم فني للشبكات Network Support Engineer مسؤول شبكات مبتدئ Junior Network Administrator مقالات وشروحات حول قسم الشبكات في علم الحاسوب.

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

لا يجب عليك ذلك، فكلاهما يقومان بنفس المهمة وهي بناء واجهة مستخدم من خلال المكونات وإدارة الحالة state للتطبيق، ستجد أنّ Angular مُستخدمة في الشركات الكبيرة أكثر، لأنّ Angular هو إطار عمل Framework وليس مكتبة مثل React، بالتالي هو يفرض هيكلية واضحة للمشروع وبه وأدوات أخرى مدمجة ويعتمد على TypeScript بشكل صارم. عدا ذلك ستجد React هي الأكثر استخدامًا والأكثر شهرة. الإختيار يعتمد على متطلبات سوق العمل، ابحث على LinkedIn وIndeed وتفقد المهارات المطلوبة بالنسبة للتخصص الذي اخترته، أي لو اخترت أن تكون front-end developer ابحث عن ذلك.

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

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

المشكلة إذن في الحساب البنكي هل قمت بتقديم حساب لشخص آخر؟، المطلوب ورقة بها ما يلي: اسم صاحب الحساب ويجب أن يطابق ما في حسابك. رقم الحساب المصرفي الذي وضعته في بايونير. شعار البنك. اسم البنك. تاريخ إصدار كشف الحساب لا يزيد عن 3 أشهر سابقة. كل ما سبق يجب أن يُطابق البيانات في حسابك. ويجب تصوير نسخة حقيقية لذلك وليس إرسال نسخة مطبوعة، مع إظهار الـ 4 حواف للورقة بشكل واضح في الصورة والتصوير في إضاءة جيدة. ونصحيتي إليك تجنب استخدام ذلك البنك، تفقد جنسية صاحبه أو مؤسسه، يوجد بنوك إلكترونية أخرى أفضل.

الفكرة هي تحويل الوقت من صيغة 24 ساعة إلى صيغة 12 ساعة مع إضافة "AM" أو "PM" وذلك من خلال دالة بداخلها المنطق لتنفيذ ذلك واسمها formatingTimes تستطيع استدعائها متى تريد. بها معامل باسم times تستقبل قيمة له وهي الوقت الذي تريد تحويله، وفي حال لم يتم إدخال وقت أي قيمة times فارغة أو null أو undefined، فستعيد "00:00" كقيمة افتراضية. عند استقبال الوقت وليكن مثلاً "14:30" فيتم تقسيمه عند علامة : باستخدام split(":")، فيصبح لديك مصفوفتين، الساعات hours والدقائق minutes. ثم يحول القيمتين إلى أرقام باستخدام map(Number)، لأن split تُعيد نصوص. ولو الساعات أكبر من أو تساوي 12، يتم تعيين "PM" للمتغير perd، والعكس لو أقل من 12، يتم تعيين "AM". ويتم التحويل من خلال عامل باقي القسمة % حيث يتم قسمة الساعات على 12 لتحويل الساعات إلى صيغة 12 ساعة، أي لو الساعة 14 فباقي قسمة 14 % 12 = 2. وفي حال الساعات تساوي 0 وذلك عند منتصف الليل، يتم تحويلها إلى 12 باستخدام || 12 حيث عامل || يعني أو في البرمجة لأن 0 تعني false لذا يتم تعيين القيمة الأخرى بعد || وهي 12 لأنها true وذلك يسمى Short circuiting في جافاكسريبت. ثم تنسيق الدقائق في template literals أو قالب النص في النهاية، كالتالي في حال الدقائق minutes أقل من 10، يتم إضافة صفر قبله مثل 05 بدلاً من 5، حيث يوجد شرط ثلاثي Ternary Operator. minutes < 10 ? "0" + minutes : minutes

قم بتثبيت أداة Support Tool من الرابط التالي وبعد الإنتهاء من التثبيت سيتم فتح نافذة لحذف Microsoft Office ثم اتبع الخطوات: https://outlookdiagnostics.azureedge.net/sarasetup/SetupProd_OffScrub.exe في حال استمرت المشكلة قم بتحميل أداة OfficeScrubber من الرابط التالي: https://github.com/abbodi1406/BatUtil/tree/master/OfficeScrubber وأرفقتها لك في المرفقات للتسهيل، بعد فك الضغط ستجد ملف باسم OfficeScrubber.cmd اضغط عليه بزر الفأرة الأيمن ثم اختر run as administrator وسيتم تفقد نسخة Microsoft Office المثبتة تلقائيًا والبدء في الحذف. BatUtil-OfficeScrubber.rar

تستطيع الاشتراك بالدورات لا مشكلة، سنك مناسب لتعلم البرمجة، ستحتاج إلى دراسة دورة علوم الحاسوب في حال لا يوجد لديك أي خبرة سابقة بالبرمجة، لكن بشرط القدرة على استخدام الحاسوب بشكل جيد وطالما لديك حاسوب ولابتوب فذلك متوفر لديك. الدورة الأخرى التي تستطيع الإشتراك بها يتوقف على ما تريده، أُرشح لك دورة بايثون أو جافاسكريبت. حاليًا يوجد عرض دورتين بسعر دورة واحدة، ستجد تفصيل هنا: https://academy.hsoub.com/offers/double-skills-2025/ وهنا صفحة الدورات تستطيع تفقدها للإختيار من بينها: https://academy.hsoub.com/store/c1-دورات-تعليمية/ والمقال التالي سيُفيدك:

js هي صيغة ملفات جافاسكريبت كما تعلم، بالتالي نستخدمها لكتابة أكواد جافاسكريبت فقط، بينما jsx هي صيغة خاصة بمكتبة React، حيث يتم الدمج بين كود جافاسكريبت وكود HTML أيضًا كالتالي: import React from 'react'; function Welcome() { const name = "علي"; return <h1>مرحبًا {name}</h1>; } export default Welcome; لاحظ ملف JSX يحتوي على عنصر <h1> مع تعبير JavaScript داخل الأقواس {} وذلك هو الـ syntax الخاص بملفات jsx في React. وما سبق هو الأفضل والمنطقي، لكن تستطيع استخدام أي صيغة تريدها في مشاريع React أي تستطيع كتابة JSX في ملفات .js وسيعمل بشكل جيد بفضل Babel الذي يعمل على تحويل الكود، وذلك عند إنشاء المشروع من خلال react-scripts. أما من خلال vite فيجب استخدام jsx لمكونات React وإلا سيحدث خطأ.