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

توجد العديد من الطرق مثل عن طريق الوسم style في أعلى صفحة ال html <style> <!--يتم وضع التنسيقات هنا--> </style> ال inline-style عن طريق الخاصية style للعنصر <h1 style="color: red;"></h1> ال style sheet وهو عن طريق ربط صفحة ال html بصفحة منفصلة تحتوي على تنسيقات الcss <link rel="stylesheet" href="style.css"> ولكل طريقة استخدام ومميزات ولكن الطريقة الأحتراقية والشائعة هي ملف خاص بال css

أولاً ال gatsby و ال next يستخدمان ال react لذلك ما هما إلا تطوير لل react ولكن ما هو التطوير الذي سأستفيد منه باستخدام أياً منهما NEXT يقوم بتسهيل العمل بال react مثل إختصار كتابة ال routes وإستبدالها ب routes ذاتياً إعتماداً على مجلدات وملفات المشروع والوظيفة الأكثر أهمية هي ال server side rendering مما تساعد بشكل كبير على تحسين ال SEO للموقع gatsby يعتبر static site generator وهو مفهوم جديد للمواقع الديناميكية بحيث يتم فيه الإستغناء عن استخدام قواعد البيانات وبالتالي اتخدام ال backend فمثلاً يمكنك بناء مدونة وإضافة محتوى جديد بدون أي cms ويمكنك أيضاً استخدام ال NEXT ك static site generator لذلك يمكنك استخدام التقنية التي تخدم الأهداف المطلوبة للمشروع

حاول أن تجرب تحديث الإعدادات لل npm عن طريق التالي مسح الإعدادات npm config delete prefix ثم بعد ذلك قم بتنفيذ الأمر التالي npm config set prefix /usr/local ثم أخيراً قم بإعادة تثبيتها npm i -g gatsby-cli وجرب هل تم تثبيتها أم لا

