Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translate Glossary to Indonesian #36

Merged
merged 6 commits into from
Jul 21, 2020
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 52 additions & 48 deletions content/docs/reference-glossary.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,67 +7,68 @@ permalink: docs/glossary.html

---

## Single-page Application {#single-page-application}
## Aplikasi Single-page {#single-page-application}

A single-page application is an application that loads a single HTML page and all the necessary assets (such as JavaScript and CSS) required for the application to run. Any interactions with the page or subsequent pages do not require a round trip to the server which means the page is not reloaded.
Aplikasi _Single-page_ adalah jenis aplikasi web yang memuat sebuah halaman HTML dan seluruh aset yang diperlukannya (seperti Javascript dan CSS) untuk dapat berjalan. Seluru interaksi yang terjadi pada halaman yang telah dimuat maupun halaman lainnya yang berhubungan, tidak memerlukan tambahan pengambilan data ke server, yang berarti halaman tidak perlu dimuat ulang.
hilalarsa marked this conversation as resolved.
Show resolved Hide resolved

Though you may build a single-page application in React, it is not a requirement. React can also be used for enhancing small parts of existing websites with additional interactivity. Code written in React can coexist peacefully with markup rendered on the server by something like PHP, or with other client-side libraries. In fact, this is exactly how React is being used at Facebook.
Aplikasi _Single-page_ tidak harus dibangun menggunakan React. React dapat digunakan untuk meningkatkan bagian-bagian tertentu dari halaman yang telah ada untuk meningkatkan interaktivitas halaman tersebut. Kode yang ditulis dalam React dapat berjalan dengan aman dengan jenis lainnnya yang di _render_ pada _server_, seperti PHP, atau _library_ lain yang ada di sisi _client_. Faktanya, dengan cara inilah Facebook menggunakan React.

## ES6, ES2015, ES2016, etc {#es6-es2015-es2016-etc}
hilalarsa marked this conversation as resolved.
Show resolved Hide resolved

