Skip to content

installation.md

Latest commit

 

History

History
249 lines (177 loc) · 10.9 KB

installation.md

File metadata and controls

249 lines (177 loc) · 10.9 KB
title نصب
این راهنما به شما کمک می‌کند تا کامپایلر React را در برنامه React خود نصب و پیکربندی کنید.
  • نحوهٔ نصب کامپایلر ری‌اکت
  • پیکربندی پایه برای ابزارهای بیلد مختلف
  • چگونه اطمینان حاصل کنید که تنظیمات شما کار می‌کند

پیش‌نیازها {/prerequisites/}

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

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

نصب {/installation/}

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

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

یا با Yarn:

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

یا با pnpm:

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

راه‌اندازی پایه {/basic-setup/}

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

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

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

بابل {/babel/}

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

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

Vite {/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 ترجیح می‌دهید:

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 {/usage-with-nextjs/}

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

React Router {/usage-with-react-router/}

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

{`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 {/usage-with-webpack/}

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

Expo {/usage-with-expo/}

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

Metro (ری‌اکت نیتیو) {/usage-with-react-native-metro/}

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

Rspack {/usage-with-rspack/}

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

Rsbuild {/usage-with-rsbuild/}

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

یکپارچه‌سازی ESLint {/eslint-integration/}

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

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

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

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

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

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

تنظیمات خود را تأیید کنید {/verify-your-setup/}

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

بررسی React DevTools {/check-react-devtools/}

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

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

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

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

بررسی خروجی بیلد {/check-build-output/}

شما همچنین می‌توانید با بررسی خروجی بیلد، اطمینان حاصل کنید که کامپایلر در حال اجرا است. کد کامپایل‌شده شامل منطق 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;
}

عیب‌یابی {/troubleshooting/}

انصراف از کامپوننت‌های خاص {/opting-out-specific-components/}

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

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

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

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

مراحل بعدی {/next-steps/}

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