Adam Ebrahim

قمت بإعداد ملف .env و gatsby-config.js على النحو التالي: // ملف .env.development GATSBY_APP_NAME=Title // ملف gatsby-config.js // من المفترض أن يتم طباعة كل المتغيرات الموجودة في الملف السابق // لكن يتم طباعة {} console.log(process.env) في كل مرة يتم طباعة كائن فارغ { } ولا أعرف السبب في البداية لم أكن استخدم البادئة GATSBY_ لكن بعد قراءة توثيق gatsby قمت بإضافتها ولكن هذا لم يحل المشكلة أيضًا.

هل من الممكن إعادة توجيه المستخدم بطريقة أو بأخرى إلى الصفحة الرئيسية (/) بدلاً من عرض صفحة 404؟ بالطبع لا يمكنني أن أستخدم window.location لإعادة توجيه المستخدم وهذا لأن الكائن window لن يكون معرف عند بناء المشروع، لذلك كنت أفكر في عمل custom hook أو إستعمال useEffect ولكن لا أعرف كيف أقوم بإعادة توجيه المستخدم بعد.

أريد أن أضيف classes بطريقة ديناميكية للعنصر body ولكن إن العنصر body خارج نطاق React، ولهذا السبب لا يمكنني معرفة كيفية تغيير أي class عندما أتنقل من صفحة إلى أخرى. هذا هو بالضبط ما أحتاجه لأنني أريد تغيير خلفية جسم الصفحة عند الإنتقال من صفحة لأخر ى من خلال إضافة صنف معين وإزالته على حسب الصفحة المتواجد فيها المستخدم. أستخدم React مع Gatsby (أحدث إصدار) كيف أقوم بهذا الأمر؟

لدي كود جافاسكريبت وأريد أن أقوم بإضافته في مكون لدي، هذا هو كود المكون: import React from 'react' import Link from 'gatsby-link' let test ="<script type='text/javascript'> (function(d, s) { var js, where = d.getElementsByTagName(s)[0], js = d.createElement(s); js.src = 'https://example.com/app.js'; try { where.parentNode.insertBefore(js, where); } catch (e) { if (typeof console !== 'undefined' && console.log && e.stack) { console.log(e.stack); } } }(document, 'script')); </script>" const Component = () => ( <> <div dangerouslySetInnerHTML={{ __html: test }} /> </> ) export default Component كما هو ظاهر فقد حاولت أن أستعمل dangerouslySetInnerHTML لكن مازالت المشكلة موجودة . هل توجد طريقة أفضل لتضمين أكود جافاسكريبت في مكون React؟ وهل هناك مكان بديل في Gatsby لإضافة جميع السكريبتات مثل Google Analytics و animate.js أو أي شيء آخر قد أحتاجه؟

بدأت مؤخرًا بتعلم مكتبة Gatsby بناء مشاريع React ، وأحاول أن أضيف خطوط جوجل إلى المشروع ولكن عندما أضيف الخط بإستخدام عنصر link إلى public/index.html ، فإنه يعمل في وضع التطوير development mode. لكن عندما أقوم ببناء الموقع build، تتم إعادة تعيين index.html. لذلك أعتقد أن هناك طريقة أخرى لإضافة الخط؟ أو هل توجد طريقة لتسهيل إضافة الخطوط لأني أريد أن أضيف الكثير من الخطوط في المستقبل؟

لدي مكون React يحتوي على مربع بحث، وعندما يقوم المستخدم بكتابة أي شيء يتم إرسال طلب إلى الخادم للحصول على نتائج هذا البحث من خلال الحدث onChange ، لكن المشكلة هي أن المستخدم يقوم بكتابة جملة معينة مثلًا فيتم إرسال عدد كبير من الطلبات إلى الخادم (لكل حرف يتم إرسال طلب واحد)، كيف أقوم بإيقاف الطلبات الزائدة؟

لدي مكون React يتحتوي هذا المكون على نموذج form لرفع ملف، ولا أعرف كيف أقوم بإستخدام مكتبة Axios لكي أقوم برفع الملف من input معين؟ أعرف أنه في المواقع العادية أقوم بإستخدام عنصر input من نوع file كالتالي لرفع ملف ما: <input type="file" /> لكن كيف أقوم بعمل نفس الشيء في مشروع React من نوع SPA؟

عندما أقوم بعمل موقع عادي (ليس من نوع SPA) يمكنني أن أقوم بوضع كود Google analytics بدون مشكلة لأنه سيتم تشغيله في كل صفحة، لكن عندما أقوم بعمل مشروع SPA بإستخدام React فسيتم تنفيذ كود Google analytics مرة واحدة فقط حتى وإن قام المستخدم بالدخول إلى صفحة أخرى بإستخدام React-router. كيف أقوم بإخبار Google analytics بأن المستخدم قد ذهب إلى صفحة معينة حتى أستطيع عمل Tracking للصفحات التي يزورها المستخدمون؟

