التثبيت

سيساعدك هذا الدليل على تثبيت وتكوين React Compiler في تطبيق React الخاص بك.

المتطلبات الأساسية

تم تصميم React Compiler ليعمل بشكل أفضل مع React 19، ولكنه يدعم أيضًا React 17 و 18. تعرف على المزيد حولتوافق إصدارات React.

التثبيت

قم بتثبيت React Compiler كـdevDependency:

npm install -D babel-plugin-react-compiler@latest

أو باستخدام Yarn:

yarn add -D babel-plugin-react-compiler@latest

أو باستخدام pnpm:

pnpm install -D babel-plugin-react-compiler@latest

الإعداد الأساسي

تم تصميم React Compiler ليعمل افتراضيًا دون أي تكوين. ومع ذلك، إذا كنت بحاجة إلى تكوينه في ظروف خاصة (على سبيل المثال، لاستهداف إصدارات React أقل من 19)، راجعمرجع خيارات المترجم.

تعتمد عملية الإعداد على أداة البناء الخاصة بك. يتضمن React Compiler إضافة Babel تندمج مع خط أنابيب البناء الخاص بك.

Babel

أنشئ أو قم بتحديث ملفbabel.config.js:

Vite

إذا كنت تستخدم Vite، يمكنك إضافة الإضافة إلى vite-plugin-react:

بدلاً من ذلك، إذا كنت تفضل إضافة Babel منفصلة لـ Vite:

npm install -D vite-plugin-babel

Next.js

يرجى الرجوع إلىوثائق Next.jsلمزيد من المعلومات.

React Router

قم بتثبيتvite-plugin-babel، وأضف إضافة Babel الخاصة بالمترجم إليها:

npm install vite-plugin-babel

Webpack

أداة تحميل مجتمعية لـ webpackمتاحة الآن هنا.

Expo

يرجى الرجوع إلىوثائق Expoلتمكين واستخدام React Compiler في تطبيقات Expo.

Metro (React Native)

يستخدم React Native Babel عبر Metro، لذا راجع قسمالاستخدام مع Babelللحصول على تعليمات التثبيت.

Rspack

يرجى الرجوع إلىوثائق Rspackلتمكين واستخدام React Compiler في تطبيقات Rspack.

Rsbuild

يرجى الرجوع إلىوثائق Rsbuildلتمكين واستخدام React Compiler في تطبيقات Rsbuild.

التكامل مع ESLint

يتضمن React Compiler قاعدة ESLint تساعد في تحديد الكود الذي لا يمكن تحسينه. عندما تبلغ قاعدة ESLint عن خطأ، فهذا يعني أن المترجم سيتخطى تحسين هذا المكون أو الخطاف المحدد. هذا آمن: سيستمر المترجم في تحسين الأجزاء الأخرى من قاعدة الكود الخاصة بك. لا تحتاج إلى إصلاح جميع المخالفات على الفور. تعامل معها وفقًا لسرعتك لزيادة عدد المكونات المحسنة تدريجيًا.

قم بتثبيت إضافة ESLint:

npm install -D eslint-plugin-react-hooks@latest

إذا لم تكن قد قمت بتكوين eslint-plugin-react-hooks بالفعل، اتبعتعليمات التثبيت في ملف README. تتوفر قواعد المترجم في الإعداد المسبقrecommended-latest.

ستقوم قاعدة ESLint بما يلي:

• تحديد انتهاكاتقواعد React
• إظهار المكونات التي لا يمكن تحسينها
• تقديم رسائل خطأ مفيدة لإصلاح المشكلات

التحقق من إعدادك

بعد التثبيت، تحقق من أن React Compiler يعمل بشكل صحيح.

التحقق من React DevTools

المكونات التي تم تحسينها بواسطة React Compiler ستظهر شارة "Memo ✨" في React DevTools:

1. قم بتثبيتReact Developer Toolsامتداد المتصفح
2. افتح تطبيقك في وضع التطوير
3. افتح React DevTools
4. ابحث عن رمز الإيموجي ✨ بجوار أسماء المكونات

إذا كان المترجم يعمل:

• ستظهر المكونات شارة "Memo ✨" في React DevTools
• سيتم حفظ الحسابات المكلفة تلقائيًا في الذاكرة المؤقتة
• لا حاجة إلىuseMemoيدوي

التحقق من ناتج البناء

يمكنك أيضًا التحقق من أن المترجم يعمل عن طريق فحص ناتج البناء الخاص بك. سيتضمن الكود المترجم منطق حفظ الذاكرة المؤقتة التلقائي الذي يضيفه المترجم تلقائيًا.

استكشاف الأخطاء وإصلاحها

استبعاد مكونات محددة

إذا كان المكون يسبب مشكلات بعد الترجمة، يمكنك استبعاده مؤقتًا باستخدام توجيه"use no memo":

هذا يخبر المترجم بتخطي التحسين لهذا المكون المحدد. يجب عليك إصلاح المشكلة الأساسية وإزالة التوجيه بمجرد حلها.

لمزيد من المساعدة في استكشاف الأخطاء وإصلاحها، راجعدليل التصحيح.

الخطوات التالية

الآن بعد أن قمت بتثبيت React Compiler، تعرف على المزيد حول:

• توافق إصدارات Reactمع React 17 و 18
• خيارات التكوينلتخصيص المترجم
• استراتيجيات التبني التدريجيلقواعد التعليمات البرمجية الحالية
• تقنيات التصحيحلاستكشاف الأخطاء وإصلاحها
• دليل ترجمة المكتباتلترجمة مكتبة React الخاصة بك