Skip to content

Translated Refs and The DOM #47

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 1 commit into from
Feb 3, 2020
Merged

Translated Refs and The DOM #47

merged 1 commit into from
Feb 3, 2020

Conversation

lunmay
Copy link
Contributor

@lunmay lunmay commented Feb 27, 2019

No description provided.

@netlify
Copy link

netlify bot commented Feb 27, 2019

Deploy preview for idreactjs ready!

Built with commit 03ace3f

https://deploy-preview-47--idreactjs.netlify.com

@netlify
Copy link

netlify bot commented Feb 27, 2019

Deploy preview for id-reactjs ready!

Built with commit 03ace3f

https://deploy-preview-47--id-reactjs.netlify.com

@tesseralis tesseralis mentioned this pull request Mar 9, 2019
Closed
96 tasks
regalius
regalius requested changes Mar 9, 2019
View reviewed changes
Copy link
Member

@regalius regalius left a comment

Choose a reason for hiding this comment

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

Hi @lunmay ! Thanks for the contribution! 🎉 I think there's several adjustment that needs to be made

content/docs/refs-and-the-dom.md

In the typical React dataflow, [props](/docs/components-and-props.html) are the only way that parent components interact with their children. To modify a child, you re-render it with new props. However, there are a few cases where you need to imperatively modify a child outside of the typical dataflow. The child to be modified could be an instance of a React component, or it could be a DOM element. For both of these cases, React provides an escape hatch.
Dalam *dataflow* React yang umum, [*props*](/docs/components-and-props.html) adalah satu-satunya cara bagi komponen induk untuk berinteraksi dengan anaknya. Untuk memodifikasi anak, Anda me-*render* ulang dengan *props* yang baru. Tetapi ada beberapa kasus ketika Anda harus memodifikasi anak secara imperatif di luar *dataflow* yang umum. Anak yang akan dimodifikasi bisa berupa komponen React atau elemen DOM. Pada kedua kasus ini, React menyediakan jalan keluar.
Copy link
Member

Choose a reason for hiding this comment

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

dataflow can be translated to aliran data I think 😄

content/docs/refs-and-the-dom.md

### When to Use Refs {#when-to-use-refs}
### Kapan Harus Menggunakan *Ref* {#when-to-use-refs}
Copy link
Member

Choose a reason for hiding this comment

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

Loanwords in the header doesn't have to be italicized 😄

content/docs/refs-and-the-dom.md

Your first inclination may be to use refs to "make things happen" in your app. If this is the case, take a moment and think more critically about where state should be owned in the component hierarchy. Often, it becomes clear that the proper place to "own" that state is at a higher level in the hierarchy. See the [Lifting State Up](/docs/lifting-state-up.html) guide for examples of this.
Godaan pertama mungkin adalah menggunakan *ref* agar aplikasi "bisa berfungsi". Jika benar demikian, hentikan sejenak dan pikirkan secara kritis, tempat *state* harus berada dalam hierarki komponen. Sering kali nantinya ditemukan bahwa tempat yang lebih baik untuk "memiliki" *state* tersebut adalah di tingkat yang lebih tinggi dalam hierarki. Lihat panduan [Meningkatkan *State*](/docs/lifting-state-up.html) untuk contohnya.
Copy link
Member

Choose a reason for hiding this comment

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

Lifting State Up is translated as Memindahkan State ke Atas 😄

content/docs/refs-and-the-dom.md
this.textInput = React.createRef();
this.focusTextInput = this.focusTextInput.bind(this);
}

