Abdullah Muhammad

الأعضاء
  • المساهمات

    39
  • تاريخ الانضمام

  • تاريخ آخر زيارة

السُّمعة بالموقع

27 Excellent
  1. لديك خطأ بسيط في السطر رقم 4 حيث قمت بكتابة "sally" بدلا من "salary" ولطباعة الناتج تحتاج إلى كتابة print(sampleDict)
  2. هناك بعض الأمور البيسطة في الكود المرفق 1- فيما يتعلق بإستخدام "axios" فيمكنك الحصول على البيانات مباشرة من خلال res.data كالتالي const res = await axios('/api'); console.log(res.data); 2- فيما يتعلق بالخطأ المرفق فذلك لأن الناتج من الدالة getData() عباره عن كائن "object" وفي ريأكت لايمكن أن يكون الإبن المطلوب عرضه وطباعته للمستخدم عباره عن كائن يحتوي على داتا وإن كان لابد من أن تعرض البيانات المحموله في هذا الكائن يمكنك إستخدام "JSON.stringify()" وذلك كالتالي JSON.stringify(this.getData()) 3- ولكن هناك أمر أخر سوف يتم عرض قوسين كالتالي "{}" فارغين للمستخدم دون وجود أي بيانات ؟!! ذلك لأنه في أول مرة يتم عرض المكون للمستخدم "component rendering" سوف تكون عملية جلب البيانات من الداله "getData()" لم يتم الإنتهاء من جلب البيانات بعد وكما نعلم لكي يتم إعادة عرض المكون بعد تمام عملية جلب البيانات لابد من أن نقوم بتخزين هذه البيانات في State وبذلك فور أن يتم إعطاء قيمه جديده ل State سوف يتم عرض البيانات لليوزر وبالتالي يمكن أن يكون الشكل النهائي للكود كالتالي class Data extends React.Component { state = {}; async getData() { const res = await axios('/api'); console.log(res.data); this.setState(res.data); } componentDidMount() { this.getData(); } render() { return <div>{JSON.stringify(this.state)}</div>; } }
  3. كم حجم المشروع الذي تحاول رفعه؟ يمكنك القيام بالتحويل الى http v1 والمحاوله مرة أخرى git config --global http.version HTTP/1.1
  4. المشكله تكمن في الإعدادات الخاصه ب git/https buffer ولذ يمكنك حلها عن طريق الأمر التالي الذي يسمح بزيادة حجم ال buffer git config --global http.postBuffer 524288000 ويمكنك أيضا استخدام ال ssh بدلا من http ومشاكله
  5. قم بتحميل النسخة الأخيره من node من هنا في حالة لم يعمل الأمر معك قم بإتباع الخطوات التاليه قم بإنشاء مجلد بإسم "nodejs" في أحد المسارين التاليين "C:\Program Files (x86)" أو "C:\Program Files" من قائمة start قم بالبحث عن "edit the system environment variables" وقم بفتحها من قائمة Advanced قم بالضغط على Environment Variables في الجزء العلوي قم بالبحث عن "path" وقم بالضغط عليها سوف تنبثق لك نافذه (مرفق صورة للتوضيح) قم بالضغط على "New" ومن ثم قم بلص المسار الذي أنشأت فيه المجلد في الخطوه واحد سيكون بالشكل“C:\Program Files (x86)\nodejs” أو “C:\Program Files \nodejs “. بعد ذلك قم بالضغط على "OK" قم بإستخدام الأمر مرة أخرى وسوف يعمل معك بإذن الله
  6. بكل بساطه يمكنك القيام بالخطوات التاليه 1- قم بإنشاء ملف .env في المسار الرئيسي للمشروع الخاص بك لاتنسى أن تقوم بإضافة إسم هذا الملف إلى ملف ".gitignore" 2- في ملف .env قم قم بإضافة التالي HTTPS=true 3- قم بتشغيل المشروع بالطريقة المعتاده لذلك سوف يظهر لك التحذير المرفق قم بالضغط على "Advanced" ثم "Proceed to localhost (unsafe)" وسوف يعمل معك المشروع بالشكل المطلوب
  7. يمكنك القيام بذلك بشكل بسيط دون الإستعادنه بأي مكتبات خارجيه عن طريق عمل capture للإيفنت الخاص بال error عن طريق إضافة الكود التالي في الملف "public/index.html" في الجزء الخاص ب ال "head" <script> window.addEventListener('error', function(e){ // قم بمنع ريأكت من تشغيل ال listener الخاص بهم e.stopImmediatePropagation(); // منع المتصفح من عمل console.log للإيرور أيضا e.preventDefault(); }); </script> في حالة كنت تريد إستخدام error overlay في أي خطأ خارج ال error boundary يمكنك إستخدام الكود التالي <script> window.addEventListener('error', function(e){ const {error} = e; if (!error.captured) { error.captured = true; e.stopImmediatePropagation(); e.preventDefault(); setTimeout(()=>{ if (!error.shouldIgnore) { throw error; } }) } }); </script>
  8. أغلب الإجابات ليس لها علاقه ب React بشكل كبير لعدم وجود فرق onChange و onInput في ريأكت ولكن الفرق يظهر في حالة كنت تستخدم vanilla js حيث أن onInput: سوف يعمل بالضبط مثل onChange في ريأكت. أي عند تغير أي قيمه داخل ال input سوف يتم تنفيذ الكول باك الموجود داخل ال onInput يمكنك تجربة هذا الأمر من خلال هذا الرابط onChange: سوف يعمل فقط بعد الإنتهاء من كتابة ماتريد داخل ال input والضغط على أي شئ خارج الإنبوت أي عمل focus على أي شئ أخر. يمكنك تجربة وملاحظة الفرق بين onChange و onInput في كلا من ريأكت و جافاسكريبت من خلال هذا الرابط
  9. يمكنك أن تقوم بذلك من خلال إستدعاء ملف ال package.json طالما تستخدم react-scripts بإصدار 1.0.11 فما أحدث وذلك كالتالي import packages from '/package.json' بعد ذلك لكي تستطيع الوصول إلى ماتريد فلاحظ أنها تنقسم إلى قسمين: dependencies devDependencies ولكي تستطيع أن تحصل على هذه البيانات كل ماعليك هو القيام بالتالي const dependencies = {...packages.dependencies, ...packages.devDependencies} وسوف تحصل في النهايه على object يحتوي على كل المكتبات التي تستخدمها بالإضافة الى الإصدار الخاصه بكل مكتبه وتقوم بعرضها كما تشاء. ويمكنك إستخدام الكود التالي لعرضهم كما تريد بحيث يظهر عنصر ul بداخلة عنصر li لكل مكتبة مثبتة مع إصدارها أيضًا. const dependencies = { ...packages.dependencies, ...packages.devDependencies }; const modifiedDependancies = []; for (const i in dependencies) { modifiedDependancies.push({ name: i, version: dependencies[i] }); } return ( <ul> {modifiedDependancies.map((item) => ( <li key={item.name}> {item.name} : {item.version} </li> ))} </ul> );
  10. لكي تستعمل الروابط النشطه داخل ال navbar الخاص بالموقع وتستطيع أن تعطي لهم تنسيق معين في حالة وجعل ال Home Link نشطًا بمجرد بدء التطبيق لابد من إستعمال المكون NavLink المرفق ب react-router داخل ال navbar الخاص بك <NavLink exact={true} activeClassName='is-active' to='/'>Home</NavLink> <NavLink activeClassName='is-active' to='/about'>About</NavLink> <NavLink activeClassName='is-active' to='/users'>Users</NavLink> عند بدء التطبيق سوف يكون اللينك الخاص ب Home هو النشط وسوف يأخذ التنسيق الخاص بالكلاس "is-active" وعند التنقل بين الروابط سوف يطبق التنسيق على الرابط النشط.
  11. في حالة كان الرد من السيرفر ب أوبجكت يحتوي على عدة objects وتحتاج الى أن تقوم بعمل loop عليهم وهذا قلما يكون الوضع يمكنك بالفعل إستيراد كافة ال objects الداخليه لل object الرئيسي ووضعهم داخل مصفوفة كالتالي Object.values(response) وسوف تحصل على مصفوفة كامله من ال objects داخل ال object الرئيسي وبعد ذلك يمكنك عمل loop عليهم لعرضهم داخل المكون بكل سهوله Object.values(response).map(item => {...})
  12. يمكنك أن تستخدم الخطاف useHistory لتحقيق ذلك قم بإستيراد الخطاف import { useHistory } from "react-router-dom" قم بإستدعاءه داخل المكون const history = useHistory() قم بإنشاء الدالة المسئوله عن التعامل مع هذا الحدث const handleParams = (query) => { const params = new URLSearchParams(); if (query) { params.append("color", query); } else { params.delete("color"); } history.push({ search: params.toString() }); }; وبهذا يمكنك تنفيذ ماتريد. يمكنك أيضا أن تجعل قيمة ال query عباره عن قيمه مخزنه داخل ال state وتستخدم الدالة في الخطوة رقم 3 مع useEffect لتحديث ال query في حالة كنت تريد مثلا إستخدام مدخل للبحث أو شئ من هذا القبيل كالتالي const SearchInput = () => { const [query, setQuery] = useState(""); const history = useHistory(); const onChange = (e) => { setQuery(e.target.value); } useEffect(() => { const params = new URLSearchParams(); if (query) { params.append("color", query); } else { params.delete("color"); } history.push({ search: params.toString() }); }, [query, history]); return <input type="text" value={query} onChange={onChange} />; };
  13. عن طريق عمل مصفوفه من الخيارات التي تم تحديدها وذلك كالتالي export default function Select() { const [state, setState] = useState(); const handleChange = (e) => { let value = Array.from(e.target.selectedOptions, (option) => option.value); setState(value); }; return ( <div> <select name="select" multiple={true} onChange={handleChange}> <option value={1}>First option</option> <option value={2}>Second option</option> <option value={3}>Third option</option> </select> </div> ); }
  14. يمكنك إستخدام الحدث (Event) onMouseOver كالتالي function Test() { const changeColor = (color) => {....}; return ( <div> <p onMouseOver={changeColor}>Hello</p> </div> ); } ولكن هذا في حالة كنت تستخدم عنصر HTML عادي أما في حالة إستخدام مكون ريأكت ماعليك إلا إن تجعلها ضمن ال props الخاصه بهذا المكون ومن ثم إستخدامها داخل المكون على سبيل المثال كالتالي function Test() { const changeColor = (color) => {...} return ( <div> <Post onMouseOver={changeColor}></Post> </div> ) } const Post = (props) => { return ( <p onMouseOver={props.onMouseOver}>Content</p> ) }
  15. لديك عدة طرق أرفق لك منها إثنتين 1- بإستخدام ال state export default function Send() { const[buttonDisabled, setButtonDisabled] = useState(false); // الخطوة 1 const handleSubmit = () => { setButtonDisabled(true) // الخطوة 2 axios.post(...).then(res => {...}).catch(err => ...) } return ( <div> // .... الخطوة 3 <button disabled={buttonDisabled} onClick={handleSubmit}>send</button> </div> ) } 2- بإستخدام ال refs export default function Send() { const buttonRef = useRef(); // الخطوة رقم 1 const handleSubmit = () => { // الخطوة رقم 2 if(buttonRef.current){ buttonRef.current.setAttribute("disabled", "disabled"); } axios.post(...).then(res => {...}).catch(err => ...) } return ( <div> ....// الخطوة رقم 3 <button ref={buttonRef} onClick={handleSubmit}>send</button> </div> ) }