ReactJS - Membuat Komponen menggunakan Properti

Hai sana, para pengembang React masa depan! Hari ini, kita akan memulai perjalanan yang menarik ke dunia komponen dan properti React. Sebagai guru komputer yang ramah di lingkungan Anda, saya disini untuk menggembalikan Anda melalui petualangan ini langkah demi langkah. Jadi, ambil minuman favorit Anda, duduk nyaman, dan mari kita masuk ke dalam!

Apa Itu Komponen dan Properti React?

Sebelum kita mulai membuat komponen, mari kita pahami apa itu. Bayangkan Anda membangun sebuah rumah dengan blok Lego. Setiap piece Lego seperti komponen React - sebuah blok bangunan yang dapat digunakan kembali untuk aplikasi web Anda. Sekarang, bagaimana jika Anda ingin menyesuaikan piece Lego ini? Itu di mana properti (atau props) memasuki gambaran. 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-orang berbeda.

function Greeting(props) {
return <h1>Hallo, {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 cara React menulis kode HTML-like dalam JavaScript).
3. Kita menggunakan {props.name} untuk memasukkan nilai properti name.
4. Dalam komponen App kita, kita menggunakan <Greeting /> tiga kali dengan properti name yang berbeda.

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

Menambahkan Lebih Banyak Properti

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

function Greeting(props) {
return (
<div>
<h1>Hallo, {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="menggambar" />
<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 menjalankan sebuah nomor, bukan string. Untuk string, kita menggunakan tanda petik, tetapi untuk nomor atau ekspresi JavaScript, kita menggunakan kurung kurawal.

Objek sebagai Properti

kadang-kadang, itu mudah untuk mengelompokkan data yang terkait dalam objek. Mari kita refactor komponen Greeting kita untuk menggunakan properti objek:

function Greeting(props) {
return (
<div>
<h1>Hallo, {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: "menggambar" };
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 prop, yang berisi semua informasi tentang setiap orang. Ini dapat membuat kode Anda lebih bersih, terutama ketika Anda memiliki banyak properti yang terkait.

Destructuring Properti

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

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

Ini melakukan hal yang sama seperti contoh sebelumnya, tetapi lebih ringkas. Kita mengatakan "ambil prop 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>Hallo, {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 daripada崩溃.

Tipe Properti

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

import PropTypes from 'prop-types';

function Greeting({ person }) {
const { name, age, hobby } = person;
return (
<div>
<h1>Hallo, {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 kerja 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 telah 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 bersih
Properti Default	Tetapkan nilai default untuk properti yang hilang
PropTypes	Validasi jenis properti yang dikirim

Lanjutkan berlatih, eksperimen, dan bangun! React adalah alat yang kuat, dan Anda telah berada di jalur yang benar untuk menjadi ahli React. Selamat berkoding!

Credits: Image by storyset