translate creating-a-react-app

Author: binhunaish

src/content/learn/creating-a-react-app.md

@@ -1,78 +1,78 @@
 ---
-title: Creating a React App
+title: إنشاء تطبيق React
 ---
 
 <Intro>
 
-If you want to build a new app or website with React, we recommend starting with a framework.
+إذا رغبت في إنشاء تطبيق أو موقع جديد باستخدام React، فنوصي بالبدء باستخدام إطار عمل.
 
 </Intro>
 
-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).
+إذا كانت متطلبات تطبيقك لا تُلبَّى جيدًا بالأُطر الحالية، أو كنت تفضّل بناء إطارك الخاص، أو أردت فقط تعلم أساسيات تطبيق React، يمكنك [بناء تطبيق React من الصفر](/learn/build-a-react-app-from-scratch).
 
-## Full-stack frameworks {/*full-stack-frameworks*/}
+## الأُطر الشاملة (Full-stack) {/*full-stack-frameworks*/}
 
-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.
+تدعم هذه الأُطر الموصى بها جميع الميزات التي تحتاجها لنشر تطبيقك وتوسيعه في بيئة الإنتاج. لقد دمجت أحدث ميزات React وتستفيد من بنية React.
 
 <Note>
 
-#### Full-stack frameworks do not require a server. {/*react-frameworks-do-not-require-a-server*/}
+#### لا تتطلب الأُطر الشاملة وجود خادم. {/*react-frameworks-do-not-require-a-server*/}
 
-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.
+تدعم جميع الأُطر المدرجة في هذه الصفحة التصيير على جانب العميل ([CSR](https://developer.mozilla.org/en-US/docs/Glossary/CSR))، وتطبيقات الصفحة الواحدة ([SPA](https://developer.mozilla.org/en-US/docs/Glossary/SPA))، وتوليد المواقع الثابتة ([SSG](https://developer.mozilla.org/en-US/docs/Glossary/SSG)). يمكن نشر هذه التطبيقات على شبكة توصيل محتوى ([CDN](https://developer.mozilla.org/en-US/docs/Glossary/CDN)) أو على خدمات استضافة ثابتة دون الحاجة إلى خادم. بالإضافة إلى ذلك، تتيح هذه الأُطر إضافة التصيير على الخادم على مستوى المسار عندما يكون ذلك مناسبًا لحالة الاستخدام الخاصة بك.
 
-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.
+هذا يمكّنك من البدء بتطبيق طرف-عميل فقط، وإذا تغيرت احتياجاتك لاحقًا يمكنك تفعيل ميزات الخادم لمسارات معينة دون إعادة كتابة التطبيق بأكمله. راجع وثائق إطار عملك لتكوين استراتيجية التصيير.
 
 </Note>
 
 ### Next.js (App Router) {/*nextjs-app-router*/}
 
-**[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.**
+**[App Router في Next.js](https://nextjs.org/docs) هو إطار React يستفيد بالكامل من بنية React لتمكين تطبيقات React متكاملة (Full-stack).**
 
 <TerminalBlock>
 npx create-next-app@latest
 </TerminalBlock>
 
-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.
+يُطوَّر Next.js ويُصان بواسطة [Vercel](https://vercel.com/). يمكنك [نشر تطبيق Next.js](https://nextjs.org/docs/app/building-your-application/deploying) إلى أي مزود استضافة يدعم Node.js أو حاويات Docker، أو إلى خادم خاص بك. كما يدعم Next.js أيضًا [التصدير الثابت](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) الذي لا يتطلب خادمًا.
 
-### React Router (v7) {/*react-router-v7*/}
+### React Router (الإصدار 7) {/*react-router-v7*/}
 
-**[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.
+**[React Router](https://reactrouter.com/start/framework/installation) هو أشهر مكتبة توجيه (routing) في React ويمكن ربطه مع Vite لإنشاء إطار React متكامل.** يركّز على واجهات برمجة الويب القياسية ويحتوي على عدة [قوالب جاهزة للنشر](https://github.com/remix-run/react-router-templates) لأنظمة تشغيل جافاسكربت ومنصات مختلفة.
 
-To create a new React Router framework project, run:
+لإنشاء مشروع إطار جديد باستخدام React Router، شغِّل:
 
 <TerminalBlock>
 npx create-react-router@latest
 </TerminalBlock>
 
-React Router is maintained by [Shopify](https://www.shopify.com).
+تُصان React Router بواسطة [Shopify](https://www.shopify.com).
 
-### Expo (for native apps) {/*expo*/}
+### Expo (للتطبيقات الأصلية) {/*expo*/}
 
-**[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:
+**[Expo](https://expo.dev/) هو إطار React يتيح لك إنشاء تطبيقات Android وiOS والويب بواجهات أصلية حقيقية.** يوفر Expo مجموعة أدوات SDK لـ [React Native](https://reactnative.dev/) تجعل الأجزاء الأصلية أسهل في الاستخدام. لإنشاء مشروع Expo جديد، شغّل:
 
 <TerminalBlock>
 npx create-expo-app@latest
 </TerminalBlock>
 
-If you're new to Expo, check out the [Expo tutorial](https://docs.expo.dev/tutorial/introduction/).
+إذا كنت جديدًا على Expo، اطلع على [دليل Expo التعليمي](https://docs.expo.dev/tutorial/introduction/).
 
-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.
+يُصان Expo بواسطة [Expo (الشركة)](https://expo.dev/about). بناء التطبيقات باستخدام Expo مجاني، ويمكنك تقديمها إلى متاجر Google وApple بدون قيود. كما يوفر Expo خدمات سحابية مدفوعة اختيارية.
 
 
-## Other frameworks {/*other-frameworks*/}
+## أُطر أخرى {/*other-frameworks*/}
 
-There are other up-and-coming frameworks that are working towards our full stack React vision:
+هناك أُطر ناشئة أخرى تعمل نحو رؤية React الشاملة (full-stack):
 
-- [TanStack Start (Beta)](https://tanstack.com/start/): 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.
-- [RedwoodSDK](https://rwsdk.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.
+- [TanStack Start (Beta)](https://tanstack.com/start/): TanStack Start هو إطار React شامل يعتمد على TanStack Router. يوفر SSR كاملًا، والبث (streaming)، ودوال الخادم، والتجميع، والمزيد باستخدام أدوات مثل Nitro وVite.
+- [RedwoodSDK](https://rwsdk.com/): Redwood هو إطار React شامل يأتي مع العديد من الحزم والتهيئات المسبقة التي تُسهِم في بناء تطبيقات ويب متكاملة بسهولة.
 
 <DeepDive>
 
-#### Which features make up the React team’s full-stack architecture vision? {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/}
+#### ما هي الميزات التي تشكّل رؤية فريق React لبنية Full-stack؟ {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/}
 
-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.
+يقوم مُجمِّع App Router في Next.js بتنفيذ مواصفة [مكونات خادم React (React Server Components)](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md) بشكل كامل. يتيح هذا مزج المكونات التي تعمل أثناء وقت البناء، والمكونات الخاصة بالخادم، والمكونات التفاعلية داخل شجرة React واحدة.
 
-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:
+على سبيل المثال، يمكنك كتابة مكوّن يعمل على الخادم فقط كدالة `async` تقرأ من قاعدة بيانات أو من ملف، ثم تمرّر البيانات إلى مكوناتك التفاعلية:
 
 ```js
 // This component runs *only* on the server (or during the build).
@@ -88,26 +88,26 @@ async function Talks({ confId }) {
 }
 ```
 
-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:
+يُدَوِّج App Router في Next.js أيضًا دمج [جلب البيانات مع Suspense](/blog/2022/03/29/react-v18#suspense-in-data-frameworks). يتيح لك ذلك تحديد حالة تحميل (مثل عنصر نائب skeleton) لأجزاء مختلفة من واجهة المستخدم مباشرةً داخل شجرة React:
 
 ```js
 <Suspense fallback={<TalksLoading />}>
   <Talks confId={conf.id} />
 </Suspense>
 ```
 
-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.
+تُعدّ مكونات الخادم وSuspense ميزات في React نفسها وليس ميزات حصرية لـ Next.js. ومع ذلك، يتطلب اعتمادها على مستوى الإطار موافقة وجهد تنفيذ غير تافه. في الوقت الحالي، يُعتبر App Router في Next.js التنفيذ الأكثر اكتمالًا. يعمل فريق React مع مطوّري المجمعات لتسهيل تنفيذ هذه الميزات في الجيل القادم من الأُطر.
 
 </DeepDive>
 
-## Start From Scratch {/*start-from-scratch*/}
+## البدء من الصفر {/*start-from-scratch*/}
 
-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.
+إذا كانت متطلبات تطبيقك لا تُلبَّى جيدًا بالأُطر الحالية، أو كنت تفضّل بناء إطارك الخاص، أو أردت تعلم أساسيات تطبيق React، فهناك خيارات متاحة لبدء مشروع React من الصفر.
 
-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.  
+البدء من الصفر يمنحك مرونة أكبر، لكنه يتطلب منك اتخاذ قرارات حول الأدوات التي ستستخدمها للتوجيه، وجلب البيانات، وأنماط الاستخدام الشائعة الأخرى. إنه يشبه إلى حد بعيد بناء إطار عمل بنفسك بدلًا من استخدام إطار جاهز. الأُطر التي نوصي بها لديها حلول مدمجة لهذه المشكلات.
 
-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/).
+إذا أردت بناء حلولك بنفسك، اطلع على دليلنا [لبناء تطبيق React من الصفر](/learn/build-a-react-app-from-scratch) للحصول على تعليمات حول إعداد مشروع React جديد بدءًا من أداة بناء مثل [Vite](https://vite.dev/)، أو [Parcel](https://parceljs.org/)، أو [Rsbuild](https://rsbuild.dev/).
 
 -----
 
-_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+)._
+_إذا كنت مؤلف إطار عمل وترغب في إدراجه في هذه الصفحة، [نرجو إعلامنا](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+)._