From c08988c751e1c821fda940789a9b93c707a17f61 Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Wed, 9 Oct 2019 17:07:48 +0400 Subject: [PATCH 1/2] Translate React without ES6 --- content/docs/react-without-es6.md | 86 +++++++++++++++---------------- 1 file changed, 43 insertions(+), 43 deletions(-) diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md index 8b54d0981..ecd78651b 100644 --- a/content/docs/react-without-es6.md +++ b/content/docs/react-without-es6.md @@ -4,33 +4,33 @@ title: React Without ES6 permalink: docs/react-without-es6.html --- -Normally you would define a React component as a plain JavaScript class: +Normalda React komponenti sadə JavaScript klası kimi təyin edilir: ```javascript class Greeting extends React.Component { render() { - return

Hello, {this.props.name}

; + return

Salam, {this.props.name}

; } } ``` -If you don't use ES6 yet, you may use the `create-react-class` module instead: +ES6 işlətmirsinizsə, `create-react-class` modulundan istifadə edə bilərsiniz: ```javascript var createReactClass = require('create-react-class'); var Greeting = createReactClass({ render: function() { - return

Hello, {this.props.name}

; + return

Salam, {this.props.name}

; } }); ``` -The API of ES6 classes is similar to `createReactClass()` with a few exceptions. +ES6 klaslarının API-ı bəzi istinaslar ilə `createReactClass()`-ın API-na oxşardır. -## Declaring Default Props {#declaring-default-props} +## Təyin Edilməyən Propların Müəyyənləşdirilməsi {#declaring-default-props} -With functions and ES6 classes `defaultProps` is defined as a property on the component itself: +Funskiyalar və ES6 klaslarında `defaultProps` komponentin parametri kimi təyin edilir: ```javascript class Greeting extends React.Component { @@ -38,17 +38,17 @@ class Greeting extends React.Component { } Greeting.defaultProps = { - name: 'Mary' + name: 'Ayşən' }; ``` -With `createReactClass()`, you need to define `getDefaultProps()` as a function on the passed object: +`createReactClass()` funksiyasında isə, təyin edilməyən propları qaytaran `getDefaultProps()` funksiyasını təyin etməlisiniz: ```javascript var Greeting = createReactClass({ getDefaultProps: function() { return { - name: 'Mary' + name: 'Ayşən' }; }, @@ -57,9 +57,9 @@ var Greeting = createReactClass({ }); ``` -## Setting the Initial State {#setting-the-initial-state} +## İlkin State-in Təyin Edilməsi {#setting-the-initial-state} -In ES6 classes, you can define the initial state by assigning `this.state` in the constructor: +ES6 klaslarında ilkin state-i təyin etmək üçün konstruktordan `this.state`-i təyin etmək kifayətdir: ```javascript class Counter extends React.Component { @@ -71,7 +71,7 @@ class Counter extends React.Component { } ``` -With `createReactClass()`, you have to provide a separate `getInitialState` method that returns the initial state: +`createReactClass()` funksiyasında isə ilkin state-i qaytaran əlavə `getInitialState` funksiyasını təyin etməlisiniz: ```javascript var Counter = createReactClass({ @@ -82,16 +82,16 @@ var Counter = createReactClass({ }); ``` -## Autobinding {#autobinding} +## Avtomatik Binding {#autobinding} -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: +ES6 klasları ilə təyin olunan React klaslarının funskiyaları standart ES6 klaslarının semantikası ilə eynidir. Bu deməkdirki, klas funksiyaları `this` instansiyasını avtomatik bind etmirlər. Bu səbəbdən, konstruktorda açıq formada `.bind(this)` yazmalısınız: ```javascript class SayHello extends React.Component { constructor(props) { super(props); this.state = {message: 'Hello!'}; - // This line is important! + // Bu sətr vacibdir! this.handleClick = this.handleClick.bind(this); } @@ -100,22 +100,22 @@ class SayHello extends React.Component { } render() { - // Because `this.handleClick` is bound, we can use it as an event handler. + // `this.handleClick` klasa bind olduğundan biz bu funksiyanı hasidə işləyicisi kimi işlədə bilərik. return ( ); } } ``` -With `createReactClass()`, this is not necessary because it binds all methods: +`createReactClass()` funksiyasında isə bu lazım deyil. Çünki bu funksiya bütün daxili funksiyalarını avtomatik olaraq bind edir: ```javascript var SayHello = createReactClass({ getInitialState: function() { - return {message: 'Hello!'}; + return {message: 'Salam!'}; }, handleClick: function() { @@ -125,26 +125,26 @@ var SayHello = createReactClass({ render: function() { return ( ); } }); ``` -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. +Bu deməkdirki ES6 klasları hadisə işləyiciləri üçün əlavə kod tələb edir. Lakin, bu klaslar böyük applikasiyalarda daha tez işləyirlər. -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: +Əgər bu əlavə kod sizin üçün çoxdursa **eksperimental** [Klas Parametrləri](https://babeljs.io/docs/plugins/transform-class-properties/) sintaksis təklifini Babel-da qoşa bilərsiniz: ```javascript class SayHello extends React.Component { constructor(props) { super(props); - this.state = {message: 'Hello!'}; + this.state = {message: 'Salam!'}; } - // WARNING: this syntax is experimental! - // Using an arrow here binds the method: + // Xəvərdarlıq: Bu sintaksis eksperimentaldır! + // Burada ox işlətdikdə funksiyalar avtomatik bind olunur: handleClick = () => { alert(this.state.message); } @@ -152,34 +152,34 @@ class SayHello extends React.Component { render() { return ( ); } } ``` -Please note that the syntax above is **experimental** and the syntax may change, or the proposal might not make it into the language. +Nəzərə alın ki, yuxarıda göstərilən sintaksis **eksperimentaldır**. Bu səbəbdən, bu sintaksis dəyişə bilər və ya təklif dilin spefikiasiyasına çatmaya bilər. -If you'd rather play it safe, you have a few options: +Əgər problemsiz işlətmək istəyirsinizsə sizdə bir neçə seçim var: -* Bind methods in the constructor. -* Use arrow functions, e.g. `onClick={(e) => this.handleClick(e)}`. -* Keep using `createReactClass`. +* Konstruktordan funskiyaları bind edin. +* Ox funksiyalarından istifadə edin: `onClick={(e) => this.handleClick(e)}`. +* `createReactClass` funksiyasından istifadə edin. -## Mixins {#mixins} +## Miksinlər {#mixins} ->**Note:** +>**Qeyd:** > ->ES6 launched without any mixin support. Therefore, there is no support for mixins when you use React with ES6 classes. +>ES6 miksinləri dəstəkləmədən buraxılışa verildi. Bu səbəbdən, React-i ES6 klasları ilə istifadə etdikdə miksinlər dəstəklənmir. > ->**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).** +>**Əlavə olaraq miksinli kodlarda çoxlu problemlər tapdığımızdan, [yeni kodda miksinlərin istifadəsini tövsiyyə etmirik](/blog/2016/07/13/mixins-considered-harmful.html).** > ->This section exists only for the reference. +>Bu bölmə yalnız arayış xarakteri daşıyır. -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. +Bəzən, fərqli komponentlər eyni funksionallığı daşıya bilərlər. Bunlar [cross-cutting konsernlər](https://en.wikipedia.org/wiki/Cross-cutting_concern) adlandırılır. `createReactClass` bu konsernlər üçün köhnəlmiş `mixins` sistemindən istifadə etməyə icazə verir. -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. +Bunun üçün çox işlənən ssenarilərdən biri, zaman intervalı ilə komponentin özünü yeniləməsidir. `setInterval()` işlətmək asaındır amma lazım olmadıqda yaddaşı qorumaq üçün intervalı ləğv etmək vacibdir. Komponent yarandıqda və ya dağıldıqda kod icra etmək üçün React [lifecycle funksiyaları](/docs/react-component.html#the-component-lifecycle) təmin edir. Gəlin lifecycle funksiyalarından istifadə edərək komponent dağıldıqda ləğv edilən `setInterval()` funksiyası təmin edək. ```javascript var SetIntervalMixin = { @@ -197,12 +197,12 @@ var SetIntervalMixin = { var createReactClass = require('create-react-class'); var TickTock = createReactClass({ - mixins: [SetIntervalMixin], // Use the mixin + mixins: [SetIntervalMixin], // Mixini istifadə et getInitialState: function() { return {seconds: 0}; }, componentDidMount: function() { - this.setInterval(this.tick, 1000); // Call a method on the mixin + this.setInterval(this.tick, 1000); // Mixinin funksiyasını çağır }, tick: function() { this.setState({seconds: this.state.seconds + 1}); @@ -210,7 +210,7 @@ var TickTock = createReactClass({ render: function() { return (

- React has been running for {this.state.seconds} seconds. + React {this.state.seconds} saniyə işləyir.

); } @@ -222,4 +222,4 @@ ReactDOM.render( ); ``` -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. +Əgər komponent bir neçə miksindən istifadə edirsə və bu miksinlər eyni lifecycle funksiyalarını təyin edirsə (məsələn, komponent dağıldığı zaman bir neçə mixin təmizləmə işləri aparmaq istəyirsə), bütün lifecycle funksiyalarının çağırışı qarantiya olunacaq. Miksinlərdə təyin edilən metodlar miksinlərin massivdə göstərildiyi sıra ilə çağrılacaq. Ən sonda, komponentin lifecycle metodları çağrılacaq. From 8543429a87e49b30efce4f2aa567c2bea0467b51 Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Thu, 10 Oct 2019 13:06:40 +0400 Subject: [PATCH 2/2] Fix React without ES6 after self-review --- content/docs/react-without-es6.md | 41 +++++++++++++++---------------- 1 file changed, 20 insertions(+), 21 deletions(-) diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md index ecd78651b..d02ce9840 100644 --- a/content/docs/react-without-es6.md +++ b/content/docs/react-without-es6.md @@ -1,10 +1,10 @@ --- id: react-without-es6 -title: React Without ES6 +title: ES6-sız React permalink: docs/react-without-es6.html --- -Normalda React komponenti sadə JavaScript klası kimi təyin edilir: +Normalda, React komponenti sadə JavaScript klası kimi təyin edilir: ```javascript class Greeting extends React.Component { @@ -14,7 +14,7 @@ class Greeting extends React.Component { } ``` -ES6 işlətmirsinizsə, `create-react-class` modulundan istifadə edə bilərsiniz: +ES6 işlətmədikdə `create-react-class` modulundan istifadə edə bilərsiniz: ```javascript @@ -26,11 +26,11 @@ var Greeting = createReactClass({ }); ``` -ES6 klaslarının API-ı bəzi istinaslar ilə `createReactClass()`-ın API-na oxşardır. +ES6 klaslarının API-ı bəzi istinasları çıxmaqla `createReactClass()`-ın API-na bənzəyir. ## Təyin Edilməyən Propların Müəyyənləşdirilməsi {#declaring-default-props} -Funskiyalar və ES6 klaslarında `defaultProps` komponentin parametri kimi təyin edilir: +`defaultProps` parametri, funksiya və ES6 klaslarında komponentin parametri kimi təyin edilir: ```javascript class Greeting extends React.Component { @@ -42,7 +42,7 @@ Greeting.defaultProps = { }; ``` -`createReactClass()` funksiyasında isə, təyin edilməyən propları qaytaran `getDefaultProps()` funksiyasını təyin etməlisiniz: +`createReactClass()` işlətdikdə isə təyin edilməyən propları qaytamaq üçün `getDefaultProps()` funksiyası təyin edilməlidir: ```javascript var Greeting = createReactClass({ @@ -71,7 +71,7 @@ class Counter extends React.Component { } ``` -`createReactClass()` funksiyasında isə ilkin state-i qaytaran əlavə `getInitialState` funksiyasını təyin etməlisiniz: +`createReactClass()` funksiyasında isə ilkin state-i qaytaran `getInitialState` funksiyası təyin edilməlidir: ```javascript var Counter = createReactClass({ @@ -84,7 +84,7 @@ var Counter = createReactClass({ ## Avtomatik Binding {#autobinding} -ES6 klasları ilə təyin olunan React klaslarının funskiyaları standart ES6 klaslarının semantikası ilə eynidir. Bu deməkdirki, klas funksiyaları `this` instansiyasını avtomatik bind etmirlər. Bu səbəbdən, konstruktorda açıq formada `.bind(this)` yazmalısınız: +ES6 klasları ilə təyin olunan React klaslarının funksiyaları standart ES6 klaslarının semantikası ilə eynidir. Bu deməkdir ki, klas funksiyalarında `this` instansiyasını avtomatik bind edilmir. Bu səbəbdən, konstruktorda açıq formada `.bind(this)` yazmalısınız: ```javascript class SayHello extends React.Component { @@ -100,7 +100,7 @@ class SayHello extends React.Component { } render() { - // `this.handleClick` klasa bind olduğundan biz bu funksiyanı hasidə işləyicisi kimi işlədə bilərik. + // `this.handleClick` klasa bind olduğundan biz bu funksiyanı hadisə işləyicisi kimi işlədə bilərik. return (