Skip to content

Commit

Permalink
Merge remote-tracking branches 'hilalarsa/glossary-translate' and 'im…
Browse files Browse the repository at this point in the history 
…iro/render-props' into second-octopus-merge
  • Loading branch information
@resir014
resir014 committed Jul 21, 2020
3 parents 1bc21f5 + d72271c + ac3ae32 commit 2ae8774
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 104 deletions.
100 changes: 51 additions & 49 deletions content/docs/reference-glossary.md
View file
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. Seluruh 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.

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}
## ES6, ES2015, ES2016, dsb {#es6-es2015-es2016-etc}

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)

## 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 menerima kode JavaScript, mengubahnya, 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.

## 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/)

## Package Managers {#package-managers}
## Manajer Paket {#package-managers}

Package managers are tools that allow you to manage dependencies in your project. [npm](https://www.npmjs.com/) and [Yarn](https://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 proyek 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.

## 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 di seluruh dunia.

## 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_, namun memiliki kekuatan penuh atas bahasa JavaScript. JSX akan dikompilasi ke pemanggilan `React.createElement()` yang mengembalikan objek JavaScript biasa bernama "React elements". 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)

Alih-alih menggunakan nama atribut HTML, React DOM menggunakan konvensi penamaan *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.

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.
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 senarai, _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), 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](https://reactjs.org/docs/components-and-props.html#rendering-a-component) untuk penjelasan mengenai cara melakukan _render_ komponen.


### [`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` 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,47 @@ 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. Sebagai contoh, sebuah komponen `Checkbox` dapat membutuhkan _state_ `isChecked`, dan sebuah komponen `NewsFeed` bisa jadi selalu membutuhkan _state_ `fetchedPost` terbaru.

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`.
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, [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}

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.
_Lifecycle Methods_ 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.

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. Namun, hal ini berarti Anda tidak dapat memaksa sebuah bidang masukan unntuk memiliki nilai tertentu.

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 atribut *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 senarai yag sama. *Keys* tidak perlu bersifat unik di seluruh aplikasi atau bahkan di dalam komponen yang sama.

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 _di-render_ ulang, sehingga React dapat menentukan kapan sebuah item ditambah, dihapus, atau diurutkan. Secara ideal, key harus tersusun dari data Anda yang bersifat unik dan stabil, seperti `post.id`.

## [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-and 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).

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

Handling events with React elements has some syntactic differences:
Menangani _event_ dengan Elemen React memiliki perbedaan secara sintaksis:

* React event handlers are named using camelCase, rather than lowercase.
* With JSX you pass a function as the event handler, rather than a string.
* _Event handler_ pada React ditulis menggunakan *camelCase*, bukan sebagai huruf kecil.
* 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 _di-render_ sebelumnya. Jika keduanya berbeda, React akan memperbarui DOM. Proses ini disebut dengan istilah "rekonsiliasi".
Loading

0 comments on commit 2ae8774

Please sign in to comment.