Panduan untuk Komponen Beranak: Sebuah Panduan untuk Pemula

Hai teman-teman, sang pengguna React masa depan! Hari ini, kita akan mengemban sebuah perjalanan menarik ke dunia komponen beranak dalam ReactJS. Jangan khawatir jika Anda baru saja memulai programming – saya akan menjadi panduan yang ramah, menjelaskan segala sesuatu secara langkah demi langkah. Pada akhir panduan ini, Anda akan dapat menanamkan komponen seperti seorang ahli!

Apa Itu Komponen Beranak?

Sebelum kita masuk ke detil, mari kita mengerti apa itu komponen beranak. Bayangkan Anda membangun sebuah rumah (aplikasi React Anda). Tembok, atap, dan fondasi adalah komponen utama Anda. Tetapi di dalam rumah, Anda memiliki kamar (komponen beranak) yang dapat berisi furniture (komponen beranak lagi). Struktur ini memungkinkan kita untuk menciptakan UI yang kompleks dalam cara yang mudah dikelola.

Mengapa Menggunakan Komponen Beranak?

1. Reusabilitas: Buat komponen sekali, gunakan mereka berkali-kali.
2. Maintainabilitas: Lebih mudah untuk memperbarui dan mengelola komponen yang kecil dan fokus.
3. Readabilitas: Kode Anda menjadi lebih terorganisir dan mudah dipahami.

Sekarang, mari kita mulai membuka tangan dengan beberapa kode!

Membuat Komponen Beranak Pertama

Kita akan mulai dengan contoh yang sederhana. Bayangkan kita sedang membangun sebuah aplikasi belanja. Kita akan membuat komponen Product yang akan berisi komponen Price.

// Product.js
import React from 'react';
import Price from './Price';

function Product({ name, price }) {
return (
<div className="product">
<h2>{name}</h2>
<Price amount={price} />
</div>
);
}

export default Product;

// Price.js
import React from 'react';

function Price({ amount }) {
return <p className="price">${amount.toFixed(2)}</p>;
}

export default Price;

Dalam contoh ini, Product adalah komponen induk, dan Price berada di dalamnya. Mari kitauraikan ini:

1. Kita mengimpor komponen Price ke dalam Product.
2. Komponen Product menerima name dan price sebagai prop.
3. Kita menggunakan komponen Price di dalam Product, mengirimkan prop price sebagai amount.

Sekarang, ketika kita menggunakan komponen Product:

<Product name="Super Cool Gadget" price={19.99} />

Itu akan merender:

<div class="product">
<h2>Super Cool Gadget</h2>
<p class="price">$19.99</p>
</div>

Apakah itu menarik? Kita telah menciptakan tampilan harga yang dapat digunakan berkali-kali dalam produk mana saja!

Komponen FormattedMoney

Sekarang, mari kita buat komponen beranak yang lebih maju untuk pemformatan uang. Ini akan berguna untuk menampilkan harga dalam mata uang yang berbeda.

// FormattedMoney.js
import React from 'react';

function FormattedMoney({ amount, currency = 'USD' }) {
const formatter = new Intl.NumberFormat('id-ID', {
style: 'currency',
currency: currency,
});

return <span className="formatted-money">{formatter.format(amount)}</span>;
}

export default FormattedMoney;

// Product.js (terupdate)
import React from 'react';
import FormattedMoney from './FormattedMoney';

function Product({ name, price, currency }) {
return (
<div className="product">
<h2>{name}</h2>
<FormattedMoney amount={price} currency={currency} />
</div>
);
}

export default Product;

Mari kitauraikan apa yang terjadi di FormattedMoney:

1. Kita menggunakan API Intl.NumberFormat untuk memformat nomor sebagai mata uang.
2. Kita menetapkan mata uang default 'USD' menggunakan nilai default parameter.
3. Komponen mengembalikan span dengan jumlah yang diformat.

Sekarang kita dapat menggunakan komponen Product seperti ini:

<Product name="Amazing Widget" price={29.99} currency="EUR" />

Ini akan merender:

<div class="product">
<h2>Amazing Widget</h2>
<span class="formatted-money">€29.99</span>
</div>

