این راهنما به شما کمک می‌کند تا کامپایلر React را در برنامه React خود نصب و پیکربندی کنید.

یاد خواهید گرفت

  • نحوهٔ نصب کامپایلر ری‌اکت
  • پیکربندی پایه برای ابزارهای بیلد مختلف
  • چگونه اطمینان حاصل کنید که تنظیمات شما کار می‌کند

پیش‌نیازها

کامپایلر ری‌اکت برای کار با ری‌اکت 19 طراحی شده است، اما از ری‌اکت 17 و 18 نیز پشتیبانی می‌کند. درباره سازگاری نسخه‌های ری‌اکت بیشتر بدانید.

نکته

کامپایلر ری‌اکت در حال حاضر در RC است. برای دریافت آخرین نسخه کاندید انتشار، از تگ @rc استفاده کنید.

نصب

کامپایلر ری‌اکت را به عنوان یک devDependency نصب کنید:

Terminal
npm install -D babel-plugin-react-compiler@rc

یا با Yarn:

Terminal
yarn add -D babel-plugin-react-compiler@rc

یا با pnpm:

Terminal
pnpm install -D babel-plugin-react-compiler@rc

راه‌اندازی پایه

کامپایلر ری‌اکت به‌طور پیش‌فرض بدون نیاز به هیچ تنظیماتی کار می‌کند. با این حال، اگر نیاز به پیکربندی آن در شرایط خاص دارید (برای مثال، برای هدف‌گذاری نسخه‌های ری‌اکت پایین‌تر از 19)، به مرجع گزینه‌های کامپایلر مراجعه کنید.

فرآیند راه‌اندازی به ابزار ساخت شما بستگی دارد. کامپایلر ری‌اکت شامل یک پلاگین Babel است که با خط لوله ساخت شما یکپارچه می‌شود.

دام

کامپایلر ری‌اکت باید ابتدا در خط لوله پلاگین Babel شما اجرا شود. کامپایلر به اطلاعات منبع اصلی برای تحلیل صحیح نیاز دارد، بنابراین باید قبل از سایر تغییرات کد شما را پردازش کند.

بابل

babel.config.js خود را ایجاد یا به‌روزرسانی کنید:

module.exports = {
  plugins: [
    'babel-plugin-react-compiler', // must run first!
    // ... other plugins
  ],
  // ... other config
};

Vite

اگر از Vite استفاده می‌کنید، می‌توانید پلاگین را به vite-plugin-react اضافه کنید.

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ['babel-plugin-react-compiler'],
      },
    }),
  ],
});

به‌طور جایگزین، اگر یک پلاگین Babel جداگانه برای Vite ترجیح می‌دهید:

Terminal
npm install -D vite-plugin-babel
// vite.config.js
import babel from 'vite-plugin-babel';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react(),
    babel({
      babelConfig: {
        plugins: ['babel-plugin-react-compiler'],
      },
    }),
  ],
});

Next.js

لطفاً برای اطلاعات بیشتر به مستندات Next.js مراجعه کنید.

React Router

vite-plugin-babel را نصب کنید و پلاگین کامپایلر Babel را به آن اضافه کنید:

Terminal
npm install vite-plugin-babel
// vite.config.js
import { defineConfig } from "vite";
import babel from "vite-plugin-babel";
import { reactRouter } from "@react-router/dev/vite";

const ReactCompilerConfig = { /* ... */ };

export default defineConfig({
  plugins: [
    reactRouter(),
    babel({
      filter: /\.[jt]sx?$/,
      babelConfig: {
        presets: ["@babel/preset-typescript"], // if you use TypeScript
        plugins: [
          ["babel-plugin-react-compiler", ReactCompilerConfig],
        ],
      },
    }),
  ],
});

Webpack

یک لودر webpack جامعه‌محور اکنون اینجا در دسترس است.

Expo

لطفاً به مستندات Expo مراجعه کنید تا کامپایلر ری‌اکت را در اپلیکیشن‌های Expo فعال کرده و استفاده کنید.

Metro (ری‌اکت نیتیو)

ری‌اکت نیتیو از Babel از طریق Metro استفاده می‌کند، بنابراین برای دستورالعمل‌های نصب به بخش Usage with Babel مراجعه کنید.

Rspack