focusTextInput() {
// Explicitly focus the text input using the raw DOM API
// Note: we're accessing "current" to get the DOM node
// Fokuskan secara eksplisit pada input teks menggunakan API DOM mentah
Copy link
Member

Choose a reason for hiding this comment

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

raw here can be translated as dasar to give better context I think 😄

content/docs/refs-and-the-dom.md

If we wanted to wrap the `CustomTextInput` above to simulate it being clicked immediately after mounting, we could use a ref to get access to the custom input and call its `focusTextInput` method manually:
Jika kita ingin membungkus `CustomTextInput` di atas untuk mensimulasikan peristiwa klik pada masukan teks segera setelah dipasang, kita bisa menggunakan *ref* untuk mendapatkan akses ke input khususnya dan memanggil *method* `focusTextInput` secara manual:
Copy link
Member

Choose a reason for hiding this comment

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

input here can be translated as elemen *input* to give better context 😄

content/docs/refs-and-the-dom.md
@@ -153,21 +153,21 @@ class Parent extends React.Component {
this.textInput = React.createRef();
}
render() {
// This will *not* work!
// Ini tidak akan berfungsi!
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
// Ini tidak akan berfungsi!
// Ini *tidak akan* berfungsi!

content/docs/refs-and-the-dom.md

If you use React 16.3 or higher, we recommend to use [ref forwarding](/docs/forwarding-refs.html) for these cases. **Ref forwarding lets components opt into exposing any child component's ref as their own**. You can find a detailed example of how to expose a child's DOM node to a parent component [in the ref forwarding documentation](/docs/forwarding-refs.html#forwarding-refs-to-dom-components).
Jika Anda menggunakan React 16.3 atau yang lebih baru, kami sarankan untuk menggunakan [*ref forwarding*](/docs/forwarding-refs.html) untuk kasus semacam ini. ***Ref forwarding* memungkinkan komponen untuk memilih untuk mengekspos semua *ref* komponen anak sebagai miliknya sendiri**. Anda bisa menemukan contoh mendetail tentang cara mengekspos simpul DOM anak ke komponen induk [dalam dokumentasi *ref forwarding*](/docs/forwarding-refs.html#forwarding-refs-to-dom-components).
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
Jika Anda menggunakan React 16.3 atau yang lebih baru, kami sarankan untuk menggunakan [*ref forwarding*](/docs/forwarding-refs.html) untuk kasus semacam ini. ***Ref forwarding* memungkinkan komponen untuk memilih untuk mengekspos semua *ref* komponen anak sebagai miliknya sendiri**. Anda bisa menemukan contoh mendetail tentang cara mengekspos simpul DOM anak ke komponen induk [dalam dokumentasi *ref forwarding*](/docs/forwarding-refs.html#forwarding-refs-to-dom-components).
Jika Anda menggunakan React 16.3 atau yang lebih baru, kami sarankan untuk menggunakan [*ref forwarding*](/docs/forwarding-refs.html) untuk kasus semacam ini. **Ref forwarding* memungkinkan komponen untuk memilih untuk mengekspos semua *ref* komponen anak sebagai miliknya sendiri**. Anda bisa menemukan contoh mendetail tentang cara mengekspos simpul DOM anak ke komponen induk [dalam dokumentasi *ref forwarding*](/docs/forwarding-refs.html#forwarding-refs-to-dom-components).

Extra * 😄

content/docs/refs-and-the-dom.md

React also supports another way to set refs called "callback refs", which gives more fine-grain control over when refs are set and unset.
React juga mendukung cara lain untuk menetapkan *ref* yang disebut sebagai *"callback ref"*, yang memberikan kontrol lebih mendetail kapan *ref* akan di-*set* dan di-*unset*.
Copy link
Member

Choose a reason for hiding this comment

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

set & unset can be translated as pasang & lepas 😄

content/docs/refs-and-the-dom.md
@@ -221,19 +221,19 @@ class CustomTextInput extends React.Component {
};

this.focusTextInput = () => {
// Focus the text input using the raw DOM API
// Fokus pada input teks menggunakan API DOM mentah
Copy link
Member

Choose a reason for hiding this comment

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

mentah -> dasar 😄

content/docs/refs-and-the-dom.md

If you worked with React before, you might be familiar with an older API where the `ref` attribute is a string, like `"textInput"`, and the DOM node is accessed as `this.refs.textInput`. We advise against it because string refs have [some issues](https://github.com/facebook/react/pull/8333#issuecomment-271648615), are considered legacy, and **are likely to be removed in one of the future releases**.
Jika sebelumnya Anda bekerja dengan React, Anda mungkin sudah mengenal API lawas dengan atribut `ref` berupa string, misalnya `"textInput"`, dan simpul DOM yang diakses dengan `this.refs.textInput`. Kami sarankan untuk tidak melakukannya karena *string ref* memiliki [beberapa masalah](https://github.com/facebook/react/pull/8333#issuecomment-271648615) dan dipertimbangkan sebagai *legacy*, serta **kemungkinan besar akan dihapus dalam salah satu rilis di masa mendatang**.
Copy link
Member

Choose a reason for hiding this comment

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

string

rizafahmi
rizafahmi requested changes Mar 9, 2019
View reviewed changes
content/docs/refs-and-the-dom.md

For example, instead of exposing `open()` and `close()` methods on a `Dialog` component, pass an `isOpen` prop to it.
Misalnya, alih-alih mengekspos *method* `open()` dan `close()` pada komponen `Dialog`, operkan *props* `isOpen` kepadanya.
Copy link
Collaborator

Choose a reason for hiding this comment

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

operkan props sepertinya agak aneh. Gimana kalau kirimkan *props*?

content/docs/refs-and-the-dom.md
- **You may not use the `ref` attribute on function components** because they don't have instances.
- Ketika atribut `ref` digunakan pada elemen HTML, `ref` yang dibuat dalam konstruktor dengan `React.createRef()` menerima elemen DOM yang mendasari sebagai properti `current` miliknya.
- Saat atribut `ref` digunakan pada *class component* khusus, objek `ref` menerima instans yang dipasang milik komponen sebagai `current`-nya.
- **Anda tidak diizinkan untuk menggunakan atribut `ref` pada *function component*** karena komponen tersebut tidak memiliki instans.
Copy link
Collaborator

Choose a reason for hiding this comment

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

instans? Just use instance

content/docs/refs-and-the-dom.md

Instead of passing a `ref` attribute created by `createRef()`, you pass a function. The function receives the React component instance or HTML DOM element as its argument, which can be stored and accessed elsewhere.
Alih-alih mengoper atribut `ref` yang dibuat oleh `createRef()`, Anda mengoper sebuah fungsi. Fungsi tersebut menerima instans komponen React atau elemen DOM HTML sebagai argumennya, yang bisa disimpan dan diakses di tempat lain.
Copy link
Collaborator

Choose a reason for hiding this comment

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

oper -> kirim?

@rizafahmi rizafahmi self-requested a review April 12, 2019 12:30
@resir014 resir014 mentioned this pull request Jan 3, 2020
Merged
@resir014 resir014 merged commit 03ace3f into reactjs:master Feb 3, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@regalius regalius regalius requested changes

@arfianadam arfianadam Awaiting requested review from arfianadam

@gedeagas gedeagas Awaiting requested review from gedeagas

@rizafahmi rizafahmi Awaiting requested review from rizafahmi

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@lunmay @rizafahmi @regalius @resir014