بداية سريعة

مرحبًا بك في وثائق React! ستقدم لك هذه الصفحة مقدمة عن 80% من مفاهيم React التي ستستخدمها يوميًا.

إنشاء وتداخل المكونات

تتكون تطبيقات React منمكونات. المكون هو جزء من واجهة المستخدم (UI) له منطقه الخاص ومظهره الخاص. يمكن أن يكون المكون صغيرًا مثل زر، أو كبيرًا مثل صفحة كاملة.

مكونات React هي دوال JavaScript تُرجع ترميزًا:

الآن بعد أن أعلنتMyButton، يمكنك تداخله داخل مكون آخر:

لاحظ أن<MyButton />يبدأ بحرف كبير. هكذا تعرف أنه مكون React. يجب أن تبدأ أسماء مكونات React دائمًا بحرف كبير، بينما يجب أن تكون وسوم HTML بأحرف صغيرة.

ألق نظرة على النتيجة:

تحدد الكلمات المفتاحيةexport defaultالمكون الرئيسي في الملف. إذا كنت غير ملم بجزء من تركيب JavaScript، فإنMDN و javascript.infoيحتويان على مراجع رائعة.

كتابة الترميز باستخدام JSX

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

JSX أكثر صرامة من HTML. يجب عليك إغلاق الوسوم مثل<br />. كما لا يمكن لمكونك إرجاع وسوم JSX متعددة. يجب عليك لفها داخل عنصر أب مشترك، مثل<div>...</div>أو غلاف فارغ مثل<>...</>:

إذا كان لديك الكثير من HTML لتحويله إلى JSX، يمكنك استخداممحول عبر الإنترنت.

إضافة الأنماط

في React، تحدد فئة CSS باستخدامclassName. تعمل بنفس طريقة سمةclassفي HTML:

ثم تكتب قواعد CSS الخاصة بها في ملف CSS منفصل:

لا تفرض React كيفية إضافة ملفات CSS. في أبسط الحالات، ستضيف وسم<link>إلى HTML الخاص بك. إذا كنت تستخدم أداة بناء أو إطار عمل، استشر وثائقه لمعرفة كيفية إضافة ملف CSS إلى مشروعك.

عرض البيانات

يسمح لك JSX بوضع الترميز داخل JavaScript. تتيح لك الأقواس المعقوفة "الخروج مرة أخرى" إلى JavaScript بحيث يمكنك تضمين بعض المتغيرات من الكود الخاص بك وعرضها للمستخدم. على سبيل المثال، سيعرض هذاuser.name:

يمكنك أيضًا "الخروج إلى JavaScript" من سمات JSX، لكن يجب عليك استخدام الأقواس المعقوفةبدلاً منعلامات الاقتباس. على سبيل المثال،className="avatar"تمرر السلسلة"avatar"كفئة CSS، لكنsrc={user.imageUrl}تقرأ قيمة متغير JavaScriptuser.imageUrl، ثم تمرر تلك القيمة كسمةsrc:

يمكنك أيضًا وضع تعبيرات أكثر تعقيدًا داخل الأقواس المعقوفة لـ JSX، على سبيل المثال،دمج النصوص:

في المثال أعلاه،style={{}}ليس بناءً نحويًا خاصًا، بل هو كائن{}عادي داخل الأقواس المعقوفة لـ JSXstyle={ }. يمكنك استخدام السمةstyleعندما تعتمد أنماطك على متغيرات JavaScript.

التصيير الشرطي

في React، لا يوجد بناء نحوي خاص لكتابة الشروط. بدلاً من ذلك، ستستخدم نفس التقنيات التي تستخدمها عند كتابة كود JavaScript العادي. على سبيل المثال، يمكنك استخدام عبارةifلتضمين JSX بشكل شرطي:

إذا كنت تفضل كودًا أكثر إيجازًا، يمكنك استخدامالعامل الشرطي ?.على عكسif، فهو يعمل داخل JSX:

عندما لا تحتاج إلى الفرعelse، يمكنك أيضًا استخدام بناء&& المنطقي الأقصر:

تعمل كل هذه الأساليب أيضًا لتحديد السمات بشكل شرطي. إذا كنت غير مألوف مع بعض بناء جملة JavaScript هذا، يمكنك البدء باستخدامif...elseدائمًا.

تصيير القوائم

ستعتمد على ميزات JavaScript مثلحلقة for و دالة map() للمصفوفةلتصيير قوائم المكونات.

على سبيل المثال، لنفترض أن لديك مصفوفة من المنتجات:

داخل مكونك، استخدم دالةmap()لتحويل مصفوفة المنتجات إلى مصفوفة من عناصر<li>:

لاحظ كيف أن لعنصر<li>سمةkey. لكل عنصر في قائمة، يجب أن تمرر سلسلة نصية أو رقمًا يحدد هذا العنصر بشكل فريد بين أشقائه. عادةً، يجب أن يأتي المفتاح من بياناتك، مثل معرف قاعدة البيانات. يستخدم React مفاتيحك لمعرفة ما حدث إذا قمت لاحقًا بإدراج أو حذف أو إعادة ترتيب العناصر.

الاستجابة للأحداث

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

