reactjs#1 From L1 to L120

Author: AhmedBaset

src/content/learn/your-first-component.md

@@ -18,24 +18,24 @@ title: مكوّنك الأول
 
 ## المكونات: حجر بناء واجهة المستخدم {/*components-ui-building-blocks*/}
 
-في الويب، تمكننا HTML من إنشاء وثائق مهيكلة غنية باستخدام مجموعة الوسوم المدمجة مثل `<h1>` و `<li>`:
+في الويب، تمكننا HTML من إنشاء صفحات مبنية بجدارة بالعديد من عناصرها المدمَجة مثل `<h1>` و `<li>`:
 
 ```html
 <article>
   <h1>مكوّني الأول</h1>
   <ol>
     <li>المكوّنات: حجر بناء واجهة المستخدم</li>
     <li>تعريف المكوّن</li>
-    <li>إستخدام المكوّن</li>
+    <li>استخدام المكوّن</li>
   </ol>
 </article>
 ```
 
-يمثل هذا الترميز المرئي هذه المقالة `<article>`, عنوانها `<h1>`, وفهرس محتويات مختصر في شكل قائمة مرتبة `<ol>`. ترميز مرئي كهذا, مدمج مع CSS من أجل الأنماط التصميمية, و JavaScript من أجل التفاعلية, يكمن وراء كل شريط جانبي, صورة رمزية, نافذة, قائمة منسدلة - كل قطعة من واجهة مستخدم تراها في الويب.
+يمثل هذا الترميز هذه المقالة `<article>`، عنوانها `<h1>`، وفهرس محتويات مختصر في شكل قائمة مرتبة `<ol>`. ترميز كهذا, مع بعض CSS للأنماط التصميمية, وJavaScript من أجل التفاعلية، يكمن وراء كل شريط جانبي، أو صورة رمزية، أو نافذة، أو قائمة منسدلة - أو أي قطعة من واجهة مستخدم تراها في الويب.
 
-تمكنك React من دمج الترميز المرئي, وCSS, وJavaScript في "مكونات" مخصصة, **عناصر واجهة المستخدم قابلة لإعادة الاستخدام لتطبيقك**. يمكن تحويل كود فهرس المحتوى الذي رأيته أعلاه إلى مكوّن `<TableOfContents />` الذي يمكن تصييره في كل صفحة. لا يزال يستخدم هذا المكوّن تحت الخطاء وسوم مثل `<article>`, `<h1>`, إلخ.
+تمكنك React من دمج الترميز، وCSS، وJavaScript في "مكونات" مخصصة، **عناصر واجهة المستخدم قابلة لإعادة الاستخدام في تطبيقك**. يمكن تحويل كود فهرس المحتوى الذي رأيته أعلاه إلى مكوّن `<TableOfContents />` الذي يمكن تصييره في كل صفحة. لا يزال يستخدم هذا المكوّن خلف الكواليس وسوم مثل `<article>` ،`<h1>`، إلخ.
 
-تمامًا مثل الوسوم HTML، يمكنك تجميع وترتيب وتضمين المكوّنات لتصميم صفحات كاملة. على سبيل المثال، صفحة المستندات التي تقرأها مصنوعة من مكوّنات React.
+تمامًا مثل عناصر HTML، يمكنك تجميع وترتيب وتضمين المكوّنات لتصميم صفحات كاملة. على سبيل المثال، صفحة المستندات التي تقرأها مصنوعة من مكوّنات React.
 
 ```js
 <PageLayout>
@@ -51,11 +51,11 @@ title: مكوّنك الأول
 </PageLayout>
 ```
 
