Mohammed Saber6

السلام عليكم ورحمة الله وبركاته أحتاج لمعرفة التقنية المستخدمة في تطبيق أنا هنا في وضع ال template والتحكم بها وعمل resize وجعل ال grid متجاوبة إذا كان هناك framework جاهز لهذه الآلية الرجاء ذكره لي. مرفق فيديو للتوضيح. zoom_0.mp4

الرجاء إرفاق ملف المشروع

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

يمكنك أن تستخدم واحدة فقط وعمل if conditions بداخلها useEffect(() => { if(user){ // قم بتنفيذ الكود الخاص بالمستخدم } if(authed){ //authed قم بتنفيذ الكود الخاص ب } // وهكذا }, [authed, products, searchText، activeProduct، user]);

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

يمكنكي استخدام مكتبة 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 }} // هنا نقوم بإعطاء البيانات للمكون /> ); } }

لا يوجد في أكادمية حسوب دورات تشرح إدارة المحتوى ستجدي العديد من الدورات في اليوتيوب يمكنكي الإطلاع عليها فهي تشرح ال wordpress

يمكنك تنفيذ هذا عن طريق استخدام useEffect hook componentDidMount useEffect(() => { // الكود البرمجي هنا }, []); // هنا المصفوفة يجب أن تكون فارغة componentDidUpdate useEffect(() => { // الكود البرمجي هنا }, [a, b]); //هنا المصفوفة يجب أن تحتوي على المتغيرات التي بناء عليها سيتم عمل تحديث المتغيرا ت هي props - state componentWillUnmount useEffect(() => { // الكود البرمجي هنا return () => { // قم باستخدام الدالة // الأشياء التي تريد تنفيذها عند الخروج من المكون } }, [a, b]); //هنا المصفوفة يجب أن تحتوي على المتغيرات التي بناء عليها سيتم عمل تحديث المتغيرا ت هي props - state قم بإحاطة المكون الخاص بك ب React.memo حسب التوثيق الرسمي const Button = React.memo((props) => { // المكون الخاص بك });

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> ); }

إذا كانت ال prop عبارة عن boolean فيمكنك استخدامها مباشرة بدون إسناد قيمة لها // disabled: true <Button disabled>send</Button> أما إذا كانت ب false فيجب أن تحددها له // disabled: false <Button disabled={false}>send</Button>

يمكنك استخدام Material-UI Framework حيث يقدم لك العديد من المكونات أكثر مما تقدمه بوتستراب والتعديل عليها يكون بما يناسبك حيث يمكنك أن تستخدم theme للتطبيق الذي تعمل عليه

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

مكتبة react-share حالياً لا توفر هذه الإمكانية كما تم ذكره في ال repo الخاص بهم يمكنك الإطلاع من هنا أو من هنا

يمكنك عمله عن طريق تعيين 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> ); }

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