Mohammed Saber

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

    1,034
  • تاريخ الانضمام

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

  • Days Won

    10

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

454 Excellent

11 متابعين

  1. الرجاء إرفاق ملف المشروع
  2. الرجاء التأكد من استدعاء البوتستراب بطريقة صحيحة . إذا لم يعمل الرجاء إرفاق ملف المشروع مضغوط
  3. يمكنك أن تستخدم واحدة فقط وعمل if conditions بداخلها useEffect(() => { if(user){ // قم بتنفيذ الكود الخاص بالمستخدم } if(authed){ //authed قم بتنفيذ الكود الخاص ب } // وهكذا }, [authed, products, searchText، activeProduct، user]);
  4. هذه مشكلة خاصة بإعدادات ال webpack حيث أنه لم يتعرف على ملف ال index.js ولذلك يجب عليك أن تقوم بإيقاف السيرفر وتشغيله مرة أخرى
  5. يمكنكي استخدام مكتبة react-native-webview كالآتي: import React, { Component } from 'react'; import { WebView } from 'react-native-webview'; class MyInlineWeb extends Component { get content() { return '<h1>Hello world</h1>'; } render() { return ( <WebView originWhitelist={['*']} source={{ html: this.content }} // هنا نقوم بإعطاء البيانات للمكون /> ); } }
  6. لا يوجد في أكادمية حسوب دورات تشرح إدارة المحتوى ستجدي العديد من الدورات في اليوتيوب يمكنكي الإطلاع عليها فهي تشرح ال wordpress
  7. يمكنك تنفيذ هذا عن طريق استخدام useEffect hook componentDidMount useEffect(() => { // الكود البرمجي هنا }, []); // هنا المصفوفة يجب أن تكون فارغة componentDidUpdate useEffect(() => { // الكود البرمجي هنا }, [a, b]); //هنا المصفوفة يجب أن تحتوي على المتغيرات التي بناء عليها سيتم عمل تحديث المتغيرا ت هي props - state componentWillUnmount useEffect(() => { // الكود البرمجي هنا return () => { // قم باستخدام الدالة // الأشياء التي تريد تنفيذها عند الخروج من المكون } }, [a, b]); //هنا المصفوفة يجب أن تحتوي على المتغيرات التي بناء عليها سيتم عمل تحديث المتغيرا ت هي props - state قم بإحاطة المكون الخاص بك ب React.memo حسب التوثيق الرسمي const Button = React.memo((props) => { // المكون الخاص بك });
  8. children نفوم باستخدام نمط الدالة في استخدام ال import React from "react"; function List(props) { const handleSomething = () => { console.log("triggered"); }; return ( <div> <h1>List</h1> {/* نقوم بتمرير الدالة للأطفال عن طريق استخدام الدالة وليس الأطفال مباشرة */} {props.children({ handleSomething })} </div> ); } function Post(props) { return ( <div> {/* نقوم باستخام الدالة هنا */} <button onClick={props.handleSomething}>send</button> </div> ); } export default function Home() { return ( <div> <List> {/* children نفوم باستخدام نمط الدالة في استخدام ال */} {/*List ونقوم بنشر الخصائص التي تم إرسالها من المكون */} {props => <Post {...props} />} </List> </div> ); }
  9. إذا كانت ال prop عبارة عن boolean فيمكنك استخدامها مباشرة بدون إسناد قيمة لها // disabled: true <Button disabled>send</Button> أما إذا كانت ب false فيجب أن تحددها له // disabled: false <Button disabled={false}>send</Button>
  10. يمكنك استخدام Material-UI Framework حيث يقدم لك العديد من المكونات أكثر مما تقدمه بوتستراب والتعديل عليها يكون بما يناسبك حيث يمكنك أن تستخدم theme للتطبيق الذي تعمل عليه
  11. قم بطرح أسئلتك مباشرة وسيقوم المدربون بالإجابة عليها وقم بالسؤال مراراً وتكراراً إذا كنت مبرمج أما إذا كنت تريد أن تقوم بتوظيف مبرمج فقم بطرح مشروعك على منصة مستقل وستجد العديد من المدربين مستعدين لتقديم خدماتهم
  12. مكتبة react-share حالياً لا توفر هذه الإمكانية كما تم ذكره في ال repo الخاص بهم يمكنك الإطلاع من هنا أو من هنا
  13. يمكنك عمله عن طريق تعيين cancelToken عند الدخول للcomponent تمرير ال cancelToken لل request عن طريق ال options object عند الخروج من المكون تقوم بإلغاء ال request عن طريق ال cancelToken import React from 'react'; import axios from 'axios'; export default function test() { const [data, setData] = useState(null); const source = useMemo(() => axios.CancelToken.source(), [axios]); //CancelToken هنا تقوم بتعريف useEffect(() => { axios .get(endpoint, { cancelToken: source.token }) // نقوم بإعطائه للطلب .then((res) => { setData(res.data); }) .catch((err) => { console.log(err); }); return () => { // عند الخروج نقوم باستدعائه if (source) { source.cancel("تم إلغاء الطلب"); } } }, [input]); return ( <div> {data && data.map((post) => ( <div> <img src={post.image} alt="" /> <h1>{post.title}</h1> </div> ))} </div> ); }
  14. يمكنك البدء في تعلم الجافاسكربت والبدء بالتطبيق عليه توجد مصادر عديدة لتعلمها كمثال : أكادمية حسوب قناة الزيرو غيرهم من المصادر
  15. يمكنك عمل هذا قم بالدخول على File --> Preferences --> User Snippets قم باختيار اللغة التي تريدها قم بكتابة الآتي { "Redux kit shortcut": { //snippetوصف ال "prefix": "rdxkit", // هذا هو الإختصار "body": [ // الكود يتم كتابته هنا // كل سطر بين علامتي التنصيص // إذا أردت عمل إزاحة لسطر معين قم بعملها داخل علامة التنصيص ولا تقم بإزاحة السطر كله "import { createSlice } from '@reduxjs/toolkit';" "" "export const counterSlice = createSlice({" " name: 'counter'," " initialState: {" " value: 0," " }," " reducers: {" " increment: state => {" " // Redux Toolkit allows us to write 'mutating' logic in reducers. It" " // doesn't actually mutate the state because it uses the Immer library," " // which detects changes to a 'draft state' and produces a brand new" " // immutable state based off those changes" " state.value += 1;" " }," "" " decrement: state => {" " state.value -= 1;" " }," "" " incrementByAmount: (state, action) => {" " state.value += action.payload;" " }," " }," "});" "" "// Action creators are generated for each case reducer function" "export const { increment, decrement, incrementByAmount } = counterSlice.actions;" "" "export default counterSlice.reducer;" ], "description": "Redux Kit" } } قم بكتابة rdx سيقوم المحرر بإظهارها لك قم بالضغط على enter وسيتم تحميل الكود