diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index b103cfae4..a674800fc 100644 --- a/content/docs/add-react-to-a-website.md +++ b/content/docs/add-react-to-a-website.md @@ -1,6 +1,6 @@ --- id: add-react-to-a-website -title: Add React to a Website +title: إضافة React للموقع permalink: docs/add-react-to-a-website.html redirect_from: - "docs/add-react-to-an-existing-app.html" @@ -8,127 +8,126 @@ prev: getting-started.html next: create-a-new-react-app.html --- -Use as little or as much React as you need. +استخدم القليل من React أو بقدر ما تحتاج إليه. -React has been designed from the start for gradual adoption, and **you can use as little or as much React as you need**. Perhaps you only want to add some "sprinkles of interactivity" to an existing page. React components are a great way to do that. +React صممت ابتداء بأخذ الاعتماد التدريجي في الحسبان، **لذا تستطيع الاعتماد على React الشيء البسيط أو بقدر ما تحتاج إليه**.ربما أنت بحاجة إلى اضافة القليل من التفاعل أو بقدر الحاجة إلى صفحة موجودة. مكونات React هي أفضل وسيلة للقيام بذلك. -The majority of websites aren't, and don't need to be, single-page apps. With **a few lines of code and no build tooling**, try React in a small part of your website. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets. +أغلبية مواقع الويب ليست تطبيقات ذات صفحة وحيدة، ولا تحتاج إلى أن تكون كذلك. **ببضعة أسطر برمجية ودون أدوات بناء**, حاول تجريب React في أجزاء صغيرة من موقعك؛ يمكنك بعدئذٍ إمَّا أن توسِّع استعمال React تدريجيًّا، أو تقتصر باستعمالها على بضعة أدوات ذكية ديناميكية (dynamic widgets). --- -- [Add React in One Minute](#add-react-in-one-minute) -- [Optional: Try React with JSX](#optional-try-react-with-jsx) (no bundler necessary!) +- [اضف React بدقيقة واحدة!](#add-react-in-one-minute) +- [إختياري: جرب React مع JSX](#optional-try-react-with-jsx) (لا حاجة لاي bundler!) -## Add React in One Minute {#add-react-in-one-minute} +## اضف React بدقيقة واحدة! {#add-react-in-one-minute} -In this section, we will show how to add a React component to an existing HTML page. You can follow along with your own website, or create an empty HTML file to practice. +في هذا القسم، سنعلمك كيفية إضافة مكون واحد من مكونات React إلى صفحة HTML موجودة مسبقًا. يمكنك إمَّا استعمال إحدى صفحات موقعك وإمَّا إنشاء صفحة HTML جديدة للتدرُّب عليها. -There will be no complicated tools or install requirements -- **to complete this section, you only need an internet connection, and a minute of your time.** +لن تحتاج إلى أية أدوات معقدة أو تثبيت أي شيء. **كل ما تحتاج إليه لإكمال هذا القسم هو اتصال بالإنترنت ودقيقة مستقطعة من وقتك**. -Optional: [Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip) +تستطيع تنزيل [المثال التالي كاملًا (بحجم 2 كيلوبايت)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip) ولكن الأمر عائد إليك. -### Step 1: Add a DOM Container to the HTML {#step-1-add-a-dom-container-to-the-html} +### الخطوة 1: أضف حاوية DOM إلى صفحة HTM {#step-1-add-a-dom-container-to-the-html} -First, open the HTML page you want to edit. Add an empty `
` tag to mark the spot where you want to display something with React. For example: + +أولًا، افتح صفحة HTML التي تريد تعديلها ثم أضف وسم `
` فارغ لتحديد الجزء حيث تريد إظهار شيء فيه باستعمال React: ```html{3} - +
- + ``` -We gave this `
` a unique `id` HTML attribute. This will allow us to find it from the JavaScript code later and display a React component inside of it. +أعطينا الوسم `
` معرِّفًا فريدًا عبر الخاصية `id` . سيسمح لنا هذا بالعثور عليه بسهولة عبر شيفرة جافاسكريبت لاحقًا وإضافة مكون React داخله. ->Tip +>نصيحة > ->You can place a "container" `
` like this **anywhere** inside the `` tag. You may have as many independent DOM containers on one page as you need. They are usually empty -- React will replace any existing content inside DOM containers. +>تستطيع وضع "الحاوية" `
` **في أي مكان** ضمن الوسم ``. إذ يمكنك استعمال عدد غير محدود من حاويات DOM المستقلة في صفحة واحدة. ستكون هذه الحاويات فارغةً عادةً، لأنَّ React ستستبدل أي محتوى موجود داخل حاويات DOM. -### Step 2: Add the Script Tags {#step-2-add-the-script-tags} +### الخطوة 2: إضافة وسوم Script {#step-2-add-the-script-tags} -Next, add three ` - + ``` -The first two tags load React. The third one will load your component code. +يحمِّل أول وسمين React، ويحمِّل الوسم الثالث شيفرة المكون الذي ستنشئه. -### Step 3: Create a React Component {#step-3-create-a-react-component} +### الخطوة 3: أنشئ مكون React {#step-3-create-a-react-component} -Create a file called `like_button.js` next to your HTML page. +أنشئ ملفًا باسم `like_button.js` بجانب صفحة HTML التي عدلناها للتو. -Open **[this starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** and paste it into the file you created. +إفتح **[هذه الشيفرة المساعدة](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** ثم انسخها والصقها في الملف الذي أنشأته قبل قليل. ->Tip +>فائدة > ->This code defines a React component called `LikeButton`. Don't worry if you don't understand it yet -- we'll cover the building blocks of React later in our [hands-on tutorial](/tutorial/tutorial.html) and [main concepts guide](/docs/hello-world.html). For now, let's just get it showing on the screen! +>عرِّف هذه الشيفرة مكون React يدعى `LikeButton`. لا تقلق إن لم تفهم شيئًا منها، إذ سنغطي كل شيء مذكور فيها لاحقًا في [الدليل التطبيقي](/tutorial/tutorial.html) و[دليل المفاهيم الاساسية](/docs/hello-world.html). في الوقت الحالي، لندع هذه الشيفرة تُظهِر شيئًا على الشاشة. -After **[the starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, add two lines to the bottom of `like_button.js`: +بعد **[الشيفرة المساعدة](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, أضف السطرين في نهاية الملف `like_button.js`: ```js{3,4} -// ... the starter code you pasted ... +// ... الشيفرة المساعدة التي لصقتها ... const domContainer = document.querySelector('#like_button_container'); ReactDOM.render(e(LikeButton), domContainer); ``` -These two lines of code find the `
` we added to our HTML in the first step, and then display our "Like" button React component inside of it. - -### That's It! {#thats-it} +مهمة هذين السطرين هي العثور على العنصر `
` الذي أضفناه إلى صفحة HTML في الخطوة الأولى ثم إظهار الزر "Like" - الذي يمثِّل أحد مكونات React - داخله. -There is no step four. **You have just added the first React component to your website.** +### انتهينا! {#thats-it} -Check out the next sections for more tips on integrating React. +لا توجد أية خطوات إضافية. **لقد أضفت للتو أول مكون من مكونات React إلى موقعك.** -**[View the full example source code](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** +انتقل إلى الأقسام التالية للمزيد حول دمج React. -**[Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** +**[اطلع على كامل شيفرة المثال](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** أو **[نزل المثال كاملًا (ملف مضغوط بحجم 2 كيلوبايت)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** -### Tip: Reuse a Component {#tip-reuse-a-component} +### إضافة: إعادة استعمال مكون {#tip-reuse-a-component} -Commonly, you might want to display React components in multiple places on the HTML page. Here is an example that displays the "Like" button three times and passes some data to it: +عادةً، قد تحتاج إلى إظهار مكونات React في مواضع عدة في صفحة HTML. إليك مثال يُظهِر الزر "Like" في ثلاثة أماكن ويمرر بعض البيانات إليه: -[View the full example source code](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) +[اطلع على الشيفرة الكاملة للمثال.](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) -[Download the full example (2KB zipped)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) +[نزل المثال كاملًا (ملف مضغوط بحجم 2 كيلوبايت)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) ->Note +>نصيحة > ->This strategy is mostly useful while React-powered parts of the page are isolated from each other. Inside React code, it's easier to use [component composition](/docs/components-and-props.html#composing-components) instead. +>هذا الأسلوب مفيد جدًا في أثناء كون الأجزاء التي تعمل باستعمال React هي أجزاء معزولة عن بعضها بعضًا. داخل شيفرة React، من الأسهل استعمال [تركيب المكونات](/docs/components-and-props.html#composing-components) عوض ذلك. -### Tip: Minify JavaScript for Production {#tip-minify-javascript-for-production} +### إضافة: تصغير شيفرة الجافاسكريبت للنشر {#tip-minify-javascript-for-production} -Before deploying your website to production, be mindful that unminified JavaScript can significantly slow down the page for your users. +قبل نشر موقعك على خادم إنتاجي، ضع في بالك أن عدم تصغير شيفرة JavaScript يمكن أن يبطِّئ الصفحة عندما يحملها المستخدم النهائي. -If you already minify the application scripts, **your site will be production-ready** if you ensure that the deployed HTML loads the versions of React ending in `production.min.js`: +إن صغَّرت شيفرات التطبيق مسبقًا، **فسيكون موقعك جاهزًا للنشر** على البيئة الإنتاجية بعد التأكد من أن شيفرة HTML التي يراد نشرها تُحمِّل إصدار React الإنتاجي (أي الذي ينتهي بـ `production.min.js`: ```js ``` -If you don't have a minification step for your scripts, [here's one way to set it up](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). +إن لم تعرف كيفية تنفيذ خطوة التصغير, [يمكنك اتباع هذه الطريقة](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). -## Optional: Try React with JSX {#optional-try-react-with-jsx} +## إختياري: جرب React مع JSX {#optional-try-react-with-jsx} -In the examples above, we only relied on features that are natively supported by the browsers. This is why we used a JavaScript function call to tell React what to display: +في المثال السابق، اعتمدنا على ميزات مدعومة من طرف المتصفحات فقط. هذا هو سبب استعمال استدعاء إحدى دوال جافسكريبت لاخبار React بالشيء الذي نريد عرضه: ```js const e = React.createElement; -// Display a "Like"