المراجعة الحالية بتاريخ 11:17، 31 أكتوبر 2020

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

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

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

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

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

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

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

هذا هو أول فصل في الدليل "خطوة بخطوة نحو تعلم مفاهيم React الأساسية". يمكنك أن تجد قائمة بجميع فصوله في التصنيف "React Main Concepts" أو في الصفحة الرئيسية.

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

أبسط طريقة للبداية مع React هي تجربة مثال "أهلًا بالعالم" (Hello World) على موقع CodePen. لن تحتاج إلى تثبيت أي شيء، فبإمكانك فتحه في نافذة أخرى والمتابعة معنا من خلال الأمثلة. إن كنت تُفضِّل استخدام بيئة تطوير محليّة فانتقل إلى قسم تثبيت React.

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

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

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

دعنا نبدأ!

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

انظر أيضًا

مصادر

صفحة مثال أهلًا بالعالم في توثيق React الرسمي.

@@ سطر 5: / سطر 5: @@
    document.getElementById('root')
 );
-</syntaxhighlight>يعرض هذا المثال ترويسةً تقول <code>"أهلًا بالعالم!"</code> في الصّفحة.
+</syntaxhighlight>يعرض هذا المثال ترويسةً تقول <code>"أهلًا بالعالم!"</code> في الصّفحة. جرب هذا المثال على [https://reactjs.org/redirect-to-codepen/hello-world CodePen].
+اضغط على الرابط في الأعلى لفتح محرِّر عبر CodePen يحوي المثال السابق. خذ راحتك وعدل هذا المثال كما يحلو لك وراقب كيف تؤثر تعديلاتك على المخرجات. أغلب الصفحات في هذا الدليل ستحوي على أمثلة قابلة للتعديل مثل هذا المثال.
+== كيف تقرأ هذا الدليل ==
 ستُمهِّد لك الأقسام القادمة تدريجيًّا كيفيّة استخدام React، وسنتعامل مع الكتل التي يتكوّن منها تطبيق React وهي العناصر (elements) والمُكوِّنات (Components). حالما تتقنها سيصبح بمقدورك إنشاء تطبيقات مُعقَّدة من قطع صغيرة قابلة لإعادة الاستخدام.
-== المتابعة معنا ==
+'''ملاحظة''': هذا الدليل صمِّم من أجل الأشخاص الذين يفضلون تعلم المفاهيم النظرية خطوةً بخطوة. إن كنت تفضل التعلم بالممارسة، انتقل إلى [[React/tutorial|الدليل التطبيقي]]. ستجد أنَّ هذا الدليل والدليل التطبيقي يكمِّل أحدهما الأخر.
+هذا هو أول فصل في الدليل "خطوة بخطوة نحو تعلم مفاهيم React الأساسية". يمكنك أن تجد قائمة بجميع فصوله في التصنيف "[[:تصنيف:React Main Concepts|React Main Concepts]]" أو في [[React#.D8.A7.D9.84.D9.85.D9.81.D8.A7.D9.87.D9.8A.D9.85 .D8.A7.D9.84.D8.A3.D8.B3.D8.A7.D8.B3.D9.8A.D8.A9|الصفحة الرئيسية]].
+كل فصل في هذا الدليل، يبني على المعرفة التي تعلمتها في الفصل السابق. ستتعلم في هذا الدليل أغلب مواضيع React إن قرأت فصوله بالترتيب الذي وضعناه لك. على سبيل المثال، الفصل التالي بعد هذا الفصل هو "[[React/introducing jsx|مقدمة إلى JSX]]".
 أبسط طريقة للبداية مع React هي تجربة [https://reactjs.org/redirect-to-codepen/hello-world مثال "أهلًا بالعالم" (Hello World) على موقع CodePen]. لن تحتاج إلى تثبيت أي شيء، فبإمكانك فتحه في نافذة أخرى والمتابعة معنا من خلال الأمثلة. إن كنت تُفضِّل استخدام بيئة تطوير محليّة فانتقل إلى [[React/try react|قسم تثبيت React]].
 == درجة المعرفة المفترضة ==
-بما أنّ React هي مكتبة JavaScript فسنفترض أنّك تملك معرفة أساسيّة بلغة JavaScript. إن لم تكن واثقًا من إمكانياتك فننصحك بأن تذهب إلى [https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript درس JavaScript] للتحقّق من مستواك والتمكّن من متابعة هذا الشّرح بدون أن تتشتّت. سيستغرق منك حوالي نصف ساعة إلى ساعة، ولكنّك بعد المرور عليه لن تشعر بأنّك تتعلّم React و JavaScript معًا.
+بما أنّ React هي مكتبة [[JavaScript]] فسنفترض أنّك تملك معرفة أساسيّة بلغة [[JavaScript]]. إن لم تكن واثقًا من إمكانياتك فننصحك بأن تذهب إلى [https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript درس JavaScript] للتحقّق من مستواك والتمكّن من متابعة هذا الشّرح بدون أن تتشتّت. سيستغرق منك حوالي نصف ساعة إلى ساعة، ولكنّك بعد المرور عليه لن تشعر بأنّك تتعلّم React و [[JavaScript]] معًا.
+يعتمد هذا التوثيق أيضًا على بعض من صياغة [[JavaScript]] الجديدة في الأمثلة، فإن لم تكن قد تعاملت مع [[JavaScript]] في السنوات القليلة الماضية، بإمكانك الرجوع إلى [[JavaScript|توثيق JavaScript في موسوعة حسوب]] في أي وقت.
-يعتمد هذا التوثيق أيضًا على بعض من صياغة JavaScript الجديدة في الأمثلة، فإن لم تكن قد تعاملت مع JavaScript في السنوات القليلة الماضية فيُمكنِك الاكتفاء بالنقاط الثلاث التالية:
+= دعنا نبدأ! =
-* نُعرِّف المتغيّرات باستخدام التصريحات <code>[[JavaScript/let|let]]</code> و <code>[[JavaScript/const|const]]</code>، ولغرض هذا التوثيق اعتبرها مُكافئة للتصريح <code>[[JavaScript/var|var]]</code>.
+ستجد في كل فصل رابطًا يشير إلى [[React/introducing jsx|الفصل التالي]] من هذا الدليل. ستجد في قسم "انظر أيضًا" روابط جميع فصول هذا الدليل لتسهيل التنقل بينها.
-* نستخدم الكلمة المفتاحيّة <code>class</code> لتعريف [[JavaScript/class|أصناف JavaScript]]. أهم شيئين يجب تذكرهما حول الأصناف في هذه اللغة هي أنّها على عكس الكائنات لا تحتاج إلى وضع فواصل بين تعريفات توابع الصنف، وأنّها بخلاف اللغات الأخرى تعتمد قيمة <code>this</code> في التّابع على طريقة استدعائه.
-* نستخدم أحيانًا ‎<code>=>‎</code> لتعريف [[JavaScript/Arrow Functions|الدوال السّهمية (arrow functions)]]، وهي تشابه الدوال المعتادة ولكنّها مختصرة أكثر، فمثلًا يُكافِئ ‎<code>x => x * 2</code>‎ الدالة <code>‎function(x) { return x * 2; }</code>‎. لا تمتلك الدوال السّهمية قيمة <code>this</code> خاصّة بها، لذلك تكون مفيدة عندما نرغب في الحفاظ على قيمة <code>this</code> من تعريف تابع خارجي.
-لا تقلق إن كانت هذه المعلومات كثيرةً عليك، بإمكانك الرجوع إلى [[JavaScript|توثيق JavaScript في موسوعة حسوب]] في أي وقت.
-إن كنت غير متأكد أيضًا من معنى بعض صياغات JavaScript الجديدة فبإمكانك استخدام Babel للتحقّق من الصياغة القديمة المُكافِئة لها.
+== انظر أيضًا ==
+* [[React/introducing jsx|مقدمة إلى JSX]]
+* [[React/rendering elements|تصيير العناصر]]
+* [[React/components and props|المكونات والخاصيات]]
+* [[React/state and lifecycle|حالة ودورة حياة المكونات]]
+* [[React/handling events|معالجة الأحداث في React]]
+* [[React/conditional rendering|التصيير الشرطي]]
+* [[React/lists and keys|القوائم والمفاتيح]]
+* [[React/forms|الحقول]]
+* [[React/lifting state up|رفع الحالات المشتركة للمستوى الأعلى]]
+* [[React/composition vs inheritance|الفرق بين التركيب والوراثة في React]]
+* [[React/thinking in react|أسلوب التفكير في React]]
 == مصادر ==
 * [https://reactjs.org/docs/hello-world.html صفحة مثال أهلًا بالعالم في توثيق React الرسمي].
 [[تصنيف:React]]
+[[تصنيف:React Main Concepts]]

الفرق بين المراجعتين ل"React/hello world"