translate remainder of the page

Author: eihabkhan

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

@@ -33,7 +33,7 @@ title: مكوّنك الأول
 
 يمثل هذا الترميز المرئي هذه المقالة `<article>`, عنوانها `<h1>`, وفهرس محتويات مختصر في شكل قائمة مرتبة `<ol>`. ترميز مرئي كهذا, مدمج مع CSS من أجل الأنماط التصميمية, و JavaScript من أجل التفاعلية, يكمن وراء كل شريط جانبي, صورة رمزية, نافذة, قائمة منسدلة - كل قطعة من واجهة مستخدم تراها في الويب.
 
-تمكنك React من دمج الترميز المرئي, وCSS, وJavaScript في "مكونات" مخصصة, **عناصر واجهة المستخدم قابلة لإعادة الاستخدام لتطبيقك**. يمكن تحويل كود فهرس المحتوى الذي رأيته أعلاه الى مكوّن `<TableOfContents />` الذي يمكن تصييره في كل صفحة. لا يزال يستخدم هذا المكوّن تحت الخطاء وسوم مثل `<article>`, `<h1>`, إلخ.
+تمكنك React من دمج الترميز المرئي, وCSS, وJavaScript في "مكونات" مخصصة, **عناصر واجهة المستخدم قابلة لإعادة الاستخدام لتطبيقك**. يمكن تحويل كود فهرس المحتوى الذي رأيته أعلاه إلى مكوّن `<TableOfContents />` الذي يمكن تصييره في كل صفحة. لا يزال يستخدم هذا المكوّن تحت الخطاء وسوم مثل `<article>`, `<h1>`, إلخ.
 
 تمامًا مثل الوسوم HTML، يمكنك تجميع وترتيب وتضمين المكوّنات لتصميم صفحات كاملة. على سبيل المثال، صفحة المستندات التي تقرأها مصنوعة من مكوّنات React.
 
@@ -51,7 +51,7 @@ 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*/}
 
@@ -159,8 +159,6 @@ img { margin: 0 10px 10px 0; height: 90px; }
 * `<section>` هو بحروف صغيرة، لذا تعرف React أننا نشير إلى وسم HTML.
 * `<Profile />` يبدأ بحرف `P` كبير, لذا تعرف React أننا نريد استخدام مكوّننا الذي إسمه `Profile`.
 
-And `Profile` contains even more HTML: `<img />`. In the end, this is what the browser sees:
-
 ومكوّن `Profile` يحتوي على المزيد من HTML:`<img />`. في النهاية, هذا ما يراه المتصفح:
 
 ```html
@@ -174,73 +172,73 @@ And `Profile` contains even more HTML: `<img />`. In the end, this is what the b
 
 ### تضمين وتنظيم المكوّنات {/*nesting-and-organizing-components*/}
 
-Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components)
+المكوّنات هي دوال JavaScript عادية، لذا يمكنك الاحتفاظ بعدة مكوّنات في نفس الملف. هذا مناسب عندما تكون المكوّنات صغيرة نسبيًا أو تتعلق بشكل وثيق ببعضها البعض. إذا أصبح الملف مكتظًا، يمكنك دائمًا نقل المكوّن `Profile` إلى ملف منفصل. ستتعلم كيفية فعل ذلك قريبًا في [الصفحة التي تتحدث عن الاستيرادات.](/learn/importing-and-exporting-components).
 
-Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.
+نظرًا لأن مكوّنات `Profile` يتم تصييرها داخل مكوّن `Gallery` - وحتى لعدة مرات! - يمكننا القول بأن مكون `Gallery` هو **المكوّن الأب**، الذي يقوم بتصيير كل مكوّن `Profile` كـ "ابن" . هذا جزء من سحر React: يمكنك تعريف مكوّن مرة واحدة، ثم استخدامه في العديد من الأماكن وفي العديد من الأحيان كما تريد.
 
 <Pitfall>
 
-Components can render other components, but **you must never nest their definitions:**
+يمكن للمكوّنات عرض مكوّنات أخرى، ولكن **يجب ألا تقوم أبدا بتضمين تعريفها داخل بعضها البعض**.
 
 ```js {2-5}
 export default function Gallery() {
-  // 🔴 Never define a component inside another component!
+  // 🔴 لا تقم أبدا بتعريف مكوّن داخل مكوّن اخر
   function Profile() {
     // ...
   }
   // ...
 }
 ```
 
-The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level:
+الكود السابق [بطيء جدًا ويسبب أخطاء.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) بدلاً من ذلك، قم بتعريف كل مكوّن على المستوى الأعلى
 
 ```js {5-8}
 export default function Gallery() {
   // ...
 }
 
