From 35a7244972032542cd532078f7e917a35d974041 Mon Sep 17 00:00:00 2001 From: RAZ Date: Mon, 25 Feb 2019 15:31:45 +0700 Subject: [PATCH 1/2] Translate Advanced Guides/Web Components --- content/docs/web-components.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/content/docs/web-components.md b/content/docs/web-components.md index cbfcc80e1..36117a820 100644 --- a/content/docs/web-components.md +++ b/content/docs/web-components.md @@ -6,11 +6,11 @@ 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 dan [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) dibangun untuk menyelesaikan masalah yang berbeda. *Web Components* menyediakan enkapsulasi yang kuat untuk *reusable components*, sementara React menyediakan *library* yang deklaratif untuk menjaga DOM tetap sinkron dengan data Anda. Tujuan keduanya adalah untuk saling melengkapi. Sebagai pengembang atau *developer*, Anda bebas untuk menggunakan React di dalam *Web Components* Anda, atau menggunakan *Web Components* di dalam React, ataupun keduanya. -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. +Kebanyakan orang yang menggunakan React tidak menggunakan *Web Components*, tetapi mungkin Anda menginginkannya, terutama jika Anda menggunakan *library* komponen antarmuka pengguna pihak ketiga yang ditulis menggunakan *Web Components*. -## Using Web Components in React {#using-web-components-in-react} +## Menggunakan *Web Components* di dalam React {#using-web-components-in-react} ```javascript class HelloMessage extends React.Component { @@ -20,14 +20,14 @@ class HelloMessage extends React.Component { } ``` -> Note: +> Catatan: > -> 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. +> *Web Components* sering kali memiliki API yang bersifat imperatif. Contohnya, *Web Component* video mungkin memiliki fungsi `play()` dan `pause()`. Untuk mengakses API yang imperatif dari sebuah *Web Component*, Anda perlu menggunakan referensi untuk berinteraksi dengan simpul DOM secara langsung. Jika Anda menggunakan *Web Components* pihak ketiga, solusi terbaik adalah dengan menulis komponen React yang membungkus *Web Component* Anda. > -> 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. +> *Events* yang dihasilkan oleh *Web Component* mungkin tidak terdistribusi dengan benar melalui pohon render React. +> Anda perlu menambahkan *event handlers* secara manual untuk menangani *events* yang terdapat dalam komponen React Anda. -One common confusion is that Web Components use "class" instead of "className". +Satu yang biasanya membingungkan, yaitu *Web Components* menggunakan "class" bukan "className". ```javascript function BrickFlipbox() { @@ -40,7 +40,7 @@ function BrickFlipbox() { } ``` -## Using React in your Web Components {#using-react-in-your-web-components} +## Menggunakan React di dalam *Web Components* Anda {#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: +> Catatan: > ->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. +> Kode ini **tidak akan** bekerja jika Anda merubah kelas dengan Babel. Untuk detail dan diskusi, lihat [masalah ini](https://github.com/w3c/webcomponents/issues/587). +> Tambahkan [custom-elements-es5-adapter](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs) sebelum Anda memuat *Web Components* Anda untuk memperbaiki masalah tersebut. From e440d91259225c7f5a58ff54b9363614b9871c7c Mon Sep 17 00:00:00 2001 From: Farazaulia Date: Tue, 26 Mar 2019 06:39:20 +0700 Subject: [PATCH 2/2] revise some stuffs: web components, some strings, ref, render --- content/docs/web-components.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/content/docs/web-components.md b/content/docs/web-components.md index 36117a820..dc21095fa 100644 --- a/content/docs/web-components.md +++ b/content/docs/web-components.md @@ -6,41 +6,41 @@ redirect_from: - "docs/webcomponents.html" --- -React dan [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) dibangun untuk menyelesaikan masalah yang berbeda. *Web Components* menyediakan enkapsulasi yang kuat untuk *reusable components*, sementara React menyediakan *library* yang deklaratif untuk menjaga DOM tetap sinkron dengan data Anda. Tujuan keduanya adalah untuk saling melengkapi. Sebagai pengembang atau *developer*, Anda bebas untuk menggunakan React di dalam *Web Components* Anda, atau menggunakan *Web Components* di dalam React, ataupun keduanya. +React dan [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) dibangun untuk menyelesaikan masalah yang berbeda. Web Components menyediakan enkapsulasi yang kuat untuk *reusable components*, sementara React menyediakan *library* yang deklaratif untuk menjaga DOM tetap sinkron dengan data Anda. Tujuan keduanya adalah untuk saling melengkapi. Sebagai pengembang atau *developer*, Anda bebas untuk menggunakan React di dalam Web Components Anda, atau menggunakan Web Components di dalam React, ataupun keduanya. -Kebanyakan orang yang menggunakan React tidak menggunakan *Web Components*, tetapi mungkin Anda menginginkannya, terutama jika Anda menggunakan *library* komponen antarmuka pengguna pihak ketiga yang ditulis menggunakan *Web Components*. +Kebanyakan orang yang menggunakan React tidak menggunakan Web Components, tetapi mungkin Anda menginginkannya, terutama jika Anda menggunakan *library* komponen antarmuka pengguna pihak ketiga yang ditulis menggunakan Web Components. -## Menggunakan *Web Components* di dalam React {#using-web-components-in-react} +## Menggunakan Web Components di dalam React {#using-web-components-in-react} ```javascript class HelloMessage extends React.Component { render() { - return
Hello {this.props.name}!
; + return
Halo {this.props.name}!
; } } ``` > Catatan: > -> *Web Components* sering kali memiliki API yang bersifat imperatif. Contohnya, *Web Component* video mungkin memiliki fungsi `play()` dan `pause()`. Untuk mengakses API yang imperatif dari sebuah *Web Component*, Anda perlu menggunakan referensi untuk berinteraksi dengan simpul DOM secara langsung. Jika Anda menggunakan *Web Components* pihak ketiga, solusi terbaik adalah dengan menulis komponen React yang membungkus *Web Component* Anda. +> Web Components sering kali memiliki API yang bersifat imperatif. Contohnya, Web Component video mungkin memiliki fungsi `play()` dan `pause()`. Untuk mengakses API yang imperatif dari sebuah Web Component, Anda perlu menggunakan `ref` untuk berinteraksi dengan simpul DOM secara langsung. Jika Anda menggunakan Web Components pihak ketiga, solusi terbaik adalah dengan menulis komponen React yang membungkus Web Component Anda. > -> *Events* yang dihasilkan oleh *Web Component* mungkin tidak terdistribusi dengan benar melalui pohon render React. +> *Events* yang dihasilkan oleh Web Component mungkin tidak terdistribusi dengan benar melalui pohon *render* React. > Anda perlu menambahkan *event handlers* secara manual untuk menangani *events* yang terdapat dalam komponen React Anda. -Satu yang biasanya membingungkan, yaitu *Web Components* menggunakan "class" bukan "className". +Satu yang biasanya membingungkan, yaitu Web Components menggunakan "class" bukan "className". ```javascript function BrickFlipbox() { return ( -
front
-
back
+
depan
+
belakang
 ); } ``` -## Menggunakan React di dalam *Web Components* Anda {#using-react-in-your-web-components} +## Menggunakan React di dalam Web Components Anda {#using-react-in-your-web-components} ```javascript class XSearch extends HTMLElement { @@ -59,4 +59,4 @@ customElements.define('x-search', XSearch); > Catatan: > > Kode ini **tidak akan** bekerja jika Anda merubah kelas dengan Babel. Untuk detail dan diskusi, lihat [masalah ini](https://github.com/w3c/webcomponents/issues/587). -> Tambahkan [custom-elements-es5-adapter](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs) sebelum Anda memuat *Web Components* Anda untuk memperbaiki masalah tersebut. +> Tambahkan [custom-elements-es5-adapter](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs) sebelum Anda memuat Web Components Anda untuk memperbaiki masalah tersebut.