لوحة المتصدرين
المحتوى الأكثر حصولًا على سمعة جيدة
المحتوى الأعلى تقييمًا في 03/21/21 في كل الموقع
-
السبب في هذه المشكلة هو التنسيقات الخاصة بالصورة، حيث أنه لم يتم تحديد أبعادها. يمكنك إضافة الخاصية style للمكون Image و تقوم بتحديد الطول و العرض الذي تريده للصورة و ستعمل بشكل صحيح: الأكواد بعد التعديل: import * as React from 'react'; import { Text, View, StyleSheet, Button, Image } from 'react-native'; class App extends React.Component { constructor() { super(); this.state = { completed: false }; this.handleCompleteAction = this.handleCompleteAction.bind(this); } handleCompleteAction(e) { this.setState({ completed: true }); } render() { const completed = this.state.completed; return ( <View> { completed ? <Image style={{ width: "100px", height: "200px" }} source={{ uri:"https://source.unsplash.com/512x512" }} /> : <Text>اضغط على استمرار</Text> } <Button onPress={this.handleCompleteAction} title="استمرار" /> </View> ); } } export default App;2 نقاط
-
الإصدار 1.0.0
116591 تنزيل
سطع نجم لغة البرمجة بايثون في الآونة الأخيرة حتى بدأت تزاحم أقوى لغات البرمجة في الصدارة وذاك لمزايا هذه اللغة التي لا تنحصر أولها سهولة كتابة وقراءة شيفراتها حتى أصبحت الخيار الأول بين يدي المؤسسات الأكاديمية والتدريبية لتدريسها للطلاب الجدد الراغبين في الدخول إلى مجال علوم الحاسوب والبرمجة. أضف إلى ذلك أن بايثون لغةً متعدَّدة الأغراض والاستخدامات، لذا فهي دومًا الخيار الأول في شتى مجالات علوم الحاسوب الصاعدة مثل الذكاء الصنعي وتعلم الآلة وعلوم البيانات وغيرها، كما أنَّها مطلوبة بشدة في سوق العمل وتعتمدها كبرى الشركات التقنية. دورة تطوير التطبيقات باستخدام لغة Python احترف تطوير التطبيقات مع أكاديمية حسوب والتحق بسوق العمل فور انتهائك من الدورة اشترك الآن بني هذا العمل على كتاب «How to code in Python» لصاحبته ليزا تاغليفيري (Lisa Tagliaferri) وترجمه إلى العربية محمد بغات وعبد اللطيف ايمش، وحرره جميل بيلوني، ويأتي شارحًا المفاهيم البرمجية الأساسية بلغة بايثون، ونأمل في أكاديمية حسوب أن يكون إضافةً نافعةً للمكتبة العربيَّة وأن يفيد القارئ العربي في أن يكون منطلقًا للدخول إلى عالم البرمجة من أوسع أبوابه. رُبط هذا الكتاب مع توثيق لغة بايثون في موسوعة حسوب لتسهيل عملية الاطلاع على أي جزء من اللغة مباشرة وقراءة التفاصيل باللغة العربية. هذا الكتاب مرخص بموجب رخصة المشاع الإبداعي Creative Commons «نسب المُصنَّف - غير تجاري - الترخيص بالمثل 4.0». يمكنك قراءة فصول الكتاب على شكل مقالات من هذه الصفحة، «المرجع الشامل إلى تعلم لغة بايثون»، أو مباشرةً من الآتي: المقال الأول: دليل تعلم بايثون اعتبارات عملية للاختيار ما بين بايثون 2 و بايثون 3 المقال الثاني: تثبيت بايثون 3 وإعداد بيئتها البرمجية المقال الثالث: كيف تكتب أول برنامج لك المقال الرابع: كيفية استخدام سطر أوامر بايثون التفاعلي المقال الخامس: كيفية كتابة التعليقات المقال السادس: فهم أنواع البيانات المقال السابع: مدخل إلى التعامل مع السلاسل النصية المقال الثامن: كيفية تنسيق النصوص المقال التاسع: مقدمة إلى دوال التعامل مع السلاسل النصية المقال العاشر: آلية فهرسة السلاسل النصية وطريقة تقسيمها المقال الحادي عشر: كيفية التحويل بين أنواع البيانات المقال الثاني عشر: كيفية استخدام المتغيرات المقال الثالث عشر: كيفية استخدام آلية تنسيق السلاسل النصية المقال الرابع عشر: كيفية إجراء العمليات الحسابية المقال الخامس عشر: الدوال الرياضية المضمنة المقال السادس عشر: فهم العمليات المنطقية المقال السابع عشر: مدخل إلى القوائم المقال الثامن عشر: كيفية استخدام توابع القوائم المقال التاسع عشر: فهم كيفية استعمال List Comprehensions المقال العشرون: فهم نوع البيانات Tuples المقال الحادي والعشرين: فهم القواميس المقال الثاني والعشرين: كيفية استيراد الوحدات المقال الثالث والعشرين: كيفية كتابة الوحدات المقال الرابع والعشرين: كيفية كتابة التعليمات الشرطية المقال الخامس والعشرين: كيفية إنشاء حلقات تكرار while المقال السادس والعشرين: كيفية إنشاء حلقات تكرار for المقال السابع والعشرين: كيفية استخدام تعابير break وcontinue وpass عند التعامل مع حلقات التكرار المقال الثامن والعشرين: كيفية تعريف الدوال المقال التاسع والعشرين: كيفية استخدام *args و**kwargs المقال الثلاثين: كيفية إنشاء الأصناف وتعريف الكائنات المقال الحادي والثلاثين: فهم متغيرات الأصناف والنسخ المقال الثاني والثلاثين: وراثة الأصناف المقال الثالث والثلاثين: كيفية تطبيق التعددية الشكلية (Polymorphism) على الأصناف المقال الرابع والثلاثين: كيف تستخدم منقح بايثون المقال الخامس والثلاثين: كيفية تنقيح شيفرات بايثون من سطر الأوامر التفاعلي المقال السادس والثلاثين: كيف تستخدم التسجيل Logging المقال السابع والثلاثين: كيفية ترحيل شيفرة بايثون 2 إلى بايثون 31 نقطة -
أنت تعرف من خلال ملفك الشخصي، ككاتب مستقل. لديك فرصة واحدة لإقناع العملاء بأنك الشخص المناسب. وهذا يعني أنه بدون ملف شخصي رائع، لن تستمر في هذا العمل طويلًا. وإلى جانب عرض مهاراتك، فإن الهدف الأساسي من ملفك الشخصي هو الحصول على الثقة. يريد الناس معرفة من يوظفون. إذا كان كل مشروعك على الإنترنت، فأنت تحتاج إلى أن تبذل جهدًا إضافيًا لكسب تلك الثقة. وهذا يعني أن تضيف بعض المعلومات عن نفسك. ستتحدث هذه المقالة عن كيفية تحسين ملفك الشخصي لعملك المستقل، من خلال إضافة قسم السيرة الذاتية. لنبدأ! ماذا تتضمن في ملفك الشخصي لعملك المستقل؟ هناك عدة عناصر يجب أن يتضمنها كل ملف شخصي للعمل المستقل. مثلًا، يجب أن تكون أفضل أعمالك في المقدمة والوسط؛ لأن ذلك هو ما سيراه الناس. وبالإضافة إلى كونك موهوبًا، تريد أن تريهم أنك شخص رائع للعمل معه. من بعض الطرق التي يمكنك بها إظهار ذلك لعملائك المحتملين هو تضمين آراء الزبائن، بعض الصور لك، روابط لمواقع التواصل الاجتماعي وقسم السيرة الذاتية. هدف كتابة السيرة الذاتية هو إعطاء العملاء لمحة مختصرة عنك. وغالبًا، قد يعتقد العملاء المحتملين بأنك موهوب، لكنهم قد لا يختارون توظيفك إذا لم تشارك أي معلومات حول نفسك. تذكر - أنت تبحث عن عمل بنفسك وليس عن طريق منصات العمل المستقل. هذا يعني أن الزبائن لا يستطيعون رؤية تقييماتك السابقة والوصول إلى كل معلوماتك. وبدلًا من ذلك، إذا كنت تريد إيصال أنك الشخص المناسب للوظيفة، فهذا يعود لك. 4 نصائح لتحسين كتابة سيرة ذاتية لعملك المستقل لا يملك معظمنا أي خبرة في كتابة السير الذاتية. المشكلة تكمن في أن معظم العملاء لا يهتمون كثيرًا برمزك أو إذا كنت تحب المشي على الشاطئ. ما يريدونه هو لمحة عن طريقة تفكيرك المهنية، والتي تقودنا إلى النصائح التالية. اجعلها مختصرة لا أحد يريد قراءة الكثير من الصفحات حول تاريخ حياتك كاملة، إلا إذا كنت قد وجدت علاجًا لمرض بنفسك. يجب أن تكون السير الذاتية الخاصة بعملك المستقل قصيرة ولطيفة. وهنا كل شيء تحتاج لتغطيته: الخبرة المهنية مشاريع مميزة أو عملاء عملت معهم بعض الأمثلة على المشاريع الشخصية ما هي نقاط قوتك المميزة بعض التحليلات لشخصيتك إذا كانت القائمة تبدو كأنها كتابة سيرة ذاتية، فأنت على الطريق الصحيح. والوضع المثالي هو أنك تريد إعطاء لمحة عن شخصيتك وهواياتك. ولكن، يجب أن يكون التركيز الرئيسي في سيرتك الذاتية على حياتك المهنية دائمًا. ومن واقع خبرتي -يقول الكاتب-، إذا كان يجب أن أقرأ سيرتك الذاتية بالكامل، وكانت طويلة جدًا، اذهب واختصرها. ضع صورة جيدة من إحدى أسوأ الأخطاء التي يركبها معظم المستقلين، هي عدم وضع صورة مهنية واحدة على الأقل في ملفهم الشخصي. لا يعني ذلك أنك تحتاج أن ترتدي بدلة، بل صورة واحدة مناسبة للرأس من شأنها أن تحدث فرقًا. لا يحب الكثير من الناس مشاركة صور لأنفسهم. ولكن تم التأكد من أنه لا يوجد عميل جاد يحكم عليك من مظهرك. يعد تضمين صورة شخصية مجرد طريقة بسيطة لإظهار أنك (أ) شخص حقيقي (ب) لست في عمر ال 15 وتتظاهر بأنك محترف. لديك صورة واحدة على الأقل لنفسك في مكان ما. ارفعها وضعها في مكان ما بحيث يستطيع الزائرون رؤيتها في ملفك الشخصي، وسيكون وضعك جيدًا. ركّز على نقاط قوتك ومواهبك المميزة يوجد منافسة كبيرة في مجال الكتابة كعمل مستقل. وبما أنني عملت -يقول الكاتب- في كلا الجانبين، أستطيع القول أنك إذا أعلنت عن وظيفة في مجال الكتابة، ستحصل على عشرات الطلبات إذا لم يكن أكثر. وبالتأكيد هناك مرشحين مميزين. يكون السبب في معظم الحالات، هو أن ملفاتهم الشخصية مرموقة ويعرفون كيف يقنعون العملاء بتوظيفهم. لنقل على سبيل المثال أنك كاتب مستقل بخبرة تتجاوز 5 سنوات. يبدو ذلك جيدًا، ولكنه مفهوم واسع لا يجذب أي شخص. من ناحيةٍ أخرى، إذا قلت أنه لديك خبرة 5 سنوات في الكتابة وخصوصًا الدروس التعليمية لتطوير المواقع الإلكترونية، مع التركيز على WordPress وتم نشرها على مواقع إلكترونية، فهذا أفضل. ككاتب مستقل، كلّما كنت أكثر تحديدًا، زادت الفرصة لتوظيفك، وذلك إذا كان السوق يطلب مجال اختصاصك بالطبع. تعد سيرتك الذاتية لعملك المستقل المكان المثالي لمشاركة تلك المعلومات. حافظ على تواضعك يعد الغرور أمرًا شائعًا بين المستقلين الناجحين. تعني عقلية البيع التي تحتاجها للحصول على عملاء جدد، أنك تمجد محاسنك الخاصة. لا يعد هذا أمرًا سيئًا بحد ذاته، ولكن قلل منه عندما تكتب سيرتك الذاتية. مثلًا، إذا أطلقت بعض القصص القصيرة في موقع Amazon، لا يجعلك هذا مؤلفًا ناشرًا (هذا أمر حقيقي رأيته عدة مرات). من المهم أن تمثل سيرتك الذاتية وملفك الشخصي مهاراتك بدقة. نحن نعرف أن الجميع يضخم الأمور قليلًا في ملفاتهم الشخصية وسيرهم الذاتية، ولكنك ترغب بأن يكون ذلك أقل ما يمكن. الدقة والمصداقية في مهاراتك، ستجعل علاقة العمل أفضل. وفي الجانب الآخر، إذا كان لديك ملفًا شخصيًا وسيرة ذاتية مرموقة، تفاخر بها قليلًا بكل الطرق - لديك كل شيء لفعل ذلك. الخاتمة قد تبدو كتابة سيرتك الذاتية أمرًا صعبًا. ولكن فكر بها على أنها إعطاء لمحة عن نفسك للعملاء المحتملين. إذا جعلت سيرتك الذاتية تبدو جيدًا ولديك مجموعة من أعمال الكتابة باسمك، يصبح إيجاد الأعمال أسهل بكثير. تذكر هذه النصائح المتعلقة بكيفية تحسين سيرتك الذاتية وملفك الشخصي: اجعلها مختصرة ضمّن صورة واحدة على الأقل لنفسك ركز على نقاط قوتك ومهاراتك المميزة حافظ على تواضعك هل لديك أي أسئلة حول كيفية تحسين ملفك الشخصي الخاص بعملك المستقل؟ ضعها في قسم التعليقات أدناه. ترجمة وبتصرف للمقال How to Write the Perfect Bio for Your Freelance Portfolio لكاتبه Alexander Cordova1 نقطة
-
طلب مني تصميم شعار لمركز طبي وعرضت هذه الافكار على الزبون ولم يقتنع بها .. تقييمكم ومالخطاء فيها وكيف يمكنني جعل التصميم افضل ومقنع ومناسب للزبون مع العمل ان الزبون ارسل لي بعض الشعارات من النت ويريد ان اقوم بالتعديل عليها فقط بينما انا اريد ان ابتكر لهم شعار خاص بهم دون الحاجه للاقتباس من شعارات اخر1 نقطة
-
قمت باستخدام مكون تحميل وهمي ولكنه لا يعمل؟ import * as React from 'react'; import { Text, View, StyleSheet } from 'react-native'; function Feed() { return <Text>مرحباً</Text>; } function Loading() { return <Text>جاري التحميل</Text>; } class App extends React.Component { constructor() { super(); this.state = { ready: false }; } render() { setTimeout(function () { this.setState({ ready: true }); }, 3000); return ( <View> { this.state.ready ? <Feed /> : <Loading /> } </View> ); } } export default App;1 نقطة
-
الصور لا تعمل import React from 'react'; import { View, Image } from 'react-native'; class DynamicImageComponent extends React.Component { render() { return ( <Image source={this.props.source} /> ); } }; class AppComponent extends React.Component { constructor(props) { super(props); this.state = { images: [ { source: './src/photos/01.jpg' }, { source: './src/photos/02.jpg' } ] }; } render() { let images = this.state.images.map(image => { return <DynamicImageComponent source={image.source} /> }); } return ( <View> { images } </View> ); }1 نقطة
-
يُمكنك زيادة عُمر الجلسة فالمدة الإفتراضية لإنتهاء الصلاحية هي ساعتان: و التعديل يكون من خلال الملف config/session.php: /* |-------------------------------------------------------------------------- | Session Lifetime |-------------------------------------------------------------------------- | | Here you may specify the number of minutes that you wish the session | to be allowed to remain idle before it expires. If you want them | to immediately expire on the browser closing, set that option. | */ 'lifetime' => env('SESSION_LIFETIME', 120), والوحدة هي الدقيقة يُمكنك تغييرها إلى 6 ساعات أو يوم بالشكل التالي: 'lifetime' => env('SESSION_LIFETIME', 360), // 6 ساعات // أو 'lifetime' => env('SESSION_LIFETIME', 60 * 24), // يوم أو من خلال ملف env. SESSION_LIFETIME=3601 نقطة
-
يجب عليك استدعاء الصور في React Native عن طريق: سطر الـ require باستخدام الخاصية uri بداخل source // الطريقة الأولى class AppComponent extends React.Component { constructor() { super(); this.state = { images: [ require('./src/photos/01.jpg'), require('./src/photos/02.jpg') ] }; } } /*** *** أو *** ***/ // الطريقة الثانية class DynamicImageComponent extends React.Component { render() { return ( <Image source={{ uri: this.props.source }} /> ); } };1 نقطة
-
قم بتضمين CSRF token مع Ajax ليصبح هكذا data: { "_token": "{{ csrf_token() }}", ... }1 نقطة
-
يتم تحويل العلامة / إلى %2F ضمن الترميز المستخدم في المسارات والذي يدعى percent-encoding، والسبب في هذه المشكلة أنه عند التحديث إلى نسخة Angular 1.6 يجب تغيير المسارات الافتراضية الموجودة ضمن خدمة المسارات $location أي استخدام locationProvider لتصبح بالشكل التالي: appModule.config(['$locationProvider', function($locationProvider) { $locationProvider.hashPrefix(''); }]); وأيضاً يوجد حل آخر من طرف العميل بإضافة العلامة ! قبل مسار التوجيه لتصبح بالشكل التالي: بدلاً من #/path/new تصبح كالتالي: #!/path/new1 نقطة
-
يمكنك استخدام Rule :: unique لتحقيق قاعدة التحقق الخاصة بك: <?php $messages = [ 'data.ip.unique' => 'Given ip and hostname are not unique', ]; Validator::make($data, [ 'data.ip' => [ 'required', Rule::unique('servers')->where(function ($query) use($ip,$hostname) { return $query->where('ip', $ip) ->where('hostname', $hostname); }), ], ], $messages); أو بهذا الشكل في الإصدارات الجديدة <?php $request->validate([ 'ip' => [ 'required', Rule::unique('servers')->where(function ($query) use($ip,$hostname) { return $query->where('ip', $ip) ->where('hostname', $hostname); }), ], ]); أو إنشاء صنف request جديد ثم تضع القواعد بنفس الطريقة أعلاه.1 نقطة
-
إن علامة النجمة * تستخدم للتحقق من قيم عناصر المصفوفة وليس المصفوفة بحد ذاتها، لذلك عند إرسال مصفوفة فارغة سيتم تطبيق شروط التحقق على العناصر وفي حال كانت فارغة فإنها بالتالي لا تحوي عناصر حتى يتم التحقق منها ولذلك لن يفشل التحقق أو الدخول وتنفيذ الكود داخل الشرط. لذلك يجب إضافة اسم المتغيّر أو المصفوفة بشكل منفصل عن العناصر ودون استخدام علامة النجمة للدلالة على المصفوفة نفسها بالشكل التالي: $validator = Validator::make($request->all(), [ "attributes" => "required|array|min:3", "attributes.*" => "required|string|distinct|min:3", ]); وبهذا الشكل سيتم إجراء التحقق على المصفوفة بمجموعة من القيود، وعلى عناصر هذه المصفوفة بقيود أخرى.1 نقطة
-
حسب رسالة الخطأ التي تظهر لك فإنها تخبرك بأن الlaravel installer يحتاج لzip extension: laravel/installer v1.4.1 requires ext-zip ولتثبيته عليك إدخال الامر التالي: sudo apt install php-zip اما إن كنت تستخدم نسخة معينة من الphp فسيتعين عليك كتابة الامر كالتالي: # php v7.0 sudo apt-get install php7.0-zip # php v7.1 sudo apt-get install php7.1-zip # php v7.2 sudo apt-get install php7.2-zip # php v7.3 sudo apt-get install php7.3-zip # php v7.4 sudo apt-get install php7.4-zip1 نقطة
-
يمكنك تعديل المسار الذي تُعيده الدالة public_path من خلال الملف index.php الموجود في مجلد public بهذا الشكل: <?php $app->bind('path.public', function() { return __DIR__; }); حيث سيقترن المسار الذي تُعيده الدالة public_path بمسار المُجلد الحاوي للملف index.php.1 نقطة
-
عند إضافة تابع جديد لأي من الموارد resources يجب إضافة المسار الخاص بهذا التابع بشكل منفصل ووضعه قبل تعريف المورد، أي بالشكل التالي: Route::get('any/newMethod', 'AnyController@newMethod'); Route::resource('any', 'AnyController'); ومن المهم وضع التابع قبل تعريف ال resource وإلا سيظهر الخطأ التالي: "No query results for model"1 نقطة
-
للحصول على آخر سجل لكل قسم حسب أرقام الأقسام الفريدة، يمكن تنفيذ الاستعلام التالي: select s.* from deps s left join deps s1 on s.department_id = s1.department_id and s.created_at < s1.created_at where s1.department_id is null وعن طريق Eloquent: DB::table('deps as s') ->select('s.*') ->leftJoin('deps as s1', function ($join) { $join->on('s.department_id', '=', 's1.department_id') ->whereRaw(DB::raw('s.created_at < s1.created_at')); }) ->whereNull('s1.department_id') ->get(); وبهذه الطريقة سيتم عند استعادة كل سجل مقارنته مع بقية السجلات التي تنتمي للقسم المحدد و أخذ القيمة الأصغر من التاريخ الموجود ضمن العمود created_at1 نقطة
-
يمكنك الحصول على عنوان IP عن طريق $request->ip(); بعد أن تقوم بتعريف الـ request في الـ Controller الذي يحتاج عنوان IP كالتالي: public function GetAll(Request $request){ echo $request->ip(); }1 نقطة
-
لارافيل تقدّم إمكانية الحصول على عنوان IP من خلال ال request القادم من العميل إلى الخادم، ويمكن تنفيذ ذلك باتباع عدة طرق: $clientIP = request()->ip(); dd($clientIP); أو من خلال الغرض request بشكل مباشر ضمن المتحكّم: public function index(Request $request) { dd($request->ip()); } وأيضاً يمكنك استعادة القيمة من \Request::ip() وتخزينها في متحوّل: $clientIP = \Request::ip(); dd($clientIP); أو $clientIP = \Request::getClientIp(true); dd($clientIP);1 نقطة
-
يمكنك حل هذه المشكلة عن طريق عمل render للـ WebView بداخل Fragment بدلاً من View. يمكنك أيضاً إستعمال StyleSheet لتحديد خاصية العرض (width) وسوف يعمل الـ WebView بعدها. function App() { const [ready, setReady] = React.useState(false); React.useEffect(() => { setTimeout(() => { setReady(true); }, 4000); }); return ( <> { ready ? <WebView originWhitelist={['*']} source={{ html }} /> : <SplashScreen /> } </> ); }1 نقطة
-
لدي الكود البسيط التالي: import React from "react"; function App() { const [number, setNumber] = React.useState(0); function updateNumber() { setNumber(state => state + 1); } console.log("this log is showing twice"); return ( <div className="App"> {number} <button onClick={updateNumber}>Increase Number</button> </div> ); } ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); في كل مرة اضغط فيها على الزر ، أحصل على سجلين في الـ console مما يشير إلى أن المكون يتم عرضه مرتين renders twice، لماذا يحدث هذا الأمر؟ هل هناك خطأ ما في الكود؟1 نقطة
-
يتم عرض مكون App الخاص بك داخل React.StrictMode وهو ما يؤدي إلى تشغيل الدوال الخاصة بك في وضع التطوير Development Mode وفي هذا الوضع تظهر النتيجة في الـ Console مرتين لأن كل دالة يتم تشغيلها مرتين في وضع التطوير. وحسب وثائق React الرسيمة: لا يمكن لوضع التطوير Development Mode كتشف الآثار الجانبية تلقائيًا، ولكن يمكن أن يساعدك في تحديدها بجعلها أكثر حتمية. يتم ذلك عن طريق الاستدعاء المزدوج للدوال التالية: في المكون من نوع Class: constructor render shouldComponentUpdate الدالة الثابتة getDerivedStateFromProps المكونات من نوع Function: جسم الدالة نفسها دوال تحديث الحالة setState useState useMemo useReducer لاحظ أنه هذا ينطبق فقط على وضع التطوير. لن يتم استدعاء دوال Lifecycles مرتين في وضع الإنتاج. يمكنك أن تمنع حدوث مثل هذا الأمر من خلال حذف React.StrictMode من التابع render: ReactDOM.render( <App />, document.getElementById('root') );1 نقطة
-
أتساءل عن كيفية حماية مسار لصفحة ما مع العلم أنه لدي خادم يوفر تسجيل الدخول وأجلب ال token وأحفظه في ال localStorage <Router> <div> <ul> <li><Link to="/public">Public Page</Link></li> <li><Link to="/protected">Protected Page</Link></li> </ul> <Route path="/public" component={Public}/> <Route path="/login" component={Login}/> <Route path="/protected" component={Protected}/> //أريد حماية هذا المسار ان لم يكم المستخدم مسجلا للدخول </div> </Router>1 نقطة
-
اذا ما نظرنا الى الطريقة الاولى سنجد الاتي: نحن نقوم بتخزين النتائج القادمه من ال API مباشرة الى friends وكل النتائج السابقه ستحذف أما الطريقة الثانيه فنحن نضيف النتائج الجديده الى القديمه ولكن مال الفرق الجوهري حقا بين الاسلوبين الاسلوب الثاني اذا مالاحظت فإنه يكون لديك وصول كامل الى ال state الحاليه قبل ان تقوم بأي تعديل علىيها فيمكنك هنا ان تفحص مثلا اذا كان هناك اسم مكرر في قائمة الاصدقاء ف تحذفه أو تقوم بأي عمليات أخرى على الاستيت القديمه والقيمه الجديده ومن ثم تخزن القيم النهائيه في ال state وكل ذلك عكس الطريقة الاولى حيث لا يمكنك عمل ذلك. وهناك سبب أخر لوجود مثل هذا التكنيك رقم 2 وهو أن ريأكت تقوم بعمل مايسمى ب batching لل setState بمعنى اذا تم استدعاء setState أكثر من مره على التوالي كالاتي مثلا: state = { count: 0 } updateCount = () => { this.setState({ count: this.state.count + 1}); this.setState({ count: this.state.count + 1}); this.setState({ count: this.state.count + 1}); this.setState({ count: this.state.count + 1}); } سوف يتم تنفيذ الأخيرة فقط بمعنى ان ال count في النهايه سوف يزيد بمقدار واحد فقط وتصبح قيمة ال count تساوي واحد وللتغلب على هذا نستخدم الاسلوب الثاني حيث يكون لدينا الوصول على ال state قبل التعديل عليها ونضيف عليها واحد كالاتي: updateCount = () => { this.setState(prevstate => ({ count: prevstate.count + 1})); this.setState(prevstate => ({ count: prevstate.count + 1})); this.setState(prevstate => ({ count: prevstate.count + 1})); this.setState(prevstate => ({ count: prevstate.count + 1})); } فتصبح قيمة ال count في النهايه تساوي 4.1 نقطة
-
هذا بسبب <React.StrictMode> وهو يقوم بعمل render مرتين فقط في البيئة التطويرية وليس بيئة ال production ويفعل هذا لكي يكتشف الأخطاء ويعمل تحذير بهم وهذا مفيد . إذا لا تريد هذا فقط قم بحذف <React.StrictMode>1 نقطة
-
هذا النمط يؤذي ال performance لأن الدالة سيتم إنشاؤها في كل مرة مع كل render وبالتالي في حالتك سيتم إنشاء المكون IconButton - Checkbox - img دائماً مع كل render ولحل هذه المشكلة فقط قم بالإشارة إليها هكذا selectPerson = tile => { // قم بعمل ما تريد } handleDelete = tile => { // قم بعمل ما تريد } handleOpen = img => { // قم بعمل ما تريد } {this.state.people.map(tile => ( <span key={tile.img}> <Checkbox onCheck={this.selectPerson(tile)} /> <GridTile actionIcon={<IconButton onClick={this.handleDelete(tile)}><Delete color="red"/></IconButton>}> <img onClick={this.handleOpen(tile.img)} src={tile.img} /> </GridTile> </span> ))}1 نقطة
-
عندما تستخدم الطريقة الأولى سيتم إزالة جميع النتائج الموجودة في ال state وسيتم وضع النتائج الجديدة دائماً. أما إذا كنت تريد الحفاظ على النتائج القديمة مثلاً تستخدم الطريقة الثانية حتى لا تمسح القديم1 نقطة
-
يمكنك عملها بالجافاسكربت مباشرة حيث تقوم بعمل utility واستخدامها في أي مكان عن طريق استخدام URLSearchParams والذي يتعامل مع ال query params هكذا const queryParser = new URLSearchParams(window.location.search); وعندما تريد استخراج key معين تقوم بعمل الآتي: const firbaseKey = queryParser.get('__firebase_request_key');1 نقطة
-
احاول ارسال form data عبر axios لكن يحدث معي هذا الخطأ var body = { userName: 'usertest', userEmail: 'usertest@gmail.com' } axios({ method: 'post', url: '/addUser', data: bodyة headers: { "Content-Type": "multipart/form-data" }, }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); Error in posting multipart/form-data. Content-Type header is missing boundary1 نقطة
-
ما هي طريقة react لتعيين التركيز على حقل نصي معين بعد تشغيل المكون؟ يبدو أن التوثيق يقترح استخدام refs ، على سبيل المثال نعيّن ref = "nameInput" في حقل الإدخال الخاص ثم نتصل بـ this.refs.nameInput.getInputDOMNode().focus(); لكن اين يجب ان أستخدم هذا1 نقطة
-
أنصح في هذه الحالة استعمال هيكلة مرفوقة ب state managment وأقترح استخدام ال context api لأنه بسيط ويتفق مع حجم التطبيق الحالي الخاص بك يمكنك الاطلاع على تعليقي هنا ﻷخذ فكرة https://academy.hsoub.com/questions/14018-تغير-مكون-بناءًا-على-حالة-مكون-react-آخر؟/#comment-395841 نقطة
-
جرب تعديل ال response في ال سيرفر وغير اعدادت ال content type بهذه الطريقة return response()->json($data, $code, ['Content-Type' => 'application/json;charset=UTF-8', 'Charset' => 'utf-8'], JSON_UNESCAPED_UNICODE); وقم بتغيير ال content type في ال fetch أيضا function getFriends() { fetch('http://localhost:8000/friends', { method: 'POST', mode: 'no-cors', credentials: 'same-origin', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json; charset=utf-8', }) }).then(function (response) { console.log(response); // يبدو أن هناك خطأ هنا return response.json(); }); }1 نقطة
-
أسهل طريقة إذا كنت تستخدم ES6. let initialArray = [1, 2, 3]; let newArray = [ ...initialArray, 4 ]; // --> [1,2,3,4] ستكون المصفوفة الجديدة [1،2،3،4] والان لتحديث المصفوفة يكفي أن تكتب : this.setState({ arrayvar:[...this.state.arrayvar, newelement] }); يمكنك تطبيق نفس الطريقة على المتغير updatedDescriptions1 نقطة
-
يمنحك الـ Linking واجهة عامة للتفاعل مع روابط التطبيقات الواردة والصادرة. إنه يعمل مع جميع المخططات (schemes) للتفاعل مع تطبيقك المستهدف. على سبيل المثال، يوجد mailto والتي تساعدك على فتح تطبيق البريد الالكتروني. لاستخدام WhatsApp، يمكنك استخدامه بالشكل التالي: import React from "react"; import { Linking, View } from "react-native"; // قم بوضع الدالة هذة بداخل اي مكون function sendToWhatsApp({ whatsAppNumber, whatsAppMessage }) { const handlePress = async () => { try { await Linking.openURL(`whatsapp://send?phone=${whatsAppNumber}&text=${whatsAppMessage}`); } catch (fault) {} }; }1 نقطة
-
اولا علينا ان انتق على ما تريدين هناك 3 انواع تقريبا في تصميم الويب 1- تصميم الصفحات بدون كتابة اي كود او استخدام بلوكات جاهزة فقط رسومات والوان وهنا تستخدمين adobeXd 2- تصميم الموقع من خلال بلوكات جاهزة او ثيم جاهز اما باستخدام ووردبريس او اي منصة شبيهة به 3- تصميم الويب هو تصميم من الصفر بhtml css js ومكتبات وفريم وورك لكل جزء منهم هنا على الاقل يجب ان تتعلمي html css حتى تقدمي موقع به نصوص صور الوان وخلفيات و انيمشن1 نقطة
-
عند استخدام JSX، فعليك الانتابه ان المكون يجب ان يكون عبارة عن دالة. يريد React دائماً ان يحصل على المكونات في دالة او class، على حسب الاصدار الذي تستعمله. في الدالة withState، الراجع منها ليس دالة، بل انه كائن (object). كيف هذا؟ عند كتابة المكون في شكل JSX، يقوم Babel (المترجم) بعمل نداء لهذا المكون. على سبيل المثال، اذا قمت بكتابة الدالة الآتيه: function Button({ title }) {} // عندما نستخدم المكون كـ JSX // <Button title="Save" /> // هذا يساوي الآتي // Button({ title: "Save" }) لذلك، بداخل الدالة withState، يجب ان يكون الراجع منها دالة، وهذه الدالة يكون الراجع منها هو المكون نفسه. فسيكون الحل هكذا: const withState = state => Component => { return () => <Component {...state} />; }; او يمكن كتابة الدالة بدون الـ Arrow Functions هكذا: const withState = state => Component => { return function () { return <Component {...state} />; } };1 نقطة
-
مراجعتي مجروحة... كمؤلف الكتاب... وليست هذه مراجعة حتّى لكنني أريد أن أتقدم هنا بالشكر الجزيل إلى فريق أكاديمية حسوب على إخراج وتنسيق الكتاب ورعايته. كان جهدًا طويلًا على مدار عدة أشهر لتنسيق الكتاب وإخراجه بشكل الحالي، خصوصًا أنه يحتوي الكثير من الصور والأوامر وغير ذلك من عناصر التنسيق المختلفة. أريد أن أنوه كذلك إلى أن هذا الكتاب يغطي معظم الأساسيات وأهم المواضيع، لكنه لا يغطي كل شيء في مجال الأمان الرقمي، ومايزال هناك الكثير من الأشياء الأخرى للحديث عنها. ويمكن للقارئ الكريم أن يتبحر على الشبكة بالبحث عن المزيد من المصادر حول المواضيع التي ذكرناها إن كان يريد المزيد، وهناك قائمة سريعة ببعض المواقع المفيدة في مجال الأمان الرقمي على الشبكة. أتوجه بالشكر هنا كذلك إلى كل القرّاء الذين حملوا الكتاب وساهموا بنشره للآخرين، ورغم أنه كتاب مجاني إلا أن أملي أن يستفيد منه أقصى عدد ممكن من الناس، ليحموا أنفسهم من مخاطر الخصوصية والأمان في هذا الوقت المتقلب. أنا جاهز لأي أسئلة أو استفسارات تحت هذا التعليق كذلك.1 نقطة
-
لايمكن ان يصبح النسان مختص فى مجال بدون دراسة عميقة للمجال ان اراد ان يصبح متميز فيه بمعنى مثلا لا يمكن لشخص ان يصبح مهندس بدون دراسة الهندسة1 نقطة
-
نعم يمكنك الحصول على شهادة في مجال برامج ميكروسوفت أوفيس سجل في موقع Indeed.com مع فرصة للحصول على وظيفة وإمكانية العمل عبر الإنترنت وبكل سهولة لا تضيع الفرصة سيوفر لك شهادة معتمدة في برامج الأوفيس خصوصا أنها متصلة بشكل كبير في مجال عملك، سيعطيك الموقع إمتحانين في الإكسل والوورد فور تسجيلك وإدخال معلوماتك الشخصية في الموقع لتأهلك لأي وظيفة مرتبطة في مجال عملك وستحصل على درجة ثم تضاف في سيرتك الذاتية على الموقع. جربه حقا رائع!! تحياتي لك.1 نقطة