Mohammed Saber6

مرحباً بك : الطريقة الصحيحة هو أن تعطي لل state قيمة profile جديدة كلياً بالإعتماد على القيمة السابقة لل state هكذا this.setState(prevState => ({ profile: { ...prevState.profile, // القيمة الحالية firstName: 'Mohammed' // التعديل فقط على firstName } }));

وعليكم السلام ورحمة الله وبركاته مرحباً أحمد: من الممتاز أنك تبحث عن طريقة لكتابة كود جيد وإليك بعض التحسينات إذا لاحظت ستجد أن الجزء الذي يغير النتائج مكرر أربع مرات متشابهين حتى في التنسيقات وطريقة جلب النتائج لما لا تجرب أن تجعلهم داخل array وتقوم بعمل loop عليهم ثم تعرضهم. أيضاً الجزء الخاص بالألوان لا يجب أن تفعله هكذا فماذا لو لديك ٤ خصائص تريد تغييرهم هل ستعمل ٤ اوبجيكت ؟ import React, { useState, useEffect } from "react"; import { FlatList, StyleSheet, View, Text } from "react-native"; import axios from "axios"; function App() { const [data, setData] = useState([]); useEffect(() => { getPhotos(); }, []); function getPhotos() { axios .get("https://jsonplaceholder.typicode.com/photos") .then(async function (response) { setData(response.data); }) .catch((err) => console.error(err)); } const [user, setUser] = useState(1); const newData = data.filter((e) => e.albumId === user); // فقط نقوم بإرجاع اللون بناءً علي الشرط const getBackgroundColor = (number) => { return user === number ? "red" : 'aqua'; } // نقوم بجمع المستخدمين الذين سيقومون بنفس الوظيفة const specialUsers = [ {id: 1, name: 'user one'}, {id: 2, name: 'user Two'}, {id: 3, name: 'user Three'}, {id: 4, name: 'user Four'}, ]; return ( <View style={styles.con}> // هنا نقوم بعمل دوران علي المستخدمين {specialUsers.map(user => ( <Text key={user.name} // هذا جزء تحسين التنسيقات style={{ backgroundColor : getBackgroundColor(user.id) }} onPress={() => setUser(user.id)} > {user.name} </Text> ))} <FlatList data={newData} keyExtractor={(item) => item.id.toString()} renderItem={({ item }) => ( <View> <Text>{item.albumId}</Text> <Text>{item.title}</Text> </View> )} /> </View> ); } const styles = StyleSheet.create({ con: {}, }); export default App;

مرحباً بك: السبب في أن التحديث لا يحدث مباشرة هو أن ال setState عبارة عن async operation وبالتالي نتيجتها قد لا تكون في نفس الوقت وهذا ما توضحه التوثيقات الخاصة بمكتبة React وذلك لأنها تسبب Rerender للمكون فإذا كانت sync فسيكون هناك عدم استجابة في المتصفح نتيجة ال Rerender

وعليكم السلام ورحمة الله وبركاته إذا كنت تبحث عن دورة عربية أكادمية حسوب Unique Coderz Academy أما عن المحتوى باللغة الإنجليزية فهناك مصادر كثيرة منها : The Net Ninja Codevolution

مرحباً أحمد: إذا كانت هذه الحالة الوحيدة من نوعها فيمكنك رفع حالة المكون component4 إلى المكون component 1 عن طريق ال props وبعد ذلك إعطاء القيمة للمكون الخامس عن طريق ال prop ولكن هذ الطريقة غير محببة لأنه قد يكون لديك أكثر من ٤ مكونات بداخل بعضهم الطريقة الثانية : هي أن تقوم باستعمال ال stateManagement بحيث تقوم في المكون ٤ بإعطاء القيمة لل store ومن ثم استخدامها في المكون الخامس الطريقة الثالثة : هي عن طريق عمل context يخزن فيه الحالة التي تريد استخدامها ودالة تقوم بتغيير هذه الحالة (. state ) وفي المكون الرابع تستخدم الدالة لتغيير الحالة كما تريد والمكون الخامس يستخدم الحالة نفسها (.يقرأها )

مرحباً أحمد: الخطأ يحدث حينما تكلم ال api فقبل أن تحصل على النتيجة تكون ال data فارغة وأنت في نفس الوقت تحاول تحريك ال slider لقيمة معينة وهي index وقيمتها الإبتدائية 0 ولكن عندما يحاول البرنامج تنفيذ ال scroll للعنصر 0 أي العنصر الأول لل data فلن يجده لأن النتيجة لم ترجع بعد ولذلك يفشل البرنامج الحل : هو آن تقوم بالتحريك عندما تكون هناك data موجودة useEffect(() => { if(index >= 0 && data.length) { // الشرط هنا refContainer.current.scrollToIndex({ animated: true, index }); // تغيير على حسب قيمة ستايت } }, [index, data]); // تقوم بتنفيذ الدالة عند تغيير الداتا useEffect(() => { if(index >= 0 && data.length) { refBox.current.scrollToIndex({ animated: true, index }); // تغيير على حسب قيمة ستايت } }, [index, data]);

مرحباً بك: تحتاج ال stateManagement فقط في حالة كانت ال state مشتركة في مكونات كثيرة ولكن هنا هي فقط state ما بين الثلاث مكونات كالآتي: function App() { state= { isFilterChanged: false }; // عند تغيير الفلاتر تقوم بتحديث ما تريد في ال state updateFilterState = () => { // تقوم بتحديث كمثال isFilterChanged this.setState({ isFilterChanged: true }); } render() { const { isFilterChanged } = this.state; // تمرير الخاصية للمكونات الأخرى return( <> <TopBar isFilterChanged={isFilterChanged} /> /* عند تغيير الفلاتر نقوم بتحديث ال state وتمريرها للمكونات الأخرى */ <Filters onChangeFilter={updateFilterState} /> </> ); } } وعندما تريد الإستفادة من التغيير الحاصل يجب أن تستقبل isFilterChanged بداخل المكونات الأخرى ومقارنة قيمتها الحالية بقيمتها السابقة فإذا كانت مختلفة تقوم بتنفيذ كود معين function TopBar() { componentDidUpdate(prevProps) { const { isFilterChanged } = this.props; // التحقق ما إذا كانت القيمة تغيرت أم لا if(prevProps.isFilterChanged !== isFilterChanged) { // نقوم بتنفيذ دالة هنا أو أي شيئ تريده لأن القيمة اتغيرت console.log('isFilterChanged', isFilterChanged) } } render() { return( <> <nav>Header</nav> </> ); } }

مرحباً بك أعتقد أن الإختيارات بها خطأ: هناك طريقة أخرى لحسابها عن طريق حساب الأعمدة ولنأخذ أول عمو كمثال نقوم بطرح القيمة الأول من الثانية =====> 4-3 =1 نقوم بمضاعفة الناتج وإضافته للرقم الأوسط ====> ( 1 + 1 ) + 3 = 5 وهي القيمة الأخيرة للعمود بتطبيق ما سبق على ثاني عمود نقوم بطرح القيمة الأول من الثانية =====> 8 - 6 = 2 نقوم بمضاعفة الناتج وإضافته للرقم الأوسط ====> ( 2+2 ) + 6 = 10 وهي القيمة الأخيرة للعمود بتطبيق ما سبق على ثالث عمود نقوم بطرح القيمة الأول من الثانية =====> 24 - 18 = 6 نقوم بمضاعفة الناتج وإضافته للرقم الأوسط ====> ( 6 + 6 ) + 18 = 30 وهي القيمة الأخيرة للعمود

مرحباً أحمد : هذا ما تبحث عنه import React, { useState } from "react"; import { FlatList, SafeAreaView, StatusBar, StyleSheet, Text, TouchableOpacity } from "react-native"; const DATA = [ { id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba", title: "First Item", }, { id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63", title: "Second Item", }, { id: "58694a0f-3da1-471f-bd96-145571e29d72", title: "Third Item", }, ]; const Item = ({ item, onPress, style }) => ( <TouchableOpacity onPress={onPress} style={[styles.item, style]}> <Text style={styles.title}>{item.title}</Text> </TouchableOpacity> ); const App = () => { const [selectedId, setSelectedId] = useState(null); const renderItem = ({ item }) => { // إذا كانت القيمة المخزنة تساوي قيمة ال id الخاص بالعنصر الحالي // نقوم بتغيير البوردر const border = item.id === selectedId ? "1px dashed aqua" : "none"; return ( <Item item={item} // عند الضغط على العنصر نقوم بتخزين ال id الخاص به onPress={() => setSelectedId(item.id)} style={{ border }} /> ); }; return ( <SafeAreaView style={styles.container}> <FlatList data={DATA} renderItem={renderItem} keyExtractor={(item) => item.id} extraData={selectedId} /> </SafeAreaView> ); }; const styles = StyleSheet.create({ container: { flex: 1, marginTop: StatusBar.currentHeight || 0, }, item: { padding: 20, marginVertical: 8, marginHorizontal: 16, }, title: { fontSize: 32, }, }); export default App;

مرحباً بك: لقد قمت بتصحيح الإجابة قم بفهم المبدأ وطبق بطريقتك الخاصة ليس عليك أن تستخدم نفس الطريقة المهم هو الفهم

مرحباً بك: يمكنك استخدام مكتبة react-render-html من npm <div> {renderHTML(this.state.posts)} </div>

مرحباً أحمد: يجب أن أقوم بالإطلاع على المشروع لإفادتك بشكل أدق ولكن سأقول لك الفكرة بشكل عام في البداية لديك صفحة وبداخلها مكونين (.ال slider + العناصر المربعة ) function App() { return ( <View style={styles.con}> <Slider /> <Boxes /> </View> ); } المكونين يتشاركون في البيانات كما تفعل في المثال المطروح const photos = [ { id: 1, title: "Photo 1" }, { id: 2, title: "Photo 2" }, { id: 3, title: "Photo 3" }, { id: 4, title: "Photo 4" }, { id: 5, title: "Photo 5" }, { id: 6, title: "Photo 6" }, ]; الصفحة التي تجمعهم فيها state عبارة عن selectedImg وستبدأ من ال 1 ( على افتراض أن لديك صورة لها id=1 بالطبع يمكنك تغييرها ) + دالة لتغيير هذه القيمة في حالتين فقط ( عند الضغط على أي مربع أو التحريك في ال slider ) + قمنا بتمرير الدالة للمكونين كما ذكرت في النقطة السابقة أم عن تمرير selectedImg فهو ما ستحتاج لكي تجعل الصورتين متطابقتين في الأبناء function App() { const [ selectedImg, setSelectedImg ] = useState(1); updateSelectedImg = imgId => { setSelectedImg(imgId); } return ( <View style={styles.con}> <Slider selectedImg={selectedImg} updateSelectedImg={updateSelectedImg} /> <Boxes selectedImg={selectedImg} updateSelectedImg={updateSelectedImg} /> </View> ); } بداخل كل مكون سواء Slider أو Box عند تغيير القيمة يجب أن تكلم الخاصية updateSelectedImg لكي تقوم بتحديث القيمة selectedImg ويقوم المكون الآخر باستخدامها فمثلاً عند الضغط علي المكون Box سيحدث الآتي: function Boxes(props) { const { selectedImg, updateSelectedImg } = props; const [ activeImgId, setActiveImgId ] = useState(1); useEffect(() => { // عندما يتغير الid // سواء من هذا المكون أو من غيره نقوم بتحديث ال state // ونقوم باستخدامها في ال render if(selectedImg !== activeImgId) { setActiveImgId(selectedImg); } }, [selectedImg]); hangleBoxClick = item => { // تحديث الأب ليستفاد المكون الآخر بالتحديث updateSelectedImg(item.id); } return( // Loop through boxes [ FlatList ] // يمكنك استخدام activeImgId // في عمل ما تريد <FlatList data={photos} keyExtractor={(item, index) => item.id.toString()} style={styles.flatList} renderItem={({ item, index }) => ( <TouchableHighlight onPress={hangleBoxClick(item)}> <View style={styles.container}> <Text>{item.id}</Text> <Text>{item.title}</Text> </View> </TouchableHighlight> )} /> ) } وكذلك بالنسبة للمكون الآخر

مرحباً أمير: يجب عليك استخدام {!! $text !!} عوضاً عن {{$text}} وللإصدار الخامس من laravel {!!html_entity_decode($text)!!} وهذا حتى تتجنب تحويل ال html إلى string عوضاً عن تنفيذه ك html

مرحباً بك : أنت هنا تبحث عن عنصر ذو id = Progress أنت قمت فقط بتمرير ال id إلى المكون Progressbar ولكن لم تستخدمه وتعطيه لعنصر في ال DOM الحل: Progressbar: ليس عنصر في ال DOM حتى يفهم ال id مباشرة بعد تمرير ال id يجب استخدامه على أحد عناصر ال html كالآتي var Progressbar = React.createClass({ getInitialState: function () { return { finished: this.props.finished }; }, addPrecent: function (value) { this.props.finished += value; this.setState({ finished: this.props.finished }); }, render: function () { var finished = this.props.finished; if (finished < 0) { finished = 0 }; // هذا أهم جزء لحل المشكلة بحيث تستخدم الخاصية هنا return ( // تستخدم الخاصية هنا <div id={this.props.id}> I have an id </div> ); }

مرحباً بك: المشكلة هي أن ال this keyword في المكون الأب لا تشير للكلاس ولكن تشير إلي ال window ولذبك يجب أن تعمل bind لل this في ال constructor قبل تمريرها هكذا constructor() { super(props); this.setCodeChange = this.setCodeChange.bind(this); this.login = this.login.bind(this); }

مرحباً بك: أثناء تعريف الراوتر <Route exact path="/item/:id" component={Item} /> أثناء التوجيه من المكون const id = 3; <Link to={`item/${id}`} /> في المكون الذي ستتوجه له import { useParams } from "react-router-dom"; function Item() { // استرجع القيمة let { id } = useParams(); return ( <div> <h3>ID: {id}</h3> </div> ); }

مرحباً @عبد الواحد الحدادي إذا كنت تستخدم البوتستراب يمكنك عملها هكذا المهم أن تخرج العناصر خارج العنصر <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"></div> لأنه المسؤل عن إخفاء العناصر في المقاسات الصغيرة

مرحباً عمر: لتقوم بمعرفة هل ال form صالحة أم لا يمكنك عمل الآتي: في البداية تقوم بعمل لووب للتأكد من أن العناصر تحتوي علي قيم فإذا كانت تحتوي عليها فهي سليمة function useForm() { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const values = { email, password }; const isValidForm = () => { let isValid = true; Object.keys(values).forEach(field => { if(!values[field]) { isValid = false; } }); return isValid; }; return { values, isValidForm, setEmail, setPassword }; }

يجب أن يتم عمل قياس نظر لك في كل الأحوال لأن النظارة التي ألبسها أنا لن تنفعك أنت والعكس ولذلك يجب أن تقوم بفحص النصر وقياسه حتى يستطيعو تركيب نظارة مخصوصة لك أنت فقط.

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

مرحباً محمد الرجاء رفع ملف المشروع

مرحباً محمد: أنت تريد أن تعطي ال consumption-m قيمة حاصل ضرب الحقلين الإضافيين ولذلك من المفترض عند تغيير قيمة أي حقل من الحقول الأخرى يجب أن تقوم بحساب قيمة الحقل consumption-m const input1 = $(".marker-hight-production"); const input2 = $(".layers-count"); let resultInput = $(".consumption-m"); $(".consumption-m").keyup(multiplyAndUpdate); $(".consumption-m").keyup(multiplyAndUpdate); function multiplyAndUpdate() { const input1Val = input1.val() || 0; // || 0 ==> معناها قيمة افتراضية في حالة كانت قيمة الحقل ليست رقم const input2Val = input2.val() || 0; // || 0 ==> معناها قيمة افتراضية في حالة كانت قيمة الحقل ليست رقم const result = input1Val*input2Val; // تحديث قيمة الحقل resultInput.val(result) }

الطريقة التي تعدل بها خاطئة فهنا أنت سيكون الناتج كالآتي // الجزء الأول صحيح حيث أنك تستخدم الحالة السابقة لكن عند إضافة cakes // فأنت لا ترجعها مصفوفة وإنما رقم لأنك أسندتها إلى رقم { ...state, cakes: state.cakes[0].qty - 1 }; // ليكون الناتج /* { cakes: 39 } */ الحل هو أنك تقوم بالتعديل على ال cakes وتقوم بإرجاع ال array ثم إعطائه لل state case SELL_ONE_CAKE: const modifiedCakes = [ ...state.cakes ]; modifiedCakes[0].qty -= 1; return { ...state, cakes: modifiedCakes }; وبهذا يتم تعديل الرقم وترجع الحالة كما هي

مرحباً @Adam Ebrahim يمكنك فعل ما تريد كالآتي ( إذا كنت تريد props أن تكون dynamic ): const InputComponent = function() { const name = "My Name"; return ( // في هذا الجزء أريد أن يتم حذف الخاصية disable لأن المتغير name يحتوي على قيمة <input type="text" {...(!name && { disabled: true })} /> ); } لاحظ المثال السابق أننا قمنا بإضافة object فيه disabled prop في حالة لا يوجد name وبعد ذلك قمنا بعمل spread للأوبجيكت مع كل ال props

مرحباً بك : strictMode: هي أداة لتتبع الأخطاء عن طريق إضافة بعض الفحوصات الإضافية الخاصة بها لمكون معين وأبناءه ومثلها مثل ال Fragment لا تؤثر على ال UI فقط تتبع الأخطاء import React from 'react'; function ExampleApplication() { return ( <div> <Header /> <React.StrictMode> <div> <ComponentOne /> <ComponentTwo /> </div> </React.StrictMode> <Footer /> </div> ); } في المثال السابق لن يتم عمل فحوصات إضافية ل ( Header - Footer ) أما ال ComponentOne - ComponentTwo ومحتوياتهم سيتم فحصهم مثال لما يتم فحصه: 1. التأكد من عدم استخدام ال ( UNSAFE_life cycly hooks ) مثل ( UNSAFE_componentWillReceiveProps - UNSAFE_componentWillMount - UNSAFE_componentWillUpdate ) 2. التأكد من عدم استخدام string ref 3. التأكد من عدم استخدام عناصر منتهية مثل ( findDOMNode ) 4. التأكد من عدم استخدام old context API هذه التحذيرات فقط تظهر آثناء التطوير ( development ) وليس ال production