هناك خطأ بسيط وهو حول ال export و ال import حيث نحتاج عند عمل import بالطريقة التي قمت بها أن يكون ال export default كالتالي import React from 'react'; export class Navbar extends React.Component {//default لاحظ كلمة render(){ return ( <ul className="navbar navbar-full"> ... </ul> ); } } أما إذا أردت عمل import ولكن بدون استخدام ال default export أو تحتاج لاستخدام named export يجب عليك وضع ال {} حول الكائن الذي تريد إستدعائه كالتالي import React from 'react'; import ReactDOM from 'react-dom'; import {Navbar} from './components/navbar.jsx';//{ } لاحظ ال export class App extends React.Component{ render(){ return( <Navbar /> ... ); } } ReactDOM.render(<App />, document.getElementById('root'));

أولاً هذا الخطأ error overlay الخاص ب react يظهر فقط في وضع ال Development mode ولن يظهر في ال production mode ويمكنك تعطيل ذلك عن طريق package تسمى react-error-overlay وتستخدم الدالة stopReportingRuntimeErrors كالتالي أولاً تقوم بإضافة ال package yarn add react-error-overlay ثم قم بعد ذلك بإستخدامها في ال root قبل استخدام ال render كالتالي import { stopReportingRuntimeErrors } from "react-error-overlay"; if (process.env.NODE_ENV === "development") { stopReportingRuntimeErrors(); } .بعد عمل الخطوات السابقة لن تظهر error overlay مرةأخرى

يمكنك عمل ذلك من خلال ال create react app عن طريق كتابة HTTPS=true&&react-scripts قبل الأمر start في ملف ال pachage.json كالتالي "scripts": { "start": "set HTTPS=true&&react-scripts start", ... } وسيعمل المشروع بشكل صحيح

نعم هذه هي طريقة الاستخدام الصحيحة ولكن يجب جعل حرف ال S في كلمة "capital "String وهناك أنواع أخرى طريقة استخدامها كالتالي int myNum = 5; // رقم صحيح float myFloatNum = 5.99f; // رقم يحتوي على كسور char myLetter = 'D'; // حرف boolean myBool = true; //logical النوع المنطقي String myText = "Hello"; // محتوى نصي

الدوال هي ببساطة مجموعة من الأكواد التي تؤدي مهمة معينة وأهميتها تتلخص في تنفيذ المهمة بإستدعائها بدلاً من نسخ الأكواد مرة أخرى بمعنى إذا كان لديك دالة تريد تنفيذها عدة مرات في برنامج واحد فبدلاً من كتابة الأكواد الخاصة بها في كل مرة تريد استخدامها يمكنك بكل بساطة إستدعائها وكيفية العمل بها تختلف من لغة إلى لغة من حيث ال syntax ولكن الطريقة واحدة وهي كالتالي function functionName(){ //الكود } //لإستدعاء الدالة نستخدم التالي functionName() وطبعاً ال syntax يختلف من لغة للأخرى

سأكتب الفكرة وراء عمل مثل هذا البرنامج وهي كالتالي كتابة for loop تقوم بتكرار for loop بداخلها وعدد تكرارات هذه ال loop هو عدد صفوف الشكل الهرمي كتابة for loop ثانية بداخل ال loop الأولى بحيث تكون وظيفة هذه ال loop طباعة الشكل الذي تريده ويزيد تكرار هذه ال loop بزيادة رقم التكرار الخاص بال loop الأولى وهذه هي الفكرة يمكنكي تطبيقها وإن واجهكي مشكلة في تنفيذه يمكنكي طرح السؤال

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

كما شرح المدرب أحمد عند طباعة ال username لم يتم تحديث قيمة ال state عمل المطلوب بالأعلى عن طريق وسائل أخرى مثل بدلاً من استخدام قيمة ال state يمكنك استخدام console.log(e.target.value); أو يمكنك استخدام ال hook useEffect كالتالي useEffect(() => console.log(username), [username]);

ليس هناك مشكلة في الكود و يعمل ال webpack عندي بدون مشاكل لذلك قم بإعادة تشغيل برنامج vs code ولكن قم بفتحه as administraor من خلال الضغط بالزر الأيمن لل mouse وستظهر لك قائمة إختر منها run as administraor ثم قم بالتجربة مرة أخرى

نعم هناك طريقة ستقوم فيها بكتابة handler واحد لجميع عناصر ال input وهي كالتالي handleChange (e) { this.setState({ [e.target.name]: e.target.value }); } تقوم هذه الطريقة بتغيير ال state لل input الذي قام بإستدعاء الدالة لذلك إذا تم تغيير قيمة ال password مثلاً ستم تنفيذ الدالة السابقة كالتالي handleChange (evt) { this.setState({ password: "باسورد" }); } ولكن بالنسبة لل state ستحتاج لإضافة جميع عناصر ال input

يمكنك استخدام try and catch للتحكم في البرنامج سواء في حالة حدوث خطأ أو في حالة النجاح كالتالي try{ // يتم تنفيذ الكود هنا في حالة النجاح } catch{ // يتم تنفيذ الكود هنا في حالة الفشل } وفي حالة المثال الخاص بك يمكن أن يكون الكود كالتالي try{ $user = new User; $user->fields = $value; $user->save(); } catch(\Exception $e){ echo $e->getMessage(); }

توفر لك الجافا أو بالتحديد ال JDK مجموعة كبيرة من الكلاسات والدوال الجاهزة لتوفر عليك كتابة الكثير من الكود أو مثلاً بدلاً من كتابة دالة تقوم بإرجاع العدد الأكبر في مصفوفة من البداية توفر لك الجافا دالة جاهزة تسمى max وهي دالة للكلاس Math وتقوم بإرجاع الرقم الأكبر كالتالي ببساطة Math.max(12.123, 12.456) بالطبع هناك العديد من الدوال المختلفة لأداء مهما مختلفة ويجب بالطبع تعلم الدوال التي ستنفعك في العمل

لا يتغير محتوى الصفحة لأنك تظل في المكون people أو (" / ") لماذا ؟ لأن المسار "profile/" يحتوي على ال "/" وبالتالي router بإستدعاء ال "/" ولذلك تحتاج لإستخدام الخاصية exact كالتالي import React from "react"; import ReactDOM from "react-dom"; import { Router, Route } from "react-router"; import { BrowserRouter, Router } from 'react-router-dom'; //react لا تنسى إستدعاء import People from "./components/People"; import Profile from "./components/Profile"; ReactDOM.render(( <BrowserRouter> <Route exact path="/" component={People} /> <Route path="/profile" component={Profile} /> </BrowserRouter> ), document.getElementById('root'))

لا يمكننا استخدام ال redirect في ال function كما فعلت لأنها كائن أو component وجب أن تستعمل ك component ولذلك نحتاج في هذا الموقف أن نستخدم ال hook ال useHistory أو ال history.push بما أنك تستخدم الإصدار الأخير كالتالي import { useHistory } from "react-router-dom"; //في الأعلى hook يجبإستدعاء هذا ال async handleForm(event) { event.preventDefault(); const username = this.state.user.username; const email = this.state.user.email; const password = this.state.user.password; const confirmPassword = this.state.user.confirmPassword; const formData = { username, email, password, confirmPassword }; axios.post('/register', formData, { headers: {'Accept': 'application/json'} }) .then((response) => { this.setState({ errors: {} }); // <Redirect to="/" /> بدلاً من ذلك //let history = useHistory(); history.push('/')functional component إذا كنت تستخدم this.props.history.push('/'); }).catch((error) => { const errors = error.response.data.errors ? error.response.data.errors : {}; errors.summary = error.response.data.message; this.setState({ errors }); }); }

تحتاج لتعلم البرمجة وإن كنت تسأل عن الدورات الموجودة في حسوب فيمكنك أن تجد جميع الدورات هنا وقم بقراءة جميع المعلومات عن كل دورة لتعرف ماذا تحتاج ولكن قبل ذلك قم بقراءة الإجابات على هذا السؤال لتعرف كيف تبدأ في البرمجة أما بالنسبة للمعرفة باللغة الإنجليزية بالطبع لا تحتاج أن تكون اللغة لديك متقنة لأن الشرح باللغة العربية ومفهوم ولكن ربما تحتاج لتعلم اللغة وليس التعمق فيها مستقبلاً للتعمق في البرمجة

بالطبع ذلك قرار صحيح حيث تعتبر ال functional component أفضل من ال class component والإختلاف ببساطة بينهم هو أن في functional component تقوم بإستخدام دوال جاهزة مثل useState بدلاً من الخواص كما في ال class component ولذلك فائدة في سهولة الإستخدام والقدرة الكبيرة للتطوير نظراً لتنظيم الكود ويمكنك أيضاً بناء custom hooks أما بالنسبة لما يجب عليك التركيز عليه هو طريقة استخدام ال functional component عموماً وأيضاً يجب التركيز على ال hooks وأشهرها ال useState و ال useEffect

هذه الخدمة jsonplaceholder تدعم ال get, post, delete, put ولكن لا تقوم بحفظها على السيرفر أي أنه يمكنك عمل POST وسينتج لك response يحتوي على البينات التي قمت بإضافتها ولكن إذا قمت بعدها بعمل get لن تظهر لك هذه البيانات لأنها لا تحفظ على السيرفر ويمكنك التأكد من ذلك في الموقع الخاص بال api من هنا

المشكلة كما شرح المدرب محمد أنه تم وضع ال header وال method بداخل كائن آخر وهذا غير صحيح وبدلاً من إزالة هذا الكائن يمكن حل هذه المشكلة باستخدام ال spread operator وهو (...) وهو يقوم بنشر محتويات الكائن كالتالي fetch(api.posts.link, ...obj) // spread operator تم إستخدام ال .then((response) => response.json()) .then((responseData) => { console.log(responseData); }).done();

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

تختلف قاعدة البيانات من firebase عن ال mysql تماماً حيث تعتبر ال firebase database من النوع ال non relational database(sql) وال mysql تعتبر من ال (nosql)relational database و لا توجد ما يسمى بالعلاقات في ال firebase (ليس تماماً) كما في ال mysql ولذلك يكون هناك بعض السهولة في التعامل مع هذا النوع من قواعد البيانات ومن مميزات ال nosql القدرة العالية على التوسع والقابلية للزيادة بدون تكلفة عالية ويمكنك المقارنة بين ال relational database و ال non relational database لمعرفة المزيد أما بالنسبة للوصول للبيانات فبدلاً من العلاقات في ال relational database يتم وضع جميع البيانات المطلوبة فيما يسمى collection فمثلاً يوجد مستخدم و منتج و طلب يتم الوصول للبيانات كالتالي يتم وضع أغلب المعلومات عن المستخدم والمنتج في الطلب وبذلك لن تحتاج للعلاقات ولكن لكل نوع عيوب ومميزات ويمكنك إختيار النوع الذي يخدم أهدافك

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

أولاً لا أحد يستطيع الإجابة على هذا السؤال بشكل دقيق حيث يعتمد هذا السؤال على العديد من المتغيرات مثل الوقت المخصص كل يوم للتعلم الخبرة البرمجية لديك فهل لديك خبرة في البرمجة وهل لديك خبرة عن ال backend عموماً مدى إستيعابك للشرح فتختلف لعدة عوامل أيضاً ولكن سأعطيك فترة تقريبية ربما تزيد أو تنقص وسأفترض أن ليس لديك أي خبرة برمجية بإستثناء المتطلبات لهذه الدورة وأيضاً التعلم يومياً ل 3 ساعات تقريباً يمكنك إنهاء هذه الدورة فيما لا يقل عن الشهر (وربما تزيد أو تنقص) وذلك للخروج بأكثر إستفادة من الدورة لذلك الخلاصة هي أنك لا تشغل بالك بهذا السؤال أبداً واعمل على الخروج بأكثر قدر من الإستفادة