@ -1,7 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Hello World
|
title: Hello World
|
||||||
localeTitle: مرحبا بالعالم
|
localeTitle: مرحبا بالعالم
|
||||||
---
|
---
|
||||||
|
## مرحبا بالعالم !!
|
||||||
|
|
||||||
يبدأ كل تعلم لغة بمثال Traditional Hello World. هنا ، يمكنك التعرف على React مع نفس برنامج HelloWorld.
|
يبدأ كل تعلم لغة بمثال Traditional Hello World. هنا ، يمكنك التعرف على React مع نفس برنامج HelloWorld.
|
||||||
|
|
||||||
@ -11,13 +12,14 @@ localeTitle: مرحبا بالعالم
|
|||||||
|
|
||||||
يمكننا تثبيته من خلال الأوامر التالية
|
يمكننا تثبيته من خلال الأوامر التالية
|
||||||
|
|
||||||
|
```shell
|
||||||
|
npm install -g create-react-app
|
||||||
|
|
||||||
create-react-app my-app
|
create-react-app my-app
|
||||||
|
|
||||||
cd my-app
|
cd my-app
|
||||||
npm start
|
npm start
|
||||||
npm start
|
```
|
||||||
|
|
||||||
يجب أن يمنحك سطر الأوامر مخرجات حيث يمكنك العثور على التطبيق في المستعرض. يجب أن يكون الإعداد الافتراضي هو localhost: 8080. إذا كنت تستخدم IE أو Edge فقط على جهاز يعمل بنظام التشغيل Windows ، فيمكنني أن أوصيك بتثبيت Chrome أيضًا للوصول إلى بيئة مطوّري البرامج وأدوات React Developer التي تتوفر كإضافة Chrome.
|
يجب أن يمنحك سطر الأوامر مخرجات حيث يمكنك العثور على التطبيق في المستعرض. يجب أن يكون الإعداد الافتراضي هو localhost: 8080. إذا كنت تستخدم IE أو Edge فقط على جهاز يعمل بنظام التشغيل Windows ، فيمكنني أن أوصيك بتثبيت Chrome أيضًا للوصول إلى بيئة مطوّري البرامج وأدوات React Developer التي تتوفر كإضافة Chrome.
|
||||||
|
|
||||||
@ -27,7 +29,8 @@ localeTitle: مرحبا بالعالم
|
|||||||
|
|
||||||
نسخ الرمز أدناه ولصقه في src / App.js
|
نسخ الرمز أدناه ولصقه في src / App.js
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
class App extends React.Component{
|
class App extends React.Component{
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
@ -44,11 +47,12 @@ localeTitle: مرحبا بالعالم
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
export default App;
|
```
|
||||||
|
|
||||||
إذا تحققنا من ملف index.js في المجلد src ، نجد أن تطبيق App.js أعلاه يسمى index.js ثم تم تقديمه.
|
إذا تحققنا من ملف index.js في المجلد src ، نجد أن تطبيق App.js أعلاه يسمى index.js ثم تم تقديمه.
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
// Other code
|
||||||
import App from './App'; // The App component is imported
|
import App from './App'; // The App component is imported
|
||||||
|
|
||||||
// Other code
|
// Other code
|
||||||
@ -56,10 +60,11 @@ localeTitle: مرحبا بالعالم
|
|||||||
document.getElementById('root')); //The <App /> is the way components are called in react after importing them
|
document.getElementById('root')); //The <App /> is the way components are called in react after importing them
|
||||||
|
|
||||||
// Other code
|
// Other code
|
||||||
// Other code
|
```
|
||||||
|
|
||||||
في ما سبق ، يسمى App.js بمكون. عادة ، نقوم بعمل مكونات متعددة ونضعها معًا في App.js والتي سيتم بعد ذلك تقديمها في index.js والتي يتم بعد ذلك تحويلها إلى div root الموجود في index.html.
|
في ما سبق ، يسمى App.js بمكون. عادة ، نقوم بعمل مكونات متعددة ونضعها معًا في App.js والتي سيتم بعد ذلك تقديمها في index.js والتي يتم بعد ذلك تحويلها إلى div root الموجود في index.html.
|
||||||
|
|
||||||
مبروك !! لقد أنشأت أول تطبيق لـ React Hello world. تعلم المزيد عن رد الفعل في المقالات القادمة.
|
مبروك !! لقد أنشأت أول تطبيق لـ React Hello world. تعلم المزيد عن رد الفعل في المقالات القادمة.
|
||||||
|
|
||||||
الترميز سعيدة!
|
الترميز سعيدة!
|
||||||
|
*هنيئا لك
|
||||||
|
Reference in New Issue
Block a user