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

Translation Handling-Events #17

Merged
merged 16 commits into from Mar 3, 2019

Conversation

Projects
None yet
5 participants
@TitusEfferian
Copy link
Contributor

TitusEfferian commented Feb 11, 2019

No description provided.

@tesseralis tesseralis referenced this pull request Feb 11, 2019

Open

Indonesian Translation Progress #1

12 of 87 tasks complete
@spondbob
Copy link

spondbob left a comment

I know that Github's markdown support both _ and * to italicize, so I am just following your existing draft here.

Show resolved Hide resolved content/docs/handling-events.md Outdated
Show resolved Hide resolved content/docs/handling-events.md Outdated
Show resolved Hide resolved content/docs/handling-events.md Outdated
Show resolved Hide resolved content/docs/handling-events.md Outdated
Show resolved Hide resolved content/docs/handling-events.md Outdated
Show resolved Hide resolved content/docs/handling-events.md Outdated
Show resolved Hide resolved content/docs/handling-events.md Outdated
Show resolved Hide resolved content/docs/handling-events.md Outdated
@regalius
Copy link
Member

regalius left a comment

Looks like just need to adjust several common terms and we're good to go 🎉

Show resolved Hide resolved content/docs/handling-events.md Outdated
Show resolved Hide resolved content/docs/handling-events.md Outdated
Show resolved Hide resolved content/docs/handling-events.md Outdated

@regalius regalius requested review from gedeagas and arfianadam Feb 12, 2019

TitusEfferian and others added some commits Feb 16, 2019

Update content/docs/handling-events.md
Co-Authored-By: TitusEfferian <kiritosato@gmail.com>
Update content/docs/handling-events.md
Co-Authored-By: TitusEfferian <kiritosato@gmail.com>
Update content/docs/handling-events.md
Co-Authored-By: TitusEfferian <kiritosato@gmail.com>
Update content/docs/handling-events.md
Co-Authored-By: TitusEfferian <kiritosato@gmail.com>
Update content/docs/handling-events.md
Co-Authored-By: TitusEfferian <kiritosato@gmail.com>
Update content/docs/handling-events.md
Co-Authored-By: TitusEfferian <kiritosato@gmail.com>
Update content/docs/handling-events.md
Co-Authored-By: TitusEfferian <kiritosato@gmail.com>
Update content/docs/handling-events.md
Co-Authored-By: TitusEfferian <kiritosato@gmail.com>
@TitusEfferian

This comment has been minimized.

Copy link
Contributor Author

TitusEfferian commented Feb 16, 2019

hello,
there's some new change based on @spondbob and @paramithatm commit suggestion and @regalius request change

kindly review once again

permalink: docs/handling-events.html
prev: state-and-lifecycle.html
next: conditional-rendering.html
redirect_from:
- "docs/events-ko-KR.html"
---

Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences:
Menangani sebuah *events* dengan elemen React sangat mirip seperti menangani sebuah *events* pada elemen DOM. Ada beberapa perbedaan sintaks:

This comment has been minimized.

@arfianadam

arfianadam Feb 17, 2019

Contributor

sintaks -> sintaksis
Lihat: https://kbbi.web.id/sintaksis

* React events are named using camelCase, rather than lowercase.
* With JSX you pass a function as the event handler, rather than a string.
* *Events* pada React biasanya dituliskan dalam bentuk camelCase, dan bukan lowercase.
* Dengan JSX Anda dapat oper sebuah *function* sebagai *event handler*, dan bukan sebuah *string*.

This comment has been minimized.

