Update application.md

src/guide/essentials/application.md

@@ -1,35 +1,40 @@
-# إنشاء تطبيق باستخدام Vue {#creating-a-vue-application}
+# إنشاء تطبيق باستخدام Vue
 
-## نسخة التطبيق {#the-application-instance}
-
- كل تطبيق Vue ينشأ باستحداث **نسخة تطبيق** جديد عن طريق استخدام دالة  [`createApp`](/api/application#createapp) : 
+---
+أي مشروع Vue بيبدأ بـ **Application Instance**، وده بنعمله عن طريق `createApp()` من مكتبة Vue.
 
 ```js
 import { createApp } from 'vue'
 
 const app = createApp({
-  /* التوابع الجذرية للمكون */
+  /* root component options */
 })
 ```
 
-## المكون الجذر {#the-root-component}
+هنا إحنا أنشأنا الـ app نفسه، لكن لسه مش بيعرض حاجة على الشاشة.
+
+---
+
+## **2. Root Component**
 
-الكائن الذي نمرره إلى دالة `createApp` هو في الأصل مكون. يتطلب كل تطبيق "مكوِّنًا جذريًا" الذي بدوره يمكن أن يحتوي على مكونات أخرى مثل مكوناته الفرعية.
+الـ object اللي بتحطه جوه `createApp()` ده في الحقيقة **Component**، وده بيكون **Root Component** (المكون الأساسي).
 
-إذا كنت تستخدم المكونات أحادية الملف، فعادة ما نستورد المكون الجذر من ملف آخر:
+* أي Vue App لازم يكون له Root Component.
+* الـ Root Component ممكن يحتوي Components تانية (nested components).
+
+لو شغال بـ **Single-File Components** (الملفات `.vue`) هتعمل import للـ root component:
 
 ```js
 import { createApp } from 'vue'
-// استيراد  المكون الجذر App كمكون أحادي الملف. 
 import App from './App.vue'
 
 const app = createApp(App)
 ```
 
-في حين نحتاج في العديد من الأمثلة عبر هذا الدليل إلى مكون واحد فقط، فإن معظم التطبيقات الحقيقية منظمة عبر ملفات بشكل شجري تحتوي على العديد من المكونات المتداخلة والقابلة لإعادة الاستخدام. على سبيل المثال ، قد تبدو مكونات تطبيق Todo  (تطبيق قائمة المهام) كما يلي:
+مثال على شجرة مكونات (Component Tree) لتطبيق Todo:
 
 ```
-App (المكون الجذر)
+App (root)
 ├─ TodoList
 │  └─ TodoItem
 │     ├─ TodoDeleteButton
@@ -39,11 +44,13 @@ App (المكون الجذر)
    └─ TodoStatistics
 ```
 
-في أجزاء قادمة من الدليل، سنناقش كيفية تعريف مكونات متعددة وتركيبها مع بعض. لكن قبل ذلك، سنركز على ما يحدث داخل مكون واحد.
+دي طريقة Vue في تقسيم الكود لمكونات صغيرة وقابلة لإعادة الاستخدام.
+
+---
 
-## وصل التطبيق {#mounting-the-app}
+## **3. Mounting the App**
 
-لا تُصيَّر نسخة التطبيق أي شيء حتى يتم استدعاء الدالة `()mount.`. و التي تأخذ عنصر "مُستوعِب" كوسيط و الذي يكون إما عنصر من عقد الـDOM أو أيِّ مُحدِّد CSS :
+الـ Application مش هيعرض أي حاجة غير لما تعمل `.mount()` وتحدد العنصر اللي هيركب فيه:
 
 ```html
 <div id="app"></div>
@@ -53,13 +60,15 @@ App (المكون الجذر)
 app.mount('#app')
 ```
 
-سيُصيَّر محتوى المكون الجذر للتطبيق داخل العنصر المُستوعِب الذي بدوره لا يُعتبر جزءًا من التطبيق.
+* المحتوى اللي جوه Root Component هيتحط جوا الـ container ده.
+* الـ container نفسه مش جزء من الـ Vue App.
+* `.mount()` لازم تتنفذ **بعد** أي إعدادات أو تسجيلات assets.
 
-لا يجب استدعاء دالة `()mount.`. إلا بعد الانتهاء من جميع اعدادات التطبيق وتسجيل الملحقات. كما نلاحظ أيضًا أن قيمة إرجاع هذه الدالة، هي نسخة المكون الجذر بدلاً من نسخة التطبيق التي تكون من دالة تسجيل الملحقات.
+---
 
-### قالب المكون الجذر في عنصر الـDOM المُستوعِب {#in-dom-root-component-template}
+## **4. In-DOM Root Component Template**
 
-القالب الخاص بالمكون الجذر عادة ما يكون جزءًا من المكون نفسه، ولكن من الممكن أيضًا توفير القالب بشكل منفصل عن طريق كتابته مباشرة داخل عنصر الوصل:
+ممكن تكتب الـ template مباشرة جوا الـ HTML بدل ما يكون جوه ملف `.vue`:
 
 ```html
 <div id="app">
@@ -72,53 +81,64 @@ import { createApp } from 'vue'
 
 const app = createApp({
   data() {
-    return {
-      count: 0
-    }
+    return { count: 0 }
   }
 })
 
 app.mount('#app')
 ```
 
-سيستخدم Vue تلقائيًا التابع `innerHTML` من المستوعب كقالب إذا لم يكن المكون الجذر للتطبيق يحتوي بالفعل على خيار القالب ( `template`).
+Vue هتستخدم الـ innerHTML كـ template لو الـ Root Component مفيهوش template.
+ده مفيد لما:
+
+* تستخدم Vue بدون build step (زي CDN).
+* أو مع server-side frameworks.
 
-القوالب المستوعبة في الـDOM غالبا ما تستخدم في التطبيقات التي [تستخدم Vue بدون خطوة بناء](/guide/quick-start.html#using-vue-from-cdn). يمكن أيضًا استخدامها مع إطارات جانب الخادوم، حيث قد ينشأ القالب الجذري بشكل ديناميكي من قبل الخادوم.
+---
 
-## تهيئة التطبيق {#app-configurations}
+## **5. App Configurations**
 
-تعرض نسخة التطبيق  الكائن  `config.` كخاصية التي تسمح لنا بتهيئة بعض الخيارات على مستوى جذر التطبيق، على سبيل المثال، التصريح بـ"معالج الأخطاء" على مستوى جذر التطبيق الذي يلتقط الأخطاء من جميع المكونات الفرعية :
+الـ Application Instance عنده `.config` عشان تضبط إعدادات على مستوى التطبيق كله، زي:
 
 ```js
 app.config.errorHandler = (err) => {
-  /* هنا يُعالج الخطأ */
+  /* handle error */
 }
 ```
 
-نسخة التطبيق توفر لنا أيضًا بعض التوابع لتسجيل الملحقات على مستوى جذر التطبيق. على سبيل المثال، تسجيل مكون:
+كمان تقدر تسجل Components أو أصول (assets) على مستوى التطبيق:
 
 ```js
 app.component('TodoDeleteButton', TodoDeleteButton)
 ```
 
-تسجيل مكون `TodoDeleteButton` بهذه الطريقة يجعله متاحًا للاستخدام في أي مكان في التطبيق. سنناقش تسجيل المكونات وباقي الملحقات في أجزاء قادمة من الدليل. يمكنك أيضًا استعراض قائمة كاملة من واجهات نسخة التطبيق في [مرجع واجهة برمجة التطبيقات](/api/application).
+أي مكون تسجله هنا هيكون متاح في أي مكان في الـ app.
 
-تأكد من تطبيق جميع تهيئات التطبيق قبل توصيله!
+---
 
-## نسخ متعددة من التطبيق {#multiple-application-instances}
+## **6. Multiple Application Instances**
 
-لا يقتصر التطبيق على نسخة واحدة فقط في نفس الصفحة. تسمح الواجهة البرمجية للدالة `createApp` بوجود تطبيقات Vue متعددة في نفس الصفحة، كل تطبيق له نطاقه الخاص للتهيئة والملحقات العامة :
+مش لازم يكون عندك Vue app واحد في الصفحة. ممكن تعمل أكتر من app:
 
 ```js
-const app1 = createApp({
-  /* ... */
-})
+const app1 = createApp({ /* ... */ })
 app1.mount('#container-1')
 
-const app2 = createApp({
-  /* ... */
-})
+const app2 = createApp({ /* ... */ })
 app2.mount('#container-2')
 ```
 
-إذا كنت تستخدم Vue لتحسين  HTML مُصيَّر من الخادم وتحتاجها فقط للتحكم في أجزاء معينة من الصفحة الكبيرة، فتجنب توصيل نسخة واحدة من تطبيق Vue على الصفحة بأكملها. بدلاً من ذلك، قم بإنشاء تطبيقات صغيرة متعددة وتوصيلها على العناصر المسؤولة عنها.
+مفيد لما:
+
+* تضيف Vue على أجزاء محددة من صفحة كبيرة.
+* بدل ما تتحكم في الصفحة كلها، تتحكم في عناصر معينة.
+
+---
+
+💡 **الخلاصة**:
+
+* `createApp()` → بيعمل instance للتطبيق.
+* Root Component → الأساس اللي كل حاجة هتبني عليه.
+* `.mount()` → بيقول لـ Vue فين تحط الـ app في الـ DOM.
+* `.config` و `.component()` → إعدادات وأصول على مستوى التطبيق.
+* ممكن تعمل أكتر من app في نفس الصفحة.