مثال «أهلًا بالعالم»

يبدو أصغر مثال في React كما يلي:

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>أهلًا بالعالم!</h1>);

يعرض هذا المثال ترويسةً تقول “أهلًا بالعالم!” في الصّفحة.

Try it on CodePen

اضغط الرابط أعلاه لفتح مُحرِّر فوري “online”. لا تتردد وقم بالتعديل هذا المثال كما يحلو لك وراقب كيف تؤثر تعديلاتك على المُخرجات. أغلب الصفحات في هذا الدليل ستحتوي على أمثلة قابلة للتعديل مثل هذا المثال.`

كيف تقرأ هذا الدليل

ستُمهِّد لك الأقسام القادمة تدريجيًّا كيفيّة استخدام React، وسنتعامل مع الكتل التي يتكوّن منها تطبيق React وهي العناصر (elements) والمُكوِّنات (Components). حالما تتقنها سيصبح بمقدورك إنشاء تطبيقات مُعقَّدة من قطع صغيرة قابلة لإعادة الاستخدام.

ملاحظة

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

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

كل فصل في هذا الدليل، يبني على المعرفة التي تعلمتها في الفصل السابق. يمكنك معرفة معظم React من خلال قراءة “المفاهيم الرئيسية” بالترتيب الذي تظهر به في الشريط الجانبي. على سبيل المثال, الفصل التالي بعد هذا الفصل هو “مقدمة إلى JSX”

درجة المعرفة المفترضة

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

ملاحظة

يعتمد هذا الدليل أيضًا على بعض من صياغة JavaScript الجديدة في الأمثلة، فإن لم تكن قد تعاملت مع JavaScript في السنوات القليلة الماضية، هذه النقاط الثلاث ستمهد لك الطريق.

دعنا نبدأ!

ستجد في كل فصل رابطًا يشير إلى الفصل التالي من هذا الدليل. ستجد في قسم “انظر أيضًا” روابط جميع فصول هذا الدليل لتسهيل التنقل بينها.