Mohammed Saber6

يمكنك أن تستخدم ternary operator وهي صيغة مبسطة لل if condition ? true : false ولتطبيقها على المثال تكون كالآتي : render(){ return( <div> <h1>{this.props.found ? 'Some Content' : 'Not Found'}</h1> </div> ); }

يمكنك استخدام الآتي: عن طريق استخدام intersection list1 = [1,2,3,4,5,6] list2 = [3, 5, 7, 9] list(set(list1).intersection(list2)) # [3, 5]

الخطوات الرئيسية: يكون لديك مكون React لكي تقوم بتحويله كالذي بالمثال يكون لديك babel إلى node_module لأنك يجب أن تقوم بتحويل React Component إلى جافا سكربت تكتب script يقوم بتصدير الجزء الذي قمت بمعالجته إلى جافاسكربت تقوم بتحويل private إلى false في ملف ال package.json قد تحتاج لأن تشير إلى الملف الذي ستستخدمه ك entrypoint في الpackage الخاصة بك ويكون عن طريق "main": "المسار للملف النهائي", تقوم بإنشاء حساب على npm هنا تقوم بالدخول على الحساب عن طريق npm login تقوم برفع التعديلات التطبيق بالتفصيل من هنا

يمكنك الإطلاع على هذا السؤال

تأكدي من أن البورت إذا كان مفتوح في المتصفح علي هيئة http://10.0.2.2:8081/debugger-ui عوضاً عن http://localhost:8081/debugger-ui فإن كان كذلك قومي (.قبل تفعيل ال remote debugger ) بكتابة http://localhost:8081/debugger-ui في المتصفح ثم قومي بتفعيل ال remote debugger ثم التحقق من المتصفح مرة أخرى

يمكني استخدام Dimension API لحساب طول وعرض الشاشة وبناءاً عليه تحديد الطول والعرض المناسب لل view import { Dimensions } from 'react-native'; const windowWidth = Dimensions.get('window').width; const windowHeight = Dimensions.get('window').height;

الخطأ هنا أنكي قمتي باستخدام ال fetch بطريقة خاطئة حيت أنها تتوقع 2 parameters endpoint object: يحتوي مثلاً علي ال body و ال headers لكن بصورة مباشرة وليس بداخل object آخر كما في المثال الخاص بك هكذا // خطأ var obj = { link: 'https://api.producthunt.com/v1/posts', object: { // إزالة هذا المستوى method: 'GET', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + this.state.clientToken, 'Host': 'api.producthunt.com' } } } // صح var obj = { link: 'https://api.producthunt.com/v1/posts', method: 'GET', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + this.state.clientToken, 'Host': 'api.producthunt.com' } }

يمكنك اختيار الثيم الذي يناسبك من هنا قم بتمرير الماوس على أي ثيم ثم قم بالضغط على view extension وقم بالضغط على open in vscode

العناصر نفسها ولكن في الليست الثانية تم إزالة العناصر المكررة من الليست الأولى عن طريق دالة dict.fromKeys

الرجاء مراجعة إجابة السؤال الثاني هنا

