Skip to content

Commit ee64768

Browse files
committed
Merge branch 'react-without-es6-hosseinamd' of https://github.com/hosseinAMD/fa.reactjs.org into hosseinAMD-react-without-es6-hosseinamd
2 parents 263099d + b05ccea commit ee64768

File tree

1 file changed

+26
-26
lines changed

1 file changed

+26
-26
lines changed

content/docs/react-without-es6.md

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
---
22
id: react-without-es6
3-
title: React Without ES6
3+
title: ری‌اکت بدون ES6
44
permalink: docs/react-without-es6.html
55
---
66

7-
Normally you would define a React component as a plain JavaScript class:
7+
شما به صورت عادی یک کامپوننت ری‌اکت را به عنوان یک کلاس جاوااسکریپت ساده تعریف می‌کنید:
88

99
```javascript
1010
class Greeting extends React.Component {
@@ -14,7 +14,7 @@ class Greeting extends React.Component {
1414
}
1515
```
1616

17-
If you don't use ES6 yet, you may use the `create-react-class` module instead:
17+
اگر هنوز از ES6 استفاده نمی‌کنید، شاید به جای ان از ماژول `create-react-class` استفاده کنید:
1818

1919

2020
```javascript
@@ -26,11 +26,11 @@ var Greeting = createReactClass({
2626
});
2727
```
2828

29-
The API of ES6 classes is similar to `createReactClass()` with a few exceptions.
29+
API کلاس‌های ES6 با کمی استثناءها مشابه `createReactClass()` است:
3030

31-
## Declaring Default Props {#declaring-default-props}
31+
## تعریف Prop های پیش‌فرض {#declaring-default-props}
3232

33-
With functions and ES6 classes `defaultProps` is defined as a property on the component itself:
33+
با توابع و کلاس‌های ES6، `defaultProps` به عنوان یک ویژگی روی خود کامپوننت تعریف می‌شوند.
3434

3535
```javascript
3636
class Greeting extends React.Component {
@@ -42,7 +42,7 @@ Greeting.defaultProps = {
4242
};
4343
```
4444

45-
With `createReactClass()`, you need to define `getDefaultProps()` as a function on the passed object:
45+
با `createReactClass()`، شما به تعریف `getDefaultProps()` به عنوان یک تابع روی آبجکت پاس داده شده نیاز دارید.
4646

4747
```javascript
4848
var Greeting = createReactClass({
@@ -57,9 +57,9 @@ var Greeting = createReactClass({
5757
});
5858
```
5959

60-
## Setting the Initial State {#setting-the-initial-state}
60+
## تنظیم State اولیه {#setting-the-initial-state}
6161

62-
In ES6 classes, you can define the initial state by assigning `this.state` in the constructor:
62+
در کلاس‌های ES6، شما می‌توانید state اولیه را با اختصاص دادن `this.state` در سازنده تعریف کنید:
6363

6464
```javascript
6565
class Counter extends React.Component {
@@ -71,7 +71,7 @@ class Counter extends React.Component {
7171
}
7272
```
7373

74-
With `createReactClass()`, you have to provide a separate `getInitialState` method that returns the initial state:
74+
با `createReactClass()`، شما باید یک متد جداگانه `getInitialState` که state اولیه را بازمی‌گرداند فراهم کنید:
7575

