ReactJS - Komponen Beranak: Panduan Pemula

Hai sana, para ahli React masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia komponen beranak di ReactJS. Jangan khawatir jika Anda baru saja memulai dengan pemrograman - saya akan menjadi panduan ramah Anda, menjelaskan segala sesuatu secara langkah demi langkah. Pada akhir panduan ini, Anda akan menjadi ahli dalam menanam komponen!

Apa Itu Komponen Beranak?

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

Mengapa Menggunakan Komponen Beranak?

1. Reusability: Buat komponen sekali, gunakan mereka beberapa kali.
2. Maintainability: Lebih mudah untuk memperbarui dan mengelola komponen yang kecil dan fokus.
3. Readability: Kode Anda menjadi lebih terorganisir dan mudah dipahami.

Sekarang, mari kita merabaikan tangan dengan beberapa kode!

Membuat Komponen Beranak Pertama

Kita akan mulai dengan contoh sederhana. Bayangkan kita sedang membangun 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 kitaura:

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="Gadget Sempurna" price={19.99} />

Itu akan merender:

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

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

Komponen FormattedMoney

Sekarang, mari kita buat komponen beranak yang lebih maju untuk memformat 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('en-US', {
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 kitaura 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="Widget Menakjubkan" price={29.99} currency="EUR" />

Ini akan merender:

<div class="product">
<h2>Widget Menakjubkan</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 peluncuran produk atau tanggal akhir 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('en-US', 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 Peluncuran: <FormattedDate date={releaseDate} /></p>
</div>
);
}

export default Product;

Dalam komponen FormattedDate ini:

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

Sekarang kita dapat menggunakan komponen Product yang diperbarui seperti ini:

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

Ini akan merender:

<div class="product">
<h2>Gizmo Futuristik</h2>
<span class="formatted-money">$99.99</span>
<p>Tanggal Peluncuran: <span class="formatted-date">Monday, December 25, 2023</span></p>
</div>

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

Menggabungkan 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: "Gadget Sempurna", price: 49.99, currency: "USD", releaseDate: "2023-06-15" },
{ id: 2, name: "Widget Mega", price: 39.99, currency: "EUR", releaseDate: "2023-07-01" },
{ id: 3, name: "Gizmo Menakjubkan", 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 di React. Kita telah menciptakan komponen yang dapat digunakan berkali-kali untuk memformat uang dan tanggal, dan menanam mereka 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, para master React masa depan! ?

Komponen	Tujuan	Props
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