إذا أردت أن تستخدم تنسيقات خاصة مثلاً لكل مكون أو كل صفحة تقوم بعملها فيمكنك استخدام ( JSS ) حيث إنها أداة ستسهل عليك كتابة التنسيقات وأيضا عن طريق الجافاسكربت بحيث يكون كل ملف له تنسيقاته الخاصة وهذا مثال import React from "react"; import { render } from "react-dom"; import { createUseStyles, ThemeProvider, useTheme } from "react-jss"; // نقوم بإنشاء تنسيقات const useStyles = createUseStyles({ wrapper: { padding: 40, background: ({ theme }) => theme.background, textAlign: "left" }, title: { font: { size: 40, weight: 900 }, color: ({ theme }) => theme.color }, link: { color: ({ theme }) => theme.color, // نستخدم قيمة الثيم الذي تم تمريره "&:hover": { opacity: 0.5 } } }); const Comp = () => { const theme = useTheme(); // نستخدم الثيم const classes = useStyles({ theme }); // نقوم باستدعاء التنسيقات وتمرير الثيم لها لاستخدامها كما في الأعلى return ( <div className={classes.wrapper}> <h1 className={classes.title}>Hello React-JSS!</h1> <a className={classes.link} href="http://cssinjs.org/react-jss" traget="_blank" > See docs </a> </div> ); }; const theme = { background: "#f7df1e", color: "#24292e" }; const App = () => ( <ThemeProvider theme={theme}> // نقوم بإنشاء تنسيقات عامة --- يمكنك أن تتجاهلها (تستخدم في حالة كان لديك تنسيقات عامة لمجموعة من المكونات ) <Comp /> </ThemeProvider> ); render(<App />, document.getElementById("root"));

إذا أردتي حذف العناصر المكررة من مصفوفة يمكنك استخدام الآتي: mylist = list(dict.fromkeys(list)) # هنا نقوم بالإزالة print(mylist)

إجابة السؤال الأول # Python 3 # نقوم بتعريف دالة لحساب المجموع def _sum(arr): # نقوم بتعريف المتغير لوضع فيه المجموع sum=0 # نقوم بعمل لووب على المصفوفة for i in arr: # نتأكد أن العنصر رقم إذا كان كذلك if type(i) == int or type(i) == float: # نقوم بإضافته للمجموع sum = sum + i return(sum) # هذه هي المصفوفة arr = [12, 'Mohammed', 4, 'Ahmed'] # نقوم بحساب المجموع result = _sum(arr) # نقوم بعرض المجموع print ('Sum of the array is ', result) إجابة السؤال الثاني username = input("Enter username:") //نأخذ المدخل من المستخدم list = list(username) // نقوم بتحويل ال كلمة لمصفوفة من الأحرف print(list) // نقوم بطباعة النتيجة

سأقوم بعمل مثال بلغة الجافا سكربت إجابة السؤال الأول const list1 = [1, 'Mohammed', 10, 'N', 'o', 3]; // هذا تعريف المصفوفة let result = 0; // نقوم بتعريف متغير ليحفظ المجموع list1.forEach(item => { // نقوم بعمل لوب على المصفوفة // نتحقق هل العنصر رقم أم لا if(typeof item === 'number') { // إذا كان رقم نضيفه إلى المجمو القديم result += item; // result = result + item } }) 2. إجابة السؤال الثاني const userInput = prompt('قم بإدخال أي نص'); // نقوم بأخذ المدخل من المستخدم const list = userInput.split(''); // نقوم بتحويل النص المدخل إلي مصفوفة console.log('list', list);

يمكنك استخدام dangerouslySetInnerHTML هكذا function createMarkup() { return {__html: '<div>simple text and <strong>strong text</strong></div>'}; } function MyComponent() { return <div dangerouslySetInnerHTML={createMarkup()} />; } ولكن يجب أن تكون متأكد من المصدر الذي تحصل منه على ال html حتى لا تتعرض لاختراق ويمكنك القراءة بالتفصيل من التوثيق الرسمي

إذا كنت تريد تغير ال state يجب أن تعطيها key مباشر وفي حالتك person وليس person.name وإذا أردت تحديث الإسم فقط وأن تبقي على ال age فأنت تحتاج ال prevState لتكون الطريقة كالآتي: this.state = {person: { name: 'Adam', age: 22 }} // الطريقة this.setState(prevState => ({ person: { ...prevState.person, // القيمة القديمة name: 'Mohammed' // تعدل الإسم } }));

يمكنك استخدام مصفوفة من ال مسارات هكذا كما في التوثيق من الموقع الرسمي <Route path={["/home", "/post", "/page"]} component={Home} />

