ReactJS - Membuat Komponen menggunakan Properti

Hai teman-teman, pengembang React masa depan! Hari ini, kita akan memulai perjalanan yang menarik ke dunia komponen dan properti React. Sebagai guru komputer tetangga yang ramah, saya di sini untuk memandu Anda melalui petualangan ini langkah demi langkah. Jadi, ambil minumannya yang favorit, rasa nyaman, dan mari kita masuk ke dalam!

Apa Itu Komponen dan Properti React?

Sebelum kita mulai membuat komponen, mari kita pahami apa itu komponen. Bayangkan Anda membangun sebuah rumah dengan blok Lego. Setiap piece Lego adalah seperti sebuah komponen React - sebuah blok bangunan yang dapat digunakan kembali untuk aplikasi web Anda. Sekarang, apa bila Anda ingin menyesuaikan piece Lego ini? Itu adalah tempat properti (atau props) masuk. Properti adalah seperti petunjuk khusus yang Anda berikan ke setiap piece Lego untuk membuatnya unik.

Cara Membuat Komponen Menggunakan Properti

Mari kita mulai dengan contoh sederhana. Kita akan membuat komponen "Greeting" yang menyapa orang lain.

function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}

function App() {
return (
<div>
<Greeting name="Alice" />
<Greeting name="Bob" />
<Greeting name="Charlie" />
</div>
);
}

mari kitauraikan ini:

1. Kita mendefinisikan sebuah fungsi Greeting yang menerima props sebagai argumen.
2. Dalam fungsi ini, kita mengembalikan beberapa JSX (itu adalah cara React menulis kode HTML-like di JavaScript).
3. Kita menggunakan {props.name} untuk memasukkan nilai properti name.
4. Dalam komponen App, kita menggunakan <Greeting /> tiga kali dengan properti name yang berbeda.

Ketika Anda menjalankan kode ini, Anda akan melihat tiga salam, masing-masing dengan nama yang berbeda. Itu seperti memiliki robot ramah yang dapat menyapa siapa pun Anda perkenalkannya!

Menambahkan Properti Lain

Sekarang, mari kita membuat salam kita lebih menarik dengan menambahkan beberapa properti lain:

function Greeting(props) {
return (
<div>
<h1>Hello, {props.name}!</h1>
<p Anda berusia {props.age} tahun dan Anda menyukai {props.hobby}.</p>
</div>
);
}

function App() {
return (
<div>
<Greeting name="Alice" age={25} hobby="mewarnai" />
<Greeting name="Bob" age={30} hobby="main gitar" />
</div>
);
}

Di sini, kita telah menambahkan properti age dan hobby. Perhatikan bagaimana kita menggunakan kurung kurawal {} untuk properti age? Itu karena kita mengirimkan sebuah nomor, bukan string. Untuk string, kita menggunakan tanda petik, tapi untuk nomor atau ekspresi JavaScript, kita menggunakan kurung kurawal.

Objek sebagai Properti

kadang-kadang, hal ini mudah untuk mengelompokkan data yang berkaitan ke dalam objek. Mari kita refactor komponen Greeting untuk menggunakan properti objek:

function Greeting(props) {
return (
<div>
<h1>Hello, {props.person.name}!</h1>
<p Anda berusia {props.person.age} tahun dan Anda menyukai {props.person.hobby}.</p>
</div>
);
}

function App() {
const alice = { name: "Alice", age: 25, hobby: "mewarnai" };
const bob = { name: "Bob", age: 30, hobby: "main gitar" };

return (
<div>
<Greeting person={alice} />
<Greeting person={bob} />
</div>
);
}

Dalam versi ini, kita mengirimkan objek tunggal person sebagai properti, yang berisi semua informasi tentang setiap orang. Ini dapat membuat kode Anda lebih rapi, khususnya saat Anda memiliki banyak properti yang berkaitan.

Destructuring Properti

Ketika komponen Anda tumbuh, Anda mungkin menemukan bahwa Anda mengetik props. banyak kali. Ada trik menarik yang disebut "destructuring" yang dapat membuat kode Anda lebih rapi:

function Greeting({ person }) {
const { name, age, hobby } = person;
return (
<div>
<h1>Hello, {name}!</h1>
<p Anda berusia {age} tahun dan Anda menyukai {hobby}.</p>
</div>
);
}

Ini melakukan hal yang sama seperti contoh sebelumnya, tapi lebih ringkas. Kita mengatakan "ambil properti person dan ekstrak name, age, dan hobby darinya".

Properti Default

Apa bila seseorang lupa mengirimkan properti ke komponen kita? Kita dapat menetapkan nilai default untuk menghindari kesalahan:

function Greeting({ person = { name: "Tamu", age: "tidak diketahui", hobby: "misteri" } }) {
const { name, age, hobby } = person;
return (
<div>
<h1>Hello, {name}!</h1>
<p Anda berusia {age} tahun dan Anda menyukai {hobby}.</p>
</div>
);
}

Sekarang, jika kita menggunakan <Greeting /> tanpa properti apa pun, itu akan menggunakan nilai default ini saja daripada crash.

Properti Tipe

Ketika aplikasi Anda tumbuh, itu adalah ide yang bagus untuk memeriksa bahwa Anda mendapat jenis properti yang benar. React memiliki fitur yang disebut PropTypes untuk hal ini:

import PropTypes from 'prop-types';

function Greeting({ person }) {
const { name, age, hobby } = person;
return (
<div>
<h1>Hello, {name}!</h1>
<p Anda berusia {age} tahun dan Anda menyukai {hobby}.</p>
</div>
);
}

Greeting.propTypes = {
person: PropTypes.shape({
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
hobby: PropTypes.string.isRequired
}).isRequired
};

Ini akan memperingatkan Anda jika Anda mengirimkan jenis data yang salah ke komponen Anda. Itu seperti memiliki asisten yang ramah yang memeriksa pekerjaan Anda!

Kesimpulan

Selamat! Anda baru saja belajar dasar membuat komponen React dengan properti. Ingat, properti adalah seperti petunjuk yang Anda berikan ke komponen Anda untuk membuatnya dinamis dan dapat digunakan kembali. Properti adalah bagian fundamental React, dan menguasai mereka akan membawa Anda jauh dalam perjalanan React Anda.

Berikut adalah tabel rujukan cepat metode yang kita bahas:

Metode	Deskripsi
Properti Dasar	Kirim nilai individual ke komponen
Properti Objek	Kirim objek tunggal yang berisi nilai ganda
Destructuring	Ekstrak nilai dari properti untuk kode yang lebih rapi
Properti Default	Tetapkan nilai fallback untuk properti yang hilang
PropTypes	Validasi jenis properti yang dikirim

Terus latih, eksperimen, dan bangun! React adalah alat yang kuat, dan Anda telah berada di jalur yang benar untuk menjadi ahli React. Selamat coding!

Credits: Image by storyset