Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DONE] hello-world.md .. #125

Merged
merged 11 commits into from Jul 26, 2019
36 changes: 18 additions & 18 deletions content/docs/hello-world.md
@@ -1,50 +1,50 @@
---
id: hello-world
title: Hello World
title: أهلًا بالعالم
permalink: docs/hello-world.html
prev: cdn-links.html
next: introducing-jsx.html
---

The smallest React example looks like this:
يبدو أصغر مثال في React كما يلي:


```js
ReactDOM.render(
3imed-jaberi marked this conversation as resolved.
Show resolved Hide resolved
<h1>Hello, world!</h1>,
<h1>مرحبا بالعالم!</h1>,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

أهلا بالعالم ✔️ ..

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@maskeddeveloper ,
لماذا لم تغيرها !

document.getElementById('root')
);
```

It displays a heading saying "Hello, world!" on the page.
يعرض هذا المثال ترويسةً تقول "أهلًا بالعالم!" في الصّفحة.
maskeddeveloper marked this conversation as resolved.
Show resolved Hide resolved

[](codepen://hello-world)

Click the link above to open an online editor. Feel free to make some changes, and see how they affect the output. Most pages in this guide will have editable examples like this one.

اضغط على الرابط في الأعلى لفتح محرِّر عبر CodePen يحوي المثال السابق. خذ راحتك وعدل هذا المثال كما يحلو لك وراقب كيف تؤثر تعديلاتك على المخرجات. أغلب الصفحات في هذا الدليل ستحوي على أمثلة قابلة للتعديل مثل هذا المثال.
maskeddeveloper marked this conversation as resolved.
Show resolved Hide resolved

## How to Read This Guide {#how-to-read-this-guide}
## كيف تقرأ هذا الدليل {#how-to-read-this-guide}

In this guide, we will examine the building blocks of React apps: elements and components. Once you master them, you can create complex apps from small reusable pieces.
ستُمهِّد لك الأقسام القادمة تدريجيًّا كيفيّة استخدام React، وسنتعامل مع الكتل التي يتكوّن منها تطبيق React وهي العناصر (elements) والمُكوِّنات (Components). حالما تتقنها سيصبح بمقدورك إنشاء تطبيقات مُعقَّدة من قطع صغيرة قابلة لإعادة الاستخدام.

>Tip
>ملاحظة
>
>This guide is designed for people who prefer **learning concepts step by step**. If you prefer to learn by doing, check out our [practical tutorial](/tutorial/tutorial.html). You might find this guide and the tutorial complementary to each other.
>هذا الدليل صمِّم من أجل الأشخاص الذين يفضلون تعلم المفاهيم النظرية خطوةً بخطوة. إن كنت تفضل التعلم بالممارسة، انتقل إلى [الدليل التطبيقي](/tutorial/tutorial.html). ستجد أنَّ هذا الدليل والدليل التطبيقي يكمِّل أحدهما الأخر.
maskeddeveloper marked this conversation as resolved.
Show resolved Hide resolved

This is the first chapter in a step-by-step guide about main React concepts. You can find a list of all its chapters in the navigation sidebar. If you're reading this from a mobile device, you can access the navigation by pressing the button in the bottom right corner of your screen.
هذا هو الفصل الأول في دليل خطوة بخطوة حول مفاهيم التفاعل الرئيسية. يمكنك العثور على قائمة بجميع فصولها في شريط التنقل الجانبي. إذا كنت تقرأ هذا من جهاز محمول ، يمكنك الوصول إلى التنقل عن طريق الضغط على الزر في الركن الأيمن السفلي من الشاشة.
maskeddeveloper marked this conversation as resolved.
Show resolved Hide resolved

Every chapter in this guide builds on the knowledge introduced in earlier chapters. **You can learn most of React by reading the “Main Concepts” guide chapters in the order they appear in the sidebar.** For example, [“Introducing JSX”](/docs/introducing-jsx.html) is the next chapter after this one.
كل فصل في هذا الدليل، يبني على المعرفة التي تعلمتها في الفصل السابق. ستتعلم في هذا الدليل أغلب مواضيع React إن قرأت فصوله بالترتيب الذي وضعناه لك. **يمكنك معرفة معظم React من خلال قراءة“المفاهيم الرئيسية” بالترتيب الذي تظهر به في الشريط الجانبي.** على سبيل المثال, الفصل التالي بعد هذا الفصل هو [“مقدمة إلى JSX”](/docs/introducing-jsx.html)
maskeddeveloper marked this conversation as resolved.
Show resolved Hide resolved

## Knowledge Level Assumptions {#knowledge-level-assumptions}
## درجة المعرفة المفترضة {#knowledge-level-assumptions}

React is a JavaScript library, and so we'll assume you have a basic understanding of the JavaScript language. **If you don't feel very confident, we recommend [going through a JavaScript tutorial](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) to check your knowledge level** and enable you to follow along this guide without getting lost. It might take you between 30 minutes and an hour, but as a result you won't have to feel like you're learning both React and JavaScript at the same time.
بما أنّ React هي مكتبة JavaScript فسنفترض أنّك تملك معرفة أساسيّة بلغة JavaScript. إن لم تكن واثقًا من إمكانياتك فننصحك بأن تذهب إلى [ درس JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) للتحقّق من مستواك والتمكّن من متابعة هذا الشّرح بدون أن تتشتّت. سيستغرق منك حوالي نصف ساعة إلى ساعة، ولكنّك بعد المرور عليه لن تشعر بأنّك تتعلّم React و JavaScript معًا.
maskeddeveloper marked this conversation as resolved.
Show resolved Hide resolved

>Note
>ملاحظة
>
>This guide occasionally uses some of the newer JavaScript syntax in the examples. If you haven't worked with JavaScript in the last few years, [these three points](https://gist.github.com/gaearon/683e676101005de0add59e8bb345340c) should get you most of the way.
>يعتمد هذا التوثيق أيضًا على بعض من صياغة JavaScript الجديدة في الأمثلة، فإن لم تكن قد تعاملت مع JavaScript في السنوات القليلة الماضية، [هذه النقاط الثلاث](https://gist.github.com/gaearon/683e676101005de0add59e8bb345340c) ستمهد لك الطريق.
maskeddeveloper marked this conversation as resolved.
Show resolved Hide resolved


## Let's Get Started! {#lets-get-started}
## دعنا نبدأ! {#lets-get-started}

Keep scrolling down, and you'll find the link to the [next chapter of this guide](/docs/introducing-jsx.html) right before the website footer.
ستجد في كل فصل رابطًا يشير إلى [ الفصل التالي ](/docs/introducing-jsx.html) من هذا الدليل. ستجد في قسم "انظر أيضًا" روابط جميع فصول هذا الدليل لتسهيل التنقل بينها.