لاحظ كيف أنonClick={handleClick}لا يحتوي على أقواس في النهاية! لاتستدعدالة معالج الحدث: تحتاج فقط إلىتمريرها. سيقوم React باستدعاء معالج الحدث الخاص بك عندما ينقر المستخدم على الزر.

تحديث الشاشة

غالبًا، سترغب في أن "يتذكر" مكونك بعض المعلومات ويعرضها. على سبيل المثال، ربما تريد عد عدد مرات النقر على زر. للقيام بذلك، أضفالحالةإلى مكونك.

أولاً، استوردuseStateمن React:

يمكنك الآن تعريفمتغير حالةداخل مكونك:

ستحصل على شيئين منuseState: الحالة الحالية (count)، والدالة التي تتيح لك تحديثها (setCount). يمكنك إعطاؤهما أي أسماء، لكن العُرف هو كتابة[something, setSomething].

في المرة الأولى التي يُعرض فيها الزر، ستكون قيمةcount هي 0لأنك مررت0إلىuseState(). عندما تريد تغيير الحالة، استدعِsetCount()ومرر القيمة الجديدة إليها. سيؤدي النقر على هذا الزر إلى زيادة العداد:

سيستدعي React دالة المكون الخاصة بك مرة أخرى. هذه المرة، ستكون قيمةcount هي 1. ثم ستكون2. وهكذا.

إذا عرضت نفس المكون عدة مرات، سيحصل كل منها على حالته الخاصة. انقر على كل زر على حدة:

لاحظ كيف "يتذكر" كل زر حالته الخاصةcountولا يؤثر على الأزرار الأخرى.

استخدام الخطافات (Hooks)

تُسمى الدوال التي تبدأ بـuse الخطافات (Hooks).useStateهو خطاف مدمج توفره React. يمكنك العثور على خطافات مدمجة أخرى فيمرجع API.يمكنك أيضًا كتابة خطافاتك الخاصة من خلال دمج الخطافات الموجودة.

الخطافات أكثر تقييدًا من الدوال الأخرى. يمكنك استدعاء الخطافات فقطفي الجزء العلويمن مكوناتك (أو خطافات أخرى). إذا كنت تريد استخدامuseStateفي شرط أو حلقة، استخرج مكونًا جديدًا وضعه هناك.

مشاركة البيانات بين المكونات

في المثال السابق، كان لكلMyButtonحالته الخاصة المستقلةcount، وعند النقر على كل زر، تغيرت فقط قيمةcountللزر الذي تم النقر عليه:

في البداية، كانت حالةMyButtonلكلcount هي 0

يقوم أولMyButtonبتحديثcountالخاص به إلى1

ومع ذلك، غالبًا ما ستحتاج إلى أنتشارك المكونات البيانات وتتحديث دائمًا معًا.

لجعل كلا مكونيMyButtonيعرضان نفس قيمةcountويتحدّثان معًا، تحتاج إلى نقل الحالة من الأزرار الفردية "لأعلى" إلى أقرب مكون يحتوي عليها جميعًا.

في هذا المثال، هوMyApp:

في البداية، حالةMyAppالخاصة بـcount هي 0ويتم تمريرها إلى كلا المكونين الفرعيين

عند النقر، يقومMyAppبتحديث حالةcountالخاصة به إلى1ويمررها إلى كلا المكونين الفرعيين

الآن عندما تنقر على أي زر، ستتغير قيمةcountفيMyApp، مما سيغير كلا القيمتين فيMyButton. إليك كيف يمكنك التعبير عن هذا في الكود.

أولاً،انقل الحالة لأعلىمنMyButtonإلىMyApp:

ثم،مرر الحالة للأسفلمنMyAppإلى كلMyButton، معًا مع معالج النقر المشترك. يمكنك تمرير المعلومات إلىMyButtonباستخدام الأقواس المعقوفة في JSX، تمامًا كما فعلت سابقًا مع الوسوم المدمجة مثل<img>:

المعلومات التي تمررها للأسفل بهذه الطريقة تسمىالخصائص (props). الآن يحتوي مكونMyAppعلى حالةcountومعالج الحدثhandleClick، ويمرر كليهما للأسفل كخصائصإلى كل زر.

أخيرًا، غيّرMyButtonليتمكن منقراءةالخصائص التي مررتها إليه من المكون الأب:

عندما تنقر على الزر، يتم تشغيل معالجonClick. تم تعيين خاصيةonClickلكل زر إلى دالةhandleClick داخل MyApp، لذا يتم تنفيذ الكود الموجود داخلها. يستدعي هذا الكودsetCount(count + 1)، مما يزيد قيمة متغير الحالةcount. يتم تمرير قيمةcountالجديدة كخاصية إلى كل زر، لذا تظهر جميعها القيمة الجديدة. هذا ما يسمى "رفع الحالة لأعلى". بنقل الحالة لأعلى، قمت بمشاركتها بين المكونات.

الخطوات التالية

حتى الآن، أنت تعرف أساسيات كيفية كتابة كود React!

اطلع علىالبرنامج التعليميلتطبيقها وبناء أول تطبيق صغير لك باستخدام React.