-
Notifications
You must be signed in to change notification settings - Fork 260
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 Render Props #62
Conversation
Deploy preview for idreactjs ready! Built with commit ac3ae32 |
Deploy preview for id-reactjs ready! Built with commit ac3ae32 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm leaving some reviews. Kindly to check them!
|
||
Now the question is: How can we reuse this behavior in another component? In other words, if another component needs to know about the cursor position, can we encapsulate that behavior so that we can easily share it with that component? | ||
Kemudian muncul pertanyaan: Bagaimana kita bisa menggunakan kembali perilaku ini pada komponen lainnya? Dengan kata lain, apabila ada komponen lain yang membutuhkan informasi tentang posisi kursor, dapatkah kita merangkum perilaku ini sehingga kita dapat dengan mudah membagikan informasi posisi kursor kepada komponen tersebut? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hmmm encapsulate
rather close to a term, doesn't it? Translate it to Bahasa Indonesia such as merangkum
seems weird to me.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Indeed. I only used it because that's what google translates suggested. It doesn't sound right somehow. I've posted in #2 regarding this but haven't got any comments. Do you have any suggestion? Would mengenkapsulasi be better instead?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@imiro I guess mengenkapsulasi
does sounds better.
|
||
Since components are the basic unit of code reuse in React, let's try refactoring the code a bit to use a `<Mouse>` component that encapsulates the behavior we need to reuse elsewhere. | ||
Karena komponen merupakan unit dasar penggunaan kembali kode di React, mari kita coba menyusun ulang kode sebelumnya sedikit untuk menggunakan komponen `<Mouse>` yang merangkum perilaku yang perlu kita gunakan di tempat lain. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The same issue, encapsulate
.
|
||
Now the question is: How can we reuse this behavior in another component? In other words, if another component needs to know about the cursor position, can we encapsulate that behavior so that we can easily share it with that component? | ||
Kemudian muncul pertanyaan: Bagaimana kita bisa menggunakan kembali perilaku ini pada komponen lainnya? Dengan kata lain, apabila ada komponen lain yang membutuhkan informasi tentang posisi kursor, dapatkah kita merangkum perilaku ini sehingga kita dapat dengan mudah membagikan informasi posisi kursor kepada komponen tersebut? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Indeed. I only used it because that's what google translates suggested. It doesn't sound right somehow. I've posted in #2 regarding this but haven't got any comments. Do you have any suggestion? Would mengenkapsulasi be better instead?
|
||
For example, let's say we have a `<Cat>` component that renders the image of a cat chasing the mouse around the screen. We might use a `<Cat mouse={{ x, y }}>` prop to tell the component the coordinates of the mouse so it knows where to position the image on the screen. | ||
Sebagai contoh, anggap kita memiliki sebuah komponen `<Cat>` yang me-_render_ gambar kucing sedang mengejar tetikus di layar. Kita dapat menggunakan props `<Cat mouse={{ x, y }}>` untuk memberitahukan pada komponen itu koordinat tetikus sehingga ia mengetahui di mana harus memposisikan gambar di layar. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sebagai contoh, anggap kita memiliki sebuah komponen `<Cat>` yang me-_render_ gambar kucing sedang mengejar tetikus di layar. Kita dapat menggunakan props `<Cat mouse={{ x, y }}>` untuk memberitahukan pada komponen itu koordinat tetikus sehingga ia mengetahui di mana harus memposisikan gambar di layar. | |
Sebagai contoh, anggap kita memiliki sebuah komponen `<Cat>` yang me-_render_ gambar kucing sedang mengejar tetikus di layar. Kita dapat menggunakan props `<Cat mouse={{ x, y }}>` untuk memberitahu koordinat tetikus kepada komponen tersebut sehingga ia mengetahui di mana harus memposisikan gambar di layar. |
Thank you for the suggestion. Changing itu
to tersebut
looks OK, but to use dari
as the conjunction doesn't sound right in this case.. How about this instead?
component every time we need to use it, so <MouseWithCat> | ||
isn't really reusable yet. | ||
Kita bisa saja hanya menukar <p> dengan <Cat> di sini ... tapi | ||
kita akan harus membuat komponen lain <MouseWithSomethingElse> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If we can't use akan
and harus
consecutively, I think harus
is more important to be used in this context to better deliver the message of this sentence ?
<MouseWithCat /> | ||
</div> | ||
); | ||
} | ||
} | ||
``` | ||
|
||
This approach will work for our specific use case, but we haven't achieved the objective of truly encapsulating the behavior in a reusable way. Now, every time we want the mouse position for a different use case, we have to create a new component (i.e. essentially another `<MouseWithCat>`) that renders something specifically for that use case. | ||
Pendekatan ini akan bekerja untuk kasus penggunaan ini secara spesifik, namun kita belum berhasil mencapai tujuan untuk benar-benar merangkum perilaku yang kita inginkan (melacak posisi kursor) agar dapat dengan mudah digunakan kembali. Sekarang, setiap kali kita ingin mengetahui posisi kursor untuk kasus penggunaan yang lain, kita masih harus membuat sebuah komponen baru (i.e. komponen `<MouseWithCat>` lainnya) yang me-_render_ sesuatu secara spesifik untuk kasus tersebut. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
IMHO, e.g.
(exempli gratia) can translates to misalnya
, but not i.e.
(id est) .. It usually translates to that is
in english, right? Should we translate it to yaitu
instead? Or maybe dengan kata lain
?
Pendekatan ini akan bekerja untuk kasus penggunaan ini secara spesifik, namun kita belum berhasil mencapai tujuan untuk benar-benar merangkum perilaku yang kita inginkan (melacak posisi kursor) agar dapat dengan mudah digunakan kembali. Sekarang, setiap kali kita ingin mengetahui posisi kursor untuk kasus penggunaan yang lain, kita masih harus membuat sebuah komponen baru (i.e. komponen `<MouseWithCat>` lainnya) yang me-_render_ sesuatu secara spesifik untuk kasus tersebut. | |
Pendekatan ini akan bekerja untuk kasus spesifik kita ini, namun kita belum berhasil mencapai tujuan untuk benar-benar merangkum perilaku yang kita inginkan (melacak posisi kursor) agar dapat dengan mudah digunakan kembali. Sekarang, setiap kali kita ingin mengetahui posisi kursor untuk kasus penggunaan yang lain, kita masih harus membuat sebuah komponen baru (dengan kata lain, komponen `<MouseWithCat>` lainnya) yang me-_render_ sesuatu secara spesifik untuk kasus tersebut. |
|
||
One interesting thing to note about render props is that you can implement most [higher-order components](/docs/higher-order-components.html) (HOC) using a regular component with a render prop. For example, if you would prefer to have a `withMouse` HOC instead of a `<Mouse>` component, you could easily create one using a regular `<Mouse>` with a render prop: | ||
Satu hal menarik tentang props render adalah bahwa Anda dapat mengimplementasikan kebanyakan [komponen tingkat tinggi/higher-order components](/docs/higher-order-components.html) (HOC) menggunakan komponen biasa dengan sebuah _props render_. Sebagai contoh, jika Anda lebih memilih untuk memiliki sebuah HOC `withMouse` daripada komponen `<Mouse>`, Anda dapat dengan mudah membuatnya menggunakan komponen `<Mouse>` biasa dengan suatu _props render_: | ||
|
||
```js | ||
// If you really want a HOC for some reason, you can easily | ||
// create one using a regular component with a render prop! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// create one using a regular component with a render prop! | |
// Jika Anda benar-benar ingin menggunakan HOC untuk alasan tertentu, Anda dapat dengan mudah | |
// membuatnya menggunakan komponen biasa dengan sebuah _prop render_! |
Co-Authored-By: imiro <[email protected]>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for your help @imiro!
Since "render props" is a term coined by the React team, I think we should keep it as render props. I'll look into the rest tomorrow.
I've posted in the glossary discussion section for some terms I am not sure about, I haven't got any comments yet so I think I'll just create this PR first anyway.. hope it suffices!