From 54e733ca56d2f816a7af535fe8965ccf5ce8d17d Mon Sep 17 00:00:00 2001 From: asemelkhouli20 Date: Thu, 18 Sep 2025 12:24:40 +0300 Subject: [PATCH] complete --- .../learn/start-a-new-react-project.md | 86 ++++++++++--------- 1 file changed, 44 insertions(+), 42 deletions(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 5c407a56b..8db5b81ec 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -1,123 +1,125 @@ --- -title: Start a New React Project +title: ابدأ مشروع React جديد --- -If you want to build a new app or a new website fully with React, we recommend picking one of the React-powered frameworks popular in the community. +إذا كنت تريد بناء تطبيق جديد أو موقع ويب جديد باستخدام React بشكل كامل، فنحن نوصي باختيار أحد الأُطر المبنية على React والشائعة في مجتمع المطورين. +يمكنك استخدام React بدون إطار عمل، لكننا وجدنا أن معظم التطبيقات والمواقع تنتهي بإنشاء حلول لمشاكل شائعة مثل تقسيم الشيفرة (code-splitting)، والتوجيه (routing)، وجلب البيانات (data fetching)، وتوليد ملفات HTML. هذه المشاكل شائعة بين جميع مكتبات واجهات المستخدم (UI libraries)، وليست خاصة بـ React فقط. -You can use React without a framework, however we’ve found that most apps and sites eventually build solutions to common problems such as code-splitting, routing, data fetching, and generating HTML. These problems are common to all UI libraries, not just React. - -By starting with a framework, you can get started with React quickly, and avoid essentially building your own framework later. +ومن خلال البدء باستخدام إطار عمل، يمكنك الانطلاق مع React بسرعة، وتجنب بناء إطار عمل خاص بك لاحقًا بشكل غير مقصود. -#### Can I use React without a framework? {/*can-i-use-react-without-a-framework*/} +#### هل يمكنني استخدام React دون الحاجة الى إطار عمل {/*can-i-use-react-without-a-framework*/} -You can definitely use React without a framework--that's how you'd [use React for a part of your page.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **However, if you're building a new app or a site fully with React, we recommend using a framework.** +يمكنك بالتأكيد إستخدام React بدون إطار عمل - فهذه بالفعل هي الطريقة التي سوف تبدأ بها عادة عند إضافة React تدريجيا إلى موقع موجود [إستخدام React في جزء من صفحتك.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **ومع ذلك، إذا كنت تبني تطبيقًا جديدًا أو موقعًا كاملاً باستخدام React، فنحن نوصي بإستخدام إطار عمل.** -Here's why. +إليك السبب. -Even if you don't need routing or data fetching at first, you'll likely want to add some libraries for them. As your JavaScript bundle grows with every new feature, you might have to figure out how to split code for every route individually. As your data fetching needs get more complex, you are likely to encounter server-client network waterfalls that make your app feel very slow. As your audience includes more users with poor network conditions and low-end devices, you might need to generate HTML from your components to display content early--either on the server, or during the build time. Changing your setup to run some of your code on the server or during the build can be very tricky. +حتى لو لم تكن بحاجة إلى التوجيه (routing) أو جلب البيانات (data fetching) في البداية، فمن المحتمل أن ترغب لاحقًا في إضافة بعض المكتبات لذلك. ومع ازدياد حجم حزمة JavaScript الخاصة بك مع كل ميزة جديدة، قد تضطر إلى التفكير في كيفية تقسيم الشيفرة (split code) لكل مسار على حدة. ومع تعقد احتياجاتك لجلب البيانات (data fetching)، من المحتمل أن تواجه ما يُعرف بـ (server-client network waterfalls) بين الخادم والعميل، مما يجعل تطبيقك يبدو بطيئًا جدًا. ومع زيادة جمهورك ليشمل مستخدمين لديهم شبكات ضعيفة وأجهزة منخفضة الأداء، قد تحتاج إلى توليد HTML من عناصر خاصة بك لعرض محتوى مسبق - سواء على الخادم أو أثناء عملية البناء. تغيير إعداداتك لتشغيل بعض الشيفرات على الخادم أو أثناء البناء يمكن أن يكون معقدًا جدًا. -**These problems are not React-specific. This is why Svelte has SvelteKit, Vue has Nuxt, and so on.** To solve these problems on your own, you'll need to integrate your bundler with your router and with your data fetching library. It's not hard to get an initial setup working, but there are a lot of subtleties involved in making an app that loads quickly even as it grows over time. You'll want to send down the minimal amount of app code but do so in a single client–server roundtrip, in parallel with any data required for the page. You'll likely want the page to be interactive before your JavaScript code even runs, to support progressive enhancement. You may want to generate a folder of fully static HTML files for your marketing pages that can be hosted anywhere and still work with JavaScript disabled. Building these capabilities yourself takes real work. +**هذه المشاكل ليست خاصة بـ React. لهذا السبب يحتوي Svelte على SvelteKit، وVue على Nuxt، الخ...** لحل هذه المشاكل بنفسك، سوف تحتاج إلى ربط أداة التجميع (bundler) الخاصة بك مع الموجه (router) ومكتبتك لجلب البيانات (data fetching). ليس من الصعب عمل إعداد أولي، لكن هناك العديد من التفاصيل الدقيقة لجل التطبيق يحمل بشكل أسرع حتى مع نمو التطبيق مع الوقت، قد ترغب في إرسال الحد الادنى من كود التطبيق لكن بطريقة تتيح رحلة واحدة بين السيرفر والعميل، بالتوازي مع أي بيانات مطلوبة للصفحة. من المحتمل أن ترغب في ان تكون الصفحة تفاعلية قبل ان يقوم JavaScript بالعمل، لدعم التحسين التدرجي (progressive enhancement). قد ترغب أيضًا في إنشاء مجلد يحتوي على ملفات HTML ثابة (static HTML files) لصفحات التسويق التي يمكن استضافتها في أي مكان وتعمل مع تعطيل JavaScript. بناء هذه القدرات بنفسك يتطلب جهد كبير. -**React frameworks on this page solve problems like these by default, with no extra work from your side.** They let you start very lean and then scale your app with your needs. Each React framework has a community, so finding answers to questions and upgrading tooling is easier. Frameworks also give structure to your code, helping you and others retain context and skills between different projects. Conversely, with a custom setup it's easier to get stuck on unsupported dependency versions, and you'll essentially end up creating your own framework—albeit one with no community or upgrade path (and if it's anything like the ones we've made in the past, more haphazardly designed). +**اطارت عمل React الموجودة في هذه الصفحة تحل هذه المشاكل بشكل افتراضي، دون أي جهد إضافي من جانبك.** تتيح لك هذه الاطارات البدء بطريقة بسيطة وخفيفة، ثم توسيع تطبيقك حسب احتياجاتك. لكل إطار React مجتمع خاص به، مما يسهل العثور على إجابات للأسئلة وتحديث الأدوات المستخدمة. كما تمنحك الأطارات بنية منظمة لكودك مما يساعدك أنت والآخرين على الاحتفاظ بالسياق والمهارات بين المشاريع المختلفة. بينما، مع الإعداد المخصص من الأسهل أن تواجه مشاكل مع إصدارات التبعيات غير المدعومة، وفي النهاية ستنتهي بإنشاء إطار عمل خاص بك—وإن كان بدون مجتمع داعم أو مسار ترقية، (وإذا كان مشابهًا لما أنشأناه في السابق، سيكون تصميمه أكثر عشوائية). -If your app has unusual constraints not served well by these frameworks, or you prefer to solve these problems yourself, you can roll your own custom setup with React. Grab `react` and `react-dom` from npm, set up your custom build process with a bundler like [Vite](https://vitejs.dev/) or [Parcel](https://parceljs.org/), and add other tools as you need them for routing, static generation or server-side rendering, and more. +إذا كان لتطبيقك قيود غير معتادة لا تلبيها هذه الأطر جيدًا، أو كنت تفضل حل هذه المشاكل بنفسك، يمكنك إنشاء إعداد مخصص باستخدام React. قم بتثبيت `react` و `react-dom` من npm، وأعد إعداد عملية البناء الخاصة بك باستخدام أداة تجميع مثل [Vite](https://vitejs.dev/) أو [Parcel](https://parceljs.org/)، وأضف الأدوات الأخرى حسب حاجتك للتوجيه (routing)، أو التوليد الثابت (static generation)، أو العرض من جانب الخادم (server-side rendering)، والمزيد. -## Production-grade React frameworks {/*production-grade-react-frameworks*/} +## إطارات React الجاهزة للإنتاج (Production-grade) {/*production-grade-react-frameworks*/} -These frameworks support all the features you need to deploy and scale your app in production and are working towards supporting our [full-stack architecture vision](#which-features-make-up-the-react-teams-full-stack-architecture-vision). All of the frameworks we recommend are open source with active communities for support, and can be deployed to your own server or a hosting provider. If you’re a framework author interested in being included on this list, [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+). +تدعم هذه الإطارات جميع المميزات التي تحتاجها لنشر وتوسيع تطبيقك في بيئة الإنتاج، وتعمل على دعم رؤيتنا للمعمارية الكاملة للتطبيقات [full-stack architecture vision](#which-features-make-up-the-react-teams-full-stack-architecture-vision). جميع الأطر التي نوصي بها مفتوحة المصدر ولها مجتمعات نشطة لدعم المستخدمين، ويمكن نشرها على خادمك الخاص أو على مزود استضافة. إذا كنت مؤلفًا لإطار عمل وترغب في إضافته إلى هذه القائمة، [يرجى إعلامنا](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+). ### Next.js {/*nextjs-pages-router*/} -**[Next.js' Pages Router](https://nextjs.org/) is a full-stack React framework.** It's versatile and lets you create React apps of any size--from a mostly static blog to a complex dynamic application. To create a new Next.js project, run in your terminal: +**[Next.js' Pages Router](https://nextjs.org/) هو إطار React كامل (full-stack).** يتميز بالمرونة ويتيح لك إنشاء تطبيقات React بأي حجم -- من مدونة ثابة الى تطبيق ديناميكي معقد. +لإنشاء مشروع Next.js جديد، قم بتنفيذ الأوامر التالية في terminal: npx create-next-app@latest -If you're new to Next.js, check out the [learn Next.js course.](https://nextjs.org/learn) +هل انت جديد على Next.js, إطلاع عليها [learn Next.js course.](https://nextjs.org/learn) -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 Node.js or serverless hosting, or to your own server. Next.js also supports a [static export](https://nextjs.org/docs/pages/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 أو إستضافة بدون خادم (serverless hosting), أو سيرفرك الخاص. Next.js ايضا تدعم [static export](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) والتي لا تتطلب سيرفر ### Remix {/*remix*/} -**[Remix](https://remix.run/) is a full-stack React framework with nested routing.** It lets you break your app into nested parts that can load data in parallel and refresh in response to the user actions. To create a new Remix project, run: +**[Remix](https://remix.run/) هو إطار React كامل (full-stack) مع nested routing.** يتيح لك تقسيم تطبيقك إلى أجزاء متداخلة يمكنها تحميل البيانات بالتوازي (parallel) والتحديث لأستجابة (response) المستخدم. +لإنشاء مشروع Remix جديد، قم بتنفيذ الأوامر التالية في terminal: npx create-remix -If you're new to Remix, check out the Remix [blog tutorial](https://remix.run/docs/en/main/tutorials/blog) (short) and [app tutorial](https://remix.run/docs/en/main/tutorials/jokes) (long). +هل انت جديد على Remix, إطلاع عليها [blog tutorial](https://remix.run/docs/en/main/tutorials/blog) (قصير) و [app tutorial](https://remix.run/docs/en/main/tutorials/jokes) (مفصل). -Remix is maintained by [Shopify](https://www.shopify.com/). When you create a Remix project, you need to [pick your deployment target](https://remix.run/docs/en/main/guides/deployment). You can deploy a Remix app to any Node.js or serverless hosting by using or writing an [adapter](https://remix.run/docs/en/main/other-api/adapter). +Remix يتم المحافظة عليها من قبل [Shopify](https://www.shopify.com/). عندما تقوم بإنشاء مشروع Remix, تحتاج [لإختيار هدف النشر](https://remix.run/docs/en/main/guides/deployment).يمكنك إطلاق تطبيق Remix على اي Node.js أو إستضافة بدون خادم (serverless hosting) عن طريق استخدام او كتابة [adapter](https://remix.run/docs/en/main/other-api/adapter). ### Gatsby {/*gatsby*/} -**[Gatsby](https://www.gatsbyjs.com/) is a React framework for fast CMS-backed websites.** Its rich plugin ecosystem and its GraphQL data layer simplify integrating content, APIs, and services into one website. To create a new Gatsby project, run: +**[Gatsby](https://www.gatsbyjs.com/) هو إطار React لموقع CMS-backed سريع.** يُبسّط نظام الإضافات الغني فيه وطبقة البيانات GraphQL دمج المحتوى وواجهات برمجة التطبيقات (APIs) والخدمات المختلفة في موقع واحد. +لإنشاء مشروع Gatsby جديد، قم بتنفيذ الأوامر التالية في terminal: npx create-gatsby -If you're new to Gatsby, check out the [Gatsby tutorial.](https://www.gatsbyjs.com/docs/tutorial/) - -Gatsby is maintained by [Netlify](https://www.netlify.com/). You can [deploy a fully static Gatsby site](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) to any static hosting. If you opt into using server-only features, make sure your hosting provider supports them for Gatsby. +هل انت جديد على Gatsby, إطلاع عليها [Gatsby tutorial.](https://www.gatsbyjs.com/docs/tutorial/) -### Expo (for native apps) {/*expo*/} +Gatsby يتم المحافظة عليها من خلال [Netlify](https://www.netlify.com/). يمكنك [إطلاق موقع Gatsby ثابة بالكامل](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) لأي استضافة ثابة. إذا كنت قد اخترت إستخدام مميزات خاصة بالسيرفر فقط فتأكد من أن مزود الإستضافة الخاص بك يدعمها باستخدام Gatsby. -**[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 (لتطبيقات الأجهزة – Native Apps) {/*expo*/} +**[Expo](https://expo.dev/) هو إطار عمل React يتيح لك إنشاء تطبيقات شاملة تعمل على أندرويد وiOS والويب، مع واجهات مستخدم أصلية (truly native UIs) بالكامل.** يوفر مجموعة أدوات تطوير برمجيات (SDK) لـ [React Native](https://reactnative.dev/) ويُسهّل التعامل مع الأجزاء الأصلية (native) داخل التطبيق. +لإنشاء مشروع Expo جديد، قم بتنفيذ الأوامر التالية في terminal: npx create-expo-app -If you're new to Expo, check out the [Expo tutorial](https://docs.expo.dev/tutorial/introduction/). +هل انت جديد على Expo, إطلاع عليها [Expo tutorial](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 (the company)](https://expo.dev/about). بناء التطبيقات مع Expo مجانا, ويمكنك من رفع تطبيقك على Google و Apple متجر التطبيقات دون التسجيل. Expo يوفر ايضا خدمات سحابية مدفوعة. -## Bleeding-edge React frameworks {/*bleeding-edge-react-frameworks*/} +## إطارات React المتقدمة جدًا (Bleeding-edge) {/*bleeding-edge-react-frameworks*/} -As we've explored how to continue improving React, we realized that integrating React more closely with frameworks (specifically, with routing, bundling, and server technologies) is our biggest opportunity to help React users build better apps. The Next.js team has agreed to collaborate with us in researching, developing, integrating, and testing framework-agnostic bleeding-edge React features like [React Server Components.](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) +بينما استكشفنا طرقًا لمواصلة تحسين React، أدركنا أن دمج React بشكل أعمق مع الأطر — خاصة فيما يتعلق بالتوجيه (routing)، والتجميع (bundling)، وتقنيات الخادم (server technologies) — يمثل أكبر فرصة لنا لمساعدة مستخدمي React على بناء تطبيقات أفضل. وقد وافق فريق Next.js على التعاون معنا في البحث والتطوير والدمج واختبار ميزات React المتقدمة جدًا وغير المرتبطة بأي إطار محدد، مثل [React Server Components.](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) -These features are getting closer to being production-ready every day, and we've been in talks with other bundler and framework developers about integrating them. Our hope is that in a year or two, all frameworks listed on this page will have full support for these features. (If you're a framework author interested in partnering with us to experiment with these features, please let us know!) +تقترب هذه الميزات يومًا بعد يوم من أن تصبح جاهزة للإنتاج، وقد أجرينا محادثات مع مطوري أدوات التجميع (bundler) والأطر الأخرى حول دمجها. نأمل أنه خلال سنة أو سنتين، ستدعم جميع الأطر المدرجة في هذه الصفحة هذه الميزات بالكامل. (إذا كنت مؤلفًا لإطار عمل وترغب في التعاون معنا لتجربة هذه الميزات، يرجى إعلامنا!) ### Next.js (App Router) {/*nextjs-app-router*/} -**[Next.js's App Router](https://nextjs.org/docs) is a redesign of the Next.js APIs aiming to fulfill the React team’s full-stack architecture vision.** It lets you fetch data in asynchronous components that run on the server or even during the build. +**[Next.js's App Router](https://nextjs.org/docs) هو إعادة تصميم لواجهات برمجة تطبيقات Next.js تهدف إلى تحقيق رؤية فريق React للمعمارية الكاملة للتطبيقات (full-stack architecture vision).** يتيح لك جلب البيانات في مكونات غير متزامنة (asynchronous components) تعمل على الخادم أو حتى أثناء عملية البناء (build). -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 Node.js or serverless hosting, 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 أو إستضافة بدون خادم (serverless hosting), أو سيرفرك الخاص. Next.js تدعم ايضا [static export](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) والتي لا تحتاج الى سيرفر. -#### 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 architecture vision)؟ {/*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. +أداة التجميع (bundler) في **Next.js App Router** تنفذ بالكامل المعايير الرسمية لـ [React Server Components specification](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). يتيح لك هذا دمج المكونات التي تُبنى أثناء وقت البناء (build-time)، والمكونات الخاصة بالخادم فقط (server-only)، والمكونات التفاعلية (interactive) ضمن شجرة 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: +على سبيل المثال، يمكنك كتابة مكون React خاص بالخادم فقط (server-only) كمكون `async` دالة تقوم بالقراءة من قاعدة بيانات أو من ملف. بعد ذلك، يمكنك تمرير البيانات من هذه الدالة إلى مكوناتك التفاعلية: ```js -// This component runs *only* on the server (or during the build). +// يعمل هذا المكون **فقط** على الخادم (أو أثناء عملية البناء). async function Talks({ confId }) { - // 1. You're on the server, so you can talk to your data layer. API endpoint not required. + // 1. أنت تعمل على الخادم، لذا يمكنك التفاعل مباشرة مع طبقة البيانات الخاصة بك. لا حاجة لإنشاء نقطة نهاية واجهة التطبيقات. const talks = await db.Talks.findAll({ confId }); - // 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger. + // 2. أضف أي كمية من منطق العرض . هذا لن يزيد من حجم حزمة جافاسكربت الخاصة بك. const videos = talks.map(talk => talk.video); - // 3. Pass the data down to the components that will run in the browser. + // 3. قم بتمرير البيانات إلى المكونات التي ستعمل في المتصفح. return ; } ``` -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: +Next.js's كما يدمج App Router أيضًا [data fetching with Suspense](/blog/2022/03/29/react-v18#suspense-in-data-frameworks). يتيح لك ذلك تحديد حالة تحميل (مثل عنصر skeleton placeholder) لأجزاء مختلفة من واجهة المستخدم مباشرةً داخل شجرة React الخاصة بك: ```js }> @@ -125,6 +127,6 @@ Next.js's App Router also integrates [data fetching with Suspense](/blog/2022/03 ``` -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. +مكونات الخادم (Server Components) وميزة الانتظار (Suspense) هي ميزات تابعة لـ React وليست خاصة بـ Next.js. ومع ذلك، اعتمادها على مستوى الإطار يتطلب دعمًا وتنفيذًا غير بسيط. حاليًا، يُعد **Next.js App Router** أكثر تنفيذ كامل لهذه الميزات. يعمل فريق React مع مطوري أدوات التجميع (bundler) لتسهيل تنفيذ هذه الميزات في الجيل القادم من الأطر. \ No newline at end of file