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

1. componentDidMount

   useEffect(() => {
   	// الكود البرمجي هنا
   }, []); // هنا المصفوفة يجب أن تكون فارغة

    

2. componentDidUpdate

   useEffect(() => {
   	// الكود البرمجي هنا
   }, [a, b]); //هنا المصفوفة يجب أن تحتوي على المتغيرات  التي بناء عليها سيتم عمل تحديث
   
   المتغيرا ت هي
   props - state

    

3. componentWillUnmount

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

    

4. قم بإحاطة المكون الخاص بك ب 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 الخاص بهم يمكنك الإطلاع من هنا أو من هنا   

يمكنك عمله عن طريق

1. تعيين cancelToken عند الدخول للcomponent
2. تمرير ال cancelToken لل request عن طريق ال options object
3. عند الخروج من المكون تقوم بإلغاء ال 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>
     );
   }

    

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

1. أكادمية حسوب
2. قناة الزيرو
3. غيرهم من المصادر 

يمكنك عمل هذا 

1. قم بالدخول على 

   File --> Preferences --> User Snippets

    

2. قم باختيار اللغة التي تريدها 

3. قم بكتابة الآتي 
    

   {
   	"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"
   	}
   }

    

4. قم بكتابة rdx سيقوم المحرر بإظهارها لك 

5. قم بالضغط على enter وسيتم تحميل الكود 

يمكنك عمل هذا عن طريق استخدام i18n.changeLanguage التي تسمح لك بالتبديل بين قائمة اللغات الموجودة بداخل ال resources

import i18n from "i18next";

// translation catalog
const resources = {
  en: {
    translation: {
      "welcome": "Welcome to React and react-i18next"
    },
  ar: {
    translation: {
      "welcome": "أهلا بك"
    }
  }
};

// initialize i18next with catalog and language to use
i18n.init({
  resources,
  lng: "en"
});

// ####################### في المكون الخاص بك تستخدم هذه الدالة ###############################
const changeLanguage = () => {
  i18n.changeLanguage('ar');
};

الخطأ لديك في تصدير المكون 
هناك طريقتين 

1. default export

   //export default تقوم باستخدام 
   export class Navbar extends React.Component { // خطأ
       render(){
         return (
           <ul className="navbar navbar-full">
           ...
           </ul>
         );
       }
   }
   
   export default class Navbar extends React.Component {} // صح
   
   // عندها تقوم بإستدعاء المكون السابق كالتالي
   
   
   import Navbar from './components/navbar.jsx';
   
   export class App extends React.Component{
     render(){
       return(
           <Navbar />
           ...
       );
     }
         }

    

2. named export 
    

   // {} تقوم باستخدام 
   class Navbar extends React.Component 
       render(){
         return (
           <ul className="navbar navbar-full">
           ...
           </ul>
         );
       }
   }
   
   export { Navbar };  // هكذا
   
   // عندها تقوم بإستدعاء المكون السابق كالتالي
   
   
   import { Navbar } from './components/navbar.jsx';
   
   export class App extends React.Component{
     render(){
       return(
           <Navbar />
           ...
       );
     }
   }

    

لا يوجد فرق بينهما في آلية العمل فهما يفعلان نفس الشيئ لكن الفرق الوحيد
هو أنك عندما تكتب حرف سيعمل onChange + onInput لكن عندما تقوم بعمل select لل input ( بالضغط double click داخله ) وتقوم بكتابة نفس الحرف لن تعمل onChange ولكن ستعمل onInput
 قم بتنفيذ السابق ومتابعة الكونسول هنا من هنا

هذا مثال بالجافاسكربت ويمكنك محاكاته بأي لغة أخرى
 

