add هنيئا لك (#23492)

* add هنيئا لك * Update index.md
2019-08-08 00:05:13 +01:00
parent af889a301b
commit 1b987f265f
1 changed files with 67 additions and 62 deletions
--- a/guide/arabic/react/hello-world/index.md
+++ b/guide/arabic/react/hello-world/index.md
@ -1,65 +1,70 @@
 ---
 title: Hello World
 localeTitle: مرحبا بالعالم
---
+---
-## مرحبا بالعالم !!
+## مرحبا بالعالم !!
-
+
-يبدأ كل تعلم لغة بمثال Traditional Hello World. هنا ، يمكنك التعرف على React مع نفس برنامج HelloWorld.
+يبدأ كل تعلم لغة بمثال Traditional Hello World. هنا ، يمكنك التعرف على React مع نفس برنامج HelloWorld.
-
+
-كل شيء في React مكون.
+كل شيء في React مكون.
-
+
-ولكن قبل ذلك ، نحتاج إلى التأكد من تثبيت node.js و npm في جهاز الكمبيوتر. بشكل اختياري ، يمكننا استخدام CRA (إنشاء تطبيق React) وهو عبارة عن أداة تم تصميمها بواسطة المطورين على Facebook لمساعدتك على بناء تطبيقات React. إنه يوفر عليك من الإعداد والتهيئة المستهلكة للوقت. يمكنك ببساطة تشغيل أمر واحد وإنشاء تطبيق رد يعمل على إعداد الأدوات التي تحتاجها لبدء مشروع React.
+ولكن قبل ذلك ، نحتاج إلى التأكد من تثبيت node.js و npm في جهاز الكمبيوتر. بشكل اختياري ، يمكننا استخدام CRA (إنشاء تطبيق React) وهو عبارة عن أداة تم تصميمها بواسطة المطورين على Facebook لمساعدتك على بناء تطبيقات React. إنه يوفر عليك من الإعداد والتهيئة المستهلكة للوقت. يمكنك ببساطة تشغيل أمر واحد وإنشاء تطبيق رد يعمل على إعداد الأدوات التي تحتاجها لبدء مشروع React.
-
+
-يمكننا تثبيته من خلال الأوامر التالية
+يمكننا تثبيته من خلال الأوامر التالية
-
+
- `npm install -g create-react-app 
+ ```shell
- 
+ npm install -g create-react-app 
- create-react-app my-app 
+ 
- 
+ create-react-app my-app 
- cd my-app 
+ 
- npm start 
+ cd my-app 
-` 
+ npm start 
-
+``` 
-يجب أن يمنحك سطر الأوامر مخرجات حيث يمكنك العثور على التطبيق في المستعرض. يجب أن يكون الإعداد الافتراضي هو localhost: 8080. إذا كنت تستخدم IE أو Edge فقط على جهاز يعمل بنظام التشغيل Windows ، فيمكنني أن أوصيك بتثبيت Chrome أيضًا للوصول إلى بيئة مطوّري البرامج وأدوات React Developer التي تتوفر كإضافة Chrome.
+
-
+يجب أن يمنحك سطر الأوامر مخرجات حيث يمكنك العثور على التطبيق في المستعرض. يجب أن يكون الإعداد الافتراضي هو localhost: 8080. إذا كنت تستخدم IE أو Edge فقط على جهاز يعمل بنظام التشغيل Windows ، فيمكنني أن أوصيك بتثبيت Chrome أيضًا للوصول إلى بيئة مطوّري البرامج وأدوات React Developer التي تتوفر كإضافة Chrome.
-![بديل يتفاعل صفحة البداية](https://cdn-images-1.medium.com/max/800/1*Qcry5pCXIy2KeNRsq3w7Bg.png)
+
-
+![بديل يتفاعل صفحة البداية](https://cdn-images-1.medium.com/max/800/1*Qcry5pCXIy2KeNRsq3w7Bg.png)
-#### SRC / App.js
+
-
+#### SRC / App.js
-نسخ الرمز أدناه ولصقه في src / App.js
+
-
+نسخ الرمز أدناه ولصقه في src / App.js
- `  import React from 'react'; 
+
- 
+```jsx
-  class App extends React.Component{ 
+  import React from 'react'; 
-    constructor(props) { 
+ 
-      super(props); 
+  class App extends React.Component{ 
-    } 
+    constructor(props) { 
- 
+      super(props); 
-    render(){ 
+    } 
-      return( 
+ 
-        <div> 
+    render(){ 
-          <p>Hello World !!</p> 
+      return( 
-        </div> 
+        <div> 
-      ); 
+          <p>Hello World !!</p> 
-    } 
+        </div> 
-  } 
+      ); 
- 
+    } 
-  export default App; 
+  } 
-` 
+ 
-
+  export default App; 
-إذا تحققنا من ملف index.js في المجلد src ، نجد أن تطبيق App.js أعلاه يسمى index.js ثم تم تقديمه.
+```
-
+
- `// Other code 
+إذا تحققنا من ملف index.js في المجلد src ، نجد أن تطبيق App.js أعلاه يسمى index.js ثم تم تقديمه.
- import App from './App'; // The App component is imported 
+
- 
+```jsx
- // Other code 
+// Other code 
- ReactDOM.render(<App />, 
+ import App from './App'; // The App component is imported 
- document.getElementById('root'));  //The <App /> is the way components are called in react after importing them 
+ 
- 
+ // Other code 
- // Other code 
+ ReactDOM.render(<App />, 
-` 
+ document.getElementById('root'));  //The <App /> is the way components are called in react after importing them 
-
+ 
-في ما سبق ، يسمى App.js بمكون. عادة ، نقوم بعمل مكونات متعددة ونضعها معًا في App.js والتي سيتم بعد ذلك تقديمها في index.js والتي يتم بعد ذلك تحويلها إلى div root الموجود في index.html.
+ // Other code 
-
+``` 
-مبروك !! لقد أنشأت أول تطبيق لـ React Hello world. تعلم المزيد عن رد الفعل في المقالات القادمة.
+
-
+في ما سبق ، يسمى App.js بمكون. عادة ، نقوم بعمل مكونات متعددة ونضعها معًا في App.js والتي سيتم بعد ذلك تقديمها في index.js والتي يتم بعد ذلك تحويلها إلى div root الموجود في index.html.
 مبروك !! لقد أنشأت أول تطبيق لـ React Hello world. تعلم المزيد عن رد الفعل في المقالات القادمة.
 الترميز سعيدة!
 *هنيئا لك