Skip to content

Commit 1ad2b5c

Browse files
author
MRBadri
committed
docs: translate intstallation react compiler documentation to persian
1 parent 3a9b192 commit 1ad2b5c

File tree

1 file changed

+62
-62
lines changed

1 file changed

+62
-62
lines changed

‎src/content/learn/react-compiler/installation.md‎

Lines changed: 62 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,60 @@
11
---
2-
title: Installation
2+
title: نصب
33
---
44

55
<Intro>
6-
This guide will help you install and configure React Compiler in your React application.
6+
این راهنما به شما کمک می‌کند تا کامپایلر React را در برنامه React خود نصب و پیکربندی کنید.
77
</Intro>
88

99
<YouWillLearn>
1010

11-
* How to install React Compiler
12-
* Basic configuration for different build tools
13-
* How to verify your setup is working
11+
* نحوهٔ نصب کامپایلر ری‌اکت
12+
* پیکربندی پایه برای ابزارهای بیلد مختلف
13+
* چگونه اطمینان حاصل کنید که تنظیمات شما کار می‌کند
1414

1515
</YouWillLearn>
1616

17-
## Prerequisites {/*prerequisites*/}
17+
## پیش‌نیازها {/*prerequisites*/}
1818

19-
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).
19+
کامپایلر ری‌اکت برای کار با ری‌اکت 19 طراحی شده است، اما از ری‌اکت 17 و 18 نیز پشتیبانی می‌کند. درباره [سازگاری نسخه‌های ری‌اکت](/reference/react-compiler/target) بیشتر بدانید.
2020

2121
<Note>
22-
React Compiler is currently in RC. Install it using the `@rc` tag to get the latest release candidate version.
22+
کامپایلر ری‌اکت در حال حاضر در RC است. برای دریافت آخرین نسخه کاندید انتشار، از تگ `@rc` استفاده کنید.
2323
</Note>
2424

25-
## Installation {/*installation*/}
25+
## نصب {/*installation*/}
2626

27-
Install React Compiler as a `devDependency`:
27+
کامپایلر ری‌اکت را به عنوان یک `devDependency` نصب کنید:
2828

2929
<TerminalBlock>
3030
npm install -D babel-plugin-react-compiler@rc
3131
</TerminalBlock>
3232

33-
Or with Yarn:
33+
یا با Yarn:
3434

3535
<TerminalBlock>
3636
yarn add -D babel-plugin-react-compiler@rc
3737
</TerminalBlock>
3838

39-
Or with pnpm:
39+
یا با pnpm:
4040

4141
<TerminalBlock>
4242
pnpm install -D babel-plugin-react-compiler@rc
4343
</TerminalBlock>
4444

45-
## Basic Setup {/*basic-setup*/}
45+
## راه‌اندازی پایه {/*basic-setup*/}
4646

47-
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).
47+
کامپایلر ری‌اکت به‌طور پیش‌فرض بدون نیاز به هیچ تنظیماتی کار می‌کند. با این حال، اگر نیاز به پیکربندی آن در شرایط خاص دارید (برای مثال، برای هدف‌گذاری نسخه‌های ری‌اکت پایین‌تر از 19)، به [مرجع گزینه‌های کامپایلر](/reference/react-compiler/configuration) مراجعه کنید.
4848

49-
The setup process depends on your build tool. React Compiler includes a Babel plugin that integrates with your build pipeline.
49+
فرآیند راه‌اندازی به ابزار ساخت شما بستگی دارد. کامپایلر ری‌اکت شامل یک پلاگین Babel است که با خط لوله ساخت شما یکپارچه می‌شود.
5050

5151
<Pitfall>
52-
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.
52+
کامپایلر ری‌اکت باید **ابتدا** در خط لوله پلاگین Babel شما اجرا شود. کامپایلر به اطلاعات منبع اصلی برای تحلیل صحیح نیاز دارد، بنابراین باید قبل از سایر تغییرات کد شما را پردازش کند.
5353
</Pitfall>
5454

55-
### Babel {/*babel*/}
55+
### بابل {/*babel*/}
5656

57-
Create or update your `babel.config.js`:
57+
`babel.config.js` خود را ایجاد یا به‌روزرسانی کنید:
5858