لطفاً به مستندات Rspack مراجعه کنید تا کامپایلر ری‌اکت را در برنامه‌های Rspack فعال کرده و استفاده کنید.

Rsbuild

لطفاً به مستندات Rsbuild مراجعه کنید تا کامپایلر ری‌اکت را در برنامه‌های Rsbuild فعال کرده و استفاده کنید.

یکپارچه‌سازی ESLint

کامپایلر ری‌اکت شامل یک قانون ESLint است که به شناسایی کدی که نمی‌تواند بهینه‌سازی شود کمک می‌کند. وقتی قانون ESLint خطایی گزارش می‌دهد، به این معنی است که کامپایلر از بهینه‌سازی آن کامپوننت یا هوک خاص صرف‌نظر خواهد کرد. این کار ایمن است: کامپایلر به بهینه‌سازی سایر بخش‌های کد شما ادامه خواهد داد. نیازی نیست که بلافاصله همه تخلفات را برطرف کنید. با سرعت خودتان به آن‌ها رسیدگی کنید تا به‌تدریج تعداد کامپوننت‌های بهینه‌شده را افزایش دهید.

پلاگین ESLint را نصب کنید:

Terminal
npm install -D eslint-plugin-react-hooks@rc

اگر هنوز eslint-plugin-react-hooks را پیکربندی نکرده‌اید، دستورالعمل‌های نصب در readme را دنبال کنید. قانون کامپایلر به‌طور پیش‌فرض در آخرین نسخه RC فعال است، بنابراین نیازی به پیکربندی اضافی نیست.

قانون ESLint به این صورت عمل خواهد کرد:

  • تخلفات از قوانین ری‌اکت را شناسایی کنید
  • نشان دهید کدام کامپوننت‌ها نمی‌توانند بهینه شوند
  • پیام‌های خطای مفیدی برای رفع مشکلات فراهم کنید

تنظیمات خود را تأیید کنید

پس از نصب، اطمینان حاصل کنید که کامپایلر React به درستی کار می‌کند.

بررسی React DevTools

کامپوننت‌هایی که توسط کامپایلر ری‌اکت بهینه‌سازی شده‌اند، نشان “Memo ✨” را در React DevTools نمایش خواهند داد:

۱. افزونه مرورگر React Developer Tools را نصب کنید برنامه خود را در حالت توسعه باز کنید

  1. ابزارهای توسعه ری‌اکت را باز کنید
  2. به دنبال ایموجی ✨ در کنار نام کامپوننت‌ها بگردید.

اگر کامپایلر در حال کار است:

  • کامپوننت‌ها در React DevTools نشان “Memo ✨” را نمایش خواهند داد.
  • محاسبات پرهزینه به‌طور خودکار به‌خاطر سپرده می‌شوند.
  • نیازی به useMemo به‌صورت دستی نیست

بررسی خروجی بیلد

شما همچنین می‌توانید با بررسی خروجی بیلد، اطمینان حاصل کنید که کامپایلر در حال اجرا است. کد کامپایل‌شده شامل منطق memoization خودکار خواهد بود که کامپایلر به‌طور خودکار اضافه می‌کند.

import { c as _c } from "react/compiler-runtime";
export default function MyApp() {
  const $ = _c(1);
  let t0;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t0 = <div>Hello World</div>;
    $[0] = t0;
  } else {
    t0 = $[0];
  }
  return t0;
}

عیب‌یابی

انصراف از کامپوننت‌های خاص

اگر یک کامپوننت پس از کامپایل باعث ایجاد مشکلاتی می‌شود، می‌توانید به‌طور موقت آن را با استفاده از دستور "use no memo" غیرفعال کنید:

function ProblematicComponent() {
  "use no memo";
  // Component code here
}

این به کامپایلر می‌گوید که بهینه‌سازی را برای این کامپوننت خاص نادیده بگیرد. شما باید مشکل اصلی را برطرف کنید و پس از حل آن، این دستور را حذف کنید.

برای کمک بیشتر در رفع اشکال، به راهنمای اشکال‌زدایی مراجعه کنید.

مراحل بعدی

حالا که کامپایلر ری‌اکت را نصب کرده‌اید، بیشتر بیاموزید دربارهٔ:

Previousمقدمه
Nextپذیرش تدریجی