Merge pull request #187 from ikrydev/JSX

JSX Selesai #DevCJogja25

Author: isatrio

src/v2/guide/render-function.md

@@ -6,7 +6,7 @@ order: 303
 
 ## Basics
 
-Pada banyak kasus, Vue menganjurkan penggunaan templat untuk membuat HTML. Tetapi, ada beberapa situasi di mana anda butuh menggunakan Javascript secara penuh. Kalian bisa menggunakan **fungsi render**, sebagai alternatif dari templat.
+Pada banyak kasus, Vue menganjurkan penggunaan templat untuk membuat HTML. Tetapi, ada beberapa situasi di mana anda butuh menggunakan Javascript secara penuh. Anda bisa menggunakan **fungsi render**, sebagai alternatif dari templat.
 
 Mari Lihat contoh sederhana di mana fungsi 'render' terlihat praktis. Katakanlah anda ingin menghasilkan *anchored headings*:
 
@@ -103,9 +103,9 @@ Bentuk pohon dari *DOM nodes* untuk HTML di atas terlihat seperti:
 
 ![Visualisasi pohon *DOM*](/images/dom-tree.png)
 
-Setiap elemen adalah *node*. Setiap teks adalah node. BAhkan komentar juga *node*!. Dan sama seperti silsilah keluarga, setiap *node* bisa memiliki anak (misalnya setiap node mengandung *node* lainnya).
+Setiap elemen adalah *node*. Setiap teks adalah *node*. BAhkan komentar juga *node*!. Dan sama seperti silsilah keluarga, setiap *node* bisa memiliki anak (misalnya setiap *node* mengandung *node* lainnya).
 
-Memperbarui *node* yang banyak ini secara eisien tidaklah mudah, tapi untungnya, anda tidak harus melakukannya secara manual. Sebaliknya, gunakan Vue untuk membuat HTML yang kalian inginkan melalui templat:
+Memperbarui *node* yang banyak ini secara eisien tidaklah mudah, tapi untungnya, anda tidak harus melakukannya secara manual. Sebaliknya, gunakan Vue untuk membuat HTML yang Anda inginkan melalui templat:
 
 ```html
 <h1>{{ blogTitle }}</h1>
@@ -129,7 +129,7 @@ Vue melakukannya dengan cara membuat **virtual DOM** untuk mencatat perubahan ya
 return createElement('h1', this.blogTitle)
 ```
 
-Apa yang sebenarnya `createElement` kembalikan? hal itu bukanlah elemen DOM yang benar-benar diproses oleh browser. Secara teknis, lebih akurat jika dinamakan `createNodeDescription`, karena berisi informasi yang dibutuhkan oleh Vue, jenis node apa yang harus ditampilkan; termasuk deskripsi ini dari node tersebut. Deskripsi node ini diistilahkan dengan "virtual node", biasanya disingkat **VNode**. Sedangkan "Virtual DOM" digunakan untuk merujuk ke kumpulan dari VNode secara keseluruhan.
+Apa yang sebenarnya `createElement` kembalikan? hal itu bukanlah elemen DOM yang benar-benar diproses oleh browser. Secara teknis, lebih akurat jika dinamakan `createNodeDescription`, karena berisi informasi yang dibutuhkan oleh Vue, jenis *node* apa yang harus ditampilkan; termasuk deskripsi ini dari *node* tersebut. Deskripsi *node* ini diistilahkan dengan "virtual *node*", biasanya disingkat **VNode**. Sedangkan "Virtual DOM" digunakan untuk merujuk ke kumpulan dari VNode secara keseluruhan.
 
 ## Argumen `createElement`
 
