خالد عبدالناصر نشر 21 مارس 2021 أرسل تقرير مشاركة نشر 21 مارس 2021 السلام عليكم ورحمة الله وبركاته توجد بعض الاجزاء في react لم افهمها ابدا لذا ارجو توضيح مبسط مع ذكر مثال او اكثر : 1- props 2- state 3- useState 4- useEffect 5- fetch اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عبدالباسط ابراهيم نشر 21 مارس 2021 أرسل تقرير مشاركة نشر 21 مارس 2021 سأحاول شرح هذه المصطلحات بإختصار لتبسيط المصطلح props وتعني ال خصائص وتقوم بتمرير البيانات من المكون الأب إلى المكون الأبن كالتالي class ParentComponent extends Component { render() { return ( <ChildComponent name="First Child" />//prop هنا هي name ال ); } } const ChildComponent = (props) => { return <p>{props.name}</p>; //يتم استخدامها بهذا الشكل }; //الناتج سيكون كالتالي <p>First Child</p> state و useState نقوم بوضع البيانات الخاصة بالمكون بها ويقوم react بتتبع القيمة في حالة تغيرها الفرق بينهما أن لكل منهما طريقة استخدام مختلفة و state تستخدم في ال class-based أما ال useState تستخدم في ال functional useEffect تستخدم لتنفيذ مهمة معينة عن حدوث تغيير في قيمة متغير معين fetch هي الوسيلة الحديثة لعمل http request مشابه لل ()jQuery.ajax وهي خاصة بال javascript هذا تبسيط للمصطلحات يمكنك الأن التعمق في هذه المصطلحات حيث بها الكثير من التفاصيل اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Salah Eddin Beriani2 نشر 22 مارس 2021 أرسل تقرير مشاركة نشر 22 مارس 2021 مثال حول استخدام props : import React from 'react'; export default function App() { return ( <div> <Component data="some data" name="page"></Component> </div> ); } function Component(props) { const { name, data } = props; console.log(name); //page console.log(data); // some data return <h1>Component</h1>; } مثال حول استخدام state: import React from 'react'; export default function App() { const [state, setState] = React.useState('some data') return ( <div> {state} // somedata </div> ); } مثال حول useState : import React from 'react'; export default function App() { const [state, setState] = React.useState('some data'); const handleClick = () => { if (state === 'some data') { setState('other data'); } else { setState('some data'); } }; return ( <div> {state} // some data <button onClick={handleClick}>click</button> </div> ); } مثال حول useEffect : import React from 'react'; export default function App() { const [state, setState] = React.useState('some data'); const handleClick = () => { if (state === 'some data') { setState('other data'); } else { setState('some data'); } }; React.useEffect(() => { console.log("أشتغل مرة واحدة الا اذا أضيف الستايت للقائمة في الاسفل") }, []) return ( <div> {state} // some data <button onClick={handleClick}>click</button> </div> ); } و fetch ليس لديها علاقة بمكتبة react فهي فقط أدام من أدوات جافاسكريبت لجلب أو ارسال البيانات اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
خالد عبدالناصر
السلام عليكم ورحمة الله وبركاته
توجد بعض الاجزاء في react لم افهمها ابدا لذا ارجو توضيح مبسط مع ذكر مثال او اكثر :
1- props
2- state
3- useState
4- useEffect
5- fetch
رابط هذا التعليق
شارك على الشبكات الإجتماعية
2 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.