-مع نمو مشروعك, ستلاحظ انه يمكن تجميع العديد من تصاميمك بواسطة إعادة استخدام مكوّنات كتبتها مسبقا, مما يسرع عملية  التطوير. يمكن إضافة فهرس المحتويات أعلاه إلى أي شاشة عن طريق `<TableOfContents />`! يمكنك أيضا الإنطلاق بسرعة في مشروعك باستخدام آلاف المكوّنات المشتركة من قبل مجتمع React مفتوحة المصدر مثل [Chakra UI](https://chakra-ui.com/) و [Material UI.](https://material-ui.com/).
+مع نمو مشروعك، ستلاحظ أنه يمكن تجميع العديد من تصاميمك بواسطة إعادة استخدام مكوّنات كتبتها مسبقا، مما يسرع عملية التطوير. يمكن إضافة فهرس المحتويات أعلاه إلى أي شاشة عن طريق `<TableOfContents />`! يمكنك أيضا الانطلاق بسرعة في مشروعك باستخدام آلاف المكوّنات التي ينشرها مجتمع React مفتوحة المصدر مثل [Chakra UI](https://chakra-ui.com/) و [Material UI.](https://material-ui.com/).
 
 ## تعريف المكوّن {/*defining-a-component*/}
 
-تقليديًا، عند إنشاء صفحات الويب، يقوم مطورو الويب بترميز المحتوى الخاص بهم ومن ثم يضيفون التفاعل عن طريق إضافة بعض JavaScript. نجح هذا بشكل رائع عندما كان التفاعل مجرد ميزة اضافية جيدة على الويب. الآن يُتوقع وجود التفاعل في العديد من المواقع وجميع التطبيقات. تضع React التفاعلية في المقام الأول مع الاستمرار في استخدام نفس التقنية: **مكوّن React هو دالة JavaScript يمكنك أن تُضف إليها ترميز مرئي.** هنا مثال لذلك (يمكنك تحرير المثال أدناه):
+قديمًا، عند إنشاء صفحات الويب، كان مطورو الويب يقومون بترميز المحتوى الخاص بهم ومن ثم يضيفون التفاعل عن طريق إضافة بعض JavaScript. نجح هذا بشكل رائع عندما كان التفاعل مجرد ميزة إضافية جيدة على الويب. الآن يُتوقع وجود التفاعل في العديد من المواقع وجميع التطبيقات. تضع React التفاعلية في المقام الأول مع الاستمرار في استخدام نفس التقنية: **مكوّن React هو دالة JavaScript يمكنك أن تُضيف إليها ترميز مرئي.** هنا مثال لذلك (يمكنك تحرير المثال أدناه):
 
 <Sandpack>
 
@@ -76,25 +76,25 @@ img { height: 200px; }
 
 </Sandpack>
 
-وهنا كيفية بناء مكوّن::
+وهنا كيفية بناء مكوّن:
 
-### خطوة 1: تصدير المكوّن {/*step-1-export-the-component*/}
+### الخطوة الأولى: تصدير المكوّن {/*step-1-export-the-component*/}
 
-البادئة `export default` هي جزء من [صيغة JavaScript القياسية](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (ليست محددة لـ React). تتيح لك وضع علامة على الدالة الرئيسية في ملف بحيث يمكنك استيرادها لاحقًا من ملفات أخرى. (للمزيد عن الاستيراد، راجع موضوع [استيراد وتصدير المكوّنات](/learn/importing-and-exporting-components)!)
+البادئة `export default` هي جزء من [صيغة JavaScript القياسية](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (ليست خاصة بـ React). تتيح لك وضع علامة على الدالة الرئيسية في ملف بحيث يمكنك استيرادها لاحقًا من ملفات أخرى. (للمزيد عن الاستيراد، راجع موضوع [استيراد وتصدير المكوّنات](/learn/importing-and-exporting-components)!)
 
-### خطوة 2: تعريف الدالة {/*step-2-define-the-function*/}
+### الخطوة الثانية: تعريف الدالة {/*step-2-define-the-function*/}
 
 باستخدام الدالة `Profile() { }` ، تقوم بتعريف دالة JavaScript بإسم "Profile".
 
 <Pitfall>
 
-مكوّنات React هي عبارة عن دوال JavaScript عادية، ولكن يجب أن يبدأ اسماءها بحرف كبير، وإلا فلن تعمل بشكل صحيح!
+مكوّنات React هي عبارة عن دوال JavaScript عادية، ولكن يجب أن تبدأ أسماءها بحرف كبير، وإلا فلن تعمل بشكل صحيح!
 
 </Pitfall>
 
-### الخطوة 3: اضف الترميز المرئي {/*step-3-add-markup*/}
+### الخطوة الثالثة: أضف الترميز المرئي {/*step-3-add-markup*/}
 
-يقوم المكوّن بإرجاع عنصر `<img />` مع خواص `src` و `alt`. يتم كتابة `<img />` بنفس طريقة كتابة HTML، ولكنه في الواقع JavaScript تحت الغطاء! يُطلق على هذه الصيغة [JSX](/learn/writing-markup-with-jsx)، وتتيح لك تضمين ترميز مرئي داخل JavaScript.
+يقوم المكوّن بإرجاع عنصر `<img />` مع خواص `src` و `alt`. يتم كتابة `<img />` بنفس طريقة كتابة HTML، ولكنه في الواقع JavaScript خلف الكواليس! يُطلق على هذه الصيغة [JSX](/learn/writing-markup-with-jsx)، وتتيح لك تضمين ترميز مرئي داخل JavaScript.
 
 يمكن كتابة عبارات الإرجاع في سطر واحد، كما في هذا المكوّن: