diff --git a/src/content/learn/build-a-react-app-from-scratch.md b/src/content/learn/build-a-react-app-from-scratch.md index c74fa9afd..e3b43355f 100644 --- a/src/content/learn/build-a-react-app-from-scratch.md +++ b/src/content/learn/build-a-react-app-from-scratch.md @@ -1,143 +1,143 @@ --- -title: Build a React app from Scratch +title: إنشاء تطبيق React من الصفر --- -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. +إذا كانت متطلبات تطبيقك لا تُلبَّى جيدًا بواسطة الأطر الجاهزة، أو تفضّل بناء إطار عمل خاص بك، أو تريد فقط تعلم أساسيات تطبيق React، فيمكنك بناء تطبيق React من الصفر. -#### Consider using a framework {/*consider-using-a-framework*/} +#### التفكير في استخدام إطار عمل {/*consider-using-a-framework*/} -Starting from scratch is an easy way to get started using React, but a major tradeoff to be aware of is that going this route is often the same as building your own adhoc framework. As your requirements evolve, you may need to solve more framework-like problems that our recommended frameworks already have well developed and supported solutions for. +البدء من الصفر طريقة جيدة للبدء مع React، لكن من المهم أن تعلم أن هذا المسار يشبه غالبًا بناء إطار عمل مخصّص بنفسك. مع تطور المتطلبات، قد تحتاج إلى حل مشكلات على مستوى الإطار والتي تمتلك الأُطر الموصى بها لدينا حلولًا ناضجة ومدعومة لها. -For example, if in the future your app needs support for server-side rendering (SSR), static site generation (SSG), and/or React Server Components (RSC), you will have to implement those on your own. Similarly, future React features that require integrating at the framework level will have to be implemented on your own if you want to use them. +على سبيل المثال، إذا احتاج تطبيقك في المستقبل إلى دعم التصيير على الخادم (SSR)، أو توليد الموقع الثابت (SSG)، و/أو مكونات الخادم في React (RSC)، فسيتعيّن عليك تنفيذ هذه الميزات بنفسك. وبالمثل، فإن ميزات React المستقبلية التي تتطلب تكاملاً على مستوى الإطار ستحتاج إلى تنفيذ يدوي إذا رغبت في استخدامها. -Our recommended frameworks also help you build better performing apps. For example, reducing or eliminating waterfalls from network requests makes for a better user experience. This might not be a high priority when you are building a toy project, but if your app gains users you may want to improve its performance. +الأُطر الموصى بها تساعدك أيضًا في بناء تطبيقات ذات أداء أفضل. على سبيل المثال، تقليل أو إزالة "الشلالات" في طلبات الشبكة يُحسّن من تجربة المستخدم. قد لا تكون هذه أولوية عند بناء مشروع تجريبي، لكن إذا اكتسب تطبيقك مستخدمين فقد ترغب في تحسين أدائه. -Going this route also makes it more difficult to get support, since the way you develop routing, data-fetching, and other features will be unique to your situation. You should only choose this option if you are comfortable tackling these problems on your own, or if you’re confident that you will never need these features. +كما أن اختيار المسار هذا يجعل الحصول على الدعم أصعب، لأن طريقة تطوير التوجيه، وجلب البيانات، والميزات الأخرى ستكون فريدة وفقًا لظروفك. يجب اختيار هذا الخيار فقط إذا كنت مستعدًا للتعامل مع هذه المشكلات بنفسك أو متأكدًا أنك لن تحتاج لهذه الميزات. -For a list of recommended frameworks, check out [Creating a React App](/learn/creating-a-react-app). +لقائمة بالأُطر الموصى بها، راجع [Creating a React App](/learn/creating-a-react-app). -## Step 1: Install a build tool {/*step-1-install-a-build-tool*/} +## الخطوة 1: تثبيت أداة بناء {/*step-1-install-a-build-tool*/} -The first step is to install a build tool like `vite`, `parcel`, or `rsbuild`. These build tools provide features to package and run source code, provide a development server for local development and a build command to deploy your app to a production server. +الخطوة الأولى هي تثبيت أداة بناء مثل `vite` أو `parcel` أو `rsbuild`. توفر هذه الأدوات ميزات لتجميع وتشغيل الشيفرة المصدرية، وتوفر خادم تطوير محليًا، وأمرًا لبناء التطبيق لنشره على خادم الإنتاج. ### Vite {/*vite*/} -[Vite](https://vite.dev/) is a build tool that aims to provide a faster and leaner development experience for modern web projects. +[Vite](https://vite.dev/) هي أداة بناء تهدف إلى توفير تجربة تطوير أسرع وأكثر خفة للمشاريع الحديثة. {`npm create vite@latest my-app -- --template react-ts`} -Vite is opinionated and comes with sensible defaults out of the box. Vite has a rich ecosystem of plugins to support fast refresh, JSX, Babel/SWC, and other common features. See Vite's [React plugin](https://vite.dev/plugins/#vitejs-plugin-react) or [React SWC plugin](https://vite.dev/plugins/#vitejs-plugin-react-swc) and [React SSR example project](https://vite.dev/guide/ssr.html#example-projects) to get started. +تأتي Vite بإعدادات افتراضية مدروسة. تمتلك Vite نظامًا غنيًا من الإضافات لدعم إعادة التشغيل السريعة (fast refresh)، وJSX، وBabel/SWC، وميزات شائعة أخرى. اطلع على [إضافة React في Vite](https://vite.dev/plugins/#vitejs-plugin-react) أو [إضافة React SWC](https://vite.dev/plugins/#vitejs-plugin-react-swc) ومشروع المثال الخاص بـ [React SSR](https://vite.dev/guide/ssr.html#example-projects) للبدء. -Vite is already being used as a build tool in one of our [recommended frameworks](/learn/creating-a-react-app): [React Router](https://reactrouter.com/start/framework/installation). +تُستخدم Vite بالفعل كأداة بناء في أحد [الأُطر الموصى بها](/learn/creating-a-react-app): [React Router](https://reactrouter.com/start/framework/installation). ### Parcel {/*parcel*/} -[Parcel](https://parceljs.org/) combines a great out-of-the-box development experience with a scalable architecture that can take your project from just getting started to massive production applications. +[Parcel](https://parceljs.org/) يجمع بين تجربة تطوير رائعة وإعداد قابل للتوسع يمكن أن ينقل مشروعك من مرحلة البداية إلى تطبيقات إنتاجية كبيرة. {`npm install --save-dev parcel`} -Parcel supports fast refresh, JSX, TypeScript, Flow, and styling out of the box. See [Parcel's React recipe](https://parceljs.org/recipes/react/#getting-started) to get started. +يدعم Parcel إعادة التشغيل السريعة وJSX وTypeScript وFlow وأنظمة التنسيق مباشرةً. راجع [دليل Parcel لـ React](https://parceljs.org/recipes/react/#getting-started) للبدء. ### Rsbuild {/*rsbuild*/} -[Rsbuild](https://rsbuild.dev/) is an Rspack-powered build tool that provides a seamless development experience for React applications. It comes with carefully tuned defaults and performance optimizations ready to use. +[Rsbuild](https://rsbuild.dev/) هي أداة بناء مبنية على Rspack توفر تجربة تطوير سلسة لتطبيقات React. تأتي مع إعدادات افتراضية مضبوطة وتحسينات أداء جاهزة للاستخدام. {`npx create-rsbuild --template react`} -Rsbuild includes built-in support for React features like fast refresh, JSX, TypeScript, and styling. See [Rsbuild's React guide](https://rsbuild.dev/guide/framework/react) to get started. +يتضمن Rsbuild دعمًا مدمجًا لميزات React مثل إعادة التشغيل السريعة وJSX وTypeScript وأنظمة التنسيق. اطلع على [دليل Rsbuild لـ React](https://rsbuild.dev/guide/framework/react) للبدء. -#### Metro for React Native {/*react-native*/} +#### Metro لـ React Native {/*react-native*/} -If you're starting from scratch with React Native you'll need to use [Metro](https://metrobundler.dev/), the JavaScript bundler for React Native. Metro supports bundling for platforms like iOS and Android, but lacks many features when compared to the tools here. We recommend starting with Vite, Parcel, or Rsbuild unless your project requires React Native support. +إذا كنت تبدأ من الصفر مع React Native فستحتاج إلى استخدام [Metro](https://metrobundler.dev/)، مُجمِّع JavaScript الخاص بـ React Native. يدعم Metro تجميع المنصات مثل iOS وAndroid، لكنه يفتقر إلى العديد من الميزات مقارنة بالأدوات المذكورة أعلاه. نوصي بالبدء بـ Vite أو Parcel أو Rsbuild إلا إذا تطلّب مشروعك دعم React Native. -## Step 2: Build Common Application Patterns {/*step-2-build-common-application-patterns*/} +## الخطوة 2: بناء أنماط تطبيقية شائعة {/*step-2-build-common-application-patterns*/} -The build tools listed above start off with a client-only, single-page app (SPA), but don't include any further solutions for common functionality like routing, data fetching, or styling. +تبدأ أدوات البناء المذكورة أعلاه بتطبيق من جهة العميل فقط (SPA)، لكنها لا تتضمن حلولًا إضافية لوظائف شائعة مثل التوجيه، أو جلب البيانات، أو إدارة الأنماط. -The React ecosystem includes many tools for these problems. We've listed a few that are widely used as a starting point, but feel free to choose other tools if those work better for you. +يتضمن نظام React البيئي العديد من الأدوات لهذه المشكلات. أدرجنا بعض الأدوات الشائعة كنقطة انطلاق، لكن يمكنك اختيار أدوات أخرى إذا كانت تعمل بشكل أفضل لمشروعك. -### Routing {/*routing*/} +### التوجيه {/*routing*/} -Routing determines what content or pages to display when a user visits a particular URL. You need to set up a router to map URLs to different parts of your app. You'll also need to handle nested routes, route parameters, and query parameters. Routers can be configured within your code, or defined based on your component folder and file structures. +التوجيه يحدد المحتوى أو الصفحات التي يتم عرضها عندما يزور المستخدم عنوان URL محددًا. تحتاج إلى إعداد موجه لربط عناوين URL بأجزاء مختلفة من تطبيقك. ستحتاج أيضًا إلى التعامل مع المسارات المتداخلة، ومعاملات المسارات، ومعاملات الاستعلام. يمكن تكوين الموجهات داخل الشيفرة أو تعريفها بناءً على بنية المجلدات والملفات الخاصة بالمكونات. -Routers are a core part of modern applications, and are usually integrated with data fetching (including prefetching data for a whole page for faster loading), code splitting (to minimize client bundle sizes), and page rendering approaches (to decide how each page gets generated). +الموجهات جزء أساسي من التطبيقات الحديثة، وعادةً ما تُدمج مع جلب البيانات (بما في ذلك الجلب المسبق لصفحة كاملة لتحسين سرعة التحميل)، وتقسيم الشيفرة (لتقليل حجم حزم العميل)، وطرق تصيير الصفحات (لتحديد كيفية توليد كل صفحة). -We suggest using: +نقترح استخدام: - [React Router](https://reactrouter.com/start/data/custom) - [Tanstack Router](https://tanstack.com/router/latest) -### Data Fetching {/*data-fetching*/} +### جلب البيانات {/*data-fetching*/} -Fetching data from a server or other data source is a key part of most applications. Doing this properly requires handling loading states, error states, and caching the fetched data, which can be complex. +جلب البيانات من خادم أو مصدر بيانات آخر جزء أساسي من معظم التطبيقات. يتطلب القيام بذلك بشكل صحيح التعامل مع حالات التحميل، وحالات الخطأ، وتخزين البيانات مؤقتًا (caching)، وهو أمر قد يكون معقّدًا. -Purpose-built data fetching libraries do the hard work of fetching and caching the data for you, letting you focus on what data your app needs and how to display it. These libraries are typically used directly in your components, but can also be integrated into routing loaders for faster pre-fetching and better performance, and in server rendering as well. +تقوم مكتبات جلب البيانات المتخصصة بأداء الجزء الصعب من جلب وتخزين البيانات مؤقتًا نيابةً عنك، مما يتيح لك التركيز على البيانات التي يحتاجها تطبيقك وكيفية عرضها. تُستخدم هذه المكتبات عادةً داخل مكوناتك، ولكن يمكن أيضًا دمجها في محملات الموجه (router loaders) للجلب المسبق وتحسين الأداء، وكذلك في التصيير على الخادم. -Note that fetching data directly in components can lead to slower loading times due to network request waterfalls, so we recommend prefetching data in router loaders or on the server as much as possible! This allows a page's data to be fetched all at once as the page is being displayed. +لاحظ أن الجلب المباشر للبيانات داخل المكونات قد يؤدي إلى بطء في أوقات التحميل بسبب شلالات طلبات الشبكة، لذلك نوصي بالجلب المسبق في محملات الموجه أو على الخادم قدر الإمكان! هذا يسمح بجلب بيانات الصفحة دفعة واحدة أثناء عرضها. -If you're fetching data from most backends or REST-style APIs, we suggest using: +إذا كنت تجلب البيانات من واجهات برمجة تطبيقات تقليدية (REST)، فنوصي باستخدام: - [TanStack Query](https://tanstack.com/query/) - [SWR](https://swr.vercel.app/) - [RTK Query](https://redux-toolkit.js.org/rtk-query/overview) -If you're fetching data from a GraphQL API, we suggest using: +إذا كنت تجلب البيانات من واجهة GraphQL، فنوصي باستخدام: - [Apollo](https://www.apollographql.com/docs/react) - [Relay](https://relay.dev/) -### Code-splitting {/*code-splitting*/} +### تقسيم الشيفرة {/*code-splitting*/} -Code-splitting is the process of breaking your app into smaller bundles that can be loaded on demand. An app's code size increases with every new feature and additional dependency. Apps can become slow to load because all of the code for the entire app needs to be sent before it can be used. Caching, reducing features/dependencies, and moving some code to run on the server can help mitigate slow loading but are incomplete solutions that can sacrifice functionality if overused. +تقسيم الشيفرة هو عملية تقسيم تطبيقك إلى حزم أصغر يمكن تحميلها عند الطلب. يزداد حجم الشيفرة مع كل ميزة وإضافة، وقد تصبح التطبيقات بطيئة في التحميل إذا ما اضطر المستخدم لتحميل كل الشيفرة دفعة واحدة. يمكن أن تساعد التخزين المؤقت، وتقليل الميزات/التبعيات، ونقل بعض الشيفرة لتعمل على الخادم في تخفيف بطء التحميل لكن كلها حلول غير كاملة وقد تضحي بالوظائف إذا أُسيء استخدامها. -Similarly, if you rely on the apps using your framework to split the code, you might encounter situations where loading becomes slower than if no code splitting were happening at all. For example, [lazily loading](/reference/react/lazy) a chart delays sending the code needed to render the chart, splitting the chart code from the rest of the app. [Parcel supports code splitting with React.lazy](https://parceljs.org/recipes/react/#code-splitting). However, if the chart loads its data *after* it has been initially rendered you are now waiting twice. This is a waterfall: rather than fetching the data for the chart and sending the code to render it simultaneously, you must wait for each step to complete one after the other. +بالمثل، إذا اعتمدت على التطبيقات التي تستخدم إطارك لتقسيم الشيفرة فقد تواجه مواقف يصبح فيها التحميل أبطأ مما لو لم يكن هناك تقسيم على الإطلاق. على سبيل المثال، [التحميل الكسول](/reference/react/lazy) لمخطط بياني يؤخر إرسال الشيفرة اللازمة لعرض المخطط، فيتم فصل شيفرة المخطط عن بقية التطبيق. [Parcel يدعم تقسيم الشيفرة مع React.lazy](https://parceljs.org/recipes/react/#code-splitting). ومع ذلك، إذا حمل المخطط بياناته *بعد* عرضه الأولي فأنت الآن تنتظر مرتين. هذه الحالة تُسمى شلال (waterfall): بدلاً من جلب بيانات المخطط وإرسال الشيفرة اللازمة لتصييره في آنٍ واحد، يجب الانتظار لكل خطوة على حدة. -Splitting code by route, when integrated with bundling and data fetching, can reduce the initial load time of your app and the time it takes for the largest visible content of the app to render ([Largest Contentful Paint](https://web.dev/articles/lcp)). +تقسيم الشيفرة حسب المسار، عند دمجه مع التجميع وجلب البيانات، يمكن أن يقلل من وقت التحميل الأولي للتطبيق والوقت اللازم لعرض أكبر محتوى مرئي ([Largest Contentful Paint](https://web.dev/articles/lcp)). -For code-splitting instructions, see your build tool docs: -- [Vite build optimizations](https://vite.dev/guide/features.html#build-optimizations) -- [Parcel code splitting](https://parceljs.org/features/code-splitting/) -- [Rsbuild code splitting](https://rsbuild.dev/guide/optimization/code-splitting) +للحصول على تعليمات تقسيم الشيفرة، راجع وثائق أداة البناء التي اخترتها: +- [تحسينات بناء Vite](https://vite.dev/guide/features.html#build-optimizations) +- [تقسيم الشيفرة في Parcel](https://parceljs.org/features/code-splitting/) +- [تقسيم الشيفرة في Rsbuild](https://rsbuild.dev/guide/optimization/code-splitting) -### Improving Application Performance {/*improving-application-performance*/} +### تحسين أداء التطبيق {/*improving-application-performance*/} -Since the build tool you select only supports single page apps (SPAs), you'll need to implement other [rendering patterns](https://www.patterns.dev/vanilla/rendering-patterns) like server-side rendering (SSR), static site generation (SSG), and/or React Server Components (RSC). Even if you don't need these features at first, in the future there may be some routes that would benefit SSR, SSG or RSC. +بما أن أداة البناء التي تختارها تدعم بشكل أساسي تطبيقات الصفحة الواحدة (SPA)، فستحتاج إلى تنفيذ أنماط تصيير أخرى مثل التصيير على الخادم (SSR)، وتوليد الموقع الثابت (SSG)، و/أو مكونات خادم React (RSC). حتى لو لم تكن بحاجة لهذه الميزات في البداية، فقد تستفيد بعض المسارات لاحقًا من SSR أو SSG أو RSC. -* **Single-page apps (SPA)** load a single HTML page and dynamically updates the page as the user interacts with the app. SPAs are easier to get started with, but they can have slower initial load times. SPAs are the default architecture for most build tools. +* **تطبيقات الصفحة الواحدة (SPA)** تحمل صفحة HTML واحدة وتحدّث الصفحة ديناميكيًا أثناء تفاعل المستخدم. SPAs أسهل للبدء، لكنها قد تكون أبطأ في التحميل الأولي. SPAs هي البنية الافتراضية لمعظم أدوات البناء. -* **Streaming Server-side rendering (SSR)** renders a page on the server and sends the fully rendered page to the client. SSR can improve performance, but it can be more complex to set up and maintain than a single-page app. With the addition of streaming, SSR can be very complex to set up and maintain. See [Vite's SSR guide]( https://vite.dev/guide/ssr). +* **التصيير على الخادم المتدفق (Streaming SSR)** يصيّر الصفحة على الخادم ويُرسل الصفحة المصيّرة بالكامل إلى العميل. يمكن أن يحسّن SSR الأداء، لكنه قد يكون أكثر تعقيدًا لإعداده وصيانته مقارنة بتطبيق صفحة واحدة. مع إضافة البث، يمكن أن يصبح SSR معقدًا جدًا في التكوين والصيانة. راجع [دليل SSR في Vite]( https://vite.dev/guide/ssr). -* **Static site generation (SSG)** generates static HTML files for your app at build time. SSG can improve performance, but it can be more complex to set up and maintain than server-side rendering. See [Vite's SSG guide](https://vite.dev/guide/ssr.html#pre-rendering-ssg). +* **توليد الموقع الثابت (SSG)** يولّد ملفات HTML ثابتة لتطبيقك أثناء وقت البناء. يمكن أن يحسّن SSG الأداء، لكنه قد يكون أكثر تعقيدًا لإعداده وصيانته مقارنة بالتصيير على الخادم. راجع [دليل SSG في Vite](https://vite.dev/guide/ssr.html#pre-rendering-ssg). -* **React Server Components (RSC)** lets you mix build-time, server-only, and interactive components in a single React tree. RSC can improve performance, but it currently requires deep expertise to set up and maintain. See [Parcel's RSC examples](https://github.com/parcel-bundler/rsc-examples). +* **مكونات خادم React (RSC)** تتيح لك مزج المكونات التي تعمل أثناء وقت البناء، والمكونات الخاصة بالخادم، والمكونات التفاعلية ضمن شجرة React واحدة. يمكن أن تحسّن RSC الأداء، لكنها تتطلب خبرة عميقة لإعدادها وصيانتها حاليًا. راجع [أمثلة RSC لـ Parcel](https://github.com/parcel-bundler/rsc-examples). -Your rendering strategies need to integrate with your router so apps built with your framework can choose the rendering strategy on a per-route level. This will enable different rendering strategies without having to rewrite your whole app. For example, the landing page for your app might benefit from being statically generated (SSG), while a page with a content feed might perform best with server-side rendering. +تحتاج استراتيجيات التصيير إلى التكامل مع الموجّه بحيث تتيح للتطبيقات اختيار استراتيجية التصيير المناسبة لكل مسار. سيُمكّن ذلك استخدام استراتيجيات تصيير مختلفة بدون إعادة كتابة التطبيق بأكمله. على سبيل المثال، قد يكون من الأفضل توليد الصفحة الرئيسية بشكل ثابت (SSG)، بينما قد تكون بعض الصفحات ذات الخلاصة المحتوى أفضل مع التصيير على الخادم. -Using the right rendering strategy for the right routes can decrease the time it takes for the first byte of content to be loaded ([Time to First Byte](https://web.dev/articles/ttfb)), the first piece of content to render ([First Contentful Paint](https://web.dev/articles/fcp)), and the largest visible content of the app to render ([Largest Contentful Paint](https://web.dev/articles/lcp)). +استخدام استراتيجية التصيير المناسبة لكل مسار يمكن أن يقلل الوقت اللازم لتحميل البايت الأول من المحتوى ([Time to First Byte](https://web.dev/articles/ttfb))، والوقت لعرض أول قطعة من المحتوى ([First Contentful Paint](https://web.dev/articles/fcp))، والوقت لعرض أكبر محتوى مرئي ([Largest Contentful Paint](https://web.dev/articles/lcp)). -### And more... {/*and-more*/} +### والمزيد... {/*and-more*/} -These are just a few examples of the features a new app will need to consider when building from scratch. Many limitations you'll hit can be difficult to solve as each problem is interconnected with the others and can require deep expertise in problem areas you may not be familiar with. +هذه مجرد أمثلة قليلة على الميزات التي سيتعين على التطبيق الجديد أخذها بعين الاعتبار عند البناء من الصفر. العديد من القيود التي ستواجهها قد يكون من الصعب حلها لأن كل مشكلة مترابطة بالأخرى وقد تتطلب خبرة عميقة في مجالات قد لا تكون على دراية بها. -If you don't want to solve these problems on your own, you can [get started with a framework](/learn/creating-a-react-app) that provides these features out of the box. +إذا لم ترغب في حل هذه المشكلات بنفسك، يمكنك [البدء مع إطار عمل](/learn/creating-a-react-app) الذي يوفر هذه الميزات جاهزة. diff --git a/src/content/learn/creating-a-react-app.md b/src/content/learn/creating-a-react-app.md index a65b59f6e..e80b3b948 100644 --- a/src/content/learn/creating-a-react-app.md +++ b/src/content/learn/creating-a-react-app.md @@ -1,78 +1,78 @@ --- -title: Creating a React App +title: إنشاء تطبيق React --- -If you want to build a new app or website with React, we recommend starting with a framework. +إذا رغبت في إنشاء تطبيق أو موقع جديد باستخدام React، فنوصي بالبدء باستخدام إطار عمل. -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. -#### 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. +هذا يمكّنك من البدء بتطبيق طرف-عميل فقط، وإذا تغيرت احتياجاتك لاحقًا يمكنك تفعيل ميزات الخادم لمسارات معينة دون إعادة كتابة التطبيق بأكمله. راجع وثائق إطار عملك لتكوين استراتيجية التصيير. ### 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).** npx create-next-app@latest -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، شغِّل: npx create-react-router@latest -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 جديد، شغّل: npx create-expo-app@latest -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 شامل يأتي مع العديد من الحزم والتهيئات المسبقة التي تُسهِم في بناء تطبيقات ويب متكاملة بسهولة. -#### 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,7 +88,7 @@ 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 }> @@ -96,18 +96,18 @@ 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. +تُعدّ مكونات الخادم وSuspense ميزات في React نفسها وليس ميزات حصرية لـ Next.js. ومع ذلك، يتطلب اعتمادها على مستوى الإطار موافقة وجهد تنفيذ غير تافه. في الوقت الحالي، يُعتبر App Router في Next.js التنفيذ الأكثر اكتمالًا. يعمل فريق React مع مطوّري المجمعات لتسهيل تنفيذ هذه الميزات في الجيل القادم من الأُطر. -## 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+)._ diff --git a/src/content/learn/react-compiler/debugging.md b/src/content/learn/react-compiler/debugging.md index 1883125a6..4a796e8a0 100644 --- a/src/content/learn/react-compiler/debugging.md +++ b/src/content/learn/react-compiler/debugging.md @@ -1,93 +1,93 @@ --- -title: Debugging and Troubleshooting +title: تصحيح الأخطاء واستكشاف المشكلات --- -This guide helps you identify and fix issues when using React Compiler. Learn how to debug compilation problems and resolve common issues. +تساعدك هذه الإرشادات على تحديد المشكلات وإصلاحها عند استخدام React Compiler. تعرّف على كيفية تتبُّع أخطاء التجميع وحل المشكلات الشائعة. -* The difference between compiler errors and runtime issues -* Common patterns that break compilation -* Step-by-step debugging workflow +* الفرق بين أخطاء المُجمِّع ومشكلات وقت التشغيل +* الأنماط الشائعة التي تكسر عملية التجميع +* سير عمل تصحيح الأخطاء خطوة بخطوة -## Understanding Compiler Behavior {/*understanding-compiler-behavior*/} +## فهم سلوك المُجمِّع {/*understanding-compiler-behavior*/} -React Compiler is designed to handle code that follows the [Rules of React](/reference/rules). When it encounters code that might break these rules, it safely skips optimization rather than risk changing your app's behavior. +تم تصميم React Compiler للتعامل مع الشيفرة التي تتبع [قواعد React](/reference/rules). عند مواجهته لشيفرة قد تنتهك هذه القواعد، يتجاوز عملية التحسين بأمان بدلاً من المخاطرة بتغيير سلوك التطبيق. -### Compiler Errors vs Runtime Issues {/*compiler-errors-vs-runtime-issues*/} +### أخطاء المُجمِّع مقابل مشكلات وقت التشغيل {/*compiler-errors-vs-runtime-issues*/} -**Compiler errors** occur at build time and prevent your code from compiling. These are rare because the compiler is designed to skip problematic code rather than fail. +**أخطاء المُجمِّع** تحدث أثناء عملية البناء وتمنع الشيفرة من التجميع؛ وهي نادرة لأن المُجمِّع مُهيأ لتجاهل الشيفرة المشكلة بدلًا من الفشل. -**Runtime issues** occur when compiled code behaves differently than expected. Most of the time, if you encounter an issue with React Compiler, it's a runtime issue. This typically happens when your code violates the Rules of React in subtle ways that the compiler couldn't detect, and the compiler mistakenly compiled a component it should have skipped. +**مشكلات وقت التشغيل** تحدث عندما تتصرف الشيفرة المُجمَّعة بشكل مختلف عن المتوقع. معظم الأحيان، إذا واجهت مشكلة مع React Compiler فهي مشكلة وقت تشغيل. يحدث ذلك عادةً عندما تنتهك الشيفرة قواعد React بطرق دقيقة لا يستطيع الـ ESLint اكتشافها، فيقوم المُجمِّع بتجميع مكوّن كان ينبغي عليه تجاهله. -When debugging runtime issues, focus your efforts on finding Rules of React violations in the affected components that were not detected by the ESLint rule. The compiler relies on your code following these rules, and when they're broken in ways it can't detect, that's when runtime problems occur. +عند تتبُّع مشكلات وقت التشغيل، ركز على البحث عن انتهاكات قواعد React في المكونات المتأثرة والتي لم يكشفها ESLint. يعتمد المُجمِّع على التزام الشيفرة بهذه القواعد، وعندما تُخالف بطرق لا يستطيع اكتشافها، تظهر مشكلات وقت التشغيل. -## Common Breaking Patterns {/*common-breaking-patterns*/} +## الأنماط الشائعة التي تسبب الأعطال {/*common-breaking-patterns*/} -One of the main ways React Compiler can break your app is if your code was written to rely on memoization for correctness. This means your app depends on specific values being memoized to work properly. Since the compiler may memoize differently than your manual approach, this can lead to unexpected behavior like effects over-firing, infinite loops, or missing updates. +أحد الأسباب الرئيسية التي قد تُسبب مشاكل عند استخدام React Compiler هو اعتماد الشيفرة على التذكُّر (memoization) كجزء من صحة البرنامج. يعني هذا أن التطبيق يعتمد على قيم محفوظة في الذاكرة لتعمل بشكل صحيح. ولأن المُجمِّع قد يقوم بعمليات تذكُّر مختلفة عن نهجك اليدوي، فقد يؤدي ذلك لسلوك غير متوقع مثل تكرار تنفيذ التأثيرات (effects) بشكل زائد، الحلقات غير المنتهية، أو فقدان التحديثات. -Common scenarios where this occurs: +سيناريوهات شائعة: -- **Effects that rely on referential equality** - When effects depend on objects or arrays maintaining the same reference across renders -- **Dependency arrays that need stable references** - When unstable dependencies cause effects to fire too often or create infinite loops -- **Conditional logic based on reference checks** - When code uses referential equality checks for caching or optimization +- **تأثيرات تعتمد على التساوي المرجعي** - عندما تعتمد التأثيرات على بقاء مراجع الكائنات أو المصفوفات دون تغيير عبر عمليات العرض +- **مصفوفات الاعتماد التي تحتاج مراجع مستقرة** - الاعتماد غير المستقر يتسبب في تشغيل التأثيرات كثيرًا أو خلق حلقات لا نهائية +- **منطق شرطي يعتمد على فحوصات المراجع** - عندما تُستخدم المراجع للاحتفاظ بالكاش أو التحسين -## Debugging Workflow {/*debugging-workflow*/} +## سير عمل تصحيح الأخطاء {/*debugging-workflow*/} -Follow these steps when you encounter issues: +اتبع هذه الخطوات عند مواجهة مشكلات: -### Compiler Build Errors {/*compiler-build-errors*/} +### أخطاء البناء من المُجمِّع {/*compiler-build-errors*/} -If you encounter a compiler error that unexpectedly breaks your build, this is likely a bug in the compiler. Report it to the [facebook/react](https://github.com/facebook/react/issues) repository with: -- The error message -- The code that caused the error -- Your React and compiler versions +إذا ظهر خطأ من المُجمِّع وكسر عملية البناء بطريقة غير متوقعة، فغالبًا ما يكون ذلك خللاً في المُجمِّع نفسه. أبلِغ عنه في مستودع [facebook/react](https://github.com/facebook/react/issues) مع: +- رسالة الخطأ +- الشيفرة التي تسببت في الخطأ +- إصدارات React والمُجمِّع -### Runtime Issues {/*runtime-issues*/} +### مشكلات وقت التشغيل {/*runtime-issues*/} -For runtime behavior issues: +بالنسبة لمشكلات السلوك في وقت التشغيل: -### 1. Temporarily Disable Compilation {/*temporarily-disable-compilation*/} +### 1. تعطيل التجميع مؤقتًا {/*temporarily-disable-compilation*/} -Use `"use no memo"` to isolate whether an issue is compiler-related: +استخدم `"use no memo"` لعزل ما إذا كانت المشكلة متعلقة بالمُجمِّع: ```js function ProblematicComponent() { - "use no memo"; // Skip compilation for this component - // ... rest of component + "use no memo"; // تخطي التجميع لهذا المكوّن + // ... بقية المكوّن } ``` -If the issue disappears, it's likely related to a Rules of React violation. +إذا اختفت المشكلة، فمن المرجح أنها متعلقة بانتهاك قواعد React. -You can also try removing manual memoization (useMemo, useCallback, memo) from the problematic component to verify that your app works correctly without any memoization. If the bug still occurs when all memoization is removed, you have a Rules of React violation that needs to be fixed. +يمكنك أيضًا محاولة إزالة التذكُّر اليدوي (useMemo, useCallback, memo) من المكوّن المتسبب للتحقق مما إذا كان التطبيق يعمل بشكل صحيح بدون أي تذكُّر. إذا بقي الخطأ بعد إزالة كل التذكُّرات، فذلك يدل على وجود انتهاك لقواعد React يجب إصلاحه. -### 2. Fix Issues Step by Step {/*fix-issues-step-by-step*/} +### 2. إصلاح المشكلات خطوة بخطوة {/*fix-issues-step-by-step*/} -1. Identify the root cause (often memoization-for-correctness) -2. Test after each fix -3. Remove `"use no memo"` once fixed -4. Verify the component shows the ✨ badge in React DevTools +1. حدّد السبب الجذري (غالبًا ما يكون الاعتماد على التذكُّر من أجل الصحة correctness) +2. اختبر بعد كل إصلاح +3. أزل `"use no memo"` بعد حل المشكلة +4. تحقّق من ظهور شارة ✨ في React DevTools للمكوّن -## Reporting Compiler Bugs {/*reporting-compiler-bugs*/} +## الإبلاغ عن أخطاء المُجمِّع {/*reporting-compiler-bugs*/} -If you believe you've found a compiler bug: +إذا اعتقدت أنك وجدت خللًا في المُجمِّع: -1. **Verify it's not a Rules of React violation** - Check with ESLint -2. **Create a minimal reproduction** - Isolate the issue in a small example -3. **Test without the compiler** - Confirm the issue only occurs with compilation -4. **File an [issue](https://github.com/facebook/react/issues/new?template=compiler_bug_report.yml)**: - - React and compiler versions - - Minimal reproduction code - - Expected vs actual behavior - - Any error messages +1. **تحقّق أنه ليس انتهاكًا لقواعد React** - افحص بواسطة ESLint +2. **أنشئ مثالًا مصغرًا لإعادة الإنتاج** - عزِل المشكلة في مثال صغير +3. **اختبر بدون المُجمِّع** - تَأكَّد أن المشكلة تحدث فقط عند تفعيل التجميع +4. **افتح [issue](https://github.com/facebook/react/issues/new?template=compiler_bug_report.yml)** مع: + - إصدارات React والمُجمِّع + - شيفرة إعادة الإنتاج المصغرة + - السلوك المتوقع مقابل الفعلي + - أي رسائل خطأ -## Next Steps {/*next-steps*/} +## الخطوات التالية {/*next-steps*/} -- Review the [Rules of React](/reference/rules) to prevent issues -- Check the [incremental adoption guide](/learn/react-compiler/incremental-adoption) for gradual rollout strategies \ No newline at end of file +- راجع [قواعد React](/reference/rules) لتجنّب المشكلات +- اطلع على [دليل التبنّي التدريجي](/learn/react-compiler/incremental-adoption) لاستراتيجيات النشر التدريجي diff --git a/src/content/learn/react-compiler/incremental-adoption.md b/src/content/learn/react-compiler/incremental-adoption.md index 56d932034..8cb001da1 100644 --- a/src/content/learn/react-compiler/incremental-adoption.md +++ b/src/content/learn/react-compiler/incremental-adoption.md @@ -1,55 +1,55 @@ --- -title: Incremental Adoption +title: التبنّي التدريجي --- -React Compiler can be adopted incrementally, allowing you to try it on specific parts of your codebase first. This guide shows you how to gradually roll out the compiler in existing projects. +يمكن تبنّي React Compiler بشكل تدريجي، مما يتيح لك اختباره على أجزاء محددة من قاعدة الشيفرة أولًا. يوضّح هذا الدليل كيفية نشر المُجمِّع تدريجيًا في المشاريع الحالية. -* Why incremental adoption is recommended -* Using Babel overrides for directory-based adoption -* Using the "use memo" directive for opt-in compilation -* Using the "use no memo" directive to exclude components -* Runtime feature flags with gating -* Monitoring your adoption progress +* لماذا يُنصح بالتبنّي التدريجي +* استخدام تَجاوزات Babel للتبنّي على مستوى المجلدات +* استخدام توجيه `"use memo"` للاشتراك اليدوي في التجميع +* استخدام توجيه `"use no memo"` لاستبعاد المكوّنات +* علامات الميزات وقت التشغيل (gating) +* مراقبة تقدّم عملية التبنّي -## Why Incremental Adoption? {/*why-incremental-adoption*/} +## لماذا التبنّي التدريجي؟ {/*why-incremental-adoption*/} -React Compiler is designed to optimize your entire codebase automatically, but you don't have to adopt it all at once. Incremental adoption gives you control over the rollout process, letting you test the compiler on small parts of your app before expanding to the rest. +تم تصميم React Compiler لتحسين قاعدة الشيفرة بأكملها تلقائيًا، لكن ليس عليك تفعيله في كل شيء دفعة واحدة. يمنحك التبنّي التدريجي سيطرة أفضل على عملية النشر، ويسمح لك باختبار المُجمِّع على أجزاء صغيرة من التطبيق قبل توسيع النطاق. -Starting small helps you build confidence in the compiler's optimizations. You can verify that your app behaves correctly with compiled code, measure performance improvements, and identify any edge cases specific to your codebase. This approach is especially valuable for production applications where stability is critical. +البدء بأجزاء صغيرة يساعدك على بناء الثقة في تحسينات المُجمِّع. يمكنك التحقق من أن تطبيقك يعمل بشكل صحيح بالشيفرة المُجمَّعة، قياس تحسينات الأداء، وتحديد أي حواف خاصة بقاعدة الشيفرة لديك. هذا النهج مفيد بشكل خاص للتطبيقات الإنتاجية حيث تكون الاستقرارية مهمة. -Incremental adoption also makes it easier to address any Rules of React violations the compiler might find. Instead of fixing violations across your entire codebase at once, you can tackle them systematically as you expand compiler coverage. This keeps the migration manageable and reduces the risk of introducing bugs. +كما يسهل التبنّي التدريجي معالجة أي انتهاكات لقواعد React قد يعثر عليها المُجمِّع، إذ يمكنك إصلاحها منهجيًا أثناء توسيع نطاق التجميع، مما يجعل الترحيل أكثر قابلية للإدارة ويقلل مخاطر إدخال أخطاء. -By controlling which parts of your code get compiled, you can also run A/B tests to measure the real-world impact of the compiler's optimizations. This data helps you make informed decisions about full adoption and demonstrates the value to your team. +بواسطة التحكم في الأجزاء التي تُجمَّع، يمكنك أيضًا إجراء اختبارات A/B لقياس التأثير الواقعي لتحسينات المُجمِّع، مما يساعدك على اتخاذ قرار مستنير بشأن التبنّي الكامل وإظهار القيمة للفريق. -## Approaches to Incremental Adoption {/*approaches-to-incremental-adoption*/} +## نهج التبنّي التدريجي {/*approaches-to-incremental-adoption*/} -There are three main approaches to adopt React Compiler incrementally: +هناك ثلاث طرق رئيسية لتبنّي React Compiler تدريجيًا: -1. **Babel overrides** - Apply the compiler to specific directories -2. **Opt-in with "use memo"** - Only compile components that explicitly opt in -3. **Runtime gating** - Control compilation with feature flags +1. **تجاوزات Babel (Babel overrides)** - تطبيق المُجمِّع على مجلّدات محددة +2. **الاشتراك اليدوي بـ `"use memo"`** - تجميع المكوّنات التي تشترك صراحة فقط +3. **التحكّم وقت التشغيل (Runtime gating)** - التحكم في التجميع بواسطة أعلام الميزات -All approaches allow you to test the compiler on specific parts of your application before full rollout. +تسمح جميع هذه الأساليب باختبار المُجمِّع على أجزاء محددة من التطبيق قبل نشره بالكامل. -## Directory-Based Adoption with Babel Overrides {/*directory-based-adoption*/} +## التبنّي على مستوى الدليل باستخدام تجاوزات Babel {/*directory-based-adoption*/} -Babel's `overrides` option lets you apply different plugins to different parts of your codebase. This is ideal for gradually adopting React Compiler directory by directory. +تتيح لك خاصية `overrides` في Babel تطبيق إضافات مختلفة على أجزاء متفرقة من قاعدة الشيفرة. هذا مثالي لتبنّي React Compiler بشكل تدريجي حسب المجلّد. -### Basic Configuration {/*basic-configuration*/} +### الإعداد الأساسي {/*basic-configuration*/} -Start by applying the compiler to a specific directory: +ابدأ بتطبيق المُجمِّع على مجلّد محدد: ```js // babel.config.js module.exports = { plugins: [ - // Global plugins that apply to all files + // الإضافات العامة التي تنطبق على كل الملفات ], overrides: [ { @@ -62,15 +62,15 @@ module.exports = { }; ``` -### Expanding Coverage {/*expanding-coverage*/} +### توسيع التغطية {/*expanding-coverage*/} -As you gain confidence, add more directories: +مع ازدياد ثقتك، أضف مجلدات أخرى: ```js // babel.config.js module.exports = { plugins: [ - // Global plugins + // الإضافات العامة ], overrides: [ { @@ -82,16 +82,16 @@ module.exports = { { test: './src/legacy/**/*.{js,jsx,ts,tsx}', plugins: [ - // Different plugins for legacy code + // إضافات مختلفة للكود القديم ] } ] }; ``` -### With Compiler Options {/*with-compiler-options*/} +### مع خيارات المُجمِّع {/*with-compiler-options*/} -You can also configure compiler options per override: +يمكنك أيضًا تكوين خيارات المُجمِّع لكل تجاوز: ```js // babel.config.js @@ -102,7 +102,7 @@ module.exports = { test: './src/experimental/**/*.{js,jsx,ts,tsx}', plugins: [ ['babel-plugin-react-compiler', { - // options ... + // خيارات ... }] ] }, @@ -110,7 +110,7 @@ module.exports = { test: './src/production/**/*.{js,jsx,ts,tsx}', plugins: [ ['babel-plugin-react-compiler', { - // options ... + // خيارات ... }] ] } @@ -119,15 +119,15 @@ module.exports = { ``` -## Opt-in Mode with "use memo" {/*opt-in-mode-with-use-memo*/} +## وضع الاشتراك اليدوي باستخدام `"use memo"` {/*opt-in-mode-with-use-memo*/} -For maximum control, you can use `compilationMode: 'annotation'` to only compile components and hooks that explicitly opt in with the `"use memo"` directive. +للحصول على أقصى درجات التحكم، يمكنك استخدام `compilationMode: 'annotation'` لتجميع المكونات والخُطَف (hooks) التي تشترك صراحةً فقط عبر توجيه `"use memo"`. -This approach gives you fine-grained control over individual components and hooks. It's useful when you want to test the compiler on specific components without affecting entire directories. +يوفّر هذا النهج تحكمًا دقيقًا على مستوى المكونات والخطافات. يكون مفيدًا عندما تريد اختبار المُجمِّع على مكوّنات محددة دون التأثير على مجلدات كاملة. -### Annotation Mode Configuration {/*annotation-mode-configuration*/} +### إعداد وضع التعليقات التوضيحية {/*annotation-mode-configuration*/} ```js // babel.config.js @@ -140,13 +140,13 @@ module.exports = { }; ``` -### Using the Directive {/*using-the-directive*/} +### كيفية استخدام التوجيه {/*using-the-directive*/} -Add `"use memo"` at the beginning of functions you want to compile: +أضف `"use memo"` في بداية الوظائف التي تريد تجميعها: ```js function TodoList({ todos }) { - "use memo"; // Opt this component into compilation + "use memo"; // اشترك بهذا المكوّن في التجميع const sortedTodos = todos.slice().sort(); @@ -160,28 +160,28 @@ function TodoList({ todos }) { } function useSortedData(data) { - "use memo"; // Opt this hook into compilation + "use memo"; // اشترك بهذا الهُوك في التجميع return data.slice().sort(); } ``` -With `compilationMode: 'annotation'`, you must: -- Add `"use memo"` to every component you want optimized -- Add `"use memo"` to every custom hook -- Remember to add it to new components +مع `compilationMode: 'annotation'` يجب عليك: +- إضافة `"use memo"` إلى كل مكوّن ترغب في تحسينه +- إضافة `"use memo"` إلى كل هُوك مُخصص +- تذكّر إضافته للمكوّنات الجديدة -This gives you precise control over which components are compiled while you evaluate the compiler's impact. +يوفر ذلك تحكمًا دقيقًا في المكوّنات التي تُجمَّع أثناء تقييم تأثير المُجمِّع. -## Runtime Feature Flags with Gating {/*runtime-feature-flags-with-gating*/} +## أعلام الميزات وقت التشغيل مع التحكّم (Gating) {/*runtime-feature-flags-with-gating*/} -The `gating` option enables you to control compilation at runtime using feature flags. This is useful for running A/B tests or gradually rolling out the compiler based on user segments. +تتيح لك خاصية `gating` التحكم في التجميع وقت التشغيل باستخدام أعلام الميزات. هذا مفيد عند إجراء اختبارات A/B أو النشر التدريجي للمُجمِّع على أساس مجموعات المستخدمين. -### How Gating Works {/*how-gating-works*/} +### كيف تعمل آلية الـ Gating {/*how-gating-works*/} -The compiler wraps optimized code in a runtime check. If the gate returns `true`, the optimized version runs. Otherwise, the original code runs. +يقوم المُجمِّع بلفّ الشيفرة المحسّنة في فحص وقت التشغيل. إذا أعاد gate قيمة `true`، تعمل النسخة المحسّنة، وإلا تعمل النسخة الأصلية. -### Gating Configuration {/*gating-configuration*/} +### تكوين الـ Gating {/*gating-configuration*/} ```js // babel.config.js @@ -197,29 +197,29 @@ module.exports = { }; ``` -### Implementing the Feature Flag {/*implementing-the-feature-flag*/} +### تنفيذ دالة علامة الميزة {/*implementing-the-feature-flag*/} -Create a module that exports your gating function: +أنشئ وحدة تُصدّر دالة gate: ```js // ReactCompilerFeatureFlags.js export function isCompilerEnabled() { - // Use your feature flag system + // استخدم نظام أعلام الميزات لديك return getFeatureFlag('react-compiler-enabled'); } ``` -## Troubleshooting Adoption {/*troubleshooting-adoption*/} +## استكشاف مشكلات التبنّي {/*troubleshooting-adoption*/} -If you encounter issues during adoption: +إذا واجهت مشاكل أثناء التبنّي: -1. Use `"use no memo"` to temporarily exclude problematic components -2. Check the [debugging guide](/learn/react-compiler/debugging) for common issues -3. Fix Rules of React violations identified by the ESLint plugin -4. Consider using `compilationMode: 'annotation'` for more gradual adoption +1. استخدم `"use no memo"` لاستبعاد المكوّنات المُشكّلة مؤقتًا +2. راجع [دليل التصحيح](/learn/react-compiler/debugging) للمشكلات الشائعة +3. أصل انتهاكات قواعد React التي يحددها مكوّن ESLint +4. فكّر في استخدام `compilationMode: 'annotation'` لنهج أكثر تدريجيّة -## Next Steps {/*next-steps*/} +## الخطوات التالية {/*next-steps*/} -- Read the [configuration guide](/reference/react-compiler/configuration) for more options -- Learn about [debugging techniques](/learn/react-compiler/debugging) -- Check the [API reference](/reference/react-compiler/configuration) for all compiler options \ No newline at end of file +- اطلع على [دليل التكوين](/reference/react-compiler/configuration) لمزيد من الخيارات +- تعرّف على [تقنيات التصحيح](/learn/react-compiler/debugging) +- راجع [المرجع البرمجي](/reference/react-compiler/configuration) للحصول على كل خيارات المُجمِّع diff --git a/src/content/learn/react-compiler/index.md b/src/content/learn/react-compiler/index.md index 480187ed5..262c78873 100644 --- a/src/content/learn/react-compiler/index.md +++ b/src/content/learn/react-compiler/index.md @@ -1,33 +1,32 @@ --- -title: React Compiler +title: مُجمِّع React --- -## Introduction {/*introduction*/} +## مقدّمة {/*introduction*/} -Learn [what React Compiler does](/learn/react-compiler/introduction) and how it automatically optimizes your React application by handling memoization for you, eliminating the need for manual `useMemo`, `useCallback`, and `React.memo`. +تعرّف على [ما الذي يفعله React Compiler](/learn/react-compiler/introduction) وكيف يقوم تلقائيًا بتحسين تطبيق React الخاص بك من خلال إدارة التذكُّر (memoization) بدلًا من الحاجة إلى `useMemo` أو `useCallback` أو `React.memo` يدويًا. -## Installation {/*installation*/} +## التثبيت {/*installation*/} -Get started with [installing React Compiler](/learn/react-compiler/installation) and learn how to configure it with your build tools. +ابدأ بـ [تثبيت React Compiler](/learn/react-compiler/installation) وتعلّم كيفية تكوينه مع أدوات البناء التي تستخدمها. +## التبنّي التدريجي {/*incremental-adoption*/} -## Incremental Adoption {/*incremental-adoption*/} +اكتشف [استراتيجيات التبنّي التدريجي لReact Compiler](/learn/react-compiler/incremental-adoption) لمشروعاتك الحالية إذا لم تكن جاهزًا لتمكينه في كل مكان بعد. -Learn [strategies for gradually adopting React Compiler](/learn/react-compiler/incremental-adoption) in your existing codebase if you're not ready to enable it everywhere yet. +## التصحيح واستكشاف المشكلات {/*debugging-and-troubleshooting*/} -## Debugging and Troubleshooting {/*debugging-and-troubleshooting*/} +عندما لا تعمل الأشياء كما تتوقع، استخدم [دليل التصحيح](/learn/react-compiler/debugging) لفهم الفرق بين أخطاء المُجمِّع ومشكلات وقت التشغيل، تحديد الأنماط التي تسبب الأعطال، واتباع سير عمل منهجي لتصحيح الأخطاء. -When things don't work as expected, use our [debugging guide](/learn/react-compiler/debugging) to understand the difference between compiler errors and runtime issues, identify common breaking patterns, and follow a systematic debugging workflow. +## التكوين والمرجع {/*configuration-and-reference*/} -## Configuration and Reference {/*configuration-and-reference*/} +للحصول على خيارات التكوين التفصيلية ومرجع الـ API: -For detailed configuration options and API reference: +- [خيارات التكوين](/reference/react-compiler/configuration) - جميع خيارات تكوين المُجمِّع بما في ذلك توافق إصدارات React +- [التوجيهات](/reference/react-compiler/directives) - التحكم في التجميع على مستوى الدوال +- [تجميع المكتبات](/reference/react-compiler/compiling-libraries) - إرشادات شحن المكتبات المجمّعة مسبقًا -- [Configuration Options](/reference/react-compiler/configuration) - All compiler configuration options including React version compatibility -- [Directives](/reference/react-compiler/directives) - Function-level compilation control -- [Compiling Libraries](/reference/react-compiler/compiling-libraries) - Shipping pre-compiled libraries +## موارد إضافية {/*additional-resources*/} -## Additional resources {/*additional-resources*/} - -In addition to these docs, we recommend checking the [React Compiler Working Group](https://github.com/reactwg/react-compiler) for additional information and discussion about the compiler. +بالإضافة إلى هذه الوثائق، نوصي بالاطلاع على مجموعة عمل [React Compiler Working Group](https://github.com/reactwg/react-compiler) لمزيد من المعلومات والنقاش حول المُجمِّع. diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md index 92cf0b74e..142309eb1 100644 --- a/src/content/learn/react-compiler/installation.md +++ b/src/content/learn/react-compiler/installation.md @@ -1,70 +1,70 @@ --- -title: Installation +title: التثبيت --- -This guide will help you install and configure React Compiler in your React application. +يساعدك هذا الدليل على تثبيت وتكوين React Compiler في تطبيق React الخاص بك. -* How to install React Compiler -* Basic configuration for different build tools -* How to verify your setup is working +* كيفية تثبيت React Compiler +* إعدادات أساسية لأدوات البناء المختلفة +* كيفية التحقق من أن الإعداد يعمل بشكل صحيح -## Prerequisites {/*prerequisites*/} +## المتطلبات الأساسية {/*prerequisites*/} -React Compiler is designed to work best with React 19, but it also supports React 17 and 18. Learn more about [React version compatibility](/reference/react-compiler/target). +تم تصميم React Compiler للعمل بشكل أمثل مع React 19، لكنه يدعم أيضًا React 17 و 18. اطلع على مزيد من التفاصيل حول [توافق إصدارات React](/reference/react-compiler/target). -## Installation {/*installation*/} +## التثبيت {/*installation*/} -Install React Compiler as a `devDependency`: +ثبّت React Compiler كـ `devDependency`: npm install -D babel-plugin-react-compiler@latest -Or with Yarn: +أو باستخدام Yarn: yarn add -D babel-plugin-react-compiler@latest -Or with pnpm: +أو باستخدام pnpm: pnpm install -D babel-plugin-react-compiler@latest -## Basic Setup {/*basic-setup*/} +## الإعداد الأساسي {/*basic-setup*/} -React Compiler is designed to work by default without any configuration. However, if you need to configure it in special circumstances (for example, to target React versions below 19), refer to the [compiler options reference](/reference/react-compiler/configuration). +يعمل React Compiler بشكل افتراضي دون الحاجة إلى تكوين. ومع ذلك، إذا احتجت إلى تخصيص إعدادات خاصة (مثل استهداف إصدارات React أقدم من 19)، راجع [مرجع خيارات المُجمِّع](/reference/react-compiler/configuration). -The setup process depends on your build tool. React Compiler includes a Babel plugin that integrates with your build pipeline. +تعتمد عملية الإعداد على أداة البناء التي تستخدمها. يتضمن React Compiler مكوّن Babel plugin يتكامل مع سير البناء لديك. -React Compiler must run **first** in your Babel plugin pipeline. The compiler needs the original source information for proper analysis, so it must process your code before other transformations. +يجب أن يعمل React Compiler **أولًا** في سلسلة إضافات Babel. يحتاج المُجمِّع إلى معلومات المصدر الأصلية للتحليل الصحيح، لذلك يجب أن يعالج الشيفرة قبل أي تحويلات أخرى. ### Babel {/*babel*/} -Create or update your `babel.config.js`: +أنشئ أو حدّث `babel.config.js`: ```js {3} module.exports = { plugins: [ - 'babel-plugin-react-compiler', // must run first! - // ... other plugins + 'babel-plugin-react-compiler', // يجب أن يعمل أولًا! + // ... إضافات أخرى ], - // ... other config + // ... إعدادات أخرى }; ``` ### Vite {/*vite*/} -If you use Vite, you can add the plugin to vite-plugin-react: +إذا كنت تستخدم Vite، يمكنك إضافة الإضافة إلى `vite-plugin-react`: ```js {3,9} // vite.config.js @@ -82,7 +82,7 @@ export default defineConfig({ }); ``` -Alternatively, if you prefer a separate Babel plugin for Vite: +بديلًا، إذا رغبت باستخدام إضافة Babel منفصلة لـ Vite: npm install -D vite-plugin-babel @@ -108,10 +108,10 @@ export default defineConfig({ ### Next.js {/*usage-with-nextjs*/} -Please refer to the [Next.js docs](https://nextjs.org/docs/app/api-reference/next-config-js/reactCompiler) for more information. +راجع توثيق [Next.js](https://nextjs.org/docs/app/api-reference/next-config-js/reactCompiler) لمزيد من المعلومات. ### React Router {/*usage-with-react-router*/} -Install `vite-plugin-babel`, and add the compiler's Babel plugin to it: +ثبت `vite-plugin-babel` وأضف إضافة Babel الخاصة بالمُجمِّع إليه: {`npm install vite-plugin-babel`} @@ -131,7 +131,7 @@ export default defineConfig({ babel({ filter: /\.[jt]sx?$/, babelConfig: { - presets: ["@babel/preset-typescript"], // if you use TypeScript + presets: ["@babel/preset-typescript"], // إذا كنت تستخدم TypeScript plugins: [ ["babel-plugin-react-compiler", ReactCompilerConfig], ], @@ -143,63 +143,63 @@ export default defineConfig({ ### Webpack {/*usage-with-webpack*/} -A community webpack loader is [now available here](https://github.com/SukkaW/react-compiler-webpack). +توفّر مجتمع المطورين محمل Webpack متاحًا [هنا](https://github.com/SukkaW/react-compiler-webpack). ### Expo {/*usage-with-expo*/} -Please refer to [Expo's docs](https://docs.expo.dev/guides/react-compiler/) to enable and use the React Compiler in Expo apps. +راجع توثيق [Expo](https://docs.expo.dev/guides/react-compiler/) لتمكين واستخدام React Compiler في تطبيقات Expo. ### Metro (React Native) {/*usage-with-react-native-metro*/} -React Native uses Babel via Metro, so refer to the [Usage with Babel](#babel) section for installation instructions. +يستخدم React Native Babel عبر Metro، لذا راجع قسم [استخدام Babel](#babel) للحصول على تعليمات التثبيت. ### Rspack {/*usage-with-rspack*/} -Please refer to [Rspack's docs](https://rspack.dev/guide/tech/react#react-compiler) to enable and use the React Compiler in Rspack apps. +راجع توثيق [Rspack](https://rspack.dev/guide/tech/react#react-compiler) لتمكين واستخدام React Compiler في تطبيقات Rspack. ### Rsbuild {/*usage-with-rsbuild*/} -Please refer to [Rsbuild's docs](https://rsbuild.dev/guide/framework/react#react-compiler) to enable and use the React Compiler in Rsbuild apps. +راجع توثيق [Rsbuild](https://rsbuild.dev/guide/framework/react#react-compiler) لتمكين واستخدام React Compiler في Rsbuild. -## ESLint Integration {/*eslint-integration*/} +## دمج ESLint {/*eslint-integration*/} -React Compiler includes an ESLint rule that helps identify code that can't be optimized. When the ESLint rule reports an error, it means the compiler will skip optimizing that specific component or hook. This is safe: the compiler will continue optimizing other parts of your codebase. You don't need to fix all violations immediately. Address them at your own pace to gradually increase the number of optimized components. +يتضمن React Compiler قاعدة قواعد ESLint تساعد في تحديد الشيفرة التي لا يمكن تحسينها. عندما تبلغ قاعدة ESLint عن خطأ، فهذا يعني أن المُجمِّع سيتجاهل تحسين ذلك المكوّن أو الهُوك الخاص به. هذا أمر آمن: سيستمر المُجمِّع في تحسين أجزاء أخرى من قاعدة الشيفرة. ليس من الضروري إصلاح كل الانتهاكات فورًا؛ عالجها بوتيرتك لزيادة عدد المكونات المحسنة تدريجيًا. -Install the ESLint plugin: +ثبّت إضافة ESLint: npm install -D eslint-plugin-react-hooks@latest -If you haven't already configured eslint-plugin-react-hooks, follow the [installation instructions in the readme](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md#installation). The compiler rules are available in the `recommended-latest` preset. +إذا لم تكن قد أعددت `eslint-plugin-react-hooks` بعد، اتبع تعليمات التثبيت في README الخاص بها. قواعد المُجمِّع متاحة في مجموعة `recommended-latest`. -The ESLint rule will: -- Identify violations of the [Rules of React](/reference/rules) -- Show which components can't be optimized -- Provide helpful error messages for fixing issues +ستقوم قاعدة ESLint بـ: +- تحديد انتهاكات [قواعد React](/reference/rules) +- إظهار المكونات التي لا يمكن تحسينها +- تقديم رسائل خطأ مفيدة لإصلاح المشكلات -## Verify Your Setup {/*verify-your-setup*/} +## التحقق من إعدادك {/*verify-your-setup*/} -After installation, verify that React Compiler is working correctly. +بعد التثبيت، تحقق من أن React Compiler يعمل بشكل صحيح. -### Check React DevTools {/*check-react-devtools*/} +### التحقق عبر React DevTools {/*check-react-devtools*/} -Components optimized by React Compiler will show a "Memo ✨" badge in React DevTools: +ستُظهر المكوّنات المحسنة بواسطة React Compiler شارة "Memo ✨" في React DevTools: -1. Install the [React Developer Tools](/learn/react-developer-tools) browser extension -2. Open your app in development mode -3. Open React DevTools -4. Look for the ✨ emoji next to component names +1. ثبّت امتداد [React Developer Tools](/learn/react-developer-tools) +2. افتح تطبيقك في وضع التطوير +3. افتح React DevTools +4. ابحث عن رمز ✨ بجانب أسماء المكونات -If the compiler is working: -- Components will show a "Memo ✨" badge in React DevTools -- Expensive calculations will be automatically memoized -- No manual `useMemo` is required +إذا كان المُجمِّع يعمل: +- ستعرض المكوّنات شارة "Memo ✨" في React DevTools +- ستُحفظ العمليات الحسابية المكلفة تلقائيًا +- لن تكون الحاجة إلى `useMemo` اليدوي -### Check Build Output {/*check-build-output*/} +### التحقق من مخرجات البناء {/*check-build-output*/} -You can also verify the compiler is running by checking your build output. The compiled code will include automatic memoization logic that the compiler adds automatically. +يمكنك أيضًا التحقق من تشغيل المُجمِّع من خلال فحص مخرجات البناء؛ ستتضمن الشيفرة المجمعة منطق التذكُّر التلقائي الذي يضيفه المُجمِّع. ```js import { c as _c } from "react/compiler-runtime"; @@ -217,29 +217,29 @@ export default function MyApp() { ``` -## Troubleshooting {/*troubleshooting*/} +## استكشاف المشكلات {/*troubleshooting*/} -### Opting out specific components {/*opting-out-specific-components*/} +### استبعاد مكوّنات محددة {/*opting-out-specific-components*/} -If a component is causing issues after compilation, you can temporarily opt it out using the `"use no memo"` directive: +إذا تسبّب مكوّن بمشكلات بعد التجميع، يمكنك مؤقتًا استبعاده باستخدام توجيه `"use no memo"`: ```js function ProblematicComponent() { "use no memo"; - // Component code here + // هنا كود المكوّن } ``` -This tells the compiler to skip optimization for this specific component. You should fix the underlying issue and remove the directive once resolved. +يخبر هذا المُجمِّع بتخطي تحسين هذا المكوّن المحدد. يجب عليك إصلاح السبب الجذري وإزالة التوجيه بمجرد حل المشكلة. -For more troubleshooting help, see the [debugging guide](/learn/react-compiler/debugging). +لمزيد من المساعدة، راجع [دليل التصحيح](/learn/react-compiler/debugging). -## Next Steps {/*next-steps*/} +## الخطوات التالية {/*next-steps*/} -Now that you have React Compiler installed, learn more about: +الآن بعد أن ثبتت React Compiler، تعرّف على المزيد حول: -- [React version compatibility](/reference/react-compiler/target) for React 17 and 18 -- [Configuration options](/reference/react-compiler/configuration) to customize the compiler -- [Incremental adoption strategies](/learn/react-compiler/incremental-adoption) for existing codebases -- [Debugging techniques](/learn/react-compiler/debugging) for troubleshooting issues -- [Compiling Libraries guide](/reference/react-compiler/compiling-libraries) for compiling your React library +- [توافق إصدارات React](/reference/react-compiler/target) لإصدارات React 17 و 18 +- [خيارات التكوين](/reference/react-compiler/configuration) لتخصيص المُجمِّع +- [استراتيجيات التبنّي التدريجي](/learn/react-compiler/incremental-adoption) للمشاريع الحالية +- [تقنيات التصحيح](/learn/react-compiler/debugging) لاستكشاف المشكلات +- [دليل تجميع المكتبات](/reference/react-compiler/compiling-libraries) لتجميع مكتبتك diff --git a/src/content/learn/react-compiler/introduction.md b/src/content/learn/react-compiler/introduction.md index ff5d6eae4..5d00e95d1 100644 --- a/src/content/learn/react-compiler/introduction.md +++ b/src/content/learn/react-compiler/introduction.md @@ -1,28 +1,28 @@ --- -title: Introduction +title: مقدّمة --- -React Compiler is a new build-time tool that automatically optimizes your React app. It works with plain JavaScript, and understands the [Rules of React](/reference/rules), so you don't need to rewrite any code to use it. +React Compiler أداة جديدة تعمل أثناء البناء وتقوم تلقائيًا بتحسين تطبيق React الخاص بك. تعمل مع JavaScript العادي، وتفهم [قواعد React](/reference/rules)، لذلك لست بحاجة إلى إعادة كتابة الشيفرة لاستخدامها. -* What React Compiler does -* Getting started with the compiler -* Incremental adoption strategies -* Debugging and troubleshooting when things go wrong -* Using the compiler on your React library +* ما الذي يفعله React Compiler +* كيفية البدء بالمُجمِّع +* استراتيجيات التبنّي التدريجي +* التصحيح واستكشاف المشكلات عند حدوث أخطاء +* استخدام المُجمِّع على مكتبتك الخاصة بـ React -## What does React Compiler do? {/*what-does-react-compiler-do*/} +## ماذا يفعل React Compiler؟ {/*what-does-react-compiler-do*/} -React Compiler automatically optimizes your React application at build time. React is often fast enough without optimization, but sometimes you need to manually memoize components and values to keep your app responsive. This manual memoization is tedious, easy to get wrong, and adds extra code to maintain. React Compiler does this optimization automatically for you, freeing you from this mental burden so you can focus on building features. +يقوم React Compiler بتحسين تطبيق React تلقائيًا أثناء عملية البناء. غالبًا ما يكون أداء React جيدًا بدون تحسينات إضافية، لكن أحيانًا تحتاج إلى تذكُّر (memoize) المكوّنات والقيم يدويًا للحفاظ على استجابة التطبيق. هذه العملية اليدوية مرهقة، وسهلة الخطأ، وتضيف شيفرة إضافية يصعب صيانتها. يقوم React Compiler بهذه التحسينات تلقائيًا نيابة عنك، مما يخفف عنك عبء التفكير ويتيح لك التركيز على بناء الميزات. -### Before React Compiler {/*before-react-compiler*/} +### قبل React Compiler {/*before-react-compiler*/} -Without the compiler, you need to manually memoize components and values to optimize re-renders: +بدون المُجمِّع، تحتاج لتذكُّر المكوّنات والقيم يدويًا لتحسين إعادة العرض: ```js import { useMemo, useCallback, memo } from 'react'; @@ -49,21 +49,21 @@ const ExpensiveComponent = memo(function ExpensiveComponent({ data, onClick }) { -This manual memoization has a subtle bug that breaks memoization: +للتذكُّر اليدوي هذه مشكلة دقيقة تكسر التذكُّر: ```js [[2, 1, "() => handleClick(item)"]] handleClick(item)} /> ``` -Even though `handleClick` is wrapped in `useCallback`, the arrow function `() => handleClick(item)` creates a new function every time the component renders. This means that `Item` will always receive a new `onClick` prop, breaking memoization. +على الرغم من أن `handleClick` ملفوف بـ `useCallback`، فإن التعبير السهمي `() => handleClick(item)` ينشئ دالة جديدة في كل عملية عرض، ما يعني أن `Item` سيستقبل دائمًا قيمة جديدة في خاصية `onClick`، فتُكسر فعالية التذكُّر. -React Compiler is able to optimize this correctly with or without the arrow function, ensuring that `Item` only re-renders when `props.onClick` changes. +React Compiler قادر على تحسين هذا بشكل صحيح سواء وُجد التعبير السهمي أم لا، مما يضمن أن `Item` يُعاد عرضه فقط عندما يتغير `props.onClick`. -### After React Compiler {/*after-react-compiler*/} +### بعد React Compiler {/*after-react-compiler*/} -With React Compiler, you write the same code without manual memoization: +مع React Compiler، تكتب نفس الشيفرة دون الحاجة للتذكُّر اليدوي: ```js function ExpensiveComponent({ data, onClick }) { @@ -83,23 +83,21 @@ function ExpensiveComponent({ data, onClick }) { } ``` -_[See this example in the React Compiler Playground](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAogB4AOCmYeAbggMIQC2Fh1OAFMEQCYBDHAIA0RQowA2eOAGsiAXwCURYAB1iROITA4iFGBERgwCPgBEhAogF4iCStVoMACoeO1MAcy6DhSgG4NDSItHT0ACwFMPkkmaTlbIi48HAQWFRsAPlUQ0PFMKRlZFLSWADo8PkC8hSDMPJgEHFhiLjzQgB4+eiyO-OADIwQTM0thcpYBClL02xz2zXz8zoBJMqJZBABPG2BU9Mq+BQKiuT2uTJyomLizkoOMk4B6PqX8pSUFfs7nnro3qEapgFCAFEA)_ - -React Compiler automatically applies the optimal memoization, ensuring your app only re-renders when necessary. +React Compiler يطبّق التذكُّر الأمثل تلقائيًا، مما يضمن أن التطبيق يعيد العرض فقط عند الحاجة. -#### What kind of memoization does React Compiler add? {/*what-kind-of-memoization-does-react-compiler-add*/} +#### ما نوع التذكُّر الذي يضيفه React Compiler؟ {/*what-kind-of-memoization-does-react-compiler-add*/} -React Compiler's automatic memoization is primarily focused on **improving update performance** (re-rendering existing components), so it focuses on these two use cases: +يركز التذكُّر التلقائي في React Compiler بشكل أساسي على **تحسين أداء التحديثات** (إعادة عرض المكوّنات الموجودة)، لذا يركز على حالتي استخدام رئيسيتين: -1. **Skipping cascading re-rendering of components** - * Re-rendering `` causes many components in its component tree to re-render, even though only `` has changed -1. **Skipping expensive calculations from outside of React** - * For example, calling `expensivelyProcessAReallyLargeArrayOfObjects()` inside of your component or hook that needs that data +1. **تجنّب إعادة عرض مكوّنات متتالية** + * إعادة عرض `` قد تسبب إعادة عرض العديد من المكوّنات في الشجرة، حتى إذا تغيّر `` فقط +1. **تجنّب الحسابات المكلفة خارج React** + * على سبيل المثال، استدعاء `expensivelyProcessAReallyLargeArrayOfObjects()` داخل مكوّن أو هُوك يحتاج هذه البيانات -#### Optimizing Re-renders {/*optimizing-re-renders*/} +#### تحسين إعادة العرض {/*optimizing-re-renders*/} -React lets you express your UI as a function of their current state (more concretely: their props, state, and context). In its current implementation, when a component's state changes, React will re-render that component _and all of its children_ — unless you have applied some form of manual memoization with `useMemo()`, `useCallback()`, or `React.memo()`. For example, in the following example, `` will re-render whenever ``'s state changes: +تسمح React بالتعبير عن واجهة المستخدم بوصفها دالة على الحالة الحالية (بالتحديد: الخصائص props، والحالة state، والسياق context). في التنفيذ الحالي، عندما تتغير حالة مكوّن ما، تقوم React بإعادة عرض ذلك المكوّن _وكافة أبنائه_ — إلا إذا طبّقت شكلًا من أشكال التذكُّر اليدوي مثل `useMemo()` أو `useCallback()` أو `React.memo()`. على سبيل المثال، في المثال أدناه، سيُعاد عرض `` كلما تغيرت حالة ``: ```javascript function FriendList({ friends }) { @@ -118,74 +116,72 @@ function FriendList({ friends }) { ); } ``` -[_See this example in the React Compiler Playground_](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAYjHgpgCYAyeYOAFMEWuZVWEQL4CURwADrEicQgyKEANnkwIAwtEw4iAXiJQwCMhWoB5TDLmKsTXgG5hRInjRFGbXZwB0UygHMcACzWr1ABn4hEWsYBBxYYgAeADkIHQ4uAHoAPksRbisiMIiYYkYs6yiqPAA3FMLrIiiwAAcAQ0wU4GlZBSUcbklDNqikusaKkKrgR0TnAFt62sYHdmp+VRT7SqrqhOo6Bnl6mCoiAGsEAE9VUfmqZzwqLrHqM7ubolTVol5eTOGigFkEMDB6u4EAAhKA4HCEZ5DNZ9ErlLIWYTcEDcIA) -React Compiler automatically applies the equivalent of manual memoization, ensuring that only the relevant parts of an app re-render as state changes, which is sometimes referred to as "fine-grained reactivity". In the above example, React Compiler determines that the return value of `` can be reused even as `friends` changes, and can avoid recreating this JSX _and_ avoid re-rendering `` as the count changes. +يقوم React Compiler تلقائيًا بتطبيق ما يعادل التذكُّر اليدوي، مما يضمن أن الأجزاء ذات الصلة فقط من التطبيق هي التي تُعاد عرضها عند تغيّر الحالة — وهو ما يُعرف أحيانًا بـ "ردّ الفعل الدقيق" (fine-grained reactivity). في المثال أعلاه، يحدد React Compiler أن ناتج `` يمكن إعادة استخدامه حتى لو تغيّر `friends`، ويستطيع تجنّب إعادة إنشاء JSX هذا وتجنّب إعادة عرض `` عندما يتغير العد. -#### Expensive calculations also get memoized {/*expensive-calculations-also-get-memoized*/} +#### تُذكّر الحسابات المكلفة أيضًا {/*expensive-calculations-also-get-memoized*/} -React Compiler can also automatically memoize expensive calculations used during rendering: +يمكن لـ React Compiler أيضًا تذكُّر الحسابات المكلفة المستخدمة أثناء العرض تلقائيًا: ```js -// **Not** memoized by React Compiler, since this is not a component or hook +// **غير** مُذكّر بواسطة React Compiler، لأن هذه ليست مكوّنًا أو هُوكًا function expensivelyProcessAReallyLargeArrayOfObjects() { /* ... */ } -// Memoized by React Compiler since this is a component +// مُذكّر بواسطة React Compiler لأن هذا مكوّن function TableContainer({ items }) { - // This function call would be memoized: + // سيتم تذكُّر استدعاء هذه الدالة: const data = expensivelyProcessAReallyLargeArrayOfObjects(items); // ... } ``` -[_See this example in the React Compiler Playground_](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAejQAgFTYHIQAuumAtgqRAJYBeCAJpgEYCemASggIZyGYDCEUgAcqAGwQwANJjBUAdokyEAFlTCZ1meUUxdMcIcIjyE8vhBiYVECAGsAOvIBmURYSonMCAB7CzcgBuCGIsAAowEIhgYACCnFxioQAyXDAA5gixMDBcLADyzvlMAFYIvGAAFACUmMCYaNiYAHStOFgAvk5OGJgAshTUdIysHNy8AkbikrIKSqpaWvqGIiZmhE6u7p7ymAAqXEwSguZcCpKV9VSEFBodtcBOmAYmYHz0XIT6ALzefgFUYKhCJRBAxeLcJIsVIZLI5PKFYplCqVa63aoAbm6u0wMAQhFguwAPPRAQA+YAfL4dIloUmBMlODogDpAA) -However, if `expensivelyProcessAReallyLargeArrayOfObjects` is truly an expensive function, you may want to consider implementing its own memoization outside of React, because: +ومع ذلك، إذا كانت `expensivelyProcessAReallyLargeArrayOfObjects` بالفعل دالة مكلفة جدًا، فقد تود التفكير في تنفيذ تذكرة خاصة بها خارج React، لأن: -- React Compiler only memoizes React components and hooks, not every function -- React Compiler's memoization is not shared across multiple components or hooks +- React Compiler يُذكّر المكوّنات والخُطَف فقط، وليس كل دالة +- تذكّر React Compiler ليس مشتركًا بين مكوّنات أو خُطَف متعددة -So if `expensivelyProcessAReallyLargeArrayOfObjects` was used in many different components, even if the same exact items were passed down, that expensive calculation would be run repeatedly. We recommend [profiling](reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive) first to see if it really is that expensive before making code more complicated. +لذا إذا كانت الدالة تُستخدم في العديد من المكونات، حتى وإن نُقل نفس العناصر بالضبط، فسيتم تشغيل الحساب المكلف مرّاتٍ متكررة. نوصي بـ [القياس](/reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive) أولًا لمعرفة ما إذا كانت الدالة فعلاً مكلفة قبل تعقيد الشيفرة. -## Should I try out the compiler? {/*should-i-try-out-the-compiler*/} +## هل يجب أن أجرب المُجمِّع؟ {/*should-i-try-out-the-compiler*/} -We encourage everyone to start using React Compiler. While the compiler is still an optional addition to React today, in the future some features may require the compiler in order to fully work. +نشجّع الجميع على البدء باستخدام React Compiler. بينما لا يزال المُجمِّع إضافة اختيارية إلى React اليوم، فقد تتطلب بعض الميزات في المستقبل عمل المُجمِّع لتعمل بالكامل. -### Is it safe to use? {/*is-it-safe-to-use*/} +### هل من الآمن استخدامه؟ {/*is-it-safe-to-use*/} -React Compiler is now stable and has been tested extensively in production. While it has been used in production at companies like Meta, rolling out the compiler to production for your app will depend on the health of your codebase and how well you've followed the [Rules of React](/reference/rules). +يُعتبر React Compiler الآن مستقرًا وقد اختُبر على نطاق واسع في الإنتاج. على الرغم من استخدامه في شركات كبرى، فإن نشر المُجمِّع في بيئة الإنتاج لديك يعتمد على صحّة قاعدة الشيفرة لديك ومدى التزامك بـ [قواعد React](/reference/rules). -## What build tools are supported? {/*what-build-tools-are-supported*/} +## ما أدوات البناء المدعومة؟ {/*what-build-tools-are-supported*/} -React Compiler can be installed across [several build tools](/learn/react-compiler/installation) such as Babel, Vite, Metro, and Rsbuild. +يمكن تثبيت React Compiler عبر [عدة أدوات بناء](/learn/react-compiler/installation) مثل Babel و Vite و Metro و Rsbuild. -React Compiler is primarily a light Babel plugin wrapper around the core compiler, which was designed to be decoupled from Babel itself. While the initial stable version of the compiler will remain primarily a Babel plugin, we are working with the swc and [oxc](https://github.com/oxc-project/oxc/issues/10048) teams to build first class support for React Compiler so you won't have to add Babel back to your build pipelines in the future. +React Compiler هو في الأساس إضافة Babel خفيفة تغلّف نواة المُجمِّع، والتي صُمّمت بحيث تكون منفصلة عن Babel نفسه. بينما سيبقى الإصدار المستقر الأولي للمُجمِّع في الغالب كمكوّن Babel، نعمل مع فرق swc و [oxc](https://github.com/oxc-project/oxc/issues/10048) لبناء دعم أصلي لـ React Compiler حتى لا تضطر لإعادة إضافة Babel إلى خطوط البناء في المستقبل. -Next.js users can enable the swc-invoked React Compiler by using [v15.3.1](https://github.com/vercel/next.js/releases/tag/v15.3.1) and up. +يمكن لمستخدمي Next.js تفعيل المُجمِّع المدعو بواسطة swc باستخدام [v15.3.1](https://github.com/vercel/next.js/releases/tag/v15.3.1) وما بعدها. -## What should I do about useMemo, useCallback, and React.memo? {/*what-should-i-do-about-usememo-usecallback-and-reactmemo*/} +## ماذا أفعل بشأن useMemo و useCallback و React.memo؟ {/*what-should-i-do-about-usememo-usecallback-and-reactmemo*/} -By default, React Compiler will memoize your code based on its analysis and heuristics. In most cases, this memoization will be as precise, or moreso, than what you may have written. +بشكل افتراضي، سيقوم React Compiler بتذكُّر الشيفرة استنادًا إلى تحليله وقواعده. في معظم الحالات، سيكون هذا التذكُّر دقيقًا أو أدق مما قد تكتبه يدويًا. -However, in some cases developers may need more control over memoization. The `useMemo` and `useCallback` hooks can continue to be used with React Compiler as an escape hatch to provide control over which values are memoized. A common use-case for this is if a memoized value is used as an effect dependency, in order to ensure that an effect does not fire repeatedly even when its dependencies do not meaningfully change. +ومع ذلك، قد يحتاج المطوّرون أحيانًا لمزيد من التحكم في التذكُّر. يمكن استمرار استخدام `useMemo` و `useCallback` مع React Compiler كمهرب لتحديد القيم التي يجب تذكُّرها بدقة. حالة استخدام شائعة هي عندما تُستخدم قيمة مذكَّرة كاعتماد لتأثير (effect) لضمان عدم تشغيل التأثير مرارًا وتكرارًا عندما لا تتغير الاعتمادات فعليًا. -For new code, we recommend relying on the compiler for memoization and using `useMemo`/`useCallback` where needed to achieve precise control. +بالنسبة للشيفرة الجديدة، نوصي بالاعتماد على المُجمِّع للتذكُّر واستخدام `useMemo`/`useCallback` حين تكون الحاجة إلى تحكم دقيق. -For existing code, we recommend either leaving existing memoization in place (removing it can change compilation output) or carefully testing before removing the memoization. +بالنسبة للشيفرة الحالية، نوصي إمّا بترك التذكُّر الموجود كما هو (إزالته قد يغير ناتج التجميع) أو اختبار التغييرات بعناية قبل إزالته. -## Try React Compiler {/*try-react-compiler*/} +## جرّب React Compiler {/*try-react-compiler*/} -This section will help you get started with React Compiler and understand how to use it effectively in your projects. +يساعدك هذا القسم على البدء مع React Compiler وفهم كيفية استخدامه بفعالية في مشاريعك. -* **[Installation](/learn/react-compiler/installation)** - Install React Compiler and configure it for your build tools -* **[React Version Compatibility](/reference/react-compiler/target)** - Support for React 17, 18, and 19 -* **[Configuration](/reference/react-compiler/configuration)** - Customize the compiler for your specific needs -* **[Incremental Adoption](/learn/react-compiler/incremental-adoption)** - Strategies for gradually rolling out the compiler in existing codebases -* **[Debugging and Troubleshooting](/learn/react-compiler/debugging)** - Identify and fix issues when using the compiler -* **[Compiling Libraries](/reference/react-compiler/compiling-libraries)** - Best practices for shipping compiled code -* **[API Reference](/reference/react-compiler/configuration)** - Detailed documentation of all configuration options +* **[التثبيت](/learn/react-compiler/installation)** - ثبّت React Compiler وكمّنه لأدوات البناء التي تستخدمها +* **[توافق إصدارات React](/reference/react-compiler/target)** - الدعم لإصدارات React 17 و 18 و 19 +* **[التكوين](/reference/react-compiler/configuration)** - خصّص المُجمِّع لاحتياجاتك +* **[التبنّي التدريجي](/learn/react-compiler/incremental-adoption)** - استراتيجيات النشر التدريجي في قواعد الشيفرة الحالية +* **[التصحيح واستكشاف المشكلات](/learn/react-compiler/debugging)** - تحديد وحل المشكلات عند استخدام المُجمِّع +* **[تجميع المكتبات](/reference/react-compiler/compiling-libraries)** - أفضل الممارسات لشحن الشيفرة المجمّعة +* **[مرجع API](/reference/react-compiler/configuration)** - التوثيق التفصيلي لجميع خيارات التكوين -## Additional resources {/*additional-resources*/} +## موارد إضافية {/*additional-resources*/} -In addition to these docs, we recommend checking the [React Compiler Working Group](https://github.com/reactwg/react-compiler) for additional information and discussion about the compiler. +بالإضافة إلى هذه الوثائق، نوصي بالاطلاع على مجموعة عمل [React Compiler Working Group](https://github.com/reactwg/react-compiler) لمزيد من المعلومات والنقاش حول المُجمِّع. diff --git a/src/content/learn/state-as-a-snapshot.md b/src/content/learn/state-as-a-snapshot.md index df4eddbd6..2d77e566b 100644 --- a/src/content/learn/state-as-a-snapshot.md +++ b/src/content/learn/state-as-a-snapshot.md @@ -1,27 +1,27 @@ --- -title: State as a Snapshot +title: الحالة كلقطة زمنية --- -State variables might look like regular JavaScript variables that you can read and write to. However, state behaves more like a snapshot. Setting it does not change the state variable you already have, but instead triggers a re-render. +قد تبدو متغيرات الحالة مثل متغيرات JavaScript العادية التي يمكنك قراءتها وكتابتها. ومع ذلك، تتصرف الحالة بأقرب إلى «لقطة» زمنية. تغييرها لا يغيّر قيمة المتغير الموجودة في التمرير الحالي، بل يطلب من React إعادة عرض المكوّن. -* How setting state triggers re-renders -* When and how state updates -* Why state does not update immediately after you set it -* How event handlers access a "snapshot" of the state +* كيف يؤدي تعيين الحالة إلى طلب إعادة عرض +* متى وكيف تجري تحديثات الحالة +* لماذا لا تتحدّث الحالة فورًا بعد استدعاء دالة التعيين +* كيف تصل معالجات الأحداث إلى «لقطة» من الحالة -## Setting state triggers renders {/*setting-state-triggers-renders*/} +## تعيين الحالة يؤدي إلى إعادة العرض {/*setting-state-triggers-renders*/} -You might think of your user interface as changing directly in response to the user event like a click. In React, it works a little differently from this mental model. On the previous page, you saw that [setting state requests a re-render](/learn/render-and-commit#step-1-trigger-a-render) from React. This means that for an interface to react to the event, you need to *update the state*. +قد تعتقد أن واجهة المستخدم تتغير مباشرةً استجابةً لحدث المستخدم (مثل النقر). في React، الأمر يعمل بطريقة مختلفة قليلًا عن هذا التصور الذهني. في الصفحة السابقة رأيت أن [تعيين الحالة يطلب إعادة عرض](/learn/render-and-commit#step-1-trigger-a-render) من React. هذا يعني أنه لكي تستجيب الواجهة للحدث، يجب عليك *تحديث الحالة*. -In this example, when you press "send", `setIsSent(true)` tells React to re-render the UI: +في هذا المثال، عند الضغط على زر "إرسال"، تستدعي `setIsSent(true)` React لإعادة عرض الواجهة: @@ -30,9 +30,9 @@ import { useState } from 'react'; export default function Form() { const [isSent, setIsSent] = useState(false); - const [message, setMessage] = useState('Hi!'); + const [message, setMessage] = useState('مرحبا!'); if (isSent) { - return

Your message is on its way!

+ return

رسالتك في طريقها!

} return (
{ @@ -41,11 +41,11 @@ export default function Form() { sendMessage(message); }}>