7676
```javascript
7777
var Counter = createReactClass({
@@ -84,7 +84,7 @@ var Counter = createReactClass({
8484

8585
## Autobinding {#autobinding}
8686

87-
In React components declared as ES6 classes, methods follow the same semantics as regular ES6 classes. This means that they don't automatically bind `this` to the instance. You'll have to explicitly use `.bind(this)` in the constructor:
87+
در کامپوننت‌های ری‌اکت که به عنوان کلاس‌های ES6 تعریف شده‌اند، متدها از همان مفاهیم کلاس‌های ES6 معمولی پیروی می‌کنند. یعنی آن‌ها `this` را به طور خودکار به نمونه شی bind نمی‌کنند. شما باید صریحا از `.bind(this)` در سازنده استفاده کنید:
8888

8989
```javascript
9090
class SayHello extends React.Component {
@@ -110,7 +110,7 @@ class SayHello extends React.Component {
110110
}
111111
```
112112

113-
With `createReactClass()`, this is not necessary because it binds all methods:
113+
در `createReactClass()`، اینکار ضروری نیست چرا که خودش تمام متدهارا bind می‌کند:
114114

115115
```javascript
116116
var SayHello = createReactClass({
@@ -132,9 +132,9 @@ var SayHello = createReactClass({
132132
});
133133
```
134134

135-
This means writing ES6 classes comes with a little more boilerplate code for event handlers, but the upside is slightly better performance in large applications.
135+
این یعنی نوشتن کلاس‌های ES6 همراه با کمی کد boilerplate برای مدیریت کننده‌های رویداد است، اما مزیت آن این است که عملکرد بهتری در اپلیکیشن‌های بزرک دارد.
136136

137-
If the boilerplate code is too unattractive to you, you may enable the **experimental** [Class Properties](https://babeljs.io/docs/plugins/transform-class-properties/) syntax proposal with Babel:
137+
اگر کد boilerplate برای شما جذاب نیست، می‌توانید پیشنهاد نحوی **experimental** در [Class Properties](https://babeljs.io/docs/plugins/transform-class-properties/) را در Babel فعال کنید:
138138

139139

140140
```javascript
@@ -159,27 +159,27 @@ class SayHello extends React.Component {
159159
}
160160
```
161161

162-
Please note that the syntax above is **experimental** and the syntax may change, or the proposal might not make it into the language.
162+
لطفا در نظر داشته باشید که قاعده بالا **experimental** است و ممکن است تغییر کند، یا ممکن است این پیشنهاد وارد زبان نشود.
163163

164-
If you'd rather play it safe, you have a few options:
164+
اگر ترجیح می‌دهید که در امنیت باشید، چند انتخاب دارید:
165165

166-
* Bind methods in the constructor.
167-
* Use arrow functions, e.g. `onClick={(e) => this.handleClick(e)}`.
168-
* Keep using `createReactClass`.
166+
* متدها را در سازنده bind کنید.
167+
* از arrow function ها استفاده کنید، برای مثال `onClick={(e) => this.handleClick(e)}`.
168+
* به استفاده از `createReactClass` ادامه دهید.
169169

170170
## Mixins {#mixins}
171171

172-
>**Note:**
172+
>**نکته:**
173173
>
174-
>ES6 launched without any mixin support. Therefore, there is no support for mixins when you use React with ES6 classes.
174+
>ES6 بدون پشتیبانی از mixin منتشر شد. بنابراین، هنگامی که از ری‌اکت با کلاس‌های ES6 استفاده می‌کنید، mixin ها پشتیبانی نمی‌شوند.
175175
>
176-
>**We also found numerous issues in codebases using mixins, [and don't recommend using them in the new code](/blog/2016/07/13/mixins-considered-harmful.html).**
176+
>**همچنین ما به تعدادی مشکل در پایگاه‌های کد با استفاده از mixin ها برخوردیم، [و استفاده از آن‌ها در کدهای جدید را پیشنهاد نمی‌کنیم](/blog/2016/07/13/mixins-considered-harmful.html).**
177177
>
178-
>This section exists only for the reference.
178+
>این قسمت فقط برای ارجاع وجود دارد.
179179
180-
Sometimes very different components may share some common functionality. These are sometimes called [cross-cutting concerns](https://en.wikipedia.org/wiki/Cross-cutting_concern). `createReactClass` lets you use a legacy `mixins` system for that.
180+
گاهی اوقات ممکن است کامپوننت‌های بسیار متفاوت بضعی عملکردهای رایج را با یکدیگر به اشتراک بگذارند. این‌ها گاهی [cross-cutting concerns](https://en.wikipedia.org/wiki/Cross-cutting_concern) خوانده می‌شوند. `createReactClass` به شما اجازه استفاده از سیستم سنتی `mixins` برای آن را می‌دهد.
181181

182-
One common use case is a component wanting to update itself on a time interval. It's easy to use `setInterval()`, but it's important to cancel your interval when you don't need it anymore to save memory. React provides [lifecycle methods](/docs/react-component.html#the-component-lifecycle) that let you know when a component is about to be created or destroyed. Let's create a simple mixin that uses these methods to provide an easy `setInterval()` function that will automatically get cleaned up when your component is destroyed.
182+
یک مورد کاربرد رایج، یک کامپوننت که می‌خواهد خودش را در یک چرخه زمانی به‌روز کند است. استفاده از `setInterval()` ساده است، اما بسیار مهم است که زمانی که دیگر از interval خود استفاده نمی‌کنید آن را لغو کنید تا حافظه مصرف نکند. ری‌اکت [متدهای چرخه حیات](/docs/react-component.html#the-component-lifecycle) که به شما اجازه می‌دهد زمانی که یک کامپوننت ایجاد و یا نابود می‌شود را بدانید فراهم کرده‌است. بیایید یک mixin ساده که از این متدها برای فراهم کردن یک تابع `setInterval()` آسان که به صورت خودکار زمانی که کامپوننت شما نابود می‌شود پاک می‌شود را ایجاد کنیم.
183183

184184
```javascript
185185
var SetIntervalMixin = {
@@ -222,4 +222,4 @@ ReactDOM.render(
222222
);
223223
```
224224

225-
If a component is using multiple mixins and several mixins define the same lifecycle method (i.e. several mixins want to do some cleanup when the component is destroyed), all of the lifecycle methods are guaranteed to be called. Methods defined on mixins run in the order mixins were listed, followed by a method call on the component.
225+
اگر یک کامپوننت از چند mixin استفاده می‌کند و mixin های متفاوت یک متد چرخه حیات یکسان را تعریف می‌کنند، (برای مثال mixin های مختلف می‌خواهند کمی تمیزکاری پس از نابود شدن کامپوننت انجام دهند) همه متدهای چرخه حیات برای فراخوانی تضمین شده‌اند. متدهای mixin ها به همان ترتیبی که لیست شده‌اند، به دنبال صدا زدن یک متد روی کامپوننت اجرا می‌شوند.

0 commit comments

Comments
 (0)