Menarik, kan? Kita telah menciptakan komponen fleksibel dan dapat digunakan berkali-kali untuk menampilkan harga dalam mata uang yang berbeda!

Komponen FormattedDate

Mari kita buat komponen beranak lainnya untuk menampilkan tanggal yang diformat. Ini akan berguna untuk menampilkan tanggal rilis produk atau tanggal berakhir penjualan.

// FormattedDate.js
import React from 'react';

function FormattedDate({ date, format = 'long' }) {
const options = {
short: { month: 'short', day: 'numeric', year: 'numeric' },
long: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' },
};

const formatter = new Intl.DateTimeFormat('id-ID', options[format]);

return <span className="formatted-date">{formatter.format(new Date(date))}</span>;
}

export default FormattedDate;

// Product.js (terupdate lagi)
import React from 'react';
import FormattedMoney from './FormattedMoney';
import FormattedDate from './FormattedDate';

function Product({ name, price, currency, releaseDate }) {
return (
<div className="product">
<h2>{name}</h2>
<FormattedMoney amount={price} currency={currency} />
<p>Tanggal Rilis: <FormattedDate date={releaseDate} /></p>
</div>
);
}

export default Product;

Dalam komponen FormattedDate ini:

1. Kita membuat dua opsi format: 'short' dan 'long'.
2. Kita menggunakan Intl.DateTimeFormat untuk memformat tanggal berdasarkan format yang dipilih.
3. Kita parsing string tanggal input menjadi objek Date.

Sekarang kita dapat menggunakan komponen Product yang diperbarui seperti ini:

<Product
name="Futuristic Gizmo"
price={99.99}
currency="USD"
releaseDate="2023-12-25"
/>

Ini akan merender:

<div class="product">
<h2>Futuristic Gizmo</h2>
<span class="formatted-money">$99.99</span>
<p>Tanggal Rilis: <span class="formatted-date">Senin, Desember 25, 2023</span></p>
</div>

Bagus, kan? Kita telah menciptakan komponen yang fleksibel dan dapat digunakan berkali-kali untuk menampilkan tanggal yang diformat!

Menyatukan Semua

Mari kita buat komponen ProductList yang menggunakan semua komponen beranak kita:

// ProductList.js
import React from 'react';
import Product from './Product';

function ProductList({ products }) {
return (
<div className="product-list">
{products.map(product => (
<Product
key={product.id}
name={product.name}
price={product.price}
currency={product.currency}
releaseDate={product.releaseDate}
/>
))}
</div>
);
}

export default ProductList;

Sekarang kita dapat menggunakan komponen ProductList seperti ini:

const products = [
{ id: 1, name: "Super Gadget", price: 49.99, currency: "USD", releaseDate: "2023-06-15" },
{ id: 2, name: "Mega Widget", price: 39.99, currency: "EUR", releaseDate: "2023-07-01" },
{ id: 3, name: "Awesome Gizmo", price: 59.99, currency: "GBP", releaseDate: "2023-08-30" },
];

<ProductList products={products} />

Ini akan merender daftar produk, masing-masing dengan harga dan tanggal yang diformat!

Kesimpulan

Selamat! Anda telah belajar tentang komponen beranak dalam React. Kita telah menciptakan komponen yang dapat digunakan berkali-kali untuk pemformatan uang dan tanggal, dan menanamkannya di dalam komponen produk. Ini hanya permulaan – kemungkinan dengan komponen beranak adalah tak terbatas!

Ingat, latihan membuat Anda sempurna. Cobalah membuat komponen beranak Anda sendiri dan lihat bagaimana mereka dapat membuat aplikasi React Anda lebih modular dan mudah dikelola.

Selamat coding, sang pengguna React masa depan! ?

Komponen	Tujuan	Prop
FormattedMoney	Menampilkan mata uang yang diformat	amount, currency
FormattedDate	Menampilkan tanggal yang diformat	date, format
Product	Menampilkan informasi produk	name, price, currency, releaseDate
ProductList	Menampilkan daftar produk	products (array)

Credits: Image by storyset