عماد شيخ العشرة

قبل أن نشرح الفرق بينهم يجب علينا معرفة أن كلاهما يستخدم للمر على عناصر المصفوفة وارجاع مصفوفة جديدة يتم تطبيق عليها دالة معينة. map ترجع المصفوفة على ما هي ولا تغير شيء مثال: const arr = [1, 2, 3]; const result = arr.map(x => [x * 2]); console.log(result); // [[2], [4], [6]] لاحظ ان لدينا الان مصفوفة ثنائية الابعاد اي مصفوفة داخل مصفوفة لاننا خزنا القيم الجديدة داخل مصفوفات متفرقة. بينما flatmap فعملها ان تجعل المصفوفة ذو بعد واحد اي انه لا تحتوي مصفوفات داخل مصفوفة بل هي مصفوفة واحدة مثل: const arr = [1, 2, 3]; const result = arr.flatMap(x => [x * 2]); console.log(result); // [2, 4, 6] لاحظ هنا انه تكونت مصفوفة واحد فقط.

يمكنك الوصول اليها عن طريق التالي: <link rel="icon" type="image/jpg" href="./src/assets/your-img.jpg" /> لكن يجب عليك تعديل شيئين اولا: your-img.jpg وسيكون حسب اسم الصورة لديك. ثانيا: type="image/jpg" يجب عليك استبدال jpg بنوع الصورة التي لديك.

هل جربت ان تعمل التصميم لوحدك بدون مساعدة احد؟ الرجاء محاولة عمل المشروع بدون مساعدة لكي يتطور عندك المنطق لحل المشكلات كما انه في حال واجهت مشكلة في الواقع يجب عليك ان تفهم كيفية حل المشكلة واصلاحها من نفسك.

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

في الواقع هذه شيفرة تحتوي على العديد من الأخطاء. أولا: في رياكت نحن عندما نريد تحديث اي معلومات على الواجهة نستخدم ما يسمى الربط ثنائي الاتجاه Two Way binding وتم شرحها لك مسبقا. وهو عندما نريد نحدث البيانات في تطبيق لا نحدثها مباشرة بل نحدثها عن طريق هذه الخاصية. ويتم تحقيق هذه الخاصية برياكت باستخدام useState وما فعلته انت خاطئ تماما فالمعلومات التي سوف تتحدث لا يتم تخزينها بمتغير عادي بل داخل المتغير الخاص بالخطاف useState. ثانيا انت عندما عملت خاصية الحذف يجب عليك تحديد اي عنصر سوف تحذفه وانت لم تحدد اي شيء فكتابتك للجملة خاطئة. {maytastlist} <button onClick={deleteClick}>clear</button> فكيف يمكن لتطبيقك التعرف اي من الادوات تريد مسحها فيجب ان يكون الزر مرتبط بالاداة ايضا. ثالثا في دالة الحذف انت لم ترجع شيئا والذي كان يجب ان يتم تحديثة باستخدام الخطاف useState. ساكتب لك الشيفرة واشرح لك خطوة بخطوة لكن ارجو التركيز. import React, { useState } from "react"; function App() { const [test, setTest] = useState([ "item1", "item2", "item3", "item4", ]); const deleteClick = (index) => { const newDelete = [...test]; newDelete.splice(index, 1); setTest(newDelete); }; return ( <div> <ul> {test.map((item, index) => ( <li key={item}> {item} <button onClick={() => deleteClick(index)}>Delete</button> </li> ))} </ul> </div> ); } export default App; في useState حددنا الحالة البدائية لمصفوفتنا والتي ستتغير باستمرار على حسب الضغط على الزر. const [test, setTest] = useState([ "item1", "item2", "item3", "item4", ]); ثانيا في الدالة الخاصة بالحذف ناخذ المكان بالمصفوفة كمعامل ولاحظ عندما نجدد المصفوفة بحذف عنصر منها استخدمنا setTest الخاص بالخطاف ولم نحدث مباشرة وهذا ما يسمى بالربط ثنائي الاتجاه اي عندما نحدث بالدالة الخاصة بالخطاف useState فرياكت سوف تفهم انه نريد تحديث هذا العنصر وليس مثل ال DOM حيث اننا ناخذ العنصر كما هو ونحدثه فهنا التحديث يجب علينا ان نخبر رياكت ان هذا العنصر سوف يتم تحديثه. const deleteClick = (index) => { const newDelete = [...test]; newDelete.splice(index, 1); setTest(newDelete); }; ثالثا عندما عملنا mapping للمصفوفة لاحظ اننا اظهرنا العناصر واحدا واحدا ومعه الزر الخاص به لنحدد اي العناصر نريد الحذف. {test.map((item, index) => ( <li key={item}> {item} <button onClick={() => deleteClick(index)}>Delete</button> </li> ))} لاحظ في الزر عملنا دالة سهمية لان رياكت لا تقبل الدوال العادية التي تاخذ معاملات داخل الاحداث هنا فلذلك نعمل دالة سهمية تستدعي الدالة التي عملناها ومررنا لها المعامل.

