ReactJS - Các thành phần đệm: Hướng dẫn cho người mới bắt đầu

Xin chào các pháp sư React tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của các thành phần đệm trong ReactJS. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - tôi sẽ là người hướng dẫn thân thiện của bạn, giải thích mọi thứ từng bước. Cuối bài hướng dẫn này, bạn sẽ có thể đệm các thành phần như một chuyên gia!

Thành phần đệm là gì?

Trước khi chúng ta đi sâu vào, hãy hiểu thành phần đệm là gì. Hãy tưởng tượng bạn đang xây dựng một ngôi nhà (ứng dụng React của bạn). Các bức tường, mái nhà và nền móng là các thành phần chính của bạn. Nhưng bên trong ngôi nhà, bạn có các phòng (thành phần đệm) có thể chứa đồ nội thất (các thành phần đệm khác). Cấu trúc này cho phép chúng ta tạo ra các giao diện người dùng phức tạp một cách dễ quản lý.

Tại sao sử dụng thành phần đệm?

1. Tính tái sử dụng: Tạo một lần, sử dụng nhiều lần.
2. Tính bảo trì: Dễ dàng hơn trong việc cập nhật và quản lý các thành phần nhỏ, tập trung.
3. Tính đọc hiểu: Mã của bạn trở nên có tổ chức hơn và dễ hiểu hơn.

Bây giờ, hãy cùng viết mã!

Tạo thành phần đệm đầu tiên

Chúng ta sẽ bắt đầu với một ví dụ đơn giản. Hãy tưởng tượng chúng ta đang xây dựng một ứng dụng mua sắm. Chúng ta sẽ tạo một thành phần Product sẽ chứa thành phần 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;

Trong ví dụ này, Product là thành phần cha, và Price được đệm bên trong nó. Hãy phân tích:

1. Chúng ta导入 Price thành phần vào Product.
2. Thành phần Product nhận name và price như các thuộc tính.
3. Chúng ta sử dụng Price thành phần bên trong Product, truyền price thuộc tính dưới dạng amount.

Bây giờ, khi chúng ta sử dụng Product thành phần:

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

Nó sẽ hiển thị:

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

Đó có phải không? Chúng ta đã tạo ra một giao diện hiển thị giá cả có thể tái sử dụng cho bất kỳ sản phẩm nào!

Thành phần FormattedMoney

Bây giờ, hãy tạo một thành phần đệm phức tạp hơn cho việc định dạng tiền tệ. Điều này sẽ rất hữu ích cho việc hiển thị giá cả theo các loại tiền tệ khác nhau.

// 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 (cập nhật)
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;

Hãy phân tích những gì đang xảy ra trong FormattedMoney:

1. Chúng ta sử dụng Intl.NumberFormat API để định dạng số của chúng ta thành tiền tệ.
2. Chúng ta đặt loại tiền tệ mặc định là 'USD' bằng cách sử dụng giá trị mặc định của tham số.
3. Thành phần trả về một span với số định dạng.

Bây giờ chúng ta có thể sử dụng Product thành phần như này:

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

Điều này sẽ hiển thị:

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

Tuyệt vời phải không? Chúng ta đã tạo ra một thành phần linh hoạt, có thể tái sử dụng để hiển thị giá cả theo các loại tiền tệ khác nhau!

Thành phần FormattedDate

Hãy tạo một thành phần đệm khác để hiển thị ngày đã định dạng. Điều này có thể rất hữu ích cho việc hiển thị ngày phát hành sản phẩm hoặc ngày kết thúc khuyến mãi.

// 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 (cập nhật lại)
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>Ngày phát hành: <FormattedDate date={releaseDate} /></p>
</div>
);
}

export default Product;

Trong FormattedDate thành phần:

1. Chúng ta tạo hai tùy chọn định dạng: 'ngắn' và 'dài'.
2. Chúng ta sử dụng Intl.DateTimeFormat để định dạng ngày dựa trên tùy chọn đã chọn.
3. Chúng ta chuyển đổi chuỗi ngày đầu vào thành đối tượng Date.

Bây giờ chúng ta có thể sử dụng Product thành phần như này:

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

Điều này sẽ hiển thị:

<div class="product">
<h2>Futuristic Gizmo</h2>
<span class="formatted-money">$99.99</span>
<p>Ngày phát hành: <span class="formatted-date">Monday, December 25, 2023</span></p>
</div>

Tuyệt vời, phải không? Chúng ta đã tạo ra một thành phần linh hoạt, có thể tái sử dụng để hiển thị ngày đã định dạng!

Kết hợp tất cả

Hãy tạo một ProductList thành phần sử dụng tất cả các thành phần đệm của chúng ta:

// 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;

Bây giờ chúng ta có thể sử dụng ProductList như này:

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} />

Điều này sẽ hiển thị một danh sách sản phẩm, mỗi sản phẩm có giá cả và ngày đã định dạng!

Kết luận

Chúc mừng! Bạn vừa học về thành phần đệm trong React. Chúng ta đã tạo ra các thành phần tái sử dụng cho việc định dạng tiền tệ và ngày, và đệm chúng bên trong một thành phần sản phẩm. Đây chỉ là bắt đầu - các khả năng với thành phần đệm là vô tận!

Nhớ rằng, thực hành làm nên完美. Hãy thử tạo ra các thành phần đệm riêng của bạn và xem chúng có thể làm cho ứng dụng React của bạn trở nên modul hơn và dễ bảo trì hơn.

Chúc mừng coding, các pháp sư React tương lai! ?

Thành phần	Mục đích	Thuộc tính
FormattedMoney	Hiển thị tiền tệ đã định dạng	amount, currency
FormattedDate	Hiển thị ngày đã định dạng	date, format
Product	Hiển thị thông tin sản phẩm	name, price, currency, releaseDate
ProductList	Hiển thị danh sách sản phẩm	products (mảng)

Credits: Image by storyset