لدي الرابط التالي: http://localhost:5000/download-file عند الدخول إلى الرابط يتم تحميل ملف فيديو، ما أريد فعله هو تحميل الملف من خلال مكتبة Axios في مكون react ولكن بدون إعادة توجيه المستخدم أو فتح صفحة أخرى. أعلم أنه بإمكاني إستخدام العنصر a لتحميل الملف ولكن كما ذكرت أريد أن يتم تحميل الملف من نفس الصفحة.

لدي مكون React وبه متغير بسيط وأريد أن أقوم بتحديث قيمة هذا المتغير بناء على الـ response من طلب من خلال axios، لذلك قمت بعمل الكود التالي: var friends = {} axios.get('http://localhost:8080/api/people') .then(function (response) { friends = response.data[0] // هنا يتم طباعة القائمة بشكل سليم console.log(friends) }) .catch(function (error) { console.log(error) }) // لكن ما يحدث هنا هو // طباعة {} console.log(friends) لماذا لا يتم تحديث قيمة المتغير friends؟ ألا يمكن أن أستعمل هذا المتغير خارج التابع then؟

لدي مكون React التالي: import React from 'react' class Content extends React.Component { constructor(props) { super(props) this.state = {content: ''} } changeContent(e) { this.setState({content: e.target.value}) } render() { return ( <div> Title: <input type="text" value={this.content} onChange={this.changeContent} /> </div> ) } } export default Content لكن عند الكتابة في يظهر لي الخطأ: this.setState is not a function

أريد أن أقوم بعرض سعر عملة BTC من خلال الـ API الخاص بـ coinbase، ومن المفترض أنه عند طلب الرابط التالي: https://api.coinbase.com/v2/prices/BTC-USD/spot تكون النتيجة بهذا الشكل: {"data":{"base":"BTC","currency":"USD","amount":"56195.56"}} لكن في مكون React التالي لا يتم عرض هذه البيانات: getBTCPrice() { const url = 'https://api.coinbase.com/v2/prices/BTC-USD/spot'; axios.get(url) .then(function (response) { return response.data.data.amount; }) } render() { return( <div> BTC: {this.getBTCPrice()} USD </div> ); }

لدي خادم Backend يعمل بـ Flask ، ولدي restful routes لطباعة البيانات المرسلة من قبل المستخدم بالشكل التالي: print (request.form['username']) print (request.form['email']) وعندما أقوم بتنفيذ الأمر التالي: curl http://localhost:8080/api/data -X PUT -d username=adam -d email=adam@gmail.com يعمل كل شيء بشكل سليم عند تنفيذ الأمر السابق وأحصل على البيانات التي أريد (username - email)، لكن المشكلة هي عندما أستخدم axios لإرسال طلب إلى الخادم فلا يتم إرسال البيانات بالشكل الصحيح، حاولت فحص كود cURL من DevTools ووجود أنه بالشكل التالي: curl 'http://localhost:8080/api/data' -X PUT -H 'Pragma: no-cache' -H 'Origin: http://localhost:8080' -H 'Accept-Encoding: gzip, deflate, sdch' -H 'Accept-Language: en-US,en;q=0.8' -H 'user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.128 Safari/537.36 Edg/89.0.774.77' -H 'Content-Type: application/json;charset=UTF-8' -H 'Accept: application/json, text/plain, */*' -H 'Cache-Control: no-cache' -H 'Referer: http://localhost:8080/settings' -H 'Connection: keep-alive' --data-binary '{"username":"adam","email":"adam@gmail.com"}' --compressed لا أعرف لماذ يقوم المتصفح بإضافة الكثير من الـ headers في الطلب، لكن أعتقد أن المشكلة هي في نوع الطلب Content-Type، كيف أقوم بتحديده في Axios عندما أستعمله بالشكل التالي: const handleSubmit = async (e) => { e.preventDefault(); const user = {username: 'adam', email: 'adam@gmail.com'}; await axios.post('http://localhost:8080/api/v1/data', user); };

أريد أن أعرف كود الحالة Status Code في مكتبة Axios، لكي أقوم بتغير حالة المكون وأقوم بعرض رسالة خطأ للمستخدم، أقوم بإستخدام الكود التالي: axios.get('https://api.example.com') .then((response) => {}) .catch((error) => { setErrorCode(error) // Error: Request failed with status code 404 }) المشكلة هي أن رسالة الخطأ تظهر كاملة للمستخدم بينما أريد أن يظهر كود الخطأ فقط، كيف أقوم بعمل ذلك؟ أستعمل الإصدار 0.21 من مكتبة Axios و الإصدار 17.0.2 من React

أقوم حاليًا بإستخدام دالة fetch في خطاف useEffect في أحد مكونات React كالتالي: useEffect(() => { fetch("https://api.example.com/items") .then(res => res.json()) .then( (result) => { setIsLoaded(true); setItems(result); }, (error) => { setIsLoaded(true); setError(error); } ) }, []) ورأيت أن الكثير من المطورين يستعملون Axios بدلًا من ذلك حتى لعمل أبسط الطلبات requests. هل من الخطأ أن أستعمل fetch؟ وما الفرق بين fetch و Axios؟

لدي مشروع React بسيط وفيه ملفات كالتالي: src |-- components/ |-- index.js |-- app.js ملف index.js هو entry point للمشروع، وعندما أقوم بتعديل ملف app.js يتم تحديث الصفحة في المتصفح بشكل سليم ولكن عندما أقوم بتعديل في ملف index.js لا يتم تحديث الصفحة ويجب على أن أقوم بإيقاف السيرفر وإعادة تشغيله مرة أخرى. لماذا يحدث هذا؟ وهل هناك حل لهذه المشكلة؟

لدي سيرفر express لعمل API بسيط، وأقوم بعمل get request بسيط ويعيد الطلب الآتي: { id: 1, name: "Adam" } في البداية كنت استخدم jquery ajax، مع ذلك لا أعرف كيف أقوم بإستخدام دالة من نوع Async/Await بإستخدام مكتبة axios، هذا هو الكود الخاص بي: class Data extends React.Component{ async getData(){ const res = await axios('/api'); console.log(res.json()); return res.json() } render(){ return( <div> {this.getData()} </div> ); } } ومع ذلك أحصل على الخطأ التالي: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead. هل أقوم بشيء خاطيء هنا؟

كيف أقوم بتطبيق lifecycle hooks في functional component، في Class Component يمكنكي إستخدام الدوال مثل: componentWillUnmount componentDidMount componentDidUpdate shouldComponentUpdate هل يمكن تطبيق نفس ما تفعله الدوال السابقة في functional component بأي طريقة مثل useEffect أم يجب علي أن أستعمل Class Component؟

لدي مكون React التالي: Class Counter extends React.Component({ getInitialState() { return {count: 0}; } componentDidMount() { setTimeout(this.setState({count: 1}), 3000); } render() { return ( <div className="count-wrapper"> {this.state.count} </div> ); } }); ReactDOM.render(<Counter />, document.getElementById('app')); من المفترض أن تتغير حالة المكون بعد 3 ثوانٍ، لكنها تتغير بمجرد ظهور المكون في الصفحة، أي أن الدالة يتم تنفيضها بشكل مباشر وليس بعد 3 ثوانٍ، ما الخطأ الذي أقوم به هنا؟

في أحد أمثلة React لإستخدام material-ui وجدت الكود التالي، ولم أفهم فائدة &$checked ولماذا كتبت بهذا الشكل import React from 'react'; import { createMuiTheme, makeStyles, ThemeProvider } from '@material-ui/core/styles'; const useStyles = makeStyles(theme => ({ root: { color: theme.status.danger, // ما الفائدة من الكائن التالي '&$checked': { color: theme.status.danger, }, }, checked: {}, })); هل سيسبب مشكلة إن تم قمت بتغيره إلى شيء آخر؟

كنت أتابع العديد من الشروحات وفي جميعها يقوم المدرب بإستدعاء React بالشكل التالي بغض النظر إن كنا نحتاجه في المكون أم لا import React from 'react'; هل هناك مشكلة إن لم أقوم بكتابة هذا السطر في مكونات React؟

بدأت أتعلم React من فترة قصيرة وتعرفت بعد ذلك على Next.js ثم الآن بدأت أستخدم gatsby ومازلت لا أرى فرق بين الثلاثة غير بعض الإعدادات التي يمكن عملها جميعًا بطريقة يدوية. هل هناك فرق جوهري بينهم؟ ومتى أستعمل كل واحدٍ منهم؟ إن كان كلٌ منهم عبارة عن إعدادات مسبقة وترتيب معين للملفات والمجلدات فقط فلمذا أستعمل أحدهم بدلًا من الاثنان الأخرين؟

أعمل على مشروع بإستخدام Gatsby - React وقمت بتحديث كل مكتبات المشروع من خلال الأمر: npm update لكن بعد ذلك قمت بتنفيذ الأمر gatsby develop وظهر لي الخطأ التالي: React-Hot-Loader: react-hot-dom patch is not detected. React 16.6+ features may not work.

أحتاج إلى تثبيت أيقونات font awesome من خلال CDN في gatsby أعتقد أني يجب أن أستعمل جملة import بما أنه لا يمكن إستعمال عنصر script هل يمكن أن أستخدم CDN في Gatsby أم يجب أن أقوم بتثبيت مكتبة ما تقوم بالأمر؟

قمت بتثبيت gatsby-cli من خلال الأمر: npm install --global gatsby-cli لكن مع ذلك لا يمكنني تنفيذ أوامر gatsby مثل gatsby --version وأحصل على الخطأ التالي: gatsby: command not found حاولت حذف وتثبيت المكتبة عدة مرات لكن تظهر نفس المشكلة دائمًا، جربت تنفيذ الأمر: npm root -g والنتيجة هي: /usr/local/lib/node_modules/npm/lib/node_modules