These acronyms all refer to the most recent versions of the ECMAScript Language Specification standard, which the JavaScript language is an implementation of. The ES6 version (also known as ES2015) includes many additions to the previous versions such as: arrow functions, classes, template literals, `let` and `const` statements. You can learn more about specific versions [here](https://en.wikipedia.org/wiki/ECMAScript#Versions).
Semua akronim diatas merujuk pada versi terbaru dari standar Spesifikasi bahasa ECMAScript, yang merupakan implementasi dari bahasa JavaScript Versi ES6 (dikenal juga sebagai ES2015), yang mencakup tambahan dari versi sebelumnya seperti : _Arrow Function_, kelas, _template literals_, deklarasi variabel dengan let dan const. Anda dapat mempelajarinya lebih dalam tiap versinya melalui [tautan ini](https://en.wikipedia.org/wiki/ECMAScript#Versions)
hilalarsa marked this conversation as resolved.
Show resolved Hide resolved

## Compilers {#compilers}
## Kompiler {#compilers}

A JavaScript compiler takes JavaScript code, transforms it and returns JavaScript code in a different format. The most common use case is to take ES6 syntax and transform it into syntax that older browsers are capable of interpreting. [Babel](https://babeljs.io/) is the compiler most commonly used with React.
Sebuah kompiler JavaScript mengambil, dan mengubah kode JavaScript, dan mengembalikannya kedalam format yang berbeda. Kasus paling umum penggunaan compiler adalah saat sintaksis ES6 diubah untuk dapat dimengerti oleh peramban tipe lama. [Babel](https://babeljs.io/) adalah salah satu jenis kompiler yang sering digunakan dengan React.
hilalarsa marked this conversation as resolved.
Show resolved Hide resolved

## Bundlers {#bundlers}
## Bundler {#bundlers}

Bundlers take JavaScript and CSS code written as separate modules (often hundreds of them), and combine them together into a few files better optimized for the browsers. Some bundlers commonly used in React applications include [Webpack](https://webpack.js.org/) and [Browserify](http://browserify.org/).
Bundler menggunakan kode JavaScript dan CSS yang ditulis di modul terpisah, dan menggabungkannya menjadi beberapa file yang lebih optimal untuk dijalankan oleh peramban. Bundler yang sering digunakan React meliputi [Webpack](https://webpack.js.org/) dan [Browserify](http://browserify.org/)
hilalarsa marked this conversation as resolved.
Show resolved Hide resolved

## Package Managers {#package-managers}
## Manajer Paket {#package-managers}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm this one is though, Manajer Paket is a valid translation for Package Managers, but I don't think it sounds familiar to the readers, what's your opinion on this guys @gedeagas @arfianadam ?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't translate it, I guess @regalius . Just use Package Managers

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Stick to "Package Manager" 👍


Package managers are tools that allow you to manage dependencies in your project. [npm](https://www.npmjs.com/) and [Yarn](http://yarnpkg.com/) are two package managers commonly used in React applications. Both of them are clients for the same npm package registry.
Manajer paket adalah alat yang digunakan untuk mengatur dan mengelola dependensi pada project Anda. [npm](https://www.npmjs.com/) dan [Yarn](http://yarnpkg.com/) adalah manajer paket yang paling sering digunakan pada aplikasi React dimana keduanya adalah klien yang memiliki registri paket npm yang sama.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

project -> proyek


## CDN {#cdn}

CDN stands for Content Delivery Network. CDNs deliver cached, static content from a network of servers across the globe.
CDN adalah singkatan dari Content Delivery Network. CDN menyediakan konten yang statis dan di-_cache_ dari jaringan server diseluruh dunia.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Content Delivery Network -> Content Delivery Network


## JSX {#jsx}

JSX is a syntax extension to JavaScript. It is similar to a template language, but it has full power of JavaScript. JSX gets compiled to `React.createElement()` calls which return plain JavaScript objects called "React elements". To get a basic introduction to JSX [see the docs here](/docs/introducing-jsx.html) and find a more in-depth tutorial on JSX [here](/docs/jsx-in-depth.html).
JSX adalah sintaksis ekstensi untuk JavaScript. JSX mirip dengan bahasa _template_, namum memiliki kekuatan penuh atas bahasa JavaScript. JSX dijalankan menjadi format `React.createElement()` yang mengembalikan objek JavaScript baru berupa "Elemen React". Untuk mendapatkan penjelasan dasar mengenai mengenai JSX dapat melihat [dokumentasi JSX](/docs/introducing-jsx.html), atau mengenai JSX dengan lebih mendalam [di sini](https://reactjs.org/docs/introducing-jsx.html)
hilalarsa marked this conversation as resolved.
Show resolved Hide resolved

Tidak seperti dalam HTML, React DOM menggunakan format camelCase untuk penamaan atributnya. Sebagai contoh, `tabindex` menjadi `tabIndex` di JSX. Atribut `class` juga ditulis sebagai `className` karena `class` adalah nama yang telah dipesan dalam JavaScript.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the context of this sentence

React DOM uses camelCase property naming convention instead of HTML attribute names. 

Is closer to this

Alih-alih menggunakan nama atribut HTML, React DOM menggunakan konvensi penamaan *camelCase* untuk propertinya

What do you think? 😄


React DOM uses camelCase property naming convention instead of HTML attribute names. For example, `tabindex` becomes `tabIndex` in JSX. The attribute `class` is also written as `className` since `class` is a reserved word in JavaScript:

```js
const name = 'Clementine';
ReactDOM.render(
<h1 className="hello">My name is {name}!</h1>,
<h1 className="hello">Nama saya {name}!</h1>,
document.getElementById('root')
);
```

## [Elements](/docs/rendering-elements.html) {#elements}
## [Elemen](/docs/rendering-elements.html) {#elements}

React elements are the building blocks of React applications. One might confuse elements with a more widely known concept of "components". An element describes what you want to see on the screen. React elements are immutable.
React Elemen adalah bagian pembangun aplikasi React. Beberapa orang bisa jadi salah mengartikan elemen sebagai istilah 'komponen' yang lebih dikenal luas. Sebuah elemen menjelaskan apa yang ingin Anda tampilkan di layar. Elemen React tidak dapat diubah (immutable).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
React Elemen adalah bagian pembangun aplikasi React. Beberapa orang bisa jadi salah mengartikan elemen sebagai istilah 'komponen' yang lebih dikenal luas. Sebuah elemen menjelaskan apa yang ingin Anda tampilkan di layar. Elemen React tidak dapat diubah (immutable).
Elemen React adalah bagian pembangun aplikasi React. Beberapa orang bisa jadi salah mengartikan elemen sebagai istilah 'komponen' yang lebih dikenal luas. Sebuah elemen menjelaskan apa yang ingin Anda tampilkan di layar. Elemen React tidak dapat diubah (*immutable*).


```js
const element = <h1>Hello, world</h1>;
const element = <h1>Hai, dunia</h1>;
```

Typically, elements are not used directly, but get returned from components.
Secara khusus, elemen tidak digunakan secara langsung, melainkan dikembalikan melalui komponen.

## [Components](/docs/components-and-props.html) {#components}
## [Komponen](/docs/components-and-props.html) {#components}

React components are small, reusable pieces of code that return a React element to be rendered to the page. The simplest version of React component is a plain JavaScript function that returns a React element:
Komponen React adalah bagian atau potongan kecil dari kode yang dapat digunakan kembali, yang mengembalikan elemen React untuk di-_render_ ke halaman. Versi paling sederhana dari komponen React adalah fungsi JavaScript yang mengembalikan elemen React :

```js
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
```

Components can also be ES6 classes:
Komponen juga dapat menggunakan kelas dengan format penulisan ES6:

```js
class Welcome extends React.Component {
Expand All @@ -77,38 +78,39 @@ class Welcome extends React.Component {
}
```

Components can be broken down into distinct pieces of functionality and used within other components. Components can return other components, arrays, strings and numbers. A good rule of thumb is that if a part of your UI is used several times (Button, Panel, Avatar), or is complex enough on its own (App, FeedStory, Comment), it is a good candidate to be a reusable component. Component names should also always start with a capital letter (`<Wrapper/>` **not** `<wrapper/>`). See [this documentation](/docs/components-and-props.html#rendering-a-component) for more information on rendering components.
Komponen dapat dipecah menjadi beberapa bagian fungsi berbeda yang dapat digunakan dengan komponen lainnya. Komponen dapat mengembalikan array, string, angka, maupun mengembalikan komponen lainnya. Aturan dasar yang praktis yaitu, jika ada bagian dari antarmuka Anda yang digunakan beberapa kali (Tombol, Panel, Avatar), atau cukup kompleks untuk berdiri dengan sendirinya (App, FeedStory, Komentar), akan lebih baik jika bagian tersebut menggunakan Reusable Component. Nama komponen juga harus selalu diawali dengan huruf kapital (`<Wrapper/>` **bukan** `<wrapper/>`). Lihat [dokumentasi](https://reactjs.org/docs/components-and-props.html#rendering-a-component) untuk penjelasan mengenai cara melakukan _render_ komponen.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

array -> senarai
string -> string

Suggested change
Komponen dapat dipecah menjadi beberapa bagian fungsi berbeda yang dapat digunakan dengan komponen lainnya. Komponen dapat mengembalikan array, string, angka, maupun mengembalikan komponen lainnya. Aturan dasar yang praktis yaitu, jika ada bagian dari antarmuka Anda yang digunakan beberapa kali (Tombol, Panel, Avatar), atau cukup kompleks untuk berdiri dengan sendirinya (App, FeedStory, Komentar), akan lebih baik jika bagian tersebut menggunakan Reusable Component. Nama komponen juga harus selalu diawali dengan huruf kapital (`<Wrapper/>` **bukan** `<wrapper/>`). Lihat [dokumentasi](https://reactjs.org/docs/components-and-props.html#rendering-a-component) untuk penjelasan mengenai cara melakukan _render_ komponen.
Komponen dapat dipecah menjadi beberapa bagian fungsi berbeda yang dapat digunakan dengan komponen lainnya. Komponen dapat mengembalikan senarai, *string*, angka, maupun mengembalikan komponen lainnya. Aturan dasar yang praktis yaitu, jika ada bagian dari antarmuka pengguna Anda yang digunakan beberapa kali (Tombol, Panel, Avatar), atau cukup kompleks untuk berdiri dengan sendirinya (App, FeedStory, Komentar), komponen-komponen tersebut adalah kandidat yang cocok untuk dijadikan komponen yang dapat digunakan kembali (*reusable component*). Nama komponen juga harus selalu diawali dengan huruf kapital (`<Wrapper/>` **bukan** `<wrapper/>`). Lihat [dokumentasi ini](https://reactjs.org/docs/components-and-props.html#rendering-a-component) untuk penjelasan mengenai cara melakukan _render_ komponen.

What do you think? 😄



### [`props`](/docs/components-and-props.html) {#props}

`props` are inputs to a React component. They are data passed down from a parent component to a child component.
`props` adalah masukan dari komponen React. `props` adalah data yang dioper dari _parent component_ ke _child component_-nya.

Remember that `props` are readonly. They should not be modified in any way:
Perlu diingat bahwa `props` adalah _readonly_, sehingga nilainya tidak dapat diubah melalui cara apapun:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Perlu diingat bahwa `props` adalah _readonly_, sehingga nilainya tidak dapat diubah melalui cara apapun:
Perlu diingat bahwa `props` bersifat _readonly_, sehingga nilainya tidak dapat diubah melalui cara apapun:


```js
// Wrong!
props.number = 42;
```

If you need to modify some value in response to user input or a network response, use `state` instead.
Jika Anda perlu memodifikasi nilai sebagai respon dari masukan penguna, gunakan `state`.

### `props.children` {#propschildren}

`props.children` is available on every component. It contains the content between the opening and closing tags of a component. For example:
`props.children` tersedia di setiap komponen. Ia berisi konten yang terletak diantara _tag_ pembuka dan penutup dari sebuah komponen. Sebagai contoh:

```js
<Welcome>Hello world!</Welcome>
<Welcome>Hai dunia!</Welcome>
```

The string `Hello world!` is available in `props.children` in the `Welcome` component:
Teks `Hai dunia!` dapat diakses sebagai `props.children` di komponen `Welcome`:

```js
function Welcome(props) {
return <p>{props.children}</p>;
}
```

For components defined as classes, use `this.props.children`:
Untuk komponen yang menggunakan kelas, gunakan `this.props.children`:

```js
class Welcome extends React.Component {
Expand All @@ -120,47 +122,49 @@ class Welcome extends React.Component {

### [`state`](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) {#state}

A component needs `state` when some data associated with it changes over time. For example, a `Checkbox` component might need `isChecked` in its state, and a `NewsFeed` component might want to keep track of `fetchedPosts` in its state.
Sebuah komponen membutuhkan `state` saat sebuah data yang berhubungan dengannya berubah sewaktu-waktu. Sebagia contoh, sebuah komponen `Checkbox` dapat membutuhkan _state_ `isChecked`, dan sebuah komponen `NewsFeed` bisa jadi selalu membutuhkan _state_ `fetchedPost` terbaru.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sebagia -> Sebagian typo 😄


The most important difference between `state` and `props` is that `props` are passed from a parent component, but `state` is managed by the component itself. A component cannot change its `props`, but it can change its `state`. To do so, it must call `this.setState()`. Only components defined as classes can have state.
Perbedaan paling penting diantara `state` dan `props` adalah `props` dioper melalui _parent component_, sedangkan `state` diatur oleh komponen itu sendiri. Sebuah komponen tidak dapat mengubah `props`, tetapi dapat mengubah `state`. Untuk melakukannya, komponen tersebut harus memanggil fungsi `this.setState()`. Hanya komponen yang didefinisikan sebagai kelas yang dapat memiliki _state_.

For each particular piece of changing data, there should be just one component that "owns" it in its state. Don't try to synchronize states of two different components. Instead, [lift it up](/docs/lifting-state-up.html) to their closest shared ancestor, and pass it down as props to both of them.
Untuk setiap bagian data yang berubah, harus terdapat satu komponen yang 'memiliki' data tersebut sebagai _state_ di dalamnya. Jangan mencoba untuk melakukan sinkronisasi _state_ pada dua komponen yang berbeda. Sebaliknya, [lift it up](/docs/lifting-state-up.html), atau angkat nilainya ke arah pendahulunya yang terdekat, kemudian oper sebagai _props_ untuk kedua komponen tersebut.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Untuk setiap bagian data yang berubah, harus terdapat satu komponen yang 'memiliki' data tersebut sebagai _state_ di dalamnya. Jangan mencoba untuk melakukan sinkronisasi _state_ pada dua komponen yang berbeda. Sebaliknya, [lift it up](/docs/lifting-state-up.html), atau angkat nilainya ke arah pendahulunya yang terdekat, kemudian oper sebagai _props_ untuk kedua komponen tersebut.
Untuk setiap bagian data yang berubah, harus terdapat satu komponen yang 'memiliki' data tersebut sebagai _state_ di dalamnya. Jangan mencoba untuk melakukan sinkronisasi _state_ pada dua komponen yang berbeda. Sebaliknya, [angkat nilainya ke atas](/docs/lifting-state-up.html), kemudian oper sebagai _props_ untuk kedua komponen tersebut.


## [Lifecycle Methods](/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class) {#lifecycle-methods}
## [Metode Lifecycle](/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class) {#lifecycle-methods}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lifecycle Methods doesn't have to be translated since it is a React term 😄


Lifecycle methods are custom functionality that gets executed during the different phases of a component. There are methods available when the component gets created and inserted into the DOM ([mounting](/docs/react-component.html#mounting)), when the component updates, and when the component gets unmounted or removed from the DOM.
Metode lifecycle adalah fungsionalitas khusus yang dijalankan selama fase tertentu dalam sebuah komponen. Terdapat beberapa metode yang tersedia saat komponen dibuat dan dimasukkan kedalam DOM ([mounting](/docs/react-component.html#mounting)), saat komponen diperbarui, dan saat komponen dilepas atau dihapus dari DOM.

## [Controlled](/docs/forms.html#controlled-components) vs. [Uncontrolled Components](/docs/uncontrolled-components.html)

React has two different approaches to dealing with form inputs.
React memiliki dua pendekatan berbeda untuk mengatur masukan formulir.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is that necessary to translate form into formulir?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what do you think @regalius?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
React memiliki dua pendekatan berbeda untuk mengatur masukan formulir.
React memiliki dua pendekatan berbeda untuk mengatur inputan form.

Maybe this?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

inputan form sounds better IMO.


An input form element whose value is controlled by React is called a *controlled component*. When a user enters data into a controlled component a change event handler is triggered and your code decides whether the input is valid (by re-rendering with the updated value). If you do not re-render then the form element will remain unchanged.
Sebuah elemen masukan formulir yang nilainya diatur oleh React disebut sebagai *_controlled component*. Saat seorang pengguna memasukkan data kedalam _controlled component_, sebuah _event handler_ terpicu, dan kode Anda yang selanjutnya menentukan apakah masukan valid atau tidak (dengan cara merender ulang dengan nilai yang telah diperbarui). Jika Anda tidak merender ulang, maka nilai formulir tidak akan berubah.

An *uncontrolled component* works like form elements do outside of React. When a user inputs data into a form field (an input box, dropdown, etc) the updated information is reflected without React needing to do anything. However, this also means that you can't force the field to have a certain value.
Sebuah *uncontrolled component* bekerja seperti hal yang dilakukan elemen formulir diluar React. Disaat pengguna memasukkan data kedalam formulir (melalui kotak input, _dropdown_, dll) nilai yang telah diperbarui akan digunakan tanpa React perlu melakukan apapun. Bagaimanapun, hal ini berari Anda tidak dapat memaksa sebuah bidang masukan unntuk memiliki nilai tertentu.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

berari -> berarti typo 😄

I think the translation of However, this also means ... would be closer to Namun, hal ini berarti ...
What do you think? 😄


In most cases you should use controlled components.
Dalam banyak kasus, Anda harus menggunakan _controlled components_.

## [Keys](/docs/lists-and-keys.html) {#keys}

A "key" is a special string attribute you need to include when creating arrays of elements. Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside an array to give the elements a stable identity.
Sebuah "key" adalah karakter spesial yang perlu disertakan saat membuat kumpulan elemen dalam bentuk array. Key membantu React untuk mengidentifikasi bagian mana yang telah diubah, ditambah, atau dihilangkan. Keys harus diberikan pada elemen dalam sebuah array untuk memberikan identitas yang stabil pada elemen tersebut.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Sebuah "key" adalah karakter spesial yang perlu disertakan saat membuat kumpulan elemen dalam bentuk array. Key membantu React untuk mengidentifikasi bagian mana yang telah diubah, ditambah, atau dihilangkan. Keys harus diberikan pada elemen dalam sebuah array untuk memberikan identitas yang stabil pada elemen tersebut.
Sebuah "*key*" adalah atibut *string* spesial yang perlu disertakan saat membuat kumpulan elemen dalam bentuk senarai. *Key* membantu React untuk mengidentifikasi bagian mana yang telah diubah, ditambah, atau dihilangkan. *Keys* harus diberikan pada elemen dalam sebuah senarai untuk memberikan identitas yang stabil pada elemen tersebut.


Keys only need to be unique among sibling elements in the same array. They don't need to be unique across the whole application or even a single component.
Keys hanya perlu bersifat unik dengan elemen lainnya dalam array yag sama. Keys tidak perlu unik diseluruh aplikasi atau bahkan didalam komponen yang sama.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yag -> yang typo 😄
diseluruh -> di seluruh
didalam -> di dalam


Don't pass something like `Math.random()` to keys. It is important that keys have a "stable identity" across re-renders so that React can determine when items are added, removed, or re-ordered. Ideally, keys should correspond to unique and stable identifiers coming from your data, such as `post.id`.
Jangan mengoper nilai `Math.random()` sebagai key. Penting untuk diingat bahwa key harus memiliki "identitas yang stabil" walau melalui dirender ulang, sehingga React dapat mentukan kapan sebuah item ditambah, dihapus, atau diurutkan. Secara ideal, key harus tersusun dari data Anda yang bersifat unik dan stabil, seperti `post.id`.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dirender -> di-render
mentukan -> menentukan


## [Refs](/docs/refs-and-the-dom.html) {#refs}

React supports a special attribute that you can attach to any component. The `ref` attribute can be an object created by [`React.createRef()` function](/docs/react-api.html#reactcreateref) or a callback function, or a string (in legacy API). When the `ref` attribute is a callback function, the function receives the underlying DOM element or class instance (depending on the type of element) as its argument. This allows you to have direct access to the DOM element or component instance.
React mendukung atribut spesial yang dapat dilampirkan di komponen apapun. Atribut `ref` dapat terdiri dari sebuah objek yang dibuat oleh [`React.createRef()` function](/docs/react-api.html#reactcreateref) atau oleh sebuah _callback function_, atau _string_ (di API _legacy_). Disaat `ref` adalah sebuah _callback function_, fungsi tersebut dapat menerima argumen berupa elemen DOM atau sebuah kelas (bergantung pada tipe elemen). Hal ini dapat memberikan Anda akses langsung pada elemen DOM atau komponen yang berhubungan.

Use refs sparingly. If you find yourself often using refs to "make things happen" in your app, consider getting more familiar with [top-down data flow](/docs/lifting-state-up.html).
Gunakan refs dengan bijak. Jika anda merasa sering menggunakan refs untuk "melakukan suatu hal", pertimbangkan untuk lebih familier dengan [aliran data top-down](/docs/lifting-state-up.html).
hilalarsa marked this conversation as resolved.
Show resolved Hide resolved

## [Events](/docs/handling-events.html) {#events}
## [Event](/docs/handling-events.html) {#events}

Handling events with React elements has some syntactic differences:
hilalarsa marked this conversation as resolved.
Show resolved Hide resolved

* React event handlers are named using camelCase, rather than lowercase.
* With JSX you pass a function as the event handler, rather than a string.
Menangani event dengan Elemen React memiliki perbedaan secara sintaksis:
hilalarsa marked this conversation as resolved.
Show resolved Hide resolved

* _Event handler_ pada React ditulis menggunakan camelCase, bukan sebagaii huruf kecil.
hilalarsa marked this conversation as resolved.
Show resolved Hide resolved
* Dengan JSX, Anda mengoper sebuah fungsi sebagai _event handler_, bukan sebagai string.

## [Reconciliation](/docs/reconciliation.html) {#reconciliation}
## [Rekonsiliasi](/docs/reconciliation.html) {#reconciliation}

When a component's props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called "reconciliation".
Disaat sebuah _props_ atau _state_ dari sebuah komponen mengalami perubahan, React dapat memutuskan apakah hal tersebut memerlukan pembaruan DOM, dengan cara membandingkan elemen komponen yang dikembalikan dengan komponen yang telah dirender sebelumnya. Jika keduanya berbeda, React akan memperbaharui DOM. Proses ini disebut dengan istilah "rekonsiliasi".
hilalarsa marked this conversation as resolved.
Show resolved Hide resolved