يوجد العديد من الأسباب وهي التالي: انها تم تطويرها من شركة ميتا المالكة لفيسبوك وانستقرام مما سببت شعبية كبيرة. يوجد مكتبات مكملة لها مثل Redux او اطار عمل Next المبني على React مما يسهل العمل معها. سهولة فهمها مقارنة ب Angular. امكانية العمل بجافاسكربت فقط ولا حاجة لتعلم التايبسكربت مثل Angular كما يمكنك استخدام تايبسكربت ايضا. امكانية عمل تطبيقات كبيرة او صغيرة فلا يفرق حجم المشروع. استخدامها من شركات كبرى مثل Netflıx, Airbnb. وغيرها الكثير من الأسباب.

يمكنك تنزيلها عن طريق الأمر التالي: npm install react-scroll عادة عندما نتعامل مع مكتبات كهذه نذهب إلى صفحة npm الرسمية ونبحث عن المكتبة. يوجد في المكتبة طريقة التحميل وطريقة التعامل مع المكتبة مما يسهل علينا العمل ما يجب علينا هو قراءة التوثيقات لكنها قد تحتاج اللغة الانجليزية.

نعم هذا ما قصدته كما يجب عليك تغيير الروابط فقد كنت تكتبها يدويا localhost مما سبب الخطأ. يمكنك مراجعة تعليقي السابق.

بالإضافة الى التالي: اولا يجب عليك تحميل المكتبة التالية react-router-dom ويجب عليك تصديرها عند استخدام ال Route: import { Link } from 'react-router-dom'; انت تكتب اسم الرابط يدويا مما يسبب خطأ مثلا في ملف Navbar: <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/services">Services</Link></li> <li><Link to="/contact">Contact</Link></li> ولا يمكنك اسم كتابة الموقع يدويا بل ديناميكيا. واستبدل اماكن الروابط كامل على هذا المنهج.