@arfianadam
@@ -54,19 +54,20 @@ function ActionLink() {
}
```

Here, `e` is a synthetic event. React defines these synthetic events according to the [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/), so you don't need to worry about cross-browser compatibility. See the [`SyntheticEvent`](/docs/events.html) reference guide to learn more.
Disini, `e` adalah sebuah event tiruan. React mendefinisikan event tiruan ini berdasarkan [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/), jadi Anda tidak perlu kuatir akan kesesuaian antar lintar browser. Lihat referensi pada [`SyntheticEvent`](/docs/events.html) untuk paduan belajar lebih jauh.

This comment has been minimized.

@arfianadam

arfianadam Feb 17, 2019

Contributor

Disini -> Di sini
event -> *event*
kuatir -> khawatir
lintar -> lintas
browser -> peramban atau *browser*
Lihat: https://kbbi.web.id/browser dan https://id.wikipedia.org/wiki/Daftar_istilah_Internet_Indonesia
paduan -> panduan


If calling `bind` annoys you, there are two ways you can get around this. If you are using the experimental [public class fields syntax](https://babeljs.io/docs/plugins/transform-class-properties/), you can use class fields to correctly bind callbacks:
Jika memanggil `bind` menggangu Anda, ada dua cara untuk mengatasi ini. Jika Anda menggunakan sintaks eksperimental [public class fields](https://babeljs.io/docs/plugins/transform-class-properties/), Anda dapat menggunakan *class fields* untuk melakukan *binding* terhadap *callbacks*:

This comment has been minimized.

@arfianadam

arfianadam Feb 17, 2019

Contributor

sintaks -> sintaksis


```js{2-6}
class LoggingButton extends React.Component {
// This syntax ensures `this` is bound within handleClick.
// Warning: this is *experimental* syntax.
// Sintaks ini memastikan `this` telah terikat dalam handleClick.

This comment has been minimized.

@arfianadam

arfianadam Feb 17, 2019

Contributor

sintaks -> sintaksis

Show resolved Hide resolved content/docs/handling-events.md Outdated
@@ -117,9 +118,9 @@ class LoggingButton extends React.Component {
}
```

This syntax is enabled by default in [Create React App](https://github.com/facebookincubator/create-react-app).
sintaks ini telah diakfifkan secara bawaan pada [Create React App](https://github.com/facebookincubator/create-react-app).

This comment has been minimized.

@arfianadam

arfianadam Feb 17, 2019

Contributor

Sintaks -> Sintaksis


## Passing Arguments to Event Handlers {#passing-arguments-to-event-handlers}
## Mengoper Argumen Kedalam Penanganan Event {#passing-arguments-to-event-handlers}

This comment has been minimized.

permalink: docs/handling-events.html
prev: state-and-lifecycle.html
next: conditional-rendering.html
redirect_from:
- "docs/events-ko-KR.html"
---

Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences:
Menangani *events* dengan elemen React sangat mirip seperti menangani sebuah *events* pada elemen DOM. Ada beberapa perbedaan sintaks:

This comment has been minimized.

@arfianadam

arfianadam Feb 18, 2019

Contributor

sintaks -> sintaksis


If calling `bind` annoys you, there are two ways you can get around this. If you are using the experimental [public class fields syntax](https://babeljs.io/docs/plugins/transform-class-properties/), you can use class fields to correctly bind callbacks:
Jika Anda tidak terbiasa menggunakan `bind`, ada dua cara untuk mengatasi ini. Jika Anda menggunakan sintaks eksperimental [public class fields](https://babeljs.io/docs/plugins/transform-class-properties/), Anda dapat menggunakan *class fields* untuk melakukan *binding* terhadap *callbacks*:

This comment has been minimized.

@arfianadam

arfianadam Feb 18, 2019

Contributor

sintaks -> sintaksis

</button>
);
}
}
```

This syntax is enabled by default in [Create React App](https://github.com/facebookincubator/create-react-app).
Sintaks ini telah diakfifkan secara bawaan pada [Create React App](https://github.com/facebookincubator/create-react-app).

This comment has been minimized.

@arfianadam

arfianadam Feb 18, 2019

Contributor

sintaks -> sintaksis


If you aren't using class fields syntax, you can use an [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) in the callback:
Jika Anda tidak menggunakan sintaks *class fields*, Anda dapat menggunakan [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) pada *callback*:

This comment has been minimized.

@arfianadam

arfianadam Feb 18, 2019

Contributor

sintaks -> sintaksis

@@ -128,27 +129,27 @@ class LoggingButton extends React.Component {
}
render() {
// This syntax ensures `this` is bound within handleClick
// Sintaks ini memastikan `this` telah terikat dalam handleClick.

This comment has been minimized.

@arfianadam

arfianadam Feb 18, 2019

Contributor

sintaks -> sintaksis

</button>
);
}
}
```

The problem with this syntax is that a different callback is created each time the `LoggingButton` renders. In most cases, this is fine. However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering. We generally recommend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem.
Masalah pada sintaks tersebut adalah *callback* yang berbeda dibuat setiap kali `LoggingButton` di-*render*. Dalam banyak kasus, hal ini tidak masalah. Akan tetapi, jika callback tersebut mengoperkan sebagai *props* kepada komponen yang lebih rendah, maka komponen tersebut mungkin akan melakukan ekstra *render* ulang. Kita umumnya merekomendasikan *binding* dilakukan pada *constructor* atau menggunakan sintaks *class fields*, untuk menghindari masalah kinerja seperti ini.

This comment has been minimized.

@arfianadam

arfianadam Feb 18, 2019

Contributor

sintaks -> sintaksis

@netlify

This comment has been minimized.

Copy link

netlify bot commented Feb 18, 2019

Deploy preview for idreactjs ready!

Built with commit 5e07a5b

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

@TitusEfferian

This comment has been minimized.

Copy link
Contributor Author

TitusEfferian commented Feb 18, 2019

@arfianadam already resolved based on your request change

@regalius

This comment has been minimized.

Copy link
Member

regalius commented Feb 18, 2019

LGTM from me 😄 Thank you for the contribution!

@netlify

This comment has been minimized.

Copy link

netlify bot commented Feb 25, 2019

Deploy preview for id-reactjs ready!

Built with commit 5e07a5b

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

@TitusEfferian

This comment has been minimized.

Copy link
Contributor Author

TitusEfferian commented Feb 25, 2019

any updates about this PR?

@regalius

This comment has been minimized.

Copy link
Member

regalius commented Mar 3, 2019

So sorry, looks like from both @arfianadam and @gedeagas it's LGTM, will merge now mas @TitusEfferian Thanks for the contribution! 🎉

@regalius regalius merged commit 0fbf852 into reactjs:master Mar 3, 2019

1 check passed

deploy/netlify Deploy preview ready!
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.