From 911a681d0b21fe21ddd097ff97fc23268ce7a2a1 Mon Sep 17 00:00:00 2001 From: Aziza Ismayilova Date: Mon, 11 Mar 2019 22:38:38 +0400 Subject: [PATCH 1/4] traslated web components --- content/docs/web-components.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/content/docs/web-components.md b/content/docs/web-components.md index cbfcc80e1..1bcbe4c8e 100644 --- a/content/docs/web-components.md +++ b/content/docs/web-components.md @@ -1,16 +1,16 @@ --- id: web-components -title: Web Components +title: Veb Komponentlər permalink: docs/web-components.html redirect_from: - "docs/webcomponents.html" --- -React and [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) are built to solve different problems. Web Components provide strong encapsulation for reusable components, while React provides a declarative library that keeps the DOM in sync with your data. The two goals are complementary. As a developer, you are free to use React in your Web Components, or to use Web Components in React, or both. +React və [Veb Komponentlər](https://developer.mozilla.org/en-US/docs/Web/Web_Components) müxtəlif problemləri həll etmək üçün qurulub. Veb Komponentlərin yenidən istifadə olunması üçün inkapsulyasiya dəstəklədiyi halda React DOM-u sizin məlumatlarınız ilə sinxronlaşdıran deklarativ kitabxana təmin edir. Hər iki məqsəd tamamlayıcıdırlar. Developer kimi siz Veb komponentlərinizdə React istifadə edə bilər və ya React-də Veb Komponentlər istifadə edə bilərsiniz, və ya hər ikisini. -Most people who use React don't use Web Components, but you may want to, especially if you are using third-party UI components that are written using Web Components. +React istifadə edənlərin çoxu Veb Komponentlər istifadə etmir, amma siz istifadə etmək istiyə bilərsiniz. Xüsusilə, əgər siz Veb Komponentlərin istifadəsi üçün yazılmış üçüncü tərəf UI komponentləri istifadə edirsinizsə. -## Using Web Components in React {#using-web-components-in-react} +## React-də Veb Komponentlərin İstifadəsi {#using-web-components-in-react} ```javascript class HelloMessage extends React.Component { @@ -20,14 +20,14 @@ class HelloMessage extends React.Component { } ``` -> Note: +> Qeyd: > -> Web Components often expose an imperative API. For instance, a `video` Web Component might expose `play()` and `pause()` functions. To access the imperative APIs of a Web Component, you will need to use a ref to interact with the DOM node directly. If you are using third-party Web Components, the best solution is to write a React component that behaves as a wrapper for your Web Component. +> Veb Komponentlər çox vaxt imperativ API-nı göstərir. Məsələn, `video` Veb Komponenti `play()` və `pause()` funksiyalarını göstərə bilər. Veb Komponentin interaktiv API-sinə daxil olmaq üçün siz DOM node-a birdəfəlik əlaqəyə girən ref işlətməli olacaqsınız. Əgər siz üçüncü tərəf Veb Komponentlərini istifadə edirsinizsə ən yaxşı çıxış yolu sizin Veb komponentinizə əhatə edən funksiyasını daşıyan rolunu oynayan React komponenti yazmaqdır. > -> Events emitted by a Web Component may not properly propagate through a React render tree. -> You will need to manually attach event handlers to handle these events within your React components. +> Veb komponentlər tərəfindən yayılmış hadisələr React render ağacından düngün ötməyə bilər. +> Siz React komponentlərinizdə bu hadisələri idarə etmək üçün əllə (manually) hadisə işləyicilərini qoşmalısınız. -One common confusion is that Web Components use "class" instead of "className". +Bir ümumi çaşqınlıq odur ki, Veb Komponentlər "className" əvəzinə "class" işlədirlər. ```javascript function BrickFlipbox() { @@ -40,7 +40,7 @@ function BrickFlipbox() { } ``` -## Using React in your Web Components {#using-react-in-your-web-components} +## Sizin Veb Komponentlərinizdə React-in İşlənməsi {#using-react-in-your-web-components} ```javascript class XSearch extends HTMLElement { @@ -56,7 +56,7 @@ class XSearch extends HTMLElement { customElements.define('x-search', XSearch); ``` ->Note: +>Qeyd: > ->This code **will not** work if you transform classes with Babel. See [this issue](https://github.com/w3c/webcomponents/issues/587) for the discussion. ->Include the [custom-elements-es5-adapter](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs) before you load your web components to fix this issue. +>Bu kod klasları Babel ilə çevirsəniz **işləməyəcək**. [Bu problemə](https://github.com/w3c/webcomponents/issues/587) müzakirə üçün baxın. +>Bu problemi həll etmək üçün veb komponentinizi yükləməmişdən öncə [custom-elements-es5-adapter](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs)-i daxil edin. From 64e846860313b8dfd6aa3ccad7c96d10da4b979e Mon Sep 17 00:00:00 2001 From: Aziza Ismayilova Date: Thu, 28 Mar 2019 10:45:55 +0400 Subject: [PATCH 2/4] fix small issues --- content/docs/web-components.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/web-components.md b/content/docs/web-components.md index 1bcbe4c8e..96879cb41 100644 --- a/content/docs/web-components.md +++ b/content/docs/web-components.md @@ -6,9 +6,9 @@ redirect_from: - "docs/webcomponents.html" --- -React və [Veb Komponentlər](https://developer.mozilla.org/en-US/docs/Web/Web_Components) müxtəlif problemləri həll etmək üçün qurulub. Veb Komponentlərin yenidən istifadə olunması üçün inkapsulyasiya dəstəklədiyi halda React DOM-u sizin məlumatlarınız ilə sinxronlaşdıran deklarativ kitabxana təmin edir. Hər iki məqsəd tamamlayıcıdırlar. Developer kimi siz Veb komponentlərinizdə React istifadə edə bilər və ya React-də Veb Komponentlər istifadə edə bilərsiniz, və ya hər ikisini. +React və [Veb Komponentlər](https://developer.mozilla.org/en-US/docs/Web/Web_Components) müxtəlif problemləri həll etmək üçün qurulub. İnkapsulyasiya dəstəklədiyi halda, Veb Komponentlərin yenidən istifadə olunması üçün React DOM-u sizin məlumatlarınız ilə sinxronlaşdıran deklarativ kitabxana təmin edir. Hər iki məqsədlər tamamlayıcıdırlar. Developer kimi siz Veb Komponentlərinizdə React istifadə edə bilər və ya React-də Veb Komponentlər istifadə edə bilərsiniz, və ya hər ikisini. -React istifadə edənlərin çoxu Veb Komponentlər istifadə etmir, amma siz istifadə etmək istiyə bilərsiniz. Xüsusilə, əgər siz Veb Komponentlərin istifadəsi üçün yazılmış üçüncü tərəf UI komponentləri istifadə edirsinizsə. +React istifadə edənlərin çoxu Veb Komponentlər istifadə etmir, amma siz istifadə etmək istəyə bilərsiniz. Xüsusilə, əgər siz Veb Komponentlərin istifadəsi üçün yazılmış üçüncü tərəf UI komponentləri istifadə edirsinizsə. ## React-də Veb Komponentlərin İstifadəsi {#using-web-components-in-react} @@ -22,9 +22,9 @@ class HelloMessage extends React.Component { > Qeyd: > -> Veb Komponentlər çox vaxt imperativ API-nı göstərir. Məsələn, `video` Veb Komponenti `play()` və `pause()` funksiyalarını göstərə bilər. Veb Komponentin interaktiv API-sinə daxil olmaq üçün siz DOM node-a birdəfəlik əlaqəyə girən ref işlətməli olacaqsınız. Əgər siz üçüncü tərəf Veb Komponentlərini istifadə edirsinizsə ən yaxşı çıxış yolu sizin Veb komponentinizə əhatə edən funksiyasını daşıyan rolunu oynayan React komponenti yazmaqdır. +> Veb Komponentlər çox vaxt imperativ API-nı göstərir. Məsələn, `video` Veb Komponenti `play()` və `pause()` funksiyalarını göstərə bilər. Veb Komponentin interaktiv API-sinə daxil olmaq üçün siz DOM node-la birdəfəlik əlaqəyə girən ref işlətməli olacaqsınız. Əgər siz üçüncü tərəf Veb Komponentlərini istifadə edirsinizsə, ən yaxşı çıxış yolu sizin Veb Komponentinizi əhatə edən funksiyasını daşıyan React komponenti yazmaqdır. > -> Veb komponentlər tərəfindən yayılmış hadisələr React render ağacından düngün ötməyə bilər. +> Veb komponentlər tərəfindən yayılmış hadisələr React render ağacından düzgün ötməyə bilər. > Siz React komponentlərinizdə bu hadisələri idarə etmək üçün əllə (manually) hadisə işləyicilərini qoşmalısınız. Bir ümumi çaşqınlıq odur ki, Veb Komponentlər "className" əvəzinə "class" işlədirlər. From f79002b834f231a57521d8faca7c562e61706896 Mon Sep 17 00:00:00 2001 From: Aziza Ismayilova Date: Sat, 30 Mar 2019 21:35:18 +0400 Subject: [PATCH 3/4] fix API translation --- content/docs/web-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/web-components.md b/content/docs/web-components.md index 96879cb41..117f80c29 100644 --- a/content/docs/web-components.md +++ b/content/docs/web-components.md @@ -22,7 +22,7 @@ class HelloMessage extends React.Component { > Qeyd: > -> Veb Komponentlər çox vaxt imperativ API-nı göstərir. Məsələn, `video` Veb Komponenti `play()` və `pause()` funksiyalarını göstərə bilər. Veb Komponentin interaktiv API-sinə daxil olmaq üçün siz DOM node-la birdəfəlik əlaqəyə girən ref işlətməli olacaqsınız. Əgər siz üçüncü tərəf Veb Komponentlərini istifadə edirsinizsə, ən yaxşı çıxış yolu sizin Veb Komponentinizi əhatə edən funksiyasını daşıyan React komponenti yazmaqdır. +> Veb Komponentlər çox vaxt imperativ API-ı göstərir. Məsələn, `video` Veb Komponenti `play()` və `pause()` funksiyalarını göstərə bilər. Veb Komponentin interaktiv API-ına daxil olmaq üçün siz DOM node-la birdəfəlik əlaqəyə girən ref işlətməli olacaqsınız. Əgər siz üçüncü tərəf Veb Komponentlərini istifadə edirsinizsə, ən yaxşı çıxış yolu sizin Veb Komponentinizi əhatə edən funksiyasını daşıyan React komponenti yazmaqdır. > > Veb komponentlər tərəfindən yayılmış hadisələr React render ağacından düzgün ötməyə bilər. > Siz React komponentlərinizdə bu hadisələri idarə etmək üçün əllə (manually) hadisə işləyicilərini qoşmalısınız. From ad763fcd7edb387a683dd2fdaf7570f09df9ad3e Mon Sep 17 00:00:00 2001 From: Aziza Ismayilova Date: Thu, 4 Apr 2019 17:45:44 +0400 Subject: [PATCH 4/4] fix issues --- content/docs/web-components.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/web-components.md b/content/docs/web-components.md index 117f80c29..bff7cf06a 100644 --- a/content/docs/web-components.md +++ b/content/docs/web-components.md @@ -6,7 +6,7 @@ redirect_from: - "docs/webcomponents.html" --- -React və [Veb Komponentlər](https://developer.mozilla.org/en-US/docs/Web/Web_Components) müxtəlif problemləri həll etmək üçün qurulub. İnkapsulyasiya dəstəklədiyi halda, Veb Komponentlərin yenidən istifadə olunması üçün React DOM-u sizin məlumatlarınız ilə sinxronlaşdıran deklarativ kitabxana təmin edir. Hər iki məqsədlər tamamlayıcıdırlar. Developer kimi siz Veb Komponentlərinizdə React istifadə edə bilər və ya React-də Veb Komponentlər istifadə edə bilərsiniz, və ya hər ikisini. +React və [Veb Komponentlər](https://developer.mozilla.org/en-US/docs/Web/Web_Components) müxtəlif problemləri həll etmək üçün qurulub. Veb Komponentlər yenidən istifadə oluna bilən komponentlər üçün güclü inkapsulyasiyanı dəstəkləyir. React isə DOM-u sizin məlumatlarınızı sinxronlaşdıran deklarativ kitabxana təmin edir. Bu məqsədlər tamamlayıcıdırlar. Developer kimi siz Veb Komponentlərinizdə React istifadə edə bilər və ya React-də Veb Komponentlər istifadə edə bilərsiniz, və ya hər ikisini. React istifadə edənlərin çoxu Veb Komponentlər istifadə etmir, amma siz istifadə etmək istəyə bilərsiniz. Xüsusilə, əgər siz Veb Komponentlərin istifadəsi üçün yazılmış üçüncü tərəf UI komponentləri istifadə edirsinizsə. @@ -22,7 +22,7 @@ class HelloMessage extends React.Component { > Qeyd: > -> Veb Komponentlər çox vaxt imperativ API-ı göstərir. Məsələn, `video` Veb Komponenti `play()` və `pause()` funksiyalarını göstərə bilər. Veb Komponentin interaktiv API-ına daxil olmaq üçün siz DOM node-la birdəfəlik əlaqəyə girən ref işlətməli olacaqsınız. Əgər siz üçüncü tərəf Veb Komponentlərini istifadə edirsinizsə, ən yaxşı çıxış yolu sizin Veb Komponentinizi əhatə edən funksiyasını daşıyan React komponenti yazmaqdır. +> Veb Komponentlər çox vaxt imperativ API-ı göstərir. Məsələn, `video` Veb Komponenti `play()` və `pause()` funksiyalarını göstərə bilər. Veb Komponentin interaktiv API-ına daxil olmaq üçün siz DOM nodla birdəfəlik əlaqəyə girən ref işlətməli olacaqsınız. Əgər siz üçüncü tərəf Veb Komponentlərini istifadə edirsinizsə, ən yaxşı həll sizin Veb Komponentinizi əhatə edən funksiyasını daşıyan React komponenti yazmaqdır. > > Veb komponentlər tərəfindən yayılmış hadisələr React render ağacından düzgün ötməyə bilər. > Siz React komponentlərinizdə bu hadisələri idarə etmək üçün əllə (manually) hadisə işləyicilərini qoşmalısınız.