هذا الخطأ يحصل بسبب عدم تعرف نيتلفاي على ال Route. الحل كالتالي: ادخل مجلد: /public بداخله انشئ ملف باسم: _redirects تأكد انك لا تضيف له اي اضافة مثل .txt داخل الملف اكتب الشيفرة التالية: /* /index.html 200 ومن ثم ضف الى Github. وعندما يبني المشروع من جديد سوف يعمل.

بعد انهاء 4 مسارات على الأقل يتم رفع المشاريع العملية على Github ومن ثم اخبار مركز المساعدة انك تريد ان تختبر. قد يتأخر الرد عليك حيث انه سوف يتم تفحص مشاريعك. لكن ما ينصح به هو اكمال الدورة كاملة كي تاخذ أكبر قدر من المعلومات فسوق العمل قوي ويحتاج الى الكثير من المهارات.

ان المكتتين خاصتين في الأيقونات وكل واحدة توفر لنا الوقت والجهد بدل من تصميم ايقونات لانفسنا فهناك ايقونات جاهزة تساعدنا وهي عادة الايقونات المتكررة مثل شعارات تطبيقات التواصل الاجتماعل والخ. react-icon مخصصة لرياكت فقط لكن الثانية يمكنك استعمالها في العديد من المشاريع.

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

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

هل تقصد فيجول ستيديو ام فيجول ستيديو كود؟ هل يمكنك ارفاق صور شاشة للذي يحدث معك وهل نزلت Extention بايثون في فيجول ستيديو كود الذي يدعم بايثون أم لا؟

وعليكم السلام ورحمة الله وبركاته, نتفهم ما تقوله لكن نحن في دوراتنا نحن نركز على الجانب العملي من الدراسة كعمل البرامج والمشاريع ولا نهتم للناحية النظرية كثيرا. كما أن دوراتنا يمكنك الحفاظ عليها مدى الحياة حيث يمكنك الرجوع الى الفيديو وتفحص المعلومة في الوقت الذي تريده وإن كانت المعلومة للمراجعة فكتابتها تساعدك على الحفظ بشكل أسرع يمكنك التركيز على المشاريع العملية وحفظها في حاسوبك لكي تراجع الشيفرة في الوقت الذي تريده وعندما تحتاجها .

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

مع الأسف لا يوجد لدينا اي دورات او مقالات عن رازبري غير المتواجدة في اليوتيوب. لكن يوجد لدينا في موسوعة حسوب توثيق للاردوينو ان كنت مهتما. يمكنك الاطلاع عليه من هنا.

لقد كانت المشكلة انك لا تطبق ال style لل .card ايضا يجب ان تاخذ عرض 100 بالمائة كما انني عدلت لك ال style الخاص بالقسم الذي اسفل هذا فكان التصميم غير ملائم للهواتف ايضا. @media (max-width: 778px) { .main { width: 100%; h1 { font-size: 35px; } } .cards { width: 100%; display: flex; flex-direction: column; .card { width: 100%; margin-bottom: 20px; } } .info { flex-direction: column; text-align: center; .content { padding: 0 20px; } h2 { font-size: 28px; } p { width: 100%; font-size: 16px; } img { padding: 0; margin-top: 20px; width: 90%; } } }

JSON.stringify هي دالة في جافاسكربت تحول المصفوفات او الكائن الى JSON. وال JSON هو عبارة عن هيكلة بيانات تشبه الكائن في JS لكنها عبارة عن نص وتستخدم كثيرا في عالم الويب في نقل البيانات. لماذا يتم استخدامه في التخزين المحلي؟ وهو لهذا السبب أن التخزين المحلي الخاص بالمتصفح لا يخزن إلى النصوص فنحن نحول ما نريد الى نص ثم نخزنه.

في الواقع لدينا مقالة برمجية لهذا الموضوع يمكنك الاطلاع عليها.

ماذا تقصد برفع المشروع هل تقصد لمستودع GitHub ام ماذا ؟

في ملف MyMain.vue. يوجد لديك خلل وهو التالي: أغلقت القوس الخاص بالميديا في السطر 330 بعد ما عملت ال css الخاص بال .mymain فما بعده لم يحسب أنه من ضمن الميديا. @media (max-width: 778px) { .my-main { display: flex; flex-direction: column; text-align: center; justify-content: center; } } انظر هنا هنالك خطأ اغلقت القوس مبكرا هذا ما فعلته. يجب عليك حذف هذا القوس واضافته في النهاية: .prog { display: flex; flex-wrap: wrap; text-align: center; img { width: 500px; } }} </style>

v-model هو من خصائص vue ويتم استخدامه كالتالي: هو عنصر يربط البيانات بين المدخلات التي تريد ادخالها وبين المتغير الذي تحفظ فيه المتغيرات مثل الان عندما تكتب اي حرف في صندوق ال Input هذا يتم حفظه في المتغير email: data() { return { email: '' } } هذا المصطلح مشهور جدا في عالم الواجهات الأمامية two way binding او بالعربي الربط الثنائي وهو كالتالي: عندما يتغير المتغير في الكود يتغير محتوى واجهة المستخدم أو عندما يقوم المستخدم بتغيير قيمة في واجهة المستخدم، يتم تحديث المتغير في الكود مباشرة مثال: يمكن استخدامه في اظهار رسالة خطأ مثلا عندما لا يقوم بادخال المستخدم مدخلات صحيحة . في الواقع يتم استخدامه كثير وفي كثير من الاماكن لكن هذا كان مثالا عليه.

نحن نعلم أن لغة typescript تحدد نوع المتغير فهي يجب عليها التمييز هل المتغير من نوع رقم أم نص الخ. عندما غيرنا المتغير من مصفوفة أرقام إلى نص فهذا يعني أن typescript عندما رأت المتغير أول مرة فهمت أن هذا المتغير من نوع مصفوفة أرقام وليس نص وبناء عليها اكملت وعندما غيرنا القيمة تحول لنص وهذا غريب على typescript لانها تتوقع أن يكون المتغير مصفوفة من الأرقام. لتجنب هذه المشكلة يمكنك عمل التالي وهي تحديد نوع المتغير ب any أي يعني أنه قد يكون نصا او رقما. let numbers: any = [1,2,3,4,5]; numbers = 'Hello World'; لكن ان كانت المعلومات لن تتغير فلا ينصح بوضع any حيث أنها ستساعدك typescript بوجود الأخطاء ان حصل تغيير في نوع البيانات.