ReactJS - Properti (props): Panduan untuk Pemula

Halo, para pengembang React masa depan! Hari ini, kita akan mendalamkan salah satu konsep paling dasar dalam React: Properti, atau seperti yang kami kasih nama sayangnya, "props". Jangan khawatir jika Anda baru dalam programming - saya akan memandu Anda langkah demi langkah, seperti yang saya lakukan bagi ribuan murid selama tahun-tahun mengajar saya. Mari kita mulai perjalanan menarik ini bersama!

Apa Itu Props?

Sebelum kita masuk ke kode, mari kita pahami apa itu props. Bayangkan Anda sedang membangun sebuah rumah (aplikasi React kami). Props adalah seperti rancangan yang memberitahu setiap kamar (komponen) bagaimana penampilannya dan apa yang harus dimuat. Itu adalah cara untuk mengirimkan data dari komponen induk ke komponen anak.

Menggunakan Props

Mari kita mulai dengan contoh sederhana. Kita akan membuat komponen Greeting yang menampilkan pesan personal.

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

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

Dalam contoh ini, name adalah prop yang kita kirim ke komponen Greeting. Mari kitauraikan:

1. Kita mendefinisikan komponen Greeting yang mengharapkan objek props.
2. Dalam Greeting, kita menggunakan props.name untuk mengakses prop name.
3. Dalam komponen App, kita menggunakan Greeting dua kali, mengirimkan prop name yang berbeda.

Ketika Anda menjalankan kode ini, Anda akan melihat dua pesan: "Hallo, Alice!" dan "Hallo, Bob!".

Mengirimkan Banyak Props

Props tidak terbatas hanya untuk string. Mari kita luaskan komponen Greeting untuk mencakup informasi lebih banyak:

function Greeting(props) {
return (
<div>
<h1>Hallo, {props.name}!</h1>
<p>Umur: {props.age}</p>
<p>Warna Kesukaan: {props.color}</p>
</div>
);
}

function App() {
return (
<div>
<Greeting name="Alice" age={28} color="biru" />
<Greeting name="Bob" age={32} color="hijau" />
</div>
);
}

Sekarang kita mengirimkan tiga prop: name, age, dan color. Perhatikan bagaimana kita menggunakan kurung kurawal {} untuk prop age? Itu karena kita mengirimkan sebuah angka, bukan string.

Props Default

kadang-kadang, Anda ingin memiliki nilai fallback untuk prop jika itu tidak disediakan. Itu di mana props default berguna. Mari kita modifikasi komponen Greeting untuk memiliki umur default:

function Greeting(props) {
return (
<div>
<h1>Hallo, {props.name}!</h1>
<p>Umur: {props.age}</p>
</div>
);
}

Greeting.defaultProps = {
age: 25
};

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

Dalam contoh ini, jika kita tidak menyediakan prop age (seperti untuk Bob), itu akan default ke 25.

Props vs State

Sekarang kita mengerti props, mari kita bandingkan mereka dengan konsep React lainnya: state. Ini adalah perbandingan cepat:

Props	State
Dikirim dari induk ke anak	Dikelola dalam komponen
Read-only	Dapat diubah
Membantu komponen berkomunikasi	Memungkinkan komponen menjadi dinamis

Mari kita lihat ini dalamaksi dengan komponen penghitung sederhana:

import React, { useState } from 'react';

function Counter(props) {
const [count, setCount] = useState(props.initialCount);

return (
<div>
<p>Hitungan: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}

function App() {
return (
<div>
<Counter initialCount={0} />
<Counter initialCount={10} />
</div>
);
}

Dalam contoh ini:

• initialCount adalah prop. Itu dikirim dari App ke Counter dan tidak berubah.
• count adalah state. Itu diinisialisasi dengan nilai initialCount, tapi dapat diubah oleh fungsi setCount.

Kesimpulan

Props adalah bagian fundamental dari React, memungkinkan Anda menciptakan komponen yang fleksibel dan dapat dipakai kembali. Mereka seperti bahan rahasia yang membuat resep React Anda unik dan lezat!

Ingat:

1. Props mengalir dari induk ke anak.
2. Mereka read-only - jangan cobalah mengubah props secara langsung!
3. Gunakan props default untuk nilai fallback.
4. Props untuk mengirimkan data, state untuk mengelola data.

Sekarang Anda teruskan perjalanan React Anda, Anda akan menemukan penggunaan props dalam cara yang semakin kompleks dan menarik. Tetapi jangan khawatir - dengan latihan, itu akan menjadi kebiasaan. Seperti belajar menunggang sepeda, sekali Anda mengerti, Anda tidak akan lupa!

Terus coding, terus belajar, dan yang paling penting, bersenang-senang! React adalah pustaka yang menakjubkan, dan saya sangat menunggu Anda untuk menemukan semua yang ditawarkannya. Sampaijumpa lagi, selamat React-ing!

Credits: Image by storyset