@@ -138,16 +138,16 @@ Untuk lebih mendalami bagaimana cara penggunaan fitur templat di fungsi `createE
 ``` js
 // @returns {VNode}
 createElement(
-  // {String | Object | Function}
+  // {String | Obyek | Function}
   // Nama tag HTML, opsi komponen, atau fungsi asinkronus
   // Fungsi resolving ke salah satu. Wajib.
   'div',
 
-  // {Object}
+  // {Obyek}
   // Objek data yang terkait dengan atribut
   // Anda akan gunakan dalam templat. Opsional.
   {
-    // (lihat detail di bagian selanjutnya)
+    // (lihat detil di bagian selanjutnya)
   },
 
   // {String | Array}
@@ -165,9 +165,9 @@ createElement(
 )
 ```
 
-### The Data Object In-Depth
+### Obyek Data Secara Mendalam
 
-Penting untuk dicatat, sama halnya `v-bind:class` dan `v-bind:style` diperlakukan secara khusus di templat, mereka punya tempat tersendiri juga di objek data dari VNode. Lewat objek ini kalian juga melakukan proses *binding* ke atribut bawaan HTML juga properti DOM seperti `innerHTML` (menggantikan direktif `v-html`):
+Penting untuk dicatat, sama halnya `v-bind:class` dan `v-bind:style` diperlakukan secara khusus di templat, mereka punya tempat tersendiri juga di objek data dari VNode. Lewat objek ini Anda juga melakukan proses *binding* ke atribut bawaan HTML juga properti DOM seperti `innerHTML` (menggantikan direktif `v-html`):
 
 ``` js
 {
@@ -232,7 +232,7 @@ Penting untuk dicatat, sama halnya `v-bind:class` dan `v-bind:style` diperlakuka
   // Properti khusus lainnya
   key: 'myKey',
   ref: 'myRef',
-  // Jika kalian menggunakan nama ref yang sama
+  // Jika Anda menggunakan nama ref yang sama
   // di beberapa tempat, nilai dari `$refs.myRef` akan berbentuk
   // array
   refInFor: true
@@ -297,7 +297,7 @@ render: function (createElement) {
 }
 ```
 
-Jika kalian memang ingin menduplikasi elemen/komponen yang sama beberapa kali, kalian bisa menggunakan fungsi *factory*. Di bawah ini adalah contoh yang valid untuk menampilkan 20 paragraf yang sama:
+Jika Anda memang ingin menduplikasi elemen/komponen yang sama beberapa kali, Anda bisa menggunakan fungsi *factory*. Di bawah ini adalah contoh yang valid untuk menampilkan 20 paragraf yang sama:
 
 ``` js
 render: function (createElement) {
@@ -339,7 +339,7 @@ render: function (createElement) {
 
 ### `v-model`
 
-Tidak ada fitur yang mirip `v-model` di fungsi render, kalian harus menerapkannya sendiri:
+Tidak ada fitur yang mirip `v-model` di fungsi render, Anda harus menerapkannya sendiri:
 
 ``` js
 props: ['value'],
@@ -358,7 +358,7 @@ render: function (createElement) {
 }
 ```
 
-Mungkin terasa lebih susah, tapi kalian punya kendali penuh dibandingkan `v-model`.
+Mungkin terasa lebih susah, tapi Anda punya kendali penuh dibandingkan `v-model`.
 
 ### *Event* & *Key Modifiers*
 
@@ -381,7 +381,7 @@ on: {
 }
 ```
 
-Untuk event dan key modifier lainnya, tidak ada prefix yang dibutuhkan, cukup gunakan event method-nya di handler:
+Untuk event dan key modifier lainnya, tidak ada prefix yang dibutuhkan, cukup gunakan event metode-nya di handler:
 
 | Modifier(s) | Equivalent in Handler |
 | ------ | ------ |
@@ -414,7 +414,7 @@ on: {
 
 ### Slot
 
-Kalian bisa mengakses isi slot statik sebagai array VNode dari [`this.$slots`](../api/#vm-slots):
+Anda bisa mengakses isi slot statik sebagai array VNode dari [`this.$slots`](../api/#vm-slots):
 
 ``` js
 render: function (createElement) {
@@ -457,7 +457,7 @@ render: function (createElement) {
 
 ## JSX
 
-If you're writing a lot of `render` functions, it might feel painful to write something like this:
+Jika Anda menulis fungsi `render` yang panjang, akan menyusahkan jika Anda harus menulis seperti di bawah:
 
 ``` js
 createElement(
@@ -472,15 +472,15 @@ createElement(
 )
 ```
 
-Especially when the template version is so simple in comparison:
+Terutama jika versi templatnya lebih sederhana:
 
 ``` html
 <anchored-heading :level="1">
   <span>Hello</span> world!
 </anchored-heading>
 ```
 
-That's why there's a [Babel plugin](https://github.com/vuejs/jsx) to use JSX with Vue, getting us back to a syntax that's closer to templates:
+Karena itulah ada [plugin Babel](https://github.com/vuejs/jsx) untuk menggunakan JSX dengan Vue, memberikan kita cara penulisan yang sedikit mirip templat:
 
 ``` js
 import AnchoredHeading from './AnchoredHeading.vue'
@@ -497,61 +497,61 @@ new Vue({
 })
 ```
 
-<p class="tip">Aliasing `createElement` to `h` is a common convention you'll see in the Vue ecosystem and is actually required for JSX. Starting with [version 3.4.0](https://github.com/vuejs/babel-plugin-transform-vue-jsx#h-auto-injection) of the Babel plugin for Vue, we automatically inject `const h = this.$createElement` in any method and getter (not functions or arrow functions), declared in ES2015 syntax that has JSX, so you can drop the `(h)` parameter. With prior versions of the plugin, your app would throw an error if `h` was not available in the scope.</p>
+<p class="tip">Menamai `createElement` menjadi `h` adalah aturan umum yang akan Anda sering temukan di ekosistem Vue dan wajib dilakukan untuk menggunakan JSX. Mulai dari plugin Babel untuk Vue [versi 3.4.0](https://github.com/vuejs/babel-plugin-transform-vue-jsx#h-auto-injection), secara otomatis diberikan baris `const h = this.$createElement` di *method* dan *getter* apa saja (selama bukan fungsi atau fungsi panah / *arrow function*), yang dideklarasikan di penulisan kode ES2015 yang berisi JSX, sehingga Anda bisa menghapus bagian parameter `(h)`. Di versi sebelumnya, akan terjadi galat jika tidak ada `h` yang tersedia di lingkup tersebut.</p>
 
-For more on how JSX maps to JavaScript, see the [usage docs](https://github.com/vuejs/jsx#installation).
+Untuk pelajari lebih lanjut tentang JSX, lihat [dokumentasi penggunaannya](https://github.com/vuejs/jsx#installation).
 
-## Functional Components
+## Komponen Fungsional
 
-The anchored heading component we created earlier is relatively simple. It doesn't manage any state, watch any state passed to it, and it has no lifecycle methods. Really, it's only a function with some props.
+Komponen *anchored heading* yang kita buat sebelumnya relatif sederhana. Tidak ada *state*, *watcher*, dan tidak ada method siklus hidup. Hanya sebuah fungsi dengan beberapa *props*.
 
-In cases like this, we can mark components as `functional`, which means that they're stateless (no [reactive data](../api/#Options-Data)) and instanceless (no `this` context). A **functional component** looks like this:
+Dalam kasus ini, kita bisa menandai komponen ini dengan `functional`, artinya mereka tidak memiliki *state* (tidak ada [reactive data](../api/#Options-Data)) dan tanpa instan (tidak ada konteks `this`). **Komponen fungsional** terlihat seperti ini:
 
 ``` js
 Vue.component('my-component', {
   functional: true,
-  // Props are optional
+  // Props bersifat opsional
   props: {
     // ...
   },
-  // To compensate for the lack of an instance,
-  // we are now provided a 2nd context argument.
+// Karena tidak ada instan,
+// konteks diteruskan melalui parameter kedua
   render: function (createElement, context) {
     // ...
   }
 })
 ```
 
-> Note: in versions before 2.3.0, the `props` option is required if you wish to accept props in a functional component. In 2.3.0+ you can omit the `props` option and all attributes found on the component node will be implicitly extracted as props.
+> Catatan: di versi sebelum 2.3.0, opsi `props` harus ditulis jika Anda ingin komponen fungsional Anda menerima props. Di versi 2.3.0 ke atas, Anda tidak perlu menulis opsi `props` dan semua atribut yang ada di *node* komponen tersebut akan secara otomatis diambil sebagai *props*.
 
-In 2.5.0+, if you are using [single-file components](single-file-components.html), template-based functional components can be declared with:
+Di versi 2.5.0 ke atas, jika Anda menggunakan [kopmonen satu berkas / single-file components](single-file-components.html), komponen fungsional yang menggunakan templat bisa ditulis seperti di bawah:
 
 ``` html
 <template functional>
 </template>
 ```
 
-Everything the component needs is passed through `context`, which is an object containing:
+Semua yang dibutuhkan oleh komponen akan diteruskan melalui `context`, sebuah objek yang berisi:
 
-- `props`: An object of the provided props
-- `children`: An array of the VNode children
-- `slots`: A function returning a slots object
-- `scopedSlots`: (2.6.0+) An object that exposes passed-in scoped slots. Also exposes normal slots as functions.
-- `data`: The entire [data object](#The-Data-Object-In-Depth), passed to the component as the 2nd argument of `createElement`
-- `parent`: A reference to the parent component
-- `listeners`: (2.3.0+) An object containing parent-registered event listeners. This is an alias to `data.on`
-- `injections`: (2.3.0+) if using the [`inject`](../api/#provide-inject) option, this will contain resolved injections.
+- `props`: objek berisi *props*
+- `children`: *Array VNode* yang berisi anak dari komponen tersebut
+- `slots`: Fungsi yang mengembalikan objek slot
+- `scopedSlots`: (2.6.0+) Objek yang berisi slot berlingkup. Juga menyediakan slot normal sebagai fungsi.
+- `data`: [data objek](#The-Data-Object-In-Depth), diteruskan ke komponen sebagai argumen kedua dari `createElement`
+- `parent`: Referensi ke komponen di atasnya
+- `listeners`: (2.3.0+) Objek yang berisi event listener yang didaftarkan oleh komponen di atasnya. Juga sebagai alias untuk `data.on`
+- `injections`: (2.3.0+) jika ada opsi [`inject`](../api/#provide-inject), akan berisi injeksi yang ditemukan/diresolve.
 
-After adding `functional: true`, updating the render function of our anchored heading component would require adding the `context` argument, updating `this.$slots.default` to `context.children`, then updating `this.level` to `context.props.level`.
+Setelah menuliskan `functional: true`, pembaharuan fungsi render dari komponen *anchored heading* yang baru dibuat mengharuskan Anda menambahkan argumen `context`, mengubah `this.$slots.default` menjadi `context.children`, lalu mengubah `this.level` menjadi `context.props.level`.
 
-Since functional components are just functions, they're much cheaper to render. However, the lack of a persistent instance means they won't show up in the [Vue devtools](https://github.com/vuejs/vue-devtools) component tree.
+Karena komponen fungsional hanya sebuah fungsi saja, mereka lebih cepat untuk dirender. Tetapi, karena tidak adanya instan yang bisa dijadikan acuan, komponen fungsional tidak akan muncul di pohon komponen [Vue devtools](https://github.com/vuejs/vue-devtools).
 
-They're also very useful as wrapper components. For example, when you need to:
+Mereka sangat bermanfaat jika digunakan sebagai komponen pembungkus. Contohnya:
 
-- Programmatically choose one of several other components to delegate to
-- Manipulate children, props, or data before passing them on to a child component
+- Secara program memilih beberapa komponen yang akan didelegasikan
+- Memanipulasi isi, *props*, dan data sebelum meneruskannya ke komponen lain di dalamnya
 
-Here's an example of a `smart-list` component that delegates to more specific components, depending on the props passed to it:
+Berikut adalah contoh untuk komponen `smart-list` yang akan mengembalikan komponen yang lebih spesifik, tergantung dari *props* yang diberikan:
 
 ``` js
 var EmptyList = { /* ... */ }
@@ -588,25 +588,25 @@ Vue.component('smart-list', {
 })
 ```
 
-### Passing Attributes and Events to Child Elements/Components
+### Meneruskan Atribut dan Event ke Anak Komponen
 
-On normal components, attributes not defined as props are automatically added to the root element of the component, replacing or [intelligently merging with](class-and-style.html) any existing attributes of the same name.
+Umumnya, atribut yang tidak didefinisikan sebagai prop akan otomatis ditambahkan ke elemen akar dari komponen tersebut, menindih atau [menggabungkan dengan seksama](class-and-style.html) atribut yang sudah ada dengan nama yang sama.
 
-Functional components, however, require you to explicitly define this behavior:
+Tetapi untuk komponen fungsional, Anda harus secara tertulis mendefinisikannya:
 
 ```js
 Vue.component('my-functional-button', {
   functional: true,
   render: function (createElement, context) {
-    // Transparently pass any attributes, event listeners, children, etc.
+    // Teruskan atribut, event listener, anak, dan sebagainya.
     return createElement('button', context.data, context.children)
   }
 })
 ```
 
-By passing `context.data` as the second argument to `createElement`, we are passing down any attributes or event listeners used on `my-functional-button`. It's so transparent, in fact, that events don't even require the `.native` modifier.
+Dengan meneruskan `context.data` sebagai argumen kedua dari `createElement`, kita juga meneruskan atribut dan event lain yang digunakan di `my-functional-button`. Anda tidak butuh menambahkan modifier `.native`.
 
-If you are using template-based functional components, you will also have to manually add attributes and listeners. Since we have access to the individual context contents, we can use `data.attrs` to pass along any HTML attributes and `listeners` _(the alias for `data.on`)_ to pass along any event listeners.
+Jika Anda menggunakan komponen fungsional berbasis templat, Anda harus meneruskan atribut dan listener secara manual. Anda bisa menggunakan `data.attrs` untuk meneruskan atribut HTML, dan `listeners` _(alias dari `data.on`)_ untuk meneruskan event listener.
 
 ```html
 <template functional>
@@ -622,7 +622,7 @@ If you are using template-based functional components, you will also have to man
 
 ### `slots()` vs `children`
 
-You may wonder why we need both `slots()` and `children`. Wouldn't `slots().default` be the same as `children`? In some cases, yes - but what if you have a functional component with the following children?
+Jika Anda penasaran kenapa kita butuh `slots()` dan `children`. Bukankah `slots().default` sama dengan `children`? Di beberapa kasus, iya - tapi bagaimana jika kita punya komponen fungsional seperti di bawah?
 
 ``` html
 <my-functional-component>
@@ -633,11 +633,11 @@ You may wonder why we need both `slots()` and `children`. Wouldn't `slots().defa
 </my-functional-component>
 ```
 
-For this component, `children` will give you both paragraphs, `slots().default` will give you only the second, and `slots().foo` will give you only the first. Having both `children` and `slots()` therefore allows you to choose whether this component knows about a slot system or perhaps delegates that responsibility to another component by passing along `children`.
+Untuk komponen ini, `children` akan mengembalikan kedua paragraf; sedangkan `slots().default` akan mengembalikan yang kedua saja, dan `slots().foo` akan mengembalikan yang pertama saja. Adanya `children` dan `slots()` memungkinkan Anda untuk memilih apakah komponen tahu tentang sistem slot, atau mungkin hanya ingin mendelegasikan tanggung jawab itu ke komponen lain dengan meneruskan `children`.
 
-## Template Compilation
+## Kompilasi Templat
 
-You may be interested to know that Vue's templates actually compile to render functions. This is an implementation detail you usually don't need to know about, but if you'd like to see how specific template features are compiled, you may find it interesting. Below is a little demo using `Vue.compile` to live-compile a template string:
+Anda mungkin penasaran, bagaimana caranya templat Vue bisa diubah menjadi fungsi render. Detil implementasi ini tidak wajib untuk diketahui. Tapi jika Anda penasaran, di bawah ini adalah demo menggunakan `Vue.compile` untuk secara langsung mengubah string templat menjadi fungsi render:
 
 {% raw %}
 <div id="vue-compile-demo" class="demo">