function checkBiDirectionRead(word) {
  const wordLength = word.length;
  // نحسب عدد أحرف الكلمة لتحديد إذا كانت مكونة من عدد زوجي أم فردي
  const isEvenWord = wordLength % 2 === 0; 
    // نقسم طول الكلمة لنحدد طول النصفين في حالة الزوجي
    // أما في حالة إذا كانت الكلمة فردية فنجمع عليها ١ ونقسم علي اثنين لنقوم بتحديد نصف الكلمة أي الحرف الزائد
    const wordHalfIndex = isEvenWord ? wordLength / 2 : (wordLength + 1);
    // الكلمة الأولى 
    // في الكلمة الزوجية سيتم اقتطاعها من أول رقم(0) حتى منتصف الكلمة
    // (لأننا قمنا بإضافة ١ لحسابة المنصف)  في الكلمة الفردية سيتم اقتطاعها من أول رقم(0) حتى (منتصف الكلمة - 1)
    const firstSlice = word.slice(0, isEvenWord ? wordHalfIndex : (wordHalfIndex - 1) / 2); 
    // الكلمة الثانية 
    // في الكلمة الزوجية سيتم اقتطاعها من منتصف الكلمة
    // في الكلمة الفردية سيتم اقتطاعها من أول رقم(منتصف الكلمة بدون أن نطرح ١ لأننا نريد أن نتخطى الحرف الزائد ونقارن الجزئين الموجودين على يمينه ويساره)    
    const secondSlice = word.slice(wordHalfIndex);

    // نعكس القسم الثاني من الكلمة والتي تمثل (الكلمة الثانية) ونقارنها بالأولى فإذا كانو متساويين فالكلمة يتم نطقها من الجهتين والعكس
    const mirroredSecondSlice = secondSlice.split('').reverse().join('');

     console.log(firstSlice === mirroredSecondSlice ? 'u can' : 'u can not');
}

// نقوم باستدعاء الدالة وإعطائها كلمة
checkBiDirectionRead('توت'); // u can

إذا كنت تريد أن تقوم بفتح الملف في المتصفح ورؤية تعديلاتك بعد الحفظ دون عمل refresh للمتصفح فهناك عدة خطوات 

1. قم بفتح برنامج vscode ستجد القائمة التالية أقصى اليمين قم باختيار العلامة المحددة كما في الصورة ( الثانية من أسفل ) وهي قائمة التطبيقات 
   
2. ستظهر لك الآتي قم بكتابة live server في مستطيل البحث وستجد كلمة install إذا لم تثبته من قبل . قم بالضغط عليها
   
3. قم بإغلاق vscode ثم فتحه مرة أخرى
4. الآن كل ما عليك هو إنشاء ملف html والضغط كليك يمين عليه واختيار open with live server

هناك جزئين لحل هذه المشكلة

1. أن تستخدم exact الخاصة بالراوتر وذلك حتي تفتح الصفحة علي نفس ال Route الذي تكتبه فبدونها يتم اعتبار ( / ) من ال Route ( /about or /users ) أي عندما تريد الذهاب إلى ( home  ) يأخذك إلى About

   const Router = () => (
     <Router>
       <Switch>
             <Route exact path="/">
               <Home />
             </Route>
         
             <Route exact path="/about">
               <About />
             </Route>
         
             <Route exact path="/users">
               <Users />
             </Route>
   
       </Switch>
     </Router>
   )

    

2. بعد تسجيل الدخول عليك بتوجيه التطبيق إلى صفحة ال home ويمكنك عملها عن طريق react-router history
    

   afterLogin = () => {
     history.push('/');
   }

    

هذه جافاسكربت لا علاقة لReact بالموضوع
يمكنك استخدام دالة Object.values الخاصة بالجاف سكربت 
 

const response = {
  0: { id: 1, name: 'ahmed' },
  1: { id: 2, name: 'Mohammed' },
  2: { id: 3, name: 'Ali' },
}

const modifiedResponse = Object.values(response);

//Object.values : تقوم بتحويل عناصر ال اوبجيكت إلى مصفوفة

/*
  [
    { id: 1, name: 'ahmed' },
    { id: 2, name: 'Mohammed' },
    { id: 3, name: 'Ali' },
  ]

*/

يمكنك استخدام ال history عند الضغط على زرار مثلاً

onBtnClick = () => {
  history.replace('/shop/Clothes/Dresses?color=blue');
}

// /shop/Clothes/Dresses?color=blue ويضع الرابط الجديد  /shop/Clothes/Dresses يقوم باستبدال المكان الحالي 

يمكنك التواصل مع الدعم الفني  من هنا  وقم بفتح تذكرة إذا كنت تعتقد أن بياناتك المدخلة صحيحة