-// ✅ Declare components at the top level
+// ✅ قم بتعريف المكوّنات على المستوى الأعلى
 function Profile() {
   // ...
 }
 ```
 
-When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions.
+عندما يحتاج المكوّن الابن إلى الحصول على بعض البيانات من المكوّن الأب، يتم [تمريرها كخواص](/learn/passing-props-to-a-component) بدلاً من تضمين تعريفاتها.
 
 </Pitfall>
 
 <DeepDive>
 
-#### Components all the way down {/*components-all-the-way-down*/}
+#### مكوّنات على طول الطريق {/*components-all-the-way-down*/}
 
-Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or [Create React App](https://create-react-app.dev/), the root component is defined in `src/App.js`. If you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
+يبدأ تطبيق React الخاص بك في مكوّن "الجذر". عادةً ما يتم إنشاؤه تلقائيًا عند بدء مشروع جديد. على سبيل المثال، إذا كنت تستخدم [CodeSandbox](https://codesandbox.io/) أو [Create React App](https://create-react-app.dev/)، يتم تعريف مكون الجذر في `src/App.js`. إذا كنت تستخدم إطار العمل [Next.js](https://nextjs.org/)، يتم تعريف مكون الجذر في `pages/index.js`. في هذه الأمثلة، كنت تقوم بتصدير مكونات الجذر.
 
-Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.
+معظم تطبيقات React تستخدم مكوّنات على طول الطريق. وهذا يعني أنك لن تستخدم المكونات فقط للأجزاء القابلة لإعادة الاستخدام مثل الأزرار، ولكن أيضًا للأجزاء الأكبر مثل الأشرطة الجانبية، والقوائم، وفي النهاية، الصفحات الكاملة! المكوّنات هي وسيلة مفيدة لتنظيم كود واجهة المستخدم والترميز المرئي، حتى لو كان بعضها لا يستخدم سوى مرة واحدة.
 
-[React-based frameworks](/learn/start-a-new-react-project) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.
+[أطر العمل المبنية على React](/learn/start-a-new-react-project) تأخذ خطوة إضافية. بحيث بدلاً من استخدام ملف HTML فارغ والسماح لـ React بـ "الاستيلاء" على إدارة الصفحة بواسطة JavaScript، فإنها *أيضًا* تقوم بتوليد كود الـ HTML تلقائيًا من مكوّنات React الخاصة بك. هذا يسمح لتطبيقك بعرض بعض المحتوى قبل تحميل كود JavaScript.
 
-Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need.
+ومع ذلك، لا تزال هناك العديد من المواقع التي تستخدم React فقط [لإضافة التفاعلية إلى صفحات HTML الموجودة مسبقا.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) فلديها العديد من المكوّنات الجذرية بدلاً من وجود مكوّن جذر واحد للصفحة بأكملها. يمكنك استخدام React بالمقدار الذي تحتاج إليه.
 
 </DeepDive>
 
 <Recap>
 
-You've just gotten your first taste of React! Let's recap some key points.
+لقد حصلت للتو على لمحة أولى عن React! دعنا نلخص بعض النقاط الرئيسية.
 
-* React lets you create components, **reusable UI elements for your app.**
-* In a React app, every piece of UI is a component.
-* React components are regular JavaScript functions except:
+* تمكنك React من إنشاء مكوّنات, **عناصر واجهة المستخدم قابلة لإعادة الاستخدام لتطبيقك**
+* في تطبيق React, كل قطعة من واجهة المستخدم تمثل مكوّن
+* مكوّنات React هي عبارة عن دوال JavaScript عادية ما عدا أن:
 
-  1. Their names always begin with a capital letter.
-  2. They return JSX markup.
+  1. إسمهم يبدأ دائما بحرف كبير.
+  2. تقوم بإرجاع ترميز مرئي JSX
 
 </Recap>
 
 <Challenges>
 
-#### Export the component {/*export-the-component*/}
+#### قم بتصدير المكوّن {/*export-the-component*/}
 
-This sandbox doesn't work because the root component is not exported:
+هذا الكود لا يعمل لأن المكوّن الجذري لم يتم تصديره
 
 <Sandpack>
 
@@ -249,7 +247,7 @@ function Profile() {
   return (
     <img
       src="https://i.imgur.com/lICfvbD.jpg"
-      alt="Aklilu Lemma"
+      alt="أكليلو ليما"
     />
   );
 }
@@ -261,11 +259,11 @@ img { height: 181px; }
 
 </Sandpack>
 
-Try to fix it yourself before looking at the solution!
+حاول إصلاحه بنفسك قبل أن تلقي نظرة على الحل!
 
 <Solution>
 
-Add `export default` before the function definition like so:
+قم بإضافة `export default` قبل تعريف الدالة بهذا الشكل:
 
 <Sandpack>
 
@@ -274,7 +272,8 @@ export default function Profile() {
   return (
     <img
       src="https://i.imgur.com/lICfvbD.jpg"
-      alt="Aklilu Lemma"
+      alt="أكليلو ليما"
+
     />
   );
 }
@@ -286,17 +285,17 @@ img { height: 181px; }
 
 </Sandpack>
 
-You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components)
+قد تتساءل لماذا كتابة `export` بمفردها ليس كافيًا لإصلاح هذا المثال. يمكنك معرفة الفرق بين `export` و `export default` في قسم [استيراد وتصدير المكوّنات.](/learn/importing-and-exporting-components)
 
 </Solution>
 
-#### Fix the return statement {/*fix-the-return-statement*/}
+#### قم بإصلاح جملة return {/*fix-the-return-statement*/}
 
-Something isn't right about this `return` statement. Can you fix it?
+هناك شي غير صحيح في جملة`return` هذه. هل يمكنك إصلاحه؟
 
 <Hint>
 
-You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
+قد تحصل على خطأ "Unexpected token" أثناء محاولتك لإصلاح هذا. في هذه الحالة، تحقق من أن الفاصلة المنقوطة تظهر *بعد* قوس الإغلاق. ترك فاصلة منقوطة داخل `return ( )` سيسبب خطأ.
 
 </Hint>
 
@@ -305,7 +304,7 @@ You may get an "Unexpected token" error while trying to fix this. In that case,
 ```js
 export default function Profile() {
   return
-    <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />;
+    <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="كاتسوكو ساروهاشي" />;
 }
 ```
 
@@ -317,13 +316,13 @@ img { height: 180px; }
 
 <Solution>
 
-You can fix this component by moving the return statement to one line like so:
+يمكنك إصلاح هذا المكوّن عن طريق نقل جملة return إلى سطر واحد كما يلي:
 
 <Sandpack>
 
 ```js
 export default function Profile() {
-  return <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />;
+  return <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="كاتسوكو ساروهاشي" />;
 }
 ```
 
@@ -333,7 +332,7 @@ img { height: 180px; }
 
 </Sandpack>
 
-Or by wrapping the returned JSX markup in parentheses that open right after `return`:
+أو عن طريق إحاطة الترميز المرئي JSX الذي يتم إرجاعه بالأقواس ووضع علامة القوس المفتوحة مباشرة بعد الكلمة `return`.
 
 <Sandpack>
 
@@ -342,7 +341,7 @@ export default function Profile() {
   return (
     <img 
       src="https://i.imgur.com/jA8hHMpm.jpg" 
-      alt="Katsuko Saruhashi" 
+      alt="كاتسوكو ساروهاشي"
     />
   );
 }
@@ -356,9 +355,9 @@ img { height: 180px; }
 
 </Solution>
 
-#### Spot the mistake {/*spot-the-mistake*/}
+#### اكتشف الخطأ {/*spot-the-mistake*/}
 
-Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!)
+هناك خطأ في كيفية تعريف واستخدام المكوّن `Profile`. هل يمكنك اكتشاف الخطأ؟ (حاول تذكر كيف تمّيز React المكوّنات عن وسوم HTML!)
 
 <Sandpack>
 
@@ -367,15 +366,15 @@ function profile() {
   return (
     <img
       src="https://i.imgur.com/QIrZWGIs.jpg"
-      alt="Alan L. Hart"
+      alt="ألان ل. هارت"
     />
   );
 }
 
 export default function Gallery() {
   return (
     <section>
-      <h1>Amazing scientists</h1>
+      <h1>علماء رائعون</h1>
       <profile />
       <profile />
       <profile />
@@ -392,9 +391,9 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 <Solution>
 
-React component names must start with a capital letter.
+يجب أن تبدأ أسماء مكوّنات React بحرف كبير.
 
-Change `function profile()` to `function Profile()`, and then change every `<profile />` to `<Profile />`:
+قم بتغيير `function profile()` إلى`function Profile()`, ثم قم بتغيير كل `<profile />` إلى `<Profile />`:
 
 <Sandpack>
 
@@ -403,15 +402,15 @@ function Profile() {
   return (
     <img
       src="https://i.imgur.com/QIrZWGIs.jpg"
-      alt="Alan L. Hart"
+      alt="ألان ل. هارت"
     />
   );
 }
 
 export default function Gallery() {
   return (
     <section>
-      <h1>Amazing scientists</h1>
+      <h1>علماء رائعون</h1>
       <Profile />
       <Profile />
       <Profile />
@@ -428,14 +427,14 @@ img { margin: 0 10px 10px 0; }
 
 </Solution>
 
-#### Your own component {/*your-own-component*/}
+#### مكوّنك الخاص {/*your-own-component*/}
 
-Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `<h1>Good job!</h1>`. Don't forget to export it!
+قم بكتابة مكوّن من الصفر. يمكنك إعطائه أي اسم صالح وإرجاع أي ترميز مرئي. إذا كنت بحاجة إلى أفكار، يمكنك كتابة مكوّن  `Congratulations` الذي يعرض `<h1>عمل رائع!</h1>`. لا تنسى تصديره!
 
 <Sandpack>
 
 ```js
-// Write your component below!
+// قم بكتابة مكونك بالأسفل
 
 ```
 
@@ -448,7 +447,7 @@ Write a component from scratch. You can give it any valid name and return any ma
 ```js
 export default function Congratulations() {
   return (
-    <h1>Good job!</h1>
+    <h1>عمل رائع!</h1>
   );
 }
 ```

src/sidebarLearn.json

@@ -52,7 +52,7 @@
       "path": "/learn/describing-the-ui",
       "routes": [
         {
-          "title": "Your First Component",
+          "title": "مكوّنك الأول",
           "path": "/learn/your-first-component"
         },
         {