لوحة المتصدرين

للحصول على الأخطاء التي قد تحصل عند إضافة سجل جديد نقوم بوضعها بداخل try & catch حيث تقوم بالحصول على الأخطاء حين حدوثها try{ $user = new User; $user->fields = $value; $user->save(); // true or false }catch(\Exception $e){ echo $e->getMessage(); // للحصول على معلومات الخطأ } ومن خلالها يمكننا معرفة المعلومات المتعلقة بالخطأ من خلال echo $e->getMessage();

لا نستطيع تفسير التعابير ضمن شيفرة JSX حسب التوثيق الرسمي إنما نستطيع تعريف مكون ديناميكي و من ثم استخدامه كمثال بسيط: const Heading = "h" + 1; . . return <Heading>...</Heading>; كمثال كامل: لاحظ تمرير المتغير level حيث يتم تعريف ال HTML TAG قبل بنائه. function TypographyHeading({text, level}) { // Select heading <h1> - <h5>: const Heading = "h" + level; return ( <div> <Heading> {text} </Heading> </div> ); }

في البداية دعنا نفهم كيف يعمل ال router على سبيل المثال إذا كان عنوان الموقع الخاص بنا www.example.com فحين الولوج الى الموقع يقوم الروتر بأخذ مابعد .com وهنا الإفتراضي هو "/"والبحث عنه بأسلوب إذا وجدت اي مسار داخل ال BrowserRouter يبدأ ب "/" فقم بعرض المكون الخاص بهذا المسار ولذا ففي المثال المرفق حينما تقوم بتغير المسار إالى "www.example.com/profile" يقوم الروتر بإقتطاع الجزء بعد .com وهو "profile/" ويذهب ليبحث ويرى أي مسار يبدأ بأي شئ يطابق "profile/" في الترتيب حيث أن اول جزء هو "/" فيكون متطابقا مع أول مسار "/" فيقوم بعرض المكون الخاص به ولذا فيمكننا حل هذا الأمر بعدة طرق منها التالى: 1- إستخدام Switch import React from "react"; import ReactDOM from "react-dom"; import { Route, Switch } from "react-router"; import { BrowserRouter } from "react-router-dom"; import People from "./components/People"; import Profile from "./components/Profile"; ReactDOM.render( <BrowserRouter> <Switch> <Route path="/" component={People} /> <Route path="/profile" component={Profile} /> </Switch> </BrowserRouter>, document.getElementById("root") ); 2- إستخدام كlلة exact ك props وبالتي سيطابق المسار الموجود بالجزء المقتطع تماما ReactDOM.render(( <BrowserRouter> <Route exact path="/" component={People} /> <Route exact path="/profile" component={Profile} /> </BrowserRouter> ), document.getElementById('root'))

هل توجد طريقة لعمل جملة if else في داخل دالة render مثلًا بهذا الشكل: render(){ return ( <div> if (this.props.found) {<h1>Some Content</h1>} else {<h1>Not Found<h1/>} </div> ) } بالطبع الكود السابق لن يعمل، لكني أحاول عمل شيء كهذا بدلًا من عمل جملتين return واحدة في داخل if وواحدة في else بالشكل التالي: render(){ if (this.props.found) { return ( <div> <h1>Some Content</h1> </div> ) } else { return ( <div> <h1>Not Found</h1> </div> ) } } فهل هناك طريقة لفعل مثل الكود السابق ولكن من داخل جملة return نفسها لكي لا أكرر باقي الكود مرتين؟

لدي نموذج form به الكثير من المدخلات (عناصر input)، وكنت أتسأل إن كان هناك طريقة لجلب القيمة من عناصر input هذه في React، أعلم أنه يمكنني أن أستخدم useState مع عمل onChange event لكن كما قلت سابقًا أن النموذج يحتوي على الكثير من عناصر input ولا أريد أن أقوم بعمل state و handler لكل عنصر منهم، لذا هل توجد طريقة أخرى لعمل هذا الأمر بطريقة أسهل بدلًا من هذا التكرار المتعب؟

لدي form في لارافل أقوم بالتحقق من بياناته من خلال validation return Validator::make($data, [ 'name' => 'required|max:255', 'email' => 'required|email|max:255|unique:users', 'password' => 'required|confirmed|min:6', 'checkbox' =>'required', ]); ولكن لا يتم التحقق من checkbox مهما كانت المدخلات وهذا كود checkbox <input type="checkbox" name=" checkbox" value="agree"><label><p><a href="#">agreements</a></p></label>

أهلا أريد مساعدة في هذه البرمجة لو سمحتو : أولا في هذه البرمجة من المفروض انني عندما اقوم بالضغط على الخلفية يتغير اللون باستمرار ولكن إذا ضغط على هذه الخلفية 5 مرات يجب أن يتوقف تغير لون الخلفية وتظهر كلمة نهاية اللعبة . ولكن المشكلة انه حتى لو ضغطت 5 مرات على الخلفية ما تنتهي اللعبة وما يظهر نهاية للعبة ، هذه هي البرمجة خاصتي أتمنى منكم مساعدتي لُطفا : from processing import * import random # setup is called once at the start red = 236 green = 242 blue = 63 mouse=0 end_game = False def setup(): size(500,500) def draw(): background(red, green, blue) def mouseClicked(): global red global green global blue red = random.randint(0, 255) green = random.randint(0, 255) blue = random.randint(0, 255) if mouse <5: end_game = True textSize(45) text("end game",180,250) run()

يمكنك استخدام الأسماء المستعارة في Laravel كما كنت تستخدمها في MySQL باستخدام الكلمة المفتاحية AS فيصبح الاستدعاء كالتالي: $users = DB::table('really_long_table_name AS t') ->select('t.id AS uid') ->get();

يتم تشفير كلمات السر في Laravel عن طريق الدالة bcrypt(); ويتم تمرير كلمة المرور الغير مشفرة إليها وتعمل على تشفيرها وإعادتها بالشكل الجديد $password = bcrypt('hsoub');

يتم تجهيز القالب الرئيسي ونسميه layout.blade.php ويكون محتواه: <html> <html> @yield('content') </html> بحيث أنّ @yield('content') // هي الجزئية التي سيحل مكانها القالب الفرعي والقالب الفرعي نسميه: index.blade.php ويحتوي على @extends('layout') // -> 1 @section('content') // -> 2 <html here> // -> 3 @endsection حيث أنّ: 1: استدعاء القالب الرئيسي 2: اسم الجزئية التي سيتم عرض القالب الفرعي بداخل القالب الرئيسي 3: محتوى القالب الفرعي وفي المتحكم يتم استدعاء القالب الفرعي ليظهر بصورته النهائية: return view('index');

يمكنك التحكم في بيانات الاتصال في قاعدة البيانات من خلال الدالة: Config::set('key', 'value'); حيث يتم تعيين البيانات الجديدة من خلال تمريرها إلى الدالة كالتالي: Config::set("database.connections.mysql", [ "host" => "new_host", "database" => "new_database", "username" => "new_username", "password" => "new_password" ]); بعد ذلك يتم اجراء العمليات (إضافة, تعديل, حذف, قراءة) في قاعدة باستخدام الاتصال الجديد الذي تم تعيينه

تأكد من أنّ المشغل الخاص بقاعدة البيانات مفعّل وذلك في ملف php.ini ;extension=php_pdo_mysql.dll ^ قم بمسح إشارة ";" الموجودة في بداية السطر لتفعيل المشغل وإذا لم تعمل بالشكل الصحيح أو لم تجدها, فعليك تثبيت المكتبة عن طريق: 1- معرفة إصدار php الخاص لديك من خلال: php -v 2- بعد ذلك قم بتحميل المكتبة الموافقة للإصدار (إحدى هذه المكتبات): php 7.0 sudo apt-get install php7.0-mysql php 7.1 sudo apt-get install php7.1-mysql php 7.2 sudo apt-get install php7.2-mysql php 7.3 sudo apt-get install php7.3-mysql 3- ومن ثمّ إعادة تشغيل Xampp أو تنفيذ الأمر: service apache2 restart

من خلال المتحكم, قم بتمرير قيم JSON التي تم تحويلها على شكل مصفوفة إلى view return view('name')->with('leads', json_decode($leads, true)); وفي ملف blade نقوم بطباعة المصفوفة عن طريق foreach لقراءة كل قيمة لوحدها: @foreach($leads['member'] as $member) Member ID: {{ $member['id'] }} Firstname: {{ $member['firstName'] }} Lastname: {{ $member['lastName'] }} Phone: {{ $member['phoneNumber'] }} Owner ID: {{ $member['owner']['id'] }} Firstname: {{ $member['owner']['firstName'] }} Lastname: {{ $member['owner']['lastName'] }} @endforeach

في Laravel يتم التحقق من checkbox باستخدام القاعدة: accepted بدلًا من: required فيصبح البرنامج: return Validator::make($data, [ ... 'checkbox' =>'accepted', ]);

لدي هذا المسار في المشروع http://localhost:8000/projects/java/oop كيف يمكنني الحصول على جزء محدد من المسار ؟ مثلا: للحصول على الجزء الأول "projects" اقوم باستخدام هذه الطريقة في ملف blade <?php echo $segment1 = Request::segment(0); ?> ولكن لا يظهر شيء

قم باستخدام هذه للطباعة: {{ }} فهي مخصصة لطباعة قيم المتغيرات بداخل ملفات blade مباشرة فيصبح كالأتي: {{ Request::segment(0) }}

أقوم بحفظ سجل جديد في قاعدة البيانات باستخدام Model->save(); هكذا $user = new User; $user->fields = $value; $user->save(); // true or false ولكن هذه الوظيفة تقوم بارجاع true عند نجاح العملية أو falseعند فشلها. كيف يمكنني أن أحصل على معلومات الأخطاء التي حصلت عندما تكون المرتجعات false ؟

تسمى المدخلات التي تسجل قيمتها في ال state وكذلك يكون لها onChange handler ب "Controlled Input" ولذا لابد من استخدام ال state وال handler ولكن يمكننا توفير كتابة handler لكل input وكتابة handler واحد فقط للجميع كالتالي handleChange(e){ const { name, value } = e.target; this.setState({ [name]: value }) } بحيث يكون ال name هو الاسم المسجل داخل ال state لهذا ال input. وأيضا لتسهيل كتابة ال state عليك طالما أنت تستخدم ال hooks ف الأفضل في هذه الحاله أن تستخدم useReducer كالتالي const [input, setInput] = useReducer( (state, newState) => ({ ...state, ...newState }), { name1: "", // هنا أسماء المدخلات name2: "", name3: "" } ); const handleChange = e => { const { name, value } = e.target; setInput({ [name]: value }); }; هناك أيضا مكتبات خارجيه تساعدك وتسهل عليك الأمر أكثر وأكثر يمكنك الإطلاع عليها أرشح لك منها react hook form Formik

نعم هناك طريقة ستقوم فيها بكتابة handler واحد لجميع عناصر ال input وهي كالتالي handleChange (e) { this.setState({ [e.target.name]: e.target.value }); } تقوم هذه الطريقة بتغيير ال state لل input الذي قام بإستدعاء الدالة لذلك إذا تم تغيير قيمة ال password مثلاً ستم تنفيذ الدالة السابقة كالتالي handleChange (evt) { this.setState({ password: "باسورد" }); } ولكن بالنسبة لل state ستحتاج لإضافة جميع عناصر ال input

يمكن قراءة قيم حقول inputs بطريقة ديناميكية باستعمال handler وحيد يكون بالشكل التالي: this.setState({ [evt.target.name]: evt.target.value }) كما نلاحظ هذه من نوع ES6 Computed property names أي سوف يتم تعويض اسم الخاصية المتغيرة مع قيمتها مهما اختلفت.

يمكنك استخدام try and catch للتحكم في البرنامج سواء في حالة حدوث خطأ أو في حالة النجاح كالتالي try{ // يتم تنفيذ الكود هنا في حالة النجاح } catch{ // يتم تنفيذ الكود هنا في حالة الفشل } وفي حالة المثال الخاص بك يمكن أن يكون الكود كالتالي try{ $user = new User; $user->fields = $value; $user->save(); } catch(\Exception $e){ echo $e->getMessage(); }

السلام عليكم لدي مشكلة في برمجة احد العاب البايثون , برمجتُ اللعبة على ان اذا لمس اللاعب قطعة نقدية تزيد النقاط بمقدار 10, لكن عندما يلمس اللاعب القطعة النقدية تزيد النقاط بشكل غير نهائي ,كيف احل هذه المشكلة ؟علما بأنني قمت ببرمجة اللعبة بدون مكتبات اضافية

هنالك عدة حلول للمشكلة حسب منشئها. 1- بإمكانك حذف ال Object الخاصة بالعملة بعد أن يقوم اللاعب الاصطدام بها، و في هذه الحالة سيتم إجراء الزيادة لمرة واحدة. 2- بإمكانك منح العملة متغيرا يساوي القيمة 10، و عند ملامسة اللاعب لها تقوم بإنقاص قيمة هذا المتغير بمقدار 10. كما أن الطرق التي وردت في الإجابة السابقة قد تكون صحيحة حسب طبيعة المشكلة.

في الدالة mouseClicked لا يتم التعرف غلى المتغير mouse الذي تم تعريفه في الأعلى لعدم وضع كلمة global قبله في بداية الدالة مثل ما تم التعامل مع الألوان، فأعتقد أنه ليس له قيمة بدائية أي ليست 0 و هل تتغير قيمته مع النقر؟ يمكن طباعة قيمته للتأكد من خلال print مثلا. كما يجب تغيير قيمته مع كل نقرة ضمن الشرط if بزيادة 1 له أي ل mouse

لإزالة token الخاص بمستخدم محدد، يمكنك الاستعلام عن طريق الرقم الفريد المعرف لهذا المستخدم: Auth::user()->tokens()->where('id', $id)->delete(); ثم يجب عليك تحديد المستخدم عند استقبال الطلب، ويمكنك تنفيذ ذلك بحيث يصبح الكود كالتالي: // الحصول على المستخدم الذي يرغب بتسجيل الخروج من الموقع $user = request()->user(); //or Auth::user() // حذف token $user->tokens()->where('id', $user->currentAccessToken()->id)->delete(); ويمكنك أيضاً بشكل مختصر ومباشر استخدام currentAccessToken كالتالي: $request->user()->currentAccessToken()->delete(); ولكن عندها يجب عليك إضافة HasApiTokens ضمن مودل المستخدم.

صحيح

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

1 * * * * يعني أن الأمر سيعمل في الدقيقة الأولى من كل ساعة ، استخدم: * * * * * لتشغيل الأمر كل دقيقة. إذا كنت تقوم بتشغيل Laravel من حساب cPanel ، فيمكنك محاولة تحديد مسار PHP الكامل كالتالي: * * * * * /usr/local/bin/php /home/webminder/public_html/artisan schedule:run >> /dev/null 2>&1

بما أن الخاصية عملت بشكل جيد عند إستخدام mailtrap، يوجد نُقطة إضافية تأكد من أن كلمة مرور خادم البريد لا تحتوي على رموز # إذا كانت كذلك يُرجى وضع كلمة المرور بين علامتي إقتباس نظرًا لأن كل شيء بعد # سيتم اعتباره تعليقًا ( تم إضافتها بدئًا من لارافيل 5.8) MAIL_PASSWORD="your-pass#if-contains#"

يمكنك تغيير smtp إلى sendmail و التأكد من كلمة المرور و قيمة البورت وايضا وضع قيمة MAIL_ENCRYPTION بحيث إما تكون MAIL_ENCRYPTION=tls أو MAIL_ENCRYPTION=ssl ايضا وضع بيانات mailtrap الصحيحة.

بكل بساطة في ملف ال test الخاص بهذه الدالة يمكنك أن تفعل التالي // الخطوة 1 import { getPosts } from "./path"; jest.mock("axios"); describe("getPosts", () => { // الخطوة 2 it("fetches posts successfully", async () => { const response = { // الخطوة 3 data: { posts: [ { postId: "1", postTitle: "Title Title" }, { postId: "2", postTitle: "Title2 Title2" } ] } }; // الخطوة 4 axios.get.mockImplementationOnce(() => Promise.resolve(response)); await expect(getPosts(`${my_URL}`)).resolves.toEqual(response); }); it("fetching posts failed", async () => { const errorMessage = "Network Error"; axios.get.mockImplementationOnce(() => Promise.reject(new Error(errorMessage)) ); await expect(getPosts(`${my_URL}`)).rejects.toThrow(errorMessage); }); }); ففي الخطوة رقم 1 : تقوم بإستيراد الدالة التي تريد عمل لها test في الملف الخاص ب ال test كما نقوم بإعلام jest اننا نقوم بعملية إختبار لدالة asynchronous تستخدم axios الخطوة رقم 2 : تبدأ بتعريف ماتقوم بعمل إختبار له "test" الخطوة رقم 3 : تقوم بكتابة شكل الرد المنتظر في حالة نجاح عملية جلب ال posts وهنا تسمى ب "mock response data" وهي أيضا البيانات الوهمية التي تسئل عنها. الخطوة رقم 4 : تقوم بمدج axios مع هذا الإختبار وكتابة النتيجه المتوقعه من هذا الإختبار الخطوات السابقه تمت في حالة نجاح عملية جلب المقالات ومابعدها يحاكي عملية الفشل.

ما أريد فعله هو عمل مكون يأخذ props لتحدد ما إن كان العنصر سيكون من نوع h1 - h2 - h3 - h4 - h5 - h6 بالشكل التالي: <h{this.props.num}>{this.props.content}</h{this.props.num}> حاولت أن أستعمل المكون كالتالي: <CustomTag num="1" content="Hello, World!" /> وتوقعت أن تكون النتيجة كالتالي: <h2>Hello, World!</h2> لكن يبدو أن الطريقة السابقة لا تعمل، هل هناك حل بدل من إستعمال جمل if متعددة لتحديد نوع العنصر؟

في حالة العناوين الديناميكية (h1 ، h2 ...) ، يمكن للمكون إرجاع React.createElement على هذا النحو. const Heading = ({level, children, ...props}) => { return React.createElement(`h${level}`, props , children) } ويمكن تمرير كل من الدعائم والأطفال. <div> <Heading level={1}>Heading 1</Heading> <Heading level={2}>Heading 2</Heading> <Heading level={3}>Heading 3</Heading> </div> النتيجة Heading 1 <!-- بخط كبير --> Heading 2 <!-- بخط متوسط--> Heading 3 <!-- بخط صغر -->

جميل جدا هذا السؤال يمكنك أن تستخدم الكود التالي return React.createElement(this.props.tagName , this.props, this.props.content); بكل بساطة الطريقة الأسهل التي نستخدمها لكتابة مكونات ريأكت تسمى ب jsx وهي تبسيط للشكل المرفق لا أكثر ففي حالتنا يمكننا إستخدام الكود المرفق لانشاء المكون بالشكل الذي تريده بطريقة بسيطه حيث أن: this.props.tagName: هي اسم المكون الذي تريده على سبيل المثال في حالتنا هذه h1 أو h2 أو h3....إلخ this.props: هنا كل ال props يتم إعطاءها للمكون this.props.content: هنا كل ال children أو الأبناء لهذا المكون وفي حالتنا هذه هو المحتوى الذي نود عرضه فعلى سبيل المثال لو كتبنا بطريقة jsx الكود التالي <ComponentName color="blue" shadowSize={2}> Content Content </ComponentName> ف ريأكت تقوم بتحويل هذا الكود إلى الكود التالي وتتعامل معه React.createElement( ComponentName, {color: 'blue', shadowSize: 2}, 'Content Content' ) عسى أن يكون الأمر واضحا ومبسطا. بالتوفيق إن شاء الله.

يمكنك تخزينها بنفسك ، بعد مصادقة المستخدم بنجاح و استدعاء رد نداء المصادقة من قبل ال provider، بمجرد حصولك على نسخة من المستخدم، يمكنك الحصول على بعض التفاصيل حول المستخدم: Route::get('/auth/callback', function () { $user = Socialite::driver('github')->user(); // OAuth 2.0 providers... $token = $user->token; $refreshToken = $user->refreshToken; $expiresIn = $user->expiresIn; // OAuth 1.0 providers... $token = $user->token; $tokenSecret = $user->tokenSecret; // All providers... $user->getId(); $user->getNickname(); $user->getName(); $user->getEmail(); $user->getAvatar(); }); يُمكنك الحصول على معلومات أكثر من خلال التوثيق: استرداد تفاصيل المستخدم

لا يتغير محتوى الصفحة لأنك تظل في المكون people أو (" / ") لماذا ؟ لأن المسار "profile/" يحتوي على ال "/" وبالتالي router بإستدعاء ال "/" ولذلك تحتاج لإستخدام الخاصية exact كالتالي import React from "react"; import ReactDOM from "react-dom"; import { Router, Route } from "react-router"; import { BrowserRouter, Router } from 'react-router-dom'; //react لا تنسى إستدعاء import People from "./components/People"; import Profile from "./components/Profile"; ReactDOM.render(( <BrowserRouter> <Route exact path="/" component={People} /> <Route path="/profile" component={Profile} /> </BrowserRouter> ), document.getElementById('root'))

أعتقد أن سبب المشكلة هو أن GROUB BY تقوم بأخذ أول صف فقط وبعد ذلك تتجاهل باقي الصفوف التي لها نفس قيمة sender_id، لذلك يمكنك تجربة جملة SQL التالية: SELECT * FROM messages WHERE recipient_id = ? AND sender_id IN (SELECT DISTINCT sender_id FROM messages) الجملة السابقة ستقوم أولًا بجلب الصفوف غير المكررة في العمود sender_id (أي أن قيم العمود sender_id لن تتكرر)، ثم تقوم بجلب أحدث رسالة فقط لكل مُرسِل sender.

كيف يمكنني إعادة التوجيه إلى مسار معين إذا أدخل المستخدم أي شيء في عنوان، أي مسار غير موجود، مثلاً: المسار الصحيح هو: http://localhost/admin/approve و أدخل المستخدم العنوان التالي: http://localhost/admin/approvedfdgghk يأتيني الخطأ التالي: NotFoundHttpException in RouteCollection.php line 119: أريد في هذه الحالة إعادة توجيه المُستخدم للصفحة الرئيسية. كيف يمكن ذلك.

في الملف Handler الموجود في المسار: App\Exceptions\Handler قم بإضافة التالي للتابع render: if ($exception instanceof NotFoundHttpException) { return redirect('/'); } ليُصبح التابع بالشكل التالي: public function render($request, Exception $exception) { if ($exception instanceof NotFoundHttpException) { return redirect('/'); } return parent::render($request, $exception); } و لا تنسى تضمين الصنف NotFoundHttpException في الأعلى: use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;

إذا كنت تحاول إدراج قيم فارغة في قاعدة البيانات ، فعليك جعل الخانات تقبل ذلك: <?php Schema::create('accounts', function (Blueprint $table) { $table->bigIncrements('id'); $table->string('email'); $table->text('access_token')->nullable(); $table->timestamp('deleted_at')->nullable(); $table->timestamps(); }); في الواقع ، يجب أن تحصل على أخطاء عند إجراء الاختبار .إذا لم تكن الخانات nullable بهذا الشكل: Illuminate\Database\QueryException: SQLSTATE[23000]: Integrity constraint violation: 19 NOT NULL constraint failed: وحتى تحصل على الخطأ جرب عمل التالي: <?php namespace Tests\Feature; use Tests\TestCase; use App\Models\Account; use Illuminate\Foundation\Testing\RefreshDatabase; class TestingTest extends TestCase { use RefreshDatabase; protected function setUp(): void { parent::setUp(); Account::factory()->count(50)->create(); } /** @test */ public function check_for_collection_test() { dd(Account::all()); // returns Illuminate\Database\Eloquent\Collection; } } إذا لم تكن الخانات nullable سيفشل الإختبار و يُعطي الخطأ أعلاه، أما إذا جعلت الخانات nullable سينجح الإختبار.

لكي تقوم بإعادة توجيه المستخدم عند حدوث خطأ ما يجب أن تقوم بعمل بعض التعديلات على التابع render في الملف app\Exceptions\Handler.php كالتالي: public function render($request, Exception $exception) { if ($this->isHttpException($exception)) { switch (intval($exception->getStatusCode())) { // not found case 404: // اسم المسار الذي سيتم إعادة التوجيه إليه return redirect()->route('home'); break; default: return $this->renderHttpException($exception); break; } } else { return parent::render($request, $exception); } } } في الكود السابق سيتم إعادة توجيه المستخدم إلى المسار home إن حدث خطأ 404، أما في الحالات العادية (عدم حدوث خطأ) فسيعمل كل شيء على ما يرام. بالتوفيق، تحياتي.

يتم ترتيب الرسائل من الاحدث الى الاقدم فى القائمة المنسدلة - المشكلة فى عرض احدث رسالة للعضو فى عناصر القائمة - استخدام date يعطى نفس النتائج

بما أنك تنوي كتابة شيفرة منطقية كبيرة نوعا ما فيستحسن اخراجها وجمعها في دالة ثم يتم استدعاء الدالة عندما يحدث الحدث onClick. داءما في react يجب فصل الشيفرة المنطقية عن jsx قدر الامكان import React from 'react'; export default function App() { const function1 = () => { console.log('function2'); }; const function2 = () => { console.log('function2'); }; const handleClick = () => { function1(); function2(); }; return ( <div> <button onClick={handleClick}>click me</button> </div> ); }

ما تطلبه غير ممكن في React ﻷن ما يجب تمريره للـonClick ليس كود جافاسكريبت كـstring وإنما function object. بالطبع لا يشترط تعريف دالة منفصلة، يمكنك فعل اﻵتي: <button onClick={() => {function1(); function2();}}>click me</button> نعم يمكنك تمرير arrow function إلى onClick بسهولة واستدعاء التابعين الذين تريدهما. هذا ينطبق على كل الخصائص التي تتوقع تابعاً مثل onChange وغيرها من اﻷحداث.

بعكس ما يظنه البعض نعم تخزين token في localStorage غير آمن حتى وإن كنت تستخدم ReactJS، إذاً أين أخزنها ﻷن السيرفر يحتاجها؟ قل لجماعة السيرفر أن يخزنوها بالـCookies وليجعلوها Http-Only أي لا يمكن قراءتها من الجافاسكريبت ولينسوا ذاك Authorization Header ﻷنه يجبر مبرمج frontend على استخدام طرق غير آمنة لتخزين token. وﻷن Cookie لا يمكن قراءتها بالجافاسكريبت لذلك خزن في localStorage عند تسجيل الدخول الناجح متحول بولياني وضعه على true، هذا فقط من أجل واجهة المستخدم حتى لا يضطر المستخدم لتسجيل الدخول مع كل request وليس للأمان واﻷمان يتحقق منه السيرفر من خلال التحقق من Cookies المرسلة مع request. لا تقلق بشأن الـAJAX requests التي تقوم بها ﻷن Cookies ترسل بشكل تلقائي مع request ولا داعي ﻷن تقوم بذلك بنفسك إلا إذا كنت ترسل cross-domain request حينها كل ما عليك هو تمرير withCredentials: true ضمن request config لمكتبة axios مثال: axios.get('https://domaindifferentfromours.com', { withCredentials: true }); بالطبع ما قلته هو الحل المثالي ولكن الواقع قد يفرض عليك تخزين JWT Token ضمن localStorage وهذا هو الحال عند استخدام third-party API مثلاً حيث لا يمكنك التحكم بالسيرفر.

وعليكم السلام ورحمة الله تعالى، عند إكمالك لعدد كبير من المشاريع في مستقل فأنت بذلك تكتسب خبرة وتكتسب معرض أعمال أقوى، وبما أنك تملك معرض أعمال جيد فأنت بذلك مؤهل أكثر لاستلام مشاريع بشكل أكبر. كما أنك عند إكمال 50 مشروع فإن أصحاب العمل سوف يرغبون بالعمل معك بشكل أكبر وهذا ﻷنك استطعت التعامل مع 50 مشروع من قبل وجميعها ناجحة. وأكثر أصحاب العمل يفضلون أصحاب الخبرات في التعامل وفي العمل أيضًا. لهذا وعند تقديمك على أكثر المشاريع سوف تكون من نصيبك بسبب هذا العدد من المشاريع ومعرض الأعمال المتميز. وبهذا الشكل لن تنقطع عن العمل وسوف يكون لك عمل في مستقل بشكل مستمر. أتمنى لك التوفيق.