You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Translate various documentation files to Arabic, including sections on TypeScript usage, invalid ARIA prop warnings, deprecation warnings for react-dom/test-utils and react-test-renderer, and special props warnings.
In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire.
3
+
في بيئة الإنتاج المُصغَّرة من React، نتجنب إرسال رسائل الخطأ الكاملة من أجل تقليل عدد البايتات المُرسَلة عبر الشبكة.
4
4
5
5
</Intro>
6
6
7
-
We highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, this page will reassemble the original error message.
7
+
نوصي بشدة باستخدام بيئة التطوير محليًا عند تصحيح أخطاء تطبيقك لأنها تتعقب معلومات تصحيح إضافية وتوفر تحذيرات مفيدة حول المشاكل المحتملة في تطبيقاتك، ولكن إذا واجهت استثناءً أثناء استخدام بيئة الإنتاج، فستقوم هذه الصفحة بإعادة تجميع رسالة الخطأ الأصلية.
8
8
9
-
The full text of the error you just encountered is:
9
+
النص الكامل للخطأ الذي واجهته للتو هو:
10
10
11
11
<ErrorDecoder />
12
12
13
-
This error occurs when you pass a BigInt value from a Server Component to a Client Component.
13
+
يحدث هذا الخطأ عندما تمرر قيمة BigInt من Server Component إلى Client Component.
In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire.
3
+
في بيئة الإنتاج المُصغَّرة من React، نتجنب إرسال رسائل الخطأ الكاملة من أجل تقليل عدد البايتات المُرسَلة عبر الشبكة.
4
4
5
5
</Intro>
6
6
7
-
We highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, this page will reassemble the original error message.
7
+
نوصي بشدة باستخدام بيئة التطوير محليًا عند تصحيح أخطاء تطبيقك لأنها تتعقب معلومات تصحيح إضافية وتوفر تحذيرات مفيدة حول المشاكل المحتملة في تطبيقاتك، ولكن إذا واجهت استثناءً أثناء استخدام بيئة الإنتاج، فستقوم هذه الصفحة بإعادة تجميع رسالة الخطأ الأصلية.
8
8
9
-
The full text of the error you just encountered is:
In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire.
3
+
في بيئة الإنتاج المُصغَّرة من React، نتجنب إرسال رسائل الخطأ الكاملة من أجل تقليل عدد البايتات المُرسَلة عبر الشبكة.
4
4
5
5
</Intro>
6
6
7
7
8
-
We highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, the error message will include just a link to the docs for the error.
8
+
نوصي بشدة باستخدام بيئة التطوير محليًا عند تصحيح أخطاء تطبيقك لأنها تتعقب معلومات تصحيح إضافية وتوفر تحذيرات مفيدة حول المشاكل المحتملة في تطبيقاتك، ولكن إذا واجهت استثناءً أثناء استخدام بيئة الإنتاج، فستتضمن رسالة الخطأ فقط رابطًا إلى المستندات الخاصة بالخطأ.
9
9
10
-
For an example, see: [https://ar.react.dev/errors/149](/errors/421).
10
+
للحصول على مثال، انظر: [https://ar.react.dev/errors/149](/errors/421).
If you want to build a new app or website with React, we recommend starting with a framework.
7
+
إذا كنت تريد بناء تطبيق أو موقع ويب جديد باستخدام React، فإننا نوصي بالبدء بإطار عمل.
8
8
9
9
</Intro>
10
10
11
-
If your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, you can [build a React app from scratch](/learn/build-a-react-app-from-scratch).
11
+
إذا كان تطبيقك يحتوي على قيود لا تخدمها أطر العمل الموجودة بشكل جيد، أو تفضل بناء إطار العمل الخاص بك، أو تريد فقط تعلم أساسيات تطبيق React، يمكنك [بناء تطبيق React من الصفر](/learn/build-a-react-app-from-scratch).
## أطر عمل Full-stack {/*full-stack-frameworks*/} {/*production-grade-react-frameworks*/}
14
14
15
-
These recommended frameworks support all the features you need to deploy and scale your app in production. They have integrated the latest React features and take advantage of React’s architecture.
15
+
تدعم أطر العمل الموصى بها هذه جميع الميزات التي تحتاجها لنشر تطبيقك وتوسيع نطاقه في الإنتاج. لقد دمجت أحدث ميزات React وتستفيد من بنية React.
16
16
17
17
<Note>
18
18
19
-
#### Full-stack frameworks do not require a server. {/*react-frameworks-do-not-require-a-server*/}
19
+
#### أطر عمل Full-stack لا تتطلب خادمًا. {/*react-frameworks-do-not-require-a-server*/}
20
20
21
-
All the frameworks on this page support client-side rendering ([CSR](https://developer.mozilla.org/en-US/docs/Glossary/CSR)), single-page apps ([SPA](https://developer.mozilla.org/en-US/docs/Glossary/SPA)), and static-site generation ([SSG](https://developer.mozilla.org/en-US/docs/Glossary/SSG)). These apps can be deployed to a [CDN](https://developer.mozilla.org/en-US/docs/Glossary/CDN)or static hosting service without a server. Additionally, these frameworks allow you to add server-side rendering on a per-route basis, when it makes sense for your use case.
21
+
جميع أطر العمل في هذه الصفحة تدعم client-side rendering ([CSR](https://developer.mozilla.org/en-US/docs/Glossary/CSR))، وتطبيقات single-page ([SPA](https://developer.mozilla.org/en-US/docs/Glossary/SPA))، و static-site generation ([SSG](https://developer.mozilla.org/en-US/docs/Glossary/SSG)). يمكن نشر هذه التطبيقات على [CDN](https://developer.mozilla.org/en-US/docs/Glossary/CDN)أو خدمة استضافة ثابتة بدون خادم. بالإضافة إلى ذلك، تتيح لك أطر العمل هذه إضافة server-side rendering على أساس كل route، عندما يكون ذلك منطقيًا لحالتك الاستخدامية.
22
22
23
-
This allows you to start with a client-only app, and if your needs change later, you can opt-in to using server features on individual routes without rewriting your app. See your framework's documentation for configuring the rendering strategy.
23
+
يتيح لك هذا البدء بتطبيق client-only، وإذا تغيرت احتياجاتك لاحقًا، يمكنك الاشتراك في استخدام ميزات server على routes فردية دون إعادة كتابة تطبيقك. راجع مستندات إطار العمل الخاص بك لتكوين استراتيجية التصيير.
24
24
25
25
</Note>
26
26
27
27
### Next.js (App Router) {/*nextjs-app-router*/}
28
28
29
-
**[Next.js's App Router](https://nextjs.org/docs)is a React framework that takes full advantage of React's architecture to enable full-stack React apps.**
29
+
**[Next.js's App Router](https://nextjs.org/docs)هو إطار عمل React يستفيد بشكل كامل من بنية React لتمكين تطبيقات React full-stack.**
30
30
31
31
<TerminalBlock>
32
32
npx create-next-app@latest
33
33
</TerminalBlock>
34
34
35
-
Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/app/building-your-application/deploying)to any hosting provider that supports Node.js or Docker containers, or to your own server. Next.js also supports [static export](https://nextjs.org/docs/app/building-your-application/deploying/static-exports)which doesn't require a server.
35
+
يتم صيانة Next.js بواسطة [Vercel](https://vercel.com/). يمكنك [نشر تطبيق Next.js](https://nextjs.org/docs/app/building-your-application/deploying)على أي مزود استضافة يدعم Node.js أو حاويات Docker، أو على خادمك الخاص. يدعم Next.js أيضًا [static export](https://nextjs.org/docs/app/building-your-application/deploying/static-exports)الذي لا يتطلب خادمًا.
36
36
37
37
### React Router (v7) {/*react-router-v7*/}
38
38
39
-
**[React Router](https://reactrouter.com/start/framework/installation)is the most popular routing library for React and can be paired with Vite to create a full-stack React framework**. It emphasizes standard Web APIs and has several [ready to deploy templates](https://github.com/remix-run/react-router-templates)for various JavaScript runtimes and platforms.
39
+
**[React Router](https://reactrouter.com/start/framework/installation)هي مكتبة التوجيه الأكثر شيوعًا لـ React ويمكن دمجها مع Vite لإنشاء إطار عمل React full-stack**. إنها تركز على Web APIs القياسية ولديها العديد من [القوالب الجاهزة للنشر](https://github.com/remix-run/react-router-templates)لـ runtimes و platforms مختلفة من JavaScript.
40
40
41
-
To create a new React Router framework project, run:
41
+
لإنشاء مشروع إطار عمل React Router جديد، قم بتشغيل:
42
42
43
43
<TerminalBlock>
44
44
npx create-react-router@latest
45
45
</TerminalBlock>
46
46
47
-
React Router is maintained by[Shopify](https://www.shopify.com).
47
+
يتم صيانة React Router بواسطة[Shopify](https://www.shopify.com).
48
48
49
-
### Expo (for native apps) {/*expo*/}
49
+
### Expo (للتطبيقات الأصلية) {/*expo*/}
50
50
51
-
**[Expo](https://expo.dev/)is a React framework that lets you create universal Android, iOS, and web apps with truly native UIs.**It provides an SDK for[React Native](https://reactnative.dev/)that makes the native parts easier to use. To create a new Expo project, run:
51
+
**[Expo](https://expo.dev/)هو إطار عمل React يتيح لك إنشاء تطبيقات Android و iOS و web عالمية مع واجهات مستخدم أصلية حقًا.**يوفر SDK لـ[React Native](https://reactnative.dev/)مما يجعل الأجزاء الأصلية أسهل في الاستخدام. لإنشاء مشروع Expo جديد، قم بتشغيل:
52
52
53
53
<TerminalBlock>
54
54
npx create-expo-app@latest
55
55
</TerminalBlock>
56
56
57
-
If you're new to Expo, check out the [Expo tutorial](https://docs.expo.dev/tutorial/introduction/).
57
+
إذا كنت جديدًا على Expo، تحقق من [دليل Expo التعليمي](https://docs.expo.dev/tutorial/introduction/).
58
58
59
-
Expo is maintained by[Expo (the company)](https://expo.dev/about). Building apps with Expo is free, and you can submit them to the Google and Apple app stores without restrictions. Expo additionally provides opt-in paid cloud services.
59
+
يتم صيانة Expo بواسطة[Expo (الشركة)](https://expo.dev/about). بناء التطبيقات باستخدام Expo مجاني، ويمكنك تقديمها إلى متاجر Google و Apple بدون قيود. يوفر Expo أيضًا خدمات سحابية مدفوعة اختيارية.
60
60
61
61
62
-
## Other frameworks {/*other-frameworks*/} {/*bleeding-edge-react-frameworks*/}
62
+
## أطر عمل أخرى {/*other-frameworks*/} {/*bleeding-edge-react-frameworks*/}
63
63
64
-
There are other up-and-coming frameworks that are working towards our full stack React vision:
64
+
هناك أطر عمل أخرى ناشئة تعمل نحو رؤيتنا لـ full stack React:
65
65
66
-
-[TanStack Start (Beta)](https://tanstack.com/): TanStack Start is a full-stack React framework powered by TanStack Router. It provides a full-document SSR, streaming, server functions, bundling, and more using tools like Nitro and Vite.
67
-
-[RedwoodJS](https://redwoodjs.com/): Redwood is a full stack React framework with lots of pre-installed packages and configuration that makes it easy to build full-stack web applications.
66
+
-[TanStack Start (Beta)](https://tanstack.com/): TanStack Start هو إطار عمل React full-stack مدعوم بـ TanStack Router. يوفر full-document SSR و streaming و server functions و bundling والمزيد باستخدام أدوات مثل Nitro و Vite.
67
+
-[RedwoodJS](https://redwoodjs.com/): Redwood هو إطار عمل React full stack مع العديد من الحزم والتكوينات المثبتة مسبقًا مما يجعل من السهل بناء تطبيقات ويب full-stack.
68
68
69
69
<DeepDive>
70
70
71
-
#### Which features make up the React team’s full-stack architecture vision? {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/}
71
+
#### ما هي الميزات التي تشكل رؤية فريق React لبنية full-stack؟ {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/}
72
72
73
-
Next.js's App Router bundler fully implements the official [React Server Components specification](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). This lets you mix build-time, server-only, and interactive components in a single React tree.
73
+
يطبق bundler في Next.js's App Router بشكل كامل [مواصفات React Server Components](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md) الرسمية. يتيح لك هذا مزج مكونات build-time و server-only والمكونات التفاعلية في شجرة React واحدة.
74
74
75
-
For example, you can write a server-only React component as an `async`function that reads from a database or from a file. Then you can pass data down from it to your interactive components:
75
+
على سبيل المثال، يمكنك كتابة مكون React server-only كدالة `async`تقرأ من قاعدة بيانات أو من ملف. ثم يمكنك تمرير البيانات منها إلى مكوناتك التفاعلية:
76
76
77
77
```js
78
78
// This component runs *only* on the server (or during the build).
@@ -88,26 +88,26 @@ async function Talks({ confId }) {
88
88
}
89
89
```
90
90
91
-
Next.js's App Router also integrates [data fetching with Suspense](/blog/2022/03/29/react-v18#suspense-in-data-frameworks). This lets you specify a loading state (like a skeleton placeholder) for different parts of your user interface directly in your React tree:
91
+
يدمج Next.js's App Router أيضًا [جلب البيانات مع Suspense](/blog/2022/03/29/react-v18#suspense-in-data-frameworks). يتيح لك هذا تحديد حالة تحميل (مثل skeleton placeholder) لأجزاء مختلفة من واجهة المستخدم مباشرة في شجرة React:
92
92
93
93
```js
94
94
<Suspense fallback={<TalksLoading />}>
95
95
<Talks confId={conf.id} />
96
96
</Suspense>
97
97
```
98
98
99
-
Server Components and Suspense are React features rather than Next.js features. However, adopting them at the framework level requires buy-in and non-trivial implementation work. At the moment, the Next.js App Router is the most complete implementation. The React team is working with bundler developers to make these features easier to implement in the next generation of frameworks.
99
+
Server Components و Suspense هي ميزات React وليست ميزات Next.js. ومع ذلك، فإن اعتمادها على مستوى إطار العمل يتطلب دعمًا وعملاً تنفيذيًا غير تافه. في الوقت الحالي، يعتبر Next.js App Router هو التطبيق الأكثر اكتمالاً. يعمل فريق React مع مطوري bundler لجعل هذه الميزات أسهل في التنفيذ في الجيل التالي من أطر العمل.
100
100
101
101
</DeepDive>
102
102
103
-
## Start From Scratch {/*start-from-scratch*/} {/*can-i-use-react-without-a-framework*/}
103
+
## ابدأ من الصفر {/*start-from-scratch*/} {/*can-i-use-react-without-a-framework*/}
104
104
105
-
If your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, there are other options available for starting a React project from scratch.
105
+
إذا كان تطبيقك يحتوي على قيود لا تخدمها أطر العمل الموجودة بشكل جيد، أو تفضل بناء إطار العمل الخاص بك، أو تريد فقط تعلم أساسيات تطبيق React، هناك خيارات أخرى متاحة لبدء مشروع React من الصفر.
106
106
107
-
Starting from scratch gives you more flexibility, but does require that you make choices on which tools to use for routing, data fetching, and other common usage patterns. It's a lot like building your own framework, instead of using a framework that already exists. The [frameworks we recommend](#full-stack-frameworks)have built-in solutions for these problems.
107
+
البدء من الصفر يمنحك مرونة أكبر، ولكنه يتطلب منك اتخاذ قرارات حول الأدوات التي ستستخدمها للتوجيه وجلب البيانات وأنماط الاستخدام الشائعة الأخرى. إنه يشبه كثيرًا بناء إطار العمل الخاص بك، بدلاً من استخدام إطار عمل موجود بالفعل. [أطر العمل التي نوصي بها](#full-stack-frameworks)لديها حلول مدمجة لهذه المشاكل.
108
108
109
-
If you want to build your own solutions, see our guide to [build a React app from Scratch](/learn/build-a-react-app-from-scratch)for instructions on how to set up a new React project starting with a build tool like [Vite](https://vite.dev/), [Parcel](https://parceljs.org/), or[RSbuild](https://rsbuild.dev/).
109
+
إذا كنت تريد بناء الحلول الخاصة بك، راجع دليلنا [لبناء تطبيق React من الصفر](/learn/build-a-react-app-from-scratch)للحصول على تعليمات حول كيفية إعداد مشروع React جديد بدءًا من أداة build مثل [Vite](https://vite.dev/) أو [Parcel](https://parceljs.org/) أو[RSbuild](https://rsbuild.dev/).
110
110
111
111
-----
112
112
113
-
_If you’re a framework author interested in being included on this page, [please let us know](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+)._
113
+
_إذا كنت مؤلف إطار عمل مهتمًا بإدراجه في هذه الصفحة، [يرجى إعلامنا](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+)._
0 commit comments