diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 5bc8b2570..86701f654 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -1,26 +1,26 @@ --- id: integrating-with-other-libraries -title: Integrating with Other Libraries +title: Integrasi dengan Library Lain permalink: docs/integrating-with-other-libraries.html --- -React can be used in any web application. It can be embedded in other applications and, with a little care, other applications can be embedded in React. This guide will examine some of the more common use cases, focusing on integration with [jQuery](https://jquery.com/) and [Backbone](https://backbonejs.org/), but the same ideas can be applied to integrating components with any existing code. +React dapat digunakan pada aplikasi peramban apapun. React juga dapat ditanamkan di aplikasi lain, dan dengan sedikit pengaturan, aplikasi lain dapat ditanamkan di React. Panduan ini akan membahas beberapa kasus penggunaan yang lebih umum, memfokuskan pada integrasi dengan [jQuery](https://jquery.com/) dan [Backbone](https://backbonejs.org/), tetapi ide yang sama dapat diaplikasikan untuk mengintegrasikan komponen dengan kode yang ada. -## Integrating with DOM Manipulation Plugins {#integrating-with-dom-manipulation-plugins} +## Integrasi dengan Plugin Manipulasi DOM {#integrating-with-dom-manipulation-plugins} -React is unaware of changes made to the DOM outside of React. It determines updates based on its own internal representation, and if the same DOM nodes are manipulated by another library, React gets confused and has no way to recover. +React tidak akan menyadari perubahan yang dilakukan pada DOM diluar dari React. Ini menentukan pembaharuan berdasarkan representasi internal sendiri, dan jika *node* DOM yang sama dimanipulasi oleh *library* lain, React menjadi bingung dan tidak memiliki cara untuk memulihkannya. -This does not mean it is impossible or even necessarily difficult to combine React with other ways of affecting the DOM, you just have to be mindful of what each is doing. +Ini tidak berarti tidak mungkin atau bahkan sulit untuk menggabungkan React dengan cara-cara lain untuk mempengaruhi DOM, Anda hanya perlu memperhatikan apa yang dilakukan oleh masing-masing. -The easiest way to avoid conflicts is to prevent the React component from updating. You can do this by rendering elements that React has no reason to update, like an empty `
`. +Cara termudah untuk menghindari konflik adalah mencegah komponen React terbarui. Anda dapat melakukannya dengan me-_render_ elemen-elemen yang React tidak punya alasan untuk mengubahnya, seperti sebuah `
` kosong. -### How to Approach the Problem {#how-to-approach-the-problem} +### Cara Pendekatan Masalah {#how-to-approach-the-problem} -To demonstrate this, let's sketch out a wrapper for a generic jQuery plugin. +Untuk mendemonstrasikan ini, mari kita menggambarkan sebuah pembungkus untuk sebuah plugin generik jQuery. -We will attach a [ref](/docs/refs-and-the-dom.html) to the root DOM element. Inside `componentDidMount`, we will get a reference to it so we can pass it to the jQuery plugin. +Kita akan melampirkan [ref](/docs/refs-and-the-dom.html) kepada akar elemen DOM. Di dalam `componentDidMount`, kita akan mendapat sebuah referensi sehingga kita dapat menyampaikannya kepada _plugin_ jQuery. -To prevent React from touching the DOM after mounting, we will return an empty `
` from the `render()` method. The `
` element has no properties or children, so React has no reason to update it, leaving the jQuery plugin free to manage that part of the DOM: +Untuk mencegah React menyentuh DOM setelah pemasangan, kami akan mengembalikan sebuah `
` kosong dari *method* `render()`. Elemen `
` tidak memiliki properti atau anak, sehingga React tidak memiliki alasan untuk memperbaruinya, meninggalkan *plugin* jQuery bebas untuk mengelola bagian dari DOM tersebut: ```js{3,4,8,12} class SomePlugin extends React.Component { @@ -39,21 +39,21 @@ class SomePlugin extends React.Component { } ``` -Note that we defined both `componentDidMount` and `componentWillUnmount` [lifecycle methods](/docs/react-component.html#the-component-lifecycle). Many jQuery plugins attach event listeners to the DOM so it's important to detach them in `componentWillUnmount`. If the plugin does not provide a method for cleanup, you will probably have to provide your own, remembering to remove any event listeners the plugin registered to prevent memory leaks. +Perhatikan bahwa kami mendefinisikan keduanya `componentDidMount` dan `componentWillUnmount` [lifecycle methods](/docs/react-component.html#the-component-lifecycle). Banyak *plugin* jQuery melampirkan pendengar *event* pada DOM sehingga ini penting untuk melepaskan mereka dalam `componentWillUnmount`. Jika *plugin* tidak menyediakan sebuah *method* untuk membersihkan, anda mungkin akan menyediakannya sendiri, ingat untuk menghapus pendengar *event* apapun yang didaftarkan ke *plugin* untuk mencegah kebocoran memori. -### Integrating with jQuery Chosen Plugin {#integrating-with-jquery-chosen-plugin} +### Integrasi dengan Plugin Chosen jQuery {#integrating-with-jquery-chosen-plugin} -For a more concrete example of these concepts, let's write a minimal wrapper for the plugin [Chosen](https://harvesthq.github.io/chosen/), which augments ``. ->**Note:** +>**Catatan:** > ->Just because it's possible, doesn't mean that it's the best approach for React apps. We encourage you to use React components when you can. React components are easier to reuse in React applications, and often provide more control over their behavior and appearance. +>Hanya karena hal tersebut memungkinan, bukan berarti itu adalah pendekatan yang terbaik untuk aplikasi React. Kami menganjurkan Anda untuk menggunakan komponen React saat Anda bisa. Komponen React lebih mudah untuk digunakan ulang dalam aplikasi React, dan sering kali menyediakan kontrol yang lebih pada perilaku dan tampilannya. -First, let's look at what Chosen does to the DOM. +Pertama-tama, mari kita lihat apa yang Chosen lakukan pada DOM. -If you call it on a ``. Then it fires jQuery events to notify us about the changes. +Jika Anda memanggilnya pada sebuah ``. Setelahnya, dia akan memanggil _event_ jQuery untuk memberitahu kita tentang perubahannya. -Let's say that this is the API we're striving for with our `` wrapper React component: +Anggaplah bahwa ini adalah API yang kita perjuangkan untuk komponen pembungkus `` React kita: ```js function Example() { @@ -67,9 +67,9 @@ function Example() { } ``` -We will implement it as an [uncontrolled component](/docs/uncontrolled-components.html) for simplicity. +Kita akan mengimplementasikannya sebagai sebuah [uncontrolled component](/docs/uncontrolled-components.html) untuk penyederhanaan. -First, we will create an empty component with a `render()` method where we return `` yang dibungkus di dalam sebuah `
`: ```js{4,5} class Chosen extends React.Component { @@ -85,9 +85,9 @@ class Chosen extends React.Component { } ``` -Notice how we wrapped `` node we passed to it. However, as far as React is concerned, `
` always only has a single child. This is how we ensure that React updates won't conflict with the extra DOM node appended by Chosen. It is important that if you modify the DOM outside of React flow, you must ensure React doesn't have a reason to touch those DOM nodes. +Lihat bagaimana kita membungkus `` yang kita berikan padanya. Namun, sejauh yang React ketahui, `
` hanya selalu memiliki satu *children*. Ini adalah bagaimana kita memastikan pembaharuan React tidak akan konflik dengan ekstra *node* DOM yang ditambahkan Chosen. Ini juga penting bahwa jika anda memodifikasi DOM di luar alur React, anda harus memastikan React tidak punya alasan untuk menyentuh *node* DOM tersebut. -Next, we will implement the lifecycle methods. We need to initialize Chosen with the ref to the `` pada `componentDidMount`, dan menghancurkannya dalam `componentWillUnmount`: ```js{2,3,7} componentDidMount() { @@ -100,17 +100,17 @@ componentWillUnmount() { } ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/qmqeQx?editors=0010) +[**Coba di CodePen**](https://codepen.io/gaearon/pen/qmqeQx?editors=0010) -Note that React assigns no special meaning to the `this.el` field. It only works because we have previously assigned this field from a `ref` in the `render()` method: +Catat bahwa React tidak memberikan arti khusus kepada *field* `this.el`. Ini hanya berfungsi karena sebelumnya kita menugaskan *field* ini dari sebuah `ref` dalam metode `render()`: ```js ` managed by Chosen. +Ini cukup untuk mengambil komponen kita untuk di-_render_, tapi kita juga ingin diberitahu tentang perubahan nilai. Untuk melakukan ini, kita akan berlangganan pada jQuery _event_ `change` di ``, but we will also add a `componentDidUpdate()` lifecycle method that notifies Chosen about changes in the children list: +Dokumentasi Chosen menyarankan kita untuk menggunakan API `trigger()` jQuery untuk memberitahu tentang perubahan pada DOM elemen yang asli. Kita akan membiarkan React mengurus pembaruan `this.props.children` di dalam `` children managed by React change. +Dengan cara ini, Chosen akan tahu untuk mengubah DOM elemennya saat `