ال scroll يعمل بصورة جيدة أنت فقط تعتقد أن الصفحة هي التي يتم عمل scroll لها وليس ال FlatList والسبب في ذلك أن SafeAreaView يأخذ مساحة الشاشة كاملة وبالتالي ال FlatList عندما تتجاوز عناصرها مساحة الشاشة سيتم عمل scroll لها أي للصفحة ككل للتأكد من ذلك قم فقط بإعطاء SafeAreaView طول أقل وليكن 400px وقم بعمل scroll

بالنسبة لي فهي طريقة غير واضحة وغير مفهومة البديل يمكنك استخدام filter فهي أبسط DELETE_PLATE: (state, action) => ({ ...state, plates: state.plates.filter((plate, index) => index !== action.payload) // نقوم فقط بإرجاع العناصر التي لها id // لا يسا،ي ال action.payload })

يمكنك عمل ذلك بأن تقوم بعمل array of refs وليس مرجع واحد كالآتي const { useRef, useState, useEffect, createRef } = React; const App = () => { // const elRef = useRef(); const dataRefs = useRef(data.posts.map(() => createRef())); // مصفوفة من ال مراجع return ( <div> {data && data.posts.map((post، index) => ( <div ref={elementsRef.current[index]} > // هنا نستخرج المرجع المخصص لكل عنصر بناء على ال index {post.tilte} </div> ))} </div> ); };

يمكنك عمل هذا عن طريق ال ref import React, { Component } from 'react'; export default class OutsideAlerter extends Component { componentDidMount() { document.addEventListener('mousedown', this.handleClickOutside); } componentWillUnmount() { document.removeEventListener('mousedown', this.handleClickOutside); } // عند الضغط بالماوس عل الصفحة handleClickOutside = (event) => { // نتحقق هل العنصر لديه حدث mousedown أم لا if (this.wrapperRef && !this.wrapperRef.current.contains(event.target)) { // إذا لم يحتوي على الحدث alert('لقد قمت بالنقر خارج المحتوى الخاص بي'); } } render() { // نقوم بإعطاء العنصر ref return <div ref={ref => this.wrapperRef =ref }>{this.props.children}</div>; } }

React لا تقوم بمقارنة ال value الجديدة التي تقوم بتعينها هو فقط يضعها ويقوم بعمل render ولكن هناك بعض الطرق من الممكن أن تستخدمها لمنع حدوث render مثلا التحكم في ال render نفسه من خلال shouldComponentUpdate ومقارنة الحالة القديمة بالجديدة shouldComponentUpdate(nextProps, nextState) { if (this.state.test !== nextState.test) { // في حالة كانت القيم مختلفة قم بعمل render return true; } return false; // غير ذلك لا يقوم بعمل render } هذا النمط يستخدم في حالة كانت ال state بسيطة وغير معقدة أما إذا كانت معقدة تستخدم مثلاً طريقة لعمل shallow comparison بين ال state و ال props والقرار يرجع لك متى تقوم بعمل render

الكود الخاص بك (.لا يوجد به أخطاء ويعمل بطريقة صحيحة ) وذلك لأنك تستخدم ال arrow function والتي تعمل bind تلقائي للكلاس ولن تحتاج عمل bind في ال constructor ولذلك يجب عليك إزالة السطر الموجود في ال constructor أما إذا لم تكن تستخدم ال arrow function فيجب أن تعمل constructor bind بهذه الطريقة this.increaseCounter = this.increaseCounter.bind(this);

الخطأ لديك فقط هو أنك لم تكتب كلمة return هنا if (index == text.length) { return clearInterval(interval); // حيث تقول عند تحقق الشرط أريد أن أقوم بإنها التحديث ولا يتم تنفيذ شيئ بعد هذا السطر } لكن بدون return ستنتهي بالفعل الحلقة وسيتم تنفيذ الآتي setTypewriter(typewriter + text[index]); setIndex(index + 1); مما سيؤدي إلى تنفيذ ال useEffect مرة أخرى.

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