Uh oh!
There was an error while loading. Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork 267
Translate typechecking-with-proptypes#40
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
Merged
gedeagas
merged 2 commits into
reactjs:master
from
rizafahmi:typechecking-with-proptypesMar 18, 2019
Uh oh!
There was an error while loading. Please reload this page.
Merged
Changes from all commits
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Uh oh!
There was an error while loading. Please reload this page.
Jump to
Jump to file
Failed to load files.
Loading
Uh oh!
There was an error while loading. Please reload this page.
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,18 @@ | ||
| --- | ||
| id: typechecking-with-proptypes | ||
| title: Typechecking With PropTypes | ||
| title: Pengecekan Tipe Dengan PropTypes | ||
| permalink: docs/typechecking-with-proptypes.html | ||
| redirect_from: | ||
| - "docs/react-api.html#typechecking-with-proptypes" | ||
| --- | ||
| > Note: | ||
| > | ||
| > `React.PropTypes` has moved into a different package since React v15.5. Please use [the `prop-types` library instead](https://www.npmjs.com/package/prop-types). | ||
| > `React.PropTypes` sudah dipindahkan ke paket yang berbeda sejak React v15.5. Silakan gunakan [pustaka `prop-types`](https://www.npmjs.com/package/prop-types). | ||
| > | ||
| >We provide [a codemod script](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes) to automate the conversion. | ||
| >Kami menyediakan [*codemod script*](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes) untuk melakukan konversi secara otomatis. | ||
| As your app grows, you can catch a lot of bugs with typechecking. For some applications, you can use JavaScript extensions like [Flow](https://flow.org/) or [TypeScript](https://www.typescriptlang.org/) to typecheck your whole application. But even if you don't use those, React has some built-in typechecking abilities. To run typechecking on the props for a component, you can assign the special `propTypes` property: | ||
| Dengan berkembangnya aplikasi anda, kit dapat menemukan banyak kesalahan atau *bugs* dengan pengecekan tipe. Untuk beberapa aplikasi, anda dapat menggunakan ekstensi JavaScript seperti [Flow](https://flow.org/) atau [TypeScript](https://www.typescriptlang.org/) untuk melakukan pengecekan tipe di aplikasi secara menyeluruh. Meskipun kamu tidak menggunakannya, React memiliki kemampuan pengecekan tipe. Untuk menjalankan pengecekan terhadap *props* disebuah komponen, kamu dapat menggunakan properti khusus `propTypes`: | ||
| ```javascript | ||
| import PropTypes from 'prop-types'; | ||
| @@ -30,18 +30,18 @@ Greeting.propTypes = { | ||
| }; | ||
| ``` | ||
| `PropTypes` exports a range of validators that can be used to make sure the data you receive is valid. In this example, we're using `PropTypes.string`. When an invalid value is provided for a prop, a warning will be shown in the JavaScript console. For performance reasons, `propTypes` is only checked in development mode. | ||
| `PropTypes` mengirimkan berbagai jenis *validator* yang dapat digunakan untuk memastikan bahwa data yang diterima valid. Contoh diatas, anda menggunakan `PropTypes.string`. Ketika nilai yang dikirimkan untuk sebuah *prop* keliru, sebuah peringatan akan muncul di konsol JavaScript. Untuk alasan performa, `propTypes` hanya melakukan pengecekan di mode pengembangan atau *development*. | ||
| ### PropTypes {#proptypes} | ||
| Here is an example documenting the different validators provided: | ||
| Berikut contoh mendokumentasikan berbagai validator yang berbeda yang sudah disediakan: | ||
rizafahmi marked this conversation as resolved.
Uh oh!There was an error while loading. Please reload this page. | ||
| ```javascript | ||
| import PropTypes from 'prop-types'; | ||
| MyComponent.propTypes = { | ||
| // You can declare that a prop is a specific JS type. By default, these | ||
| // are all optional. | ||
| // Anda dapat menyatakan bahwa sebuah prop adalah tipe khusus yang berasal dari JS. Secara default, | ||
| // hal ini sifatnya opsional. | ||
| optionalArray: PropTypes.array, | ||
| optionalBool: PropTypes.bool, | ||
| optionalFunc: PropTypes.func, | ||
| @@ -50,50 +50,50 @@ MyComponent.propTypes = { | ||
| optionalString: PropTypes.string, | ||
| optionalSymbol: PropTypes.symbol, | ||
| // Anything that can be rendered: numbers, strings, elements or an array | ||
| // (or fragment) containing these types. | ||
| // Apapun dapat di-render: numbers, strings, elements ataupun sebuah array | ||
| // (atau fragmen) yang mengandung tipe-tipe tersebut. | ||
| optionalNode: PropTypes.node, | ||
| // A React element. | ||
| // Sebuah elemen React. | ||
| optionalElement: PropTypes.element, | ||
| // You can also declare that a prop is an instance of a class. This uses | ||
| // JS's instanceof operator. | ||
| // Anda dapat juga menyatakan bahwa sebuah prop adalah instance dari sebuah kelas. Ini menggunakan | ||
| // operator instanceof dari JS. | ||
| optionalMessage: PropTypes.instanceOf(Message), | ||
| // You can ensure that your prop is limited to specific values by treating | ||
| // it as an enum. | ||
| // Anda dapat memastikan bahwa prop anda dibatasi khusus untuk nilai tertentu dengan memperlakukan | ||
| // sebagai sebuah enum. | ||
| optionalEnum: PropTypes.oneOf(['News', 'Photos']), | ||
| // An object that could be one of many types | ||
| // Sebuah objek dapat memiliki satu dari banyak tipe-tipe | ||
| optionalUnion: PropTypes.oneOfType([ | ||
| PropTypes.string, | ||
| PropTypes.number, | ||
| PropTypes.instanceOf(Message) | ||
| ]), | ||
| // An array of a certain type | ||
| // Sebuah array dari tipe tertentu | ||
| optionalArrayOf: PropTypes.arrayOf(PropTypes.number), | ||
| // An object with property values of a certain type | ||
| // Sebuah objek dengan nilai properti dari tipe tertentu | ||
| optionalObjectOf: PropTypes.objectOf(PropTypes.number), | ||
| // An object taking on a particular shape | ||
| // Sebuah objek yang menerima bentuk tertentu | ||
| optionalObjectWithShape: PropTypes.shape({ | ||
| color: PropTypes.string, | ||
| fontSize: PropTypes.number | ||
| }), | ||
| // You can chain any of the above with `isRequired` to make sure a warning | ||
| // is shown if the prop isn't provided. | ||
| // Anda dapat merangkai dari contoh diatas dengan `isRequired` untuk memastikan sebuah peringatan | ||
| // akan muncul jika sebuah prop tidak disertakan. | ||
| requiredFunc: PropTypes.func.isRequired, | ||
| // A value of any data type | ||
| // Sebuah nilai dari tipe data apapun | ||
| requiredAny: PropTypes.any.isRequired, | ||
| // You can also specify a custom validator. It should return an Error | ||
| // object if the validation fails. Don't `console.warn` or throw, as this | ||
| // won't work inside `oneOfType`. | ||
| // Anda dapat juga menentukan validator khusus. Akan menghasilkan objek Error | ||
| // jika validasi gagal. Jangan `console.warn` atau `throw`, hal seperti ini | ||
| // tidak akan berfungsi jika didalam `oneOfType`. | ||
| customProp: function(props, propName, componentName) { | ||
| if (!/matchme/.test(props[propName])) { | ||
| return new Error( | ||
| @@ -103,11 +103,11 @@ MyComponent.propTypes = { | ||
| } | ||
| }, | ||
| // You can also supply a custom validator to `arrayOf` and `objectOf`. | ||
| // It should return an Error object if the validation fails. The validator | ||
| // will be called for each key in the array or object. The first two | ||
| // arguments of the validator are the array or object itself, and the | ||
| // current item's key. | ||
| // Anda dapat juga menyediakan sebuah validator tambahan ke `arrayOf` dan `objectOf`. | ||
| // Hal ini sebaiknya menghasilkan objek Error jika validasi gagal. Validator | ||
| // akan dipanggil untuk setiap nilai didalam array atau objek. Dua pertama | ||
| // dari argumen validator adalah array atau objek itu sendiri, dan | ||
| // identitas dari nilai saat itu. | ||
| customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) { | ||
| if (!/matchme/.test(propValue[key])) { | ||
| return new Error( | ||
| @@ -119,16 +119,16 @@ MyComponent.propTypes = { | ||
| }; | ||
| ``` | ||
| ### Requiring Single Child {#requiring-single-child} | ||
| ### Membutuhkan Satu Komponen Anak {#requiring-single-child} | ||
| With `PropTypes.element` you can specify that only a single child can be passed to a component as children. | ||
| Dengan menggunakan `PropTypes.element` anda dapat menentukan bahwa hanya menerima satu komponen anak yang dapat dikirimkan ke komponen lain. | ||
| ```javascript | ||
| import PropTypes from 'prop-types'; | ||
| class MyComponent extends React.Component { | ||
| render() { | ||
| // This must be exactly one element or it will warn. | ||
| // Harus memiliki hanya satu elemen atau akan diberi peringatan. | ||
| const children = this.props.children; | ||
| return ( | ||
| <div> | ||
| @@ -143,9 +143,9 @@ MyComponent.propTypes = { | ||
| }; | ||
| ``` | ||
| ### Default Prop Values {#default-prop-values} | ||
| ### Nilai Default Prop {#default-prop-values} | ||
| You can define default values for your `props` by assigning to the special `defaultProps` property: | ||
| Anda dapat mendefinisikan nilai *default* untuk `props` dengan menambahkan properti khusus `defaultProps`: | ||
| ```javascript | ||
| class Greeting extends React.Component { | ||
| @@ -156,19 +156,19 @@ class Greeting extends React.Component { | ||
| } | ||
| } | ||
| // Specifies the default values for props: | ||
| // Menentukan nilai default dari props: | ||
| Greeting.defaultProps = { | ||
| name: 'Stranger' | ||
| }; | ||
| // Renders "Hello, Stranger": | ||
| // Render "Hello, Stranger": | ||
| ReactDOM.render( | ||
| <Greeting />, | ||
| document.getElementById('example') | ||
| ); | ||
| ``` | ||
| If you are using a Babel transform like [transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/) , you can also declare `defaultProps` as static property within a React component class. This syntax has not yet been finalized though and will require a compilation step to work within a browser. For more information, see the [class fields proposal](https://github.com/tc39/proposal-class-fields). | ||
| Jika kamu menggunakan alat transformasi Babel seperti [transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/) , kamu dapat mendeklarasikan `defaultProps` sebagai properti *static* dalam komponen kelas React. Sintaks ini belum final dan akan membutuhkan tahapan kompilasi untuk berjalan di browser. Informasi lebih lanjut, silakan lihat [proposal class fields](https://github.com/tc39/proposal-class-fields). | ||
| ```javascript | ||
| class Greeting extends React.Component { | ||
| @@ -184,4 +184,4 @@ class Greeting extends React.Component { | ||
| } | ||
| ``` | ||
| The `defaultProps` will be used to ensure that `this.props.name` will have a value if it was not specified by the parent component. The `propTypes` typechecking happens after `defaultProps` are resolved, so typechecking will also apply to the `defaultProps`. | ||
| Properti `defaultProps` akan digunakan untuk memastikan bahwa `this.props.name` akan memiliki sebuah nilai jika tidak ada nilai yang diberikan oleh komponen induknya. Proses pengecekan tipe `propTypes` akan dijalankan setelah `defaultProps` berjalan, sehingga proses pengecekan tipe juga akan berlaku untuk `defaultProps`. | ||
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.