الفرق بين المراجعتين ل"React/hello world"
Kinan-mawed (نقاش | مساهمات) (أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:مثال أهلًا بالعالم في React}}</noinclude>') |
Kinan-mawed (نقاش | مساهمات) |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:مثال أهلًا بالعالم في React}}</noinclude> | <noinclude>{{DISPLAYTITLE:مثال أهلًا بالعالم في React}}</noinclude> | ||
| + | يبدو أصغر مثال في React كما يلي:<syntaxhighlight lang="javascript"> | ||
| + | ReactDOM.render( | ||
| + | <h1>أهلًا بالعالم!</h1>, | ||
| + | document.getElementById('root') | ||
| + | ); | ||
| + | </syntaxhighlight>يعرض هذا المثال ترويسةً تقول <code>"أهلًا بالعالم!"</code> في الصّفحة. | ||
| + | |||
| + | ستُمهِّد لك الأقسام القادمة تدريجيًّا كيفيّة استخدام React، وسنتعامل مع الكتل التي يتكوّن منها تطبيق React وهي العناصر (elements) والمُكوِّنات (Components). حالما تتقنها سيصبح بمقدورك إنشاء تطبيقات مُعقَّدة من قطع صغيرة قابلة لإعادة الاستخدام. | ||
| + | |||
| + | == المتابعة معنا == | ||
| + | أبسط طريقة للبداية مع 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 معًا. | ||
| + | |||
| + | يعتمد هذا التوثيق أيضًا على بعض من صياغة JavaScript الجديدة في الأمثلة، فإن لم تكن قد تعاملت مع JavaScript في السنوات القليلة الماضية فيُمكنِك الاكتفاء بالنقاط الثلاث التالية: | ||
| + | * نُعرِّف المتغيّرات باستخدام التصريحات <code>[[JavaScript/let|let]]</code> و <code>[[JavaScript/const|const]]</code>، ولغرض هذا التوثيق اعتبرها مُكافئة للتصريح <code>[[JavaScript/var|var]]</code>. | ||
| + | * نستخدم الكلمة المفتاحيّة <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 للتحقّق من الصياغة القديمة المُكافِئة لها. | ||
| + | |||
| + | == مصادر == | ||
| + | * [https://reactjs.org/docs/hello-world.html صفحة مثال أهلًا بالعالم في توثيق React الرسمي]. | ||
| + | [[تصنيف:React]] | ||
مراجعة 11:52، 11 يوليو 2018
يبدو أصغر مثال في React كما يلي:
ReactDOM.render(
<h1>أهلًا بالعالم!</h1>,
document.getElementById('root')
);
يعرض هذا المثال ترويسةً تقول "أهلًا بالعالم!" في الصّفحة.
ستُمهِّد لك الأقسام القادمة تدريجيًّا كيفيّة استخدام React، وسنتعامل مع الكتل التي يتكوّن منها تطبيق React وهي العناصر (elements) والمُكوِّنات (Components). حالما تتقنها سيصبح بمقدورك إنشاء تطبيقات مُعقَّدة من قطع صغيرة قابلة لإعادة الاستخدام.
المتابعة معنا
أبسط طريقة للبداية مع React هي تجربة مثال "أهلًا بالعالم" (Hello World) على موقع CodePen. لن تحتاج إلى تثبيت أي شيء، فبإمكانك فتحه في نافذة أخرى والمتابعة معنا من خلال الأمثلة. إن كنت تُفضِّل استخدام بيئة تطوير محليّة فانتقل إلى قسم تثبيت React.
درجة المعرفة المفترضة
بما أنّ React هي مكتبة JavaScript فسنفترض أنّك تملك معرفة أساسيّة بلغة JavaScript. إن لم تكن واثقًا من إمكانياتك فننصحك بأن تذهب إلى درس JavaScript للتحقّق من مستواك والتمكّن من متابعة هذا الشّرح بدون أن تتشتّت. سيستغرق منك حوالي نصف ساعة إلى ساعة، ولكنّك بعد المرور عليه لن تشعر بأنّك تتعلّم React و JavaScript معًا.
يعتمد هذا التوثيق أيضًا على بعض من صياغة JavaScript الجديدة في الأمثلة، فإن لم تكن قد تعاملت مع JavaScript في السنوات القليلة الماضية فيُمكنِك الاكتفاء بالنقاط الثلاث التالية:
- نُعرِّف المتغيّرات باستخدام التصريحات
letوconst، ولغرض هذا التوثيق اعتبرها مُكافئة للتصريحvar. - نستخدم الكلمة المفتاحيّة
classلتعريف أصناف JavaScript. أهم شيئين يجب تذكرهما حول الأصناف في هذه اللغة هي أنّها على عكس الكائنات لا تحتاج إلى وضع فواصل بين تعريفات توابع الصنف، وأنّها بخلاف اللغات الأخرى تعتمد قيمةthisفي التّابع على طريقة استدعائه. - نستخدم أحيانًا
=>لتعريف الدوال السّهمية (arrow functions)، وهي تشابه الدوال المعتادة ولكنّها مختصرة أكثر، فمثلًا يُكافِئ x => x * 2 الدالةfunction(x) { return x * 2; }. لا تمتلك الدوال السّهمية قيمةthisخاصّة بها، لذلك تكون مفيدة عندما نرغب في الحفاظ على قيمةthisمن تعريف تابع خارجي.
لا تقلق إن كانت هذه المعلومات كثيرةً عليك، بإمكانك الرجوع إلى توثيق JavaScript في موسوعة حسوب في أي وقت.
إن كنت غير متأكد أيضًا من معنى بعض صياغات JavaScript الجديدة فبإمكانك استخدام Babel للتحقّق من الصياغة القديمة المُكافِئة لها.