` إلى اللون الأحمر دون التأثير على الخاصية `background-color`. وبالمثل، **لا تتجاوز سياقات React (React contexts) المختلفة بعضها البعض.** كل سياق (Context) تقوم بإنشائه باستخدام `createContext()` يكون منفصلاً تماماً عن السياقات الأخرى، ويربط معاً المُكوّنات (Components) التي تستخدم وتوفر *ذلك السياق بالذات*. يمكن لمُكوّن (Component) واحد أن يستخدم أو يوفر العديد من السياقات المختلفة دون أي مشكلة.
-In CSS, different properties like `color` and `background-color` don't override each other. You can set all `
`'s `color` to red without impacting `background-color`. Similarly, **different React contexts don't override each other.** Each context that you make with `createContext()` is completely separate from other ones, and ties together components using and providing *that particular* context. One component may use or provide many different contexts without a problem.
+## قبل أن تستخدم السياق {/*before-you-use-context*/}
-## Before you use context {/*before-you-use-context*/}
+استخدام السياق (Context) أمر مغرٍ جداً! ومع ذلك، هذا يعني أيضاً أنه من السهل جداً الإفراط في استخدامه. **مجرد أنك تحتاج إلى تمرير بعض الخصائص (props) لعدة مستويات عميقة لا يعني أنه يجب عليك وضع تلك المعلومات في السياق (Context).**
-Context is very tempting to use! However, this also means it's too easy to overuse it. **Just because you need to pass some props several levels deep doesn't mean you should put that information into context.**
+إليك بعض البدائل التي يجب عليك أخذها في الاعتبار قبل استخدام السياق (Context):
-Here's a few alternatives you should consider before using context:
+1. **ابدأ بـ [تمرير الخصائص (props).**](https://www.google.com/search?q=/learn/passing-props-to-a-component) إذا كانت مُكوّناتك (Components) ليست بسيطة، فليس من غير المألوف تمرير عشرات الخصائص (props) للأسفل عبر عشرات المُكوّنات. قد يبدو الأمر شاقاً، ولكنه يجعل من الواضح جداً أي المُكوّنات تستخدم أي بيانات! سيكون الشخص الذي يصون كودك ممتناً لأنك جعلت تدفق البيانات صريحاً باستخدام الخصائص (props).
+2. **استخرج المُكوّنات و[مرر JSX كـ `children](https://www.google.com/search?q=/learn/passing-props-to-a-component%23passing-jsx-as-children)` إليها.** إذا كنت تمرر بعض البيانات عبر العديد من طبقات المُكوّنات (Components) الوسيطة التي لا تستخدم تلك البيانات (وتكتفي بتمريرها للأسفل)، فهذا يعني غالباً أنك نسيت استخراج بعض المُكوّنات على طول الطريق. على سبيل المثال، ربما تمرر خصائص (props) بيانات مثل `posts` إلى مُكوّنات مرئية لا تستخدمها مباشرة، مثل `
`. بدلاً من ذلك، اجعل `Layout` يقبل `children` كخاصية (prop)، وقم بتصيير `
`. هذا يقلل من عدد الطبقات بين المُكوّن الذي يحدد البيانات والمُكوّن الذي يحتاجها.
-1. **Start by [passing props.](/learn/passing-props-to-a-component)** If your components are not trivial, it's not unusual to pass a dozen props down through a dozen components. It may feel like a slog, but it makes it very clear which components use which data! The person maintaining your code will be glad you've made the data flow explicit with props.
-2. **Extract components and [pass JSX as `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) to them.** If you pass some data through many layers of intermediate components that don't use that data (and only pass it further down), this often means that you forgot to extract some components along the way. For example, maybe you pass data props like `posts` to visual components that don't use them directly, like `
`. Instead, make `Layout` take `children` as a prop, and render `
`. This reduces the number of layers between the component specifying the data and the one that needs it.
+إذا لم تعمل أي من هذه المقاربات بشكل جيد معك، فكر حينها في استخدام السياق (Context).
-If neither of these approaches works well for you, consider context.
+## حالات استخدام السياق {/*use-cases-for-context*/}
-## Use cases for context {/*use-cases-for-context*/}
+* **السمات (Theming):** إذا كان تطبيقك يتيح للمستخدم تغيير مظهره (مثل الوضع الليلي)، يمكنك وضع مُوفّر سياق (Context provider) في أعلى تطبيقك، واستخدام ذلك السياق (Context) في المُكوّنات (Components) التي تحتاج إلى تعديل مظهرها المرئي.
+* **الحساب الحالي (Current account):** قد تحتاج العديد من المُكوّنات (Components) إلى معرفة المستخدم المسجل دخوله حالياً. وضعه في سياق (Context) يجعله مريحاً للقراءة في أي مكان في الشجرة. تتيح لك بعض التطبيقات أيضاً تشغيل حسابات متعددة في نفس الوقت (مثل ترك تعليق كمستخدم مختلف). في تلك الحالات، قد يكون من المريح تغليف جزء من واجهة المستخدم (UI) بمُوفّر سياق (provider) متداخل يحمل قيمة حساب حالي مختلفة.
+* **التوجيه (Routing):** تستخدم معظم حلول التوجيه السياق (Context) داخلياً للاحتفاظ بالمسار الحالي (route). هكذا "يعرف" كل رابط ما إذا كان نشطاً أم لا. إذا قمت ببناء الموجّه (router) الخاص بك، فربما ترغب في فعل ذلك أيضاً.
+* **إدارة الحالة (Managing state):** مع نمو تطبيقك، قد ينتهي بك الأمر بوجود الكثير من الحالات (state) بالقرب من أعلى تطبيقك. قد ترغب العديد من المُكوّنات (Components) البعيدة بالأسفل في تغييرها. من الشائع [استخدام مُقلّل (reducer) مع سياق (Context)](https://www.google.com/search?q=/learn/scaling-up-with-reducer-and-context) لإدارة الحالات المعقدة وتمريرها للأسفل إلى المُكوّنات البعيدة دون الكثير من العناء.
-* **Theming:** If your app lets the user change its appearance (e.g. dark mode), you can put a context provider at the top of your app, and use that context in components that need to adjust their visual look.
-* **Current account:** Many components might need to know the currently logged in user. Putting it in context makes it convenient to read it anywhere in the tree. Some apps also let you operate multiple accounts at the same time (e.g. to leave a comment as a different user). In those cases, it can be convenient to wrap a part of the UI into a nested provider with a different current account value.
-* **Routing:** Most routing solutions use context internally to hold the current route. This is how every link "knows" whether it's active or not. If you build your own router, you might want to do it too.
-* **Managing state:** As your app grows, you might end up with a lot of state closer to the top of your app. Many distant components below may want to change it. It is common to [use a reducer together with context](/learn/scaling-up-with-reducer-and-context) to manage complex state and pass it down to distant components without too much hassle.
-
-Context is not limited to static values. If you pass a different value on the next render, React will update all the components reading it below! This is why context is often used in combination with state.
+لا يقتصر السياق (Context) على القيم الثابتة. إذا مررت قيمة مختلفة في التصيير (render) التالي، ستقوم React بتحديث جميع المُكوّنات (Components) التي تقرأه بالأسفل! هذا هو السبب في أن السياق يُستخدم غالباً بالاشتراك مع الحالة (state).
-In general, if some information is needed by distant components in different parts of the tree, it's a good indication that context will help you.
+بشكل عام، إذا كانت بعض المعلومات مطلوبة من قبل مُكوّنات (Components) بعيدة في أجزاء مختلفة من الشجرة، فهذا مؤشر جيد على أن السياق (Context) سيساعدك.
-* Context lets a component provide some information to the entire tree below it.
-* To pass context:
- 1. Create and export it with `export const MyContext = createContext(defaultValue)`.
- 2. Pass it to the `useContext(MyContext)` Hook to read it in any child component, no matter how deep.
- 3. Wrap children into `` to provide it from a parent.
-* Context passes through any components in the middle.
-* Context lets you write components that "adapt to their surroundings".
-* Before you use context, try passing props or passing JSX as `children`.
+* يتيح السياق (Context) لمُكوّن (Component) توفير بعض المعلومات للشجرة بأكملها التي تقع أسفله.
+* لتمرير السياق (Context):
+1. قم بإنشائه وتصديره باستخدام `export const MyContext = createContext(defaultValue)`.
+2. مرره إلى الخطاف (Hook) عبر `useContext(MyContext)` لقراءته في أي مُكوّن (Component) ابن، بغض النظر عن مدى عمقه.
+3. غلف الأبناء (children) داخل `` لتوفيره من مُكوّن أب (parent component).
+
+
+* يمر السياق (Context) عبر أي مُكوّنات (Components) وسيطة في المنتصف.
+* يتيح لك السياق (Context) كتابة مُكوّنات (Components) "تتكيف مع محيطها".
+* قبل استخدام السياق (Context)، جرب تمرير الخصائص (props) أو تمرير JSX كـ `children`.
-#### Replace prop drilling with context {/*replace-prop-drilling-with-context*/}
+#### استبدال التمرير العميق للخصائص باستخدام السياق {/*replace-prop-drilling-with-context*/}
-In this example, toggling the checkbox changes the `imageSize` prop passed to each ``. The checkbox state is held in the top-level `App` component, but each `` needs to be aware of it.
+في هذا المثال، يؤدي تبديل مربع الاختيار (checkbox) إلى تغيير الخاصية (prop) المسماة `imageSize` والممررة إلى كل مُكوّن ``. يتم الاحتفاظ بحالة (state) مربع الاختيار في المُكوّن ذي المستوى الأعلى `App`، ولكن كل `` بحاجة إلى أن يكون على دراية بها.
-Currently, `App` passes `imageSize` to `List`, which passes it to each `Place`, which passes it to the `PlaceImage`. Remove the `imageSize` prop, and instead pass it from the `App` component directly to `PlaceImage`.
+حالياً، يمرر الـ `App` الخاصية `imageSize` إلى `List`، والذي يمررها إلى كل `Place`، والذي بدوره يمررها إلى `PlaceImage`. قم بإزالة الخاصية (prop) `imageSize`، وبدلاً من ذلك مررها من المُكوّن (Component) `App` مباشرة إلى `PlaceImage`.
-You can declare context in `Context.js`.
+يمكنك التصريح عن السياق (Context) في الملف `Context.js`.
@@ -905,7 +951,7 @@ export default function App() {
setIsLarge(e.target.checked);
}}
/>
- Use large images
+ استخدام صور كبيرة
@@ -950,59 +996,63 @@ function PlaceImage({ place, imageSize }) {
/>
);
}
+
```
```js src/Context.js
+
```
```js src/data.js
export const places = [{
id: 0,
- name: 'Bo-Kaap in Cape Town, South Africa',
- description: 'The tradition of choosing bright colors for houses began in the late 20th century.',
- imageId: 'K9HVAGH'
+ name: 'مدينة صنعاء القديمة، اليمن',
+ description: 'تتميز بطراز معماري فريد ومبانٍ مزينة بـ "القمرية".',
+ imageId: 'K9HVAGH'
}, {
id: 1,
- name: 'Rainbow Village in Taichung, Taiwan',
- description: 'To save the houses from demolition, Huang Yung-Fu, a local resident, painted all 1,200 of them in 1924.',
+ name: 'البتراء (المدينة الوردية)، الأردن',
+ description: 'مدينة تاريخية منحوتة في الصخر، وتُعد واحدة من عجائب الدنيا السبع الجديدة.',
imageId: '9EAYZrt'
}, {
id: 2,
- name: 'Macromural de Pachuca, Mexico',
- description: 'One of the largest murals in the world covering homes in a hillside neighborhood.',
+ name: 'أهرامات الجيزة، مصر',
+ description: 'من أقدم المعالم التاريخية في العالم، وتُعد شاهداً على عظمة الحضارة الفرعونية.',
imageId: 'DgXHVwu'
}, {
id: 3,
- name: 'Selarón Staircase in Rio de Janeiro, Brazil',
- description: 'This landmark was created by Jorge Selarón, a Chilean-born artist, as a "tribute to the Brazilian people."',
+ name: 'العُلا (مدائن صالح)، السعودية',
+ description: 'موقع أثري مذهل يتميز بالواجهات الصخرية المنحوتة بدقة وسط الطبيعة الصحراوية.',
imageId: 'aeO3rpI'
}, {
id: 4,
- name: 'Burano, Italy',
- description: 'The houses are painted following a specific color system dating back to 16th century.',
+ name: 'شفشاون (المدينة الزرقاء)، المغرب',
+ description: 'مدينة جبلية ساحرة تتميز بمبانيها وشوارعها المطلية بتدرجات اللون الأزرق.',
imageId: 'kxsph5C'
}, {
id: 5,
- name: 'Chefchaouen, Marocco',
- description: 'There are a few theories on why the houses are painted blue, including that the color repels mosquitos or that it symbolizes sky and heaven.',
+ name: 'برج خليفة في دبي، الإمارات',
+ description: 'أطول مبنى في العالم، ويُعد تحفة معمارية وهندسية حديثة.',
imageId: 'rTqKo46'
}, {
id: 6,
- name: 'Gamcheon Culture Village in Busan, South Korea',
- description: 'In 2009, the village was converted into a cultural hub by painting the houses and featuring exhibitions and art installations.',
+ name: 'قلعة بعلبك، لبنان',
+ description: 'تضم واحدة من أضخم وأفضل الهياكل الرومانية المحفوظة في العالم.',
imageId: 'ZfQOOzf'
}];
+
```
```js src/utils.js
export function getImageUrl(place) {
return (
- 'https://i.imgur.com/' +
+ '[https://i.imgur.com/](https://i.imgur.com/)' +
place.imageId +
'l.jpg'
);
}
+
```
```css
@@ -1014,15 +1064,16 @@ li {
gap: 20px;
align-items: center;
}
+
```
-Remove `imageSize` prop from all the components.
+قم بإزالة الخاصية (prop) `imageSize` من جميع المُكوّنات (Components).
-Create and export `ImageSizeContext` from `Context.js`. Then wrap the List into `` to pass the value down, and `useContext(ImageSizeContext)` to read it in the `PlaceImage`:
+قم بإنشاء وتصدير `ImageSizeContext` من `Context.js`. ثم قم بتغليف المُكوّن `List` داخل `` لتمرير القيمة للأسفل، واستخدم `useContext(ImageSizeContext)` لقراءتها داخل `PlaceImage`:
@@ -1047,7 +1098,7 @@ export default function App() {
setIsLarge(e.target.checked);
}}
/>
- Use large images
+ استخدام صور كبيرة
@@ -1087,61 +1138,65 @@ function PlaceImage({ place }) {
/>
);
}
+
```
```js src/Context.js
import { createContext } from 'react';
export const ImageSizeContext = createContext(500);
+
```
```js src/data.js
export const places = [{
id: 0,
- name: 'Bo-Kaap in Cape Town, South Africa',
- description: 'The tradition of choosing bright colors for houses began in the late 20th century.',
- imageId: 'K9HVAGH'
+ name: 'مدينة صنعاء القديمة، اليمن',
+ description: 'تتميز بطراز معماري فريد ومبانٍ مزينة بـ "القمرية".',
+ imageId: 'K9HVAGH'
}, {
id: 1,
- name: 'Rainbow Village in Taichung, Taiwan',
- description: 'To save the houses from demolition, Huang Yung-Fu, a local resident, painted all 1,200 of them in 1924.',
+ name: 'البتراء (المدينة الوردية)، الأردن',
+ description: 'مدينة تاريخية منحوتة في الصخر، وتُعد واحدة من عجائب الدنيا السبع الجديدة.',
imageId: '9EAYZrt'
}, {
id: 2,
- name: 'Macromural de Pachuca, Mexico',
- description: 'One of the largest murals in the world covering homes in a hillside neighborhood.',
+ name: 'أهرامات الجيزة، مصر',
+ description: 'من أقدم المعالم التاريخية في العالم، وتُعد شاهداً على عظمة الحضارة الفرعونية.',
imageId: 'DgXHVwu'
}, {
id: 3,
- name: 'Selarón Staircase in Rio de Janeiro, Brazil',
- description: 'This landmark was created by Jorge Selarón, a Chilean-born artist, as a "tribute to the Brazilian people".',
+ name: 'العُلا (مدائن صالح)، السعودية',
+ description: 'موقع أثري مذهل يتميز بالواجهات الصخرية المنحوتة بدقة وسط الطبيعة الصحراوية.',
imageId: 'aeO3rpI'
}, {
id: 4,
- name: 'Burano, Italy',
- description: 'The houses are painted following a specific color system dating back to 16th century.',
+ name: 'شفشاون (المدينة الزرقاء)، المغرب',
+ description: 'مدينة جبلية ساحرة تتميز بمبانيها وشوارعها المطلية بتدرجات اللون الأزرق.',
imageId: 'kxsph5C'
}, {
id: 5,
- name: 'Chefchaouen, Marocco',
- description: 'There are a few theories on why the houses are painted blue, including that the color repels mosquitos or that it symbolizes sky and heaven.',
+ name: 'برج خليفة في دبي، الإمارات',
+ description: 'أطول مبنى في العالم، ويُعد تحفة معمارية وهندسية حديثة.',
imageId: 'rTqKo46'
}, {
id: 6,
- name: 'Gamcheon Culture Village in Busan, South Korea',
- description: 'In 2009, the village was converted into a cultural hub by painting the houses and featuring exhibitions and art installations.',
+ name: 'قلعة بعلبك، لبنان',
+ description: 'تضم واحدة من أضخم وأفضل الهياكل الرومانية المحفوظة في العالم.',
imageId: 'ZfQOOzf'
}];
+
```
```js src/utils.js
export function getImageUrl(place) {
return (
- 'https://i.imgur.com/' +
+ '[https://i.imgur.com/](https://i.imgur.com/)' +
place.imageId +
'l.jpg'
);
}
+
```
```css
@@ -1153,11 +1208,12 @@ li {
gap: 20px;
align-items: center;
}
+
```
-Note how components in the middle don't need to pass `imageSize` anymore.
+لاحظ كيف أن المُكوّنات (Components) في المنتصف لم تعد بحاجة إلى تمرير `imageSize` بعد الآن.
diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index 1ff5be72e..189722405 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -187,7 +187,7 @@
"path": "/learn/extracting-state-logic-into-a-reducer"
},
{
- "title": "Passing Data Deeply with Context",
+ "title": "تمرير البيانات بعمق باستخدام السياق (Context)",
"path": "/learn/passing-data-deeply-with-context"
},
{