5959
```js {3}
6060
module.exports = {
@@ -68,7 +68,7 @@ module.exports = {
6868

6969
### Vite {/*vite*/}
7070

71-
If you use Vite, you can add the plugin to vite-plugin-react:
71+
اگر از Vite استفاده می‌کنید، می‌توانید پلاگین را به vite-plugin-react اضافه کنید.
7272

7373
```js {3,9}
7474
// vite.config.js
@@ -86,7 +86,7 @@ export default defineConfig({
8686
});
8787
```
8888

89-
Alternatively, if you prefer a separate Babel plugin for Vite:
89+
به‌طور جایگزین، اگر یک پلاگین Babel جداگانه برای Vite ترجیح می‌دهید:
9090

9191
<TerminalBlock>
9292
npm install -D vite-plugin-babel
@@ -112,10 +112,10 @@ export default defineConfig({
112112

113113
### Next.js {/*usage-with-nextjs*/}
114114

115-
Please refer to the [Next.js docs](https://nextjs.org/docs/app/api-reference/next-config-js/reactCompiler) for more information.
115+
لطفاً برای اطلاعات بیشتر به [مستندات Next.js](https://nextjs.org/docs/app/api-reference/next-config-js/reactCompiler) مراجعه کنید.
116116

117117
### React Router {/*usage-with-react-router*/}
118-
Install `vite-plugin-babel`, and add the compiler's Babel plugin to it:
118+
`vite-plugin-babel` را نصب کنید و پلاگین کامپایلر Babel را به آن اضافه کنید:
119119

120120
<TerminalBlock>
121121
{`npm install vite-plugin-babel`}
@@ -147,63 +147,63 @@ export default defineConfig({
147147

148148
### Webpack {/*usage-with-webpack*/}
149149

150-
A community webpack loader is [now available here](https://github.com/SukkaW/react-compiler-webpack).
150+
یک لودر webpack جامعه‌محور [اکنون اینجا در دسترس است](https://github.com/SukkaW/react-compiler-webpack).
151151

152152
### Expo {/*usage-with-expo*/}
153153

154-
Please refer to [Expo's docs](https://docs.expo.dev/guides/react-compiler/) to enable and use the React Compiler in Expo apps.
154+
لطفاً به [مستندات Expo](https://docs.expo.dev/guides/react-compiler/) مراجعه کنید تا کامپایلر ری‌اکت را در اپلیکیشن‌های Expo فعال کرده و استفاده کنید.
155155

156-
### Metro (React Native) {/*usage-with-react-native-metro*/}
156+
### Metro (ری‌اکت نیتیو) {/*usage-with-react-native-metro*/}
157157

158-
React Native uses Babel via Metro, so refer to the [Usage with Babel](#babel) section for installation instructions.
158+
ری‌اکت نیتیو از Babel از طریق Metro استفاده می‌کند، بنابراین برای دستورالعمل‌های نصب به بخش [Usage with Babel](#babel) مراجعه کنید.
159159

160160
### Rspack {/*usage-with-rspack*/}
161161

162-
Please refer to [Rspack's docs](https://rspack.dev/guide/tech/react#react-compiler) to enable and use the React Compiler in Rspack apps.
162+
لطفاً به [مستندات Rspack](https://rspack.dev/guide/tech/react#react-compiler) مراجعه کنید تا کامپایلر ری‌اکت را در برنامه‌های Rspack فعال کرده و استفاده کنید.
163163

164164
### Rsbuild {/*usage-with-rsbuild*/}
165165

166-
Please refer to [Rsbuild's docs](https://rsbuild.dev/guide/framework/react#react-compiler) to enable and use the React Compiler in Rsbuild apps.
166+
لطفاً به [مستندات Rsbuild](https://rsbuild.dev/guide/framework/react#react-compiler) مراجعه کنید تا کامپایلر ری‌اکت را در برنامه‌های Rsbuild فعال کرده و استفاده کنید.
167167

168168

169-
## ESLint Integration {/*eslint-integration*/}
169+
## یکپارچه‌سازی ESLint {/*eslint-integration*/}
170170

171-
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.
171+
کامپایلر ری‌اکت شامل یک قانون ESLint است که به شناسایی کدی که نمی‌تواند بهینه‌سازی شود کمک می‌کند. وقتی قانون ESLint خطایی گزارش می‌دهد، به این معنی است که کامپایلر از بهینه‌سازی آن کامپوننت یا هوک خاص صرف‌نظر خواهد کرد. این کار ایمن است: کامپایلر به بهینه‌سازی سایر بخش‌های کد شما ادامه خواهد داد. نیازی نیست که بلافاصله همه تخلفات را برطرف کنید. با سرعت خودتان به آن‌ها رسیدگی کنید تا به‌تدریج تعداد کامپوننت‌های بهینه‌شده را افزایش دهید.
172172

173-
Install the ESLint plugin:
173+
پلاگین ESLint را نصب کنید:
174174

175175
<TerminalBlock>
176176
npm install -D eslint-plugin-react-hooks@rc
177177
</TerminalBlock>
178178

179-
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 rule is enabled by default in the latest RC, so no additional configuration is needed.
179+
اگر هنوز eslint-plugin-react-hooks را پیکربندی نکرده‌اید، [دستورالعمل‌های نصب در readme](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md#installation) را دنبال کنید. قانون کامپایلر به‌طور پیش‌فرض در آخرین نسخه RC فعال است، بنابراین نیازی به پیکربندی اضافی نیست.
180180

181-
The ESLint rule will:
182-
- Identify violations of the [Rules of React](/reference/rules)
183-
- Show which components can't be optimized
184-
- Provide helpful error messages for fixing issues
181+
قانون ESLint به این صورت عمل خواهد کرد:
182+
- تخلفات از [قوانین ری‌اکت](/reference/rules) را شناسایی کنید
183+
- نشان دهید کدام کامپوننت‌ها نمی‌توانند بهینه شوند
184+
- پیام‌های خطای مفیدی برای رفع مشکلات فراهم کنید
185185

186-
## Verify Your Setup {/*verify-your-setup*/}
186+
## تنظیمات خود را تأیید کنید {/*verify-your-setup*/}
187187

188-
After installation, verify that React Compiler is working correctly.
188+
پس از نصب، اطمینان حاصل کنید که کامپایلر React به درستی کار می‌کند.
189189

190-
### Check React DevTools {/*check-react-devtools*/}
190+
### بررسی React DevTools {/*check-react-devtools*/}
191191

192-
Components optimized by React Compiler will show a "Memo ✨" badge in React DevTools:
192+
کامپوننت‌هایی که توسط کامپایلر ری‌اکت بهینه‌سازی شده‌اند، نشان "Memo ✨" را در React DevTools نمایش خواهند داد:
193193

194-
1. Install the [React Developer Tools](/learn/react-developer-tools) browser extension
195-
2. Open your app in development mode
196-
3. Open React DevTools
197-
4. Look for the ✨ emoji next to component names
194+
۱. افزونه مرورگر [React Developer Tools](/learn/react-developer-tools) را نصب کنید
195+
برنامه خود را در حالت توسعه باز کنید
196+
3. ابزارهای توسعه ری‌اکت را باز کنید
197+
4. به دنبال ایموجی ✨ در کنار نام کامپوننت‌ها بگردید.
198198

199-
If the compiler is working:
200-
- Components will show a "Memo ✨" badge in React DevTools
201-
- Expensive calculations will be automatically memoized
202-
- No manual `useMemo` is required
199+
اگر کامپایلر در حال کار است:
200+
- کامپوننت‌ها در React DevTools نشان "Memo ✨" را نمایش خواهند داد.
201+
- محاسبات پرهزینه به‌طور خودکار به‌خاطر سپرده می‌شوند.
202+
- نیازی به `useMemo` به‌صورت دستی نیست
203203

204-
### Check Build Output {/*check-build-output*/}
204+
### بررسی خروجی بیلد {/*check-build-output*/}
205205

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

208208
```js
209209
import { c as _c } from "react/compiler-runtime";
@@ -221,11 +221,11 @@ export default function MyApp() {
221221

222222
```
223223

224-
## Troubleshooting {/*troubleshooting*/}
224+
## عیب‌یابی {/*troubleshooting*/}
225225

226-
### Opting out specific components {/*opting-out-specific-components*/}
226+
### انصراف از کامپوننت‌های خاص {/*opting-out-specific-components*/}
227227

228-
If a component is causing issues after compilation, you can temporarily opt it out using the `"use no memo"` directive:
228+
اگر یک کامپوننت پس از کامپایل باعث ایجاد مشکلاتی می‌شود، می‌توانید به‌طور موقت آن را با استفاده از دستور `"use no memo"` غیرفعال کنید:
229229

230230
```js
231231
function ProblematicComponent() {
@@ -234,16 +234,16 @@ function ProblematicComponent() {
234234
}
235235
```
236236

237-
This tells the compiler to skip optimization for this specific component. You should fix the underlying issue and remove the directive once resolved.
237+
این به کامپایلر می‌گوید که بهینه‌سازی را برای این کامپوننت خاص نادیده بگیرد. شما باید مشکل اصلی را برطرف کنید و پس از حل آن، این دستور را حذف کنید.
238238

239-
For more troubleshooting help, see the [debugging guide](/learn/react-compiler/debugging).
239+
برای کمک بیشتر در رفع اشکال، به [راهنمای اشکال‌زدایی](/learn/react-compiler/debugging) مراجعه کنید.
240240

241-
## Next Steps {/*next-steps*/}
241+
## مراحل بعدی {/*next-steps*/}
242242

243-
Now that you have React Compiler installed, learn more about:
243+
حالا که کامپایلر ری‌اکت را نصب کرده‌اید، بیشتر بیاموزید دربارهٔ:
244244

245-
- [React version compatibility](/reference/react-compiler/target) for React 17 and 18
246-
- [Configuration options](/reference/react-compiler/configuration) to customize the compiler
247-
- [Incremental adoption strategies](/learn/react-compiler/incremental-adoption) for existing codebases
248-
- [Debugging techniques](/learn/react-compiler/debugging) for troubleshooting issues
249-
- [Compiling Libraries guide](/reference/react-compiler/compiling-libraries) for compiling your React library
245+
- [سازگاری نسخه ری‌اکت](/reference/react-compiler/target) برای React 17 و 18
246+
- [گزینه‌های پیکربندی](/reference/react-compiler/configuration) برای سفارشی کردن کامپایلر
247+
- [استراتژی‌های پذیرش تدریجی](/learn/react-compiler/incremental-adoption) برای کدبیس‌های موجود
248+
- [تکنیک‌های اشکال‌زدایی](/learn/react-compiler/debugging) برای عیب‌یابی مشکلات
249+
- [راهنمای کامپایل کتابخانه‌ها](/reference/react-compiler/compiling-libraries) برای کامپایل کتابخانه ری‌اکت شما

0 commit comments

Comments
 (0)