نتائج البحث

التطبيق وحيد الصفحة التطبيق وحيد الصفحة (Single-page Application) هو التطبيق الذي يُحمِّل صفحة HTML واحدة وكل ملحقاتها الضرورية (مثل CSS و JavaScript) المطلوبة لكي يعمل التطبيق. لا تتطلّب أيّة تفاعلات مع الصفحة أو الصفحات اللاحقة أي عودة للخادم مرّة أخرى، ممّا يعني عدم إعادة تحميل الصفحة. بالرغم من قدرتك على بناء تطبيق وحيد الصفحة في React فهو ليس أمرًا ضروريًّا. يُمكِن أيضًا استخدام React لتحسين أجزاء صغيرة من الموقع مع الحصول على تفاعليّة أكبر. يُمكِن للشيفرة المكتوبة باستخدام React أن ...

ما هو DOM الافتراضي (Virtual DOM)؟ DOM الافتراضي (أو اختصارًا VDOM) هو مفهوم برمجي نحتفظ فيه بالتمثيل المثالي أو الافتراضي لواجهة المستخدم ضمن الذاكرة مع مزامنته مع DOM الحقيقي عن طريق مكتبة مثل React DOM. تُدعى هذه العمليّة بالمطابقة (reconciliation). تُمكِّن هذه الطريقة واجهة برمجة التطبيق التصريحية في React، حيث تُخبِر React الحالة التي تريد أن تكون بها واجهة المستخدم لديك، فتحرص React على مطابقة DOM مع تلك الحالة. يُجرِّد هذا التعامل مع الخاصيّات، ومعالجة الأحداث، وتحديث DOM اليدوي الذي ...

ماذا يفعل التابع setState؟ يُجدوِل التابع setState()‎ تحديثًا لكائن حالة المكوّن state. عندما تتغير الحالة يستجب المكوّن بإعادة التصيير. ما الفرق بين الحالة state والخاصيّات props؟ الخاصيّات props (اختصارًا للكلمة properties) والحالة state كلاهما عبارة عن كائنات JavaScript مجرّدة. وفي حين أنّ كلاهما يحمل معلومات تؤثر في ناتج التصيير، فهما مختلفان بطريقة واحدة هامة، حيث تُمرَّر الخاصيّات إلى المكوّن (بشكل مماثل لمُعاملات الدالة) بينما تُدار الحالة state ضمن المكوّن (بشكل مشابه للمتغيرات المعرفة بداخل الدالة). هنا تجد مصادر جيدة لقراءة ...

نُفضِّل في معظم الحالات استخدام المُكوّنات المضبوطة من أجل حقول الإدخال، ففي المُكوّنات المضبوطة يتعامل مُكوّن React مع بيانات الحقول. البديل لها هو المُكوّنات غير المضبوطة والتي يتعامل فيها DOM مع بيانات الحقول. لكتابة مُكوّن غير مضبوط بدلًا من كتابة معالج أحداث لكل تحديث للحالة، فبإمكانك استخدام المراجع للحصول على قيم الحقول من DOM. مثلًا تقبل هذه الشيفرة اسمًا واحدًا في المُكوّن غير المضبوط: class NameForm extends React.Component { constructor(props) { super(props); this.handleSubmit ...

إنّ مكوّنات React ومكوّنات الويب مبنية لحل مشاكل مختلفة. حيث تُزوِّدنا مكوّنات الويب بتغليف قوي لمكوّنات قابلة لإعادة الاستخدام، بينما تُزوِّدنا مكوّنات React بمكتبة تصريحات تُبقي DOM على تزامن مع بياناتنا. يكون هذا الهدفان متكاملين، وكمُطوّر لك حرية استخدام React في مكوّنات الويب لديك، أو استخدام مكوّنات الويب في React أو كليهما معًا. معظم من يستخدم React لا يستخدم مكوّنات الويب، ولكن قد ترغب في ذلك خاصة إذا كنت تستخدم مكوّنات لواجهة المستخدم من طرف ثالث والتي تكون مكتوبة باستخدام ...

فلننظر إلى تعريف هذا المتغير: const element = <h1>!أهلًا بالعالم</h1>; إنّ الصّياغة الغريبة السّابقة التي تحتوي على وسم هي ليست سلسلة نصيّة ولا حتى HTML. تُدعى الصّياغة السّابقة JSX وهي عبارة عن امتداد لصياغة JavaScript، نوصي باستخدامها مع React لوصف المظهر الذي ينبغي أن تكون عليه واجهة المستخدم. قد تُذكِّرك JSX بلغات القوالب، ولكنها تمتلك قوة JavaScript الكاملة. تُنتِج JSX عناصر React. سنستعرض إظهار هذه العناصر في DOM في قسم تصيير العناصر (Rendering Elements). سنتحدّث في الفقرات التالية عن أساسيّات JSX ...

تُزوّدنا React بواجهة برمجة تطبيقات (API) صريحة بحيث لا نقلق بشأن التغييرات التي تطرأ في كل تحديث. يجعل هذا من كتابة التطبيقات أمرًا أسهل بكثير، ولكن قد لا يكون من الواضح كثيرًا كيفيّة تطبيق هذا في React. تشرح هذه الصفحة الخيارات التي وضعناها في خوارزمية المقارنة (diffing) بحيث تكون تحديثات المُكوّنات متوقعة وفي نفس الوقت سريعة كفاية لأجل التطبيقات عالية الأداء. البداية عندما تستخدم React في نقطة زمنية محدّدة بإمكانك التفكير في التابع render()‎ كأنّه يُنشِئ شجرة من عناصر React، ...

تُشبه معالجة الأحداث لعناصر React معالجة الأحداث لعناصر DOM، ولكن هنالك فروق تتعلّق بالصياغة: تُسمَّى أحداث React باستخدام حالة الأحرف camelCase (أي عند وجود اسم مؤلف من عدة كلمات نجعل الحرف الأول من الكلمة الأولى بالشكل الصغير أمّا باقي الكلمات نجعل حرفها الأول بالشكل الكبير) بدلًا من استخدام الشكل الصغير للأحرف. نُمرِّر في JSX دالة كمُعالِج للأحداث، بدلًا من سلسلة نصيّة. على سبيل المثال لنأخذ شيفرة HTML التالية: <button onclick="activateLasers()"> تفعيل الليزر </button> تكون الشيفرة السابقة مختلفة قليلًا في React: <button ...

تُشكِّل العناصر أصغر بنية لتطبيقات React. يصف العنصر ما الذي تود رؤيته على الشّاشة: const element = <h1>أهلًا بالعالم</h1>; على عكس عناصر DOM الخاصّة بالمتصفّح، تكون عناصر React عبارة عن كائنات مُجرّدة سهلة الإنشاء، ويعتني React DOM بتحديث DOM لمُطابقة عناصر React. ملاحظة: قد يخلط المرء العناصر مع مفهوم أكثر انتشارًا وهو المُكوِّنات (components)، سنتحدّث عن المُكوِّنات بالتفصيل في القسم الخاص بها. إنّ العناصر هي الشيء الذي تُصنَع منه المُكوِّنات، ومن المُفضَّل أن تقرأ ذلك القسم قبل المتابعة. تصيير العنصر إلى ...

إنّ الكائن React هو نقطة الدخول إلى مكتبة React. إن حمّلت React عن طريق العنصر ‎<script>‎ فستكون هذه الواجهة ذات المستوى الأعلى متوفرة عبر الكائن العام React. وإن استخدمت ES6 مع npm فتستطيع كتابة ‎import React from 'react'‎. إن استخدمت ES5 مع npm فتستطيع كتابة ‎var React = require('react')‎. لمحة عامة المكوّنات تُتيح لك مكوّنات React تقسيم واجهة المستخدم إلى قطع مستقلة قابلة لإعادة الاستخدام والتفكير بكل قطعة لوحدها. يُمكِن تعريف مكوّنات React عن طريق أخذ صنف فرعي من React.Component ...

الاستيراد import ShallowRenderer from 'react-test-renderer/shallow'; // ES6 var ShallowRenderer = require('react-test-renderer/shallow'); // ES5 with npm لمحة عامة عند كتابة وحدات اختبار لمكتبة React يكون التصيير السطحي مفيدًا لك. يُتيح لك التصيير السطحي تصيير مكوّن على عمق مستوى واحد وتوضيح الحقائق حول ما يُعيده تابع التصيير، بدون القلق حول سلوك المكوّنات الأبناء والتي لم تُصيَّر أو ينشأ عنها نسخة. لا يحتاج ذلك إلى DOM. على سبيل المثال إن كان لديك المكوّن التالي: function MyComponent() { return ( <div> ...

لا يفترض هذا الدليل أي معرفة مسبقة بمكتبة React. قبل أن نبدأ بالدليل التطبيقي سنبني لعبة صغيرة خلال هذا الدليل التطبيقي. ربّما قد ترغب بتخطي هذا الدليل لأنّك لا تريد بناء الألعاب، ولكن أعطيها فرصة. إنّ التقنيات التي ستتعلمها في هذا الدليل أساسيّة لبناء أي تطبيق React، وسيعطيك إتقانها فهمًا أعمق لمكتبة React. فائدة: هذا الدليل مُصمَّم للأشخاص الذين يُفضّلون التعلّم بالممارسة. إن كنت تُفضّل تعلّم المفاهيم من البداية فارجع إلى توثيق React من البداية خطوة بخطوة. قد تجد هذا ...

تتيح لغة Kotlin إمكانيّة استهداف لغة JavaScript من خلال تحويل (transpiling) شيفرات Kotlin إلى ما يماثلها في JavaScript ؛ إذ تستهدف بالوقت الحاليّ معيارECMAScript 5.1، ومن المُخطَّط له أيضًا التوافق مع معيار ECMAScript 2015 لاحقًا. عند استخدام لغة Kotlin بهدف كتابة شيفرات JavaScript فستُحوَّل الشيفرات المكتوبة بلغة Kotlin (بعدِّها جزءًا من المشروع والمكتبة القياسيّة في Kotlin) إلى شيفرة JavaScript، ولكنّ هذا لا يشمل أيًّا ممّا يتعلَّق ببيئة JDK أو JVM أو Java أو أيّ من منصّاتها أو مكتباتها المُستخدَمة، ويُستبعَد ...

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

مقدمة JSX بنيةٌ (syntax) مشابهةٌ للغة XML يُمكن تضمينها وتحويلها إلى شيفرة JavaScript صالحة، لكن آلية عملية التحويل تختلف من تطبيق (implementation) إلى آخر. اشتهرت JSX باستخدامها مع مكتبة React، لكنها تملك تطبيقات أخرى غير React. تدعم لغة TypeScript تضمين JSX، وتدقيق الأنواع فيها، وكذا ترجمة JSX إلى JavaScript مباشرةً. ملاحظة حول المصطلحات: نستخدم في هذه الصّفحة كلمة "صِفَة" للإشارة إلى الكلمة الإنجليزيّة "attribute" وكلمة "خاصيّة" للإشارة إلى كلمة "property"، كلاهما يُترجَم إلى كلمة "خاصيّة" ولهما نفس المعنى في معظم ...

مقدمة لا يفرض Laravel عليك استخدام أي معالج JavaScript و CSS، إلّا إنّه يوفّر نقطة انطلاق بسيطة باستخدام Bootstrap و Vue ممّا سيساعد العديد من التطبيقات. بصفة عامّة، يستخدم Laravel أوامر npm لتنصيب حزم الواجهات الأمامية هذه. CSS يوفّر Laravel Mix واجهة برمجية (API) سهلة ومعبّرة لترجمة Sass أو Less، وهي إضافات للغة CSS الأساسية التي تضيف المتغيّرات والمخاليط (mixins) والعديد من الخصائص الأخرى التي تجعل العمل بلغة CSS أكثر متعة. في هذه الصفحة، سنناقش باختصار ترجمة CSS بصفة عامّة ...

الخاصية content في CSS تُستخدَم مع العنصرين الزائفين ‎::before و ‎::after لتوليد محتوى في العنصر. بطاقة الخاصية القيمة الابتدائية normal تُطبَّق على العنصرين الزائفين ‎::before و ‎::after. قابلة للوراثة لا قابلة للحركة لا القيمة المحسوبة ستكون القيمة هي normal دومًا إذا طُبِّقت هذه الخاصية على العناصر العادية. وإذا كانت القيمة normal وطُبِّقَت على العنصرين الزائفين ‎::before و ‎::after فستكون القيمة المحسوبة هي none. إذا استخدمنا روابط URL النسبية فستحوِّل إلى روابط مطلقة. إذا استخدمنا الدالة attr(x)‎ فستحوِّل القيمة إلى سلسلة نصية. ...

يوضح الجدول التالي جميع الخيارات التي يمكن استعمالها مع مترجم TypeScript للتحكم بسير عمله والتعديل على سلوكه أثناء ترجمة الشيفرات. الخيار النوع القيمة الافتراضية الوصف ‎--allowJs‎ ‎boolean‎ ‎false‎ السماح بترجمة ملفّات JavaScript. ‎--allowSyntheticDefaultImports‎ ‎boolean‎ ‎module === "system" ‎ أو أنّ الخيار ‎--esModuleInterop‎ مضبوط وقيمة ‎module‎ ليست ‎es2015‎ أو ‎esnext‎ السماح للاستيرادات الافتراضية من الوحدات التي لا تحتوي على تصديرات افتراضيّة. هذا لا يؤثر على الشيفرة المولَّدة، ويؤثر فقط على آلية التحقق من الأنواع. ‎--allowUnreachableCode‎ ‎boolean‎ ‎false‎ لا تُخبِر عن الأخطاء ...

مقدمة يوفّر Laravel Mix واجهة برمجية (API) واضحة لتعريف خطوات بناء Webpack للتطبيق باستعمال العديد من المعالجات المسبقة (pre-processors) للغتي CSS و Javascript. باستخدام سلسلة بسيطة من استدعاءات التوابع، يمكن تعريف مسار معالجة الأصول (assets) في التطبيق. فمثلًا: mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css'); إن أصبحت مرتبكا و مشوشا حول البدء مع Webpack وترجمة الأصول، فسوف تحب Laravel Mix. لكنك لست مطالبًا باستعمالها لبناء تطبيقك. طبعًا لك حرية اختيار أي مسار لمعالجة الأصول تريده، أو أن لا تستعمل أيًا منها على ...

يغطّي هذا الدليل أنبوب الأصول. ستتعلم بعد قراءة هذا الدليل: ماهيّة أنبوب الأصول وماذا يفعل. كيفيّة تنظيم أصول تطبيقك بشكل صحيح. فوائد أنبوب الأصول. كيفيّة إضافة معالج مسبق (pre-processor) إلى الأنبوب. كيفيّة وضع الأصول مع جوهرة في حزمة. ما هو أنبوب الأصول؟ يوفّر أنبوب الأصول إطارًا لسَلسَلة وتصغير أو ضغط أصول JavaScript و CSS. كما أنه يضيف القدرة على كتابة هذه الأصول بلغات أخرى ومعالجات مسبقة مثل CoffeeScript و Sass و ERB. يسمح للأصول في تطبيقك أن تُدمج تلقائيًّا مع ...