diff --git a/content/docs/fragments.md b/content/docs/fragments.md
index 04de0463b..824636b6d 100644
--- a/content/docs/fragments.md
+++ b/content/docs/fragments.md
@@ -1,10 +1,10 @@
---
id: fragments
-title: Fragments
+title: استخدام الأجزاء (Fragments)
permalink: docs/fragments.html
---
-A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.
+من الأنماط الشائعة في React هي إعادة المكوّن لعناصر متعددة. تتيح لك الأجزاء (Fragments) تجميع قائمة من العناصر الأبناء بدون إضافة عُقَد إضافيّة إلى DOM.
```js
render() {
@@ -18,11 +18,11 @@ render() {
}
```
-There is also a new [short syntax](#short-syntax) for declaring them, but it isn't supported by all popular tools yet.
+هناك أيضًا [صياغة مختصرة](#short-syntax) جديدة للتصريح عنها، ولكنّها غير مدعومة من قبل كافة الأدوات الشائعة حتى الآن.
-## Motivation {#motivation}
+## البداية {#motivation}
-A common pattern is for a component to return a list of children. Take this example React snippet:
+من الأنماط الشائعة للمكوّن هي إعادة قائمة من المكونات الأبناء. انظر إلى هذا المثال:
```jsx
class Table extends React.Component {
@@ -38,7 +38,7 @@ class Table extends React.Component {
}
```
-`` would need to return multiple `
` elements in order for the rendered HTML to be valid. If a parent div was used inside the `render()` of ``, then the resulting HTML will be invalid.
+سيحتاج المكوّن `` إلى إعادة عناصر ` | ` متعددة لكي تكون HTML المُصيَّرة صالحة. إن كان عنصر `div` الأب مُستخدمًا بداخل التابع `render()` للمكون ``, فستكون HTML الناتجة غير صالحة:
```jsx
class Columns extends React.Component {
@@ -53,7 +53,7 @@ class Columns extends React.Component {
}
```
-results in a `` output of:
+ينتج عنه جدول ``:
```jsx
@@ -66,9 +66,9 @@ results in a `` output of:
```
-Fragments solve this problem.
+وبهذا نقدم الأجزاء Fragments.
-## Usage {#usage}
+## الاستخدام {#usage}
```jsx{4,7}
class Columns extends React.Component {
@@ -83,7 +83,7 @@ class Columns extends React.Component {
}
```
-which results in a correct `` output of:
+والذي ينتج عنه جدول صحيح ``:
```jsx
@@ -94,9 +94,9 @@ which results in a correct `` output of:
```
-### Short Syntax {#short-syntax}
+### صياغة مختصرة {#short-syntax}
-There is a new, shorter syntax you can use for declaring fragments. It looks like empty tags:
+هنالك صياغة جديدة مختصرة أكثر بإمكانك استخدامها للتصريح عن الأجزاء. تبدو هذه الصياغة مثل العناصر الفارغة:
```jsx{4,7}
class Columns extends React.Component {
@@ -111,13 +111,13 @@ class Columns extends React.Component {
}
```
-You can use `<>>` the same way you'd use any other element except that it doesn't support keys or attributes.
+بإمكانك استخدام`<>>` بنفس الطريقة التي تستخدم بها أي عنصر آخر عدا أنها لا تدعم المفاتيح أو الخاصيّات.
-Note that **[many tools don't support it yet](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)** so you might want to explicitly write `` until the tooling catches up.
+لاحظ أنّ **[العديد من الأدوات لا تدعمها حتى الآن](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)** لذا قد تحتاج إلى أن تكتب بصراحة `` حتى تصبح الأدوات تدعم الصياغة المختصرة.
-### Keyed Fragments {#keyed-fragments}
+### استخدام الأجزاء مع المفاتيح {#keyed-fragments}
-Fragments declared with the explicit `` syntax may have keys. A use case for this is mapping a collection to an array of fragments -- for example, to create a description list:
+يُمكِن للأجزاء المُصرَّح عنها عن طريق الصياغة `` أن تمتلك مفاتيح. إحدى حالات الاستخدام لها هي ربط مجموعة إلى مصفوفة من الأجزاء، على سبيل المثال لإنشاء قائمة للوصف:
```jsx
function Glossary(props) {
@@ -135,8 +135,8 @@ function Glossary(props) {
}
```
-`key` is the only attribute that can be passed to `Fragment`. In the future, we may add support for additional attributes, such as event handlers.
+الخاصية الوحيدة التي يمكن تمريرها للأجزاء `Fragment` هي المفتاح `key`. قد نُضيف مستقبلًا دعم لخاصيّات إضافية مثل مُعالجات الأحداث.
-### Live Demo {#live-demo}
+### تجربة المثال {#live-demo}
-You can try out the new JSX fragment syntax with this [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000).
+بإمكانك تجربة صياغة الأجزاء الجديدة في JSX عن طريق هذا المثال في موقع [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000).
|