[React.js trong thực tiễn] Part3 : Tạo list gọi data sử dụng axios
Tiếp nối Part2. Tạo một project lần trước, trong Part này chúng ta sẽ lấy data item sản phẩm và tạo các màn hình sau. Layout thì hãy tham khảo item list.
Kiểm tra thông số kỹ thuật / thiết kế cấu trúc folder
Phát triển bằng cách chia nhỏ và cấu trúc hóa Component theo từng tính năng hoặc theo từng UI.
- Page: item list page (lp.js), cart page (cart.js)
- Chức năng: thay đổi phương thức sắp xếp, filter, xem các item / thêm, xoá giỏ hàng
react-itemlist // Project name
│
└ src
├ layout ─ header.js //Header (page navigation)
│
├ page ┬ components ┬ itemcard.js // Product item layout
│ │ ├ cartitem.js // Cart Item Layout
│ │ ├ sort.js // Sort
│ │ ├ filter.js // Filter layer
│ │ └ viewtype.js // Select a product view method
│ │
│ ├ lp.js // Item list page
│ └ cart.js // Shopping cart page
├ index.js
├ App.js
└ App.css
Hạng mục xem xét khi thiết kế Component
- Cần quản lý bằng state, và suy nghĩ xem nội dung nào cho xuống làm props.
- Quan trọng là phải xem xét mối quan hệ giữa các Component và cấu trúc hóa.
- Trong trường hợp trao đổi props giữa các Component khác nhau khiến số lượng Component nhiều hơn, cấu trúc có thể sẽ phức tạp hơn rất nhiều. Vì vậy ta sẽ để nhận thông qua bố mẹ.
- Trong ví dụ này, tôi đã thiết kế để quản lý state thông qua App.js
Các action được phân phối thông qua event xảy ra trong Component cấp dưới, và khi xảy ra thay đổi trạng thái trong App.js, Data đã thay đổi sẽ được chuyển trở lại Component cấp dưới.
Step1. Hãy xuất thử một list các sản phẩm.
- File viết: App.js / lp.js / itemcard.js
- App.js : Component trung tâm trao đổi và lưu data, kết nối các thay đổi data của Component cấp dưới (lp.js/cart.js)
- lp.js : Component lặp lại item card và xuất ra list
- itemcard.js : Component tạo ra từng DOM để tạo thành item card
1. Tạo item list page
Viết App.js như sau.
Đầu tiên, khai báo array ItemList trống ở state và đặt các phần sẽ hiển thị trên màn hình bên trong hàm reader().
Ta cũng khai báo trước giá trị loading đề phòng trong trường hợp không gọi được ItemList.
//App.js
import React, { Component } from "react";
class App extends Component {
state = {
loading: false,
ItemList: [] // Empty array
};
// APP.js Define the render value of the component
render() {
return (
<div>
<Listpage />
</div>
);
}
}
export default App;
2. Sử dụng axios để gọi file json
Data sử dụng trong ví dụ này được lấy từ một phần của API page tìm kiếm auction. Data sau thường được truyền từ back-end một cách phù hợp với yêu cầu phát triển.
"Item": [
{
"GoodsCode": "1625717680",
"OriginalPrice": "29,800",
"SalePrice": "26,230",
"GoodsName": "달콤나시(OBWC5266)(갤러리아)",
"DiscountRate": "11",
"Delivery": {
"DeliveryInfo": "조건부무료",
"DeliveryText": "배송비 3,000원",
"DeliveryType": "GRAY",
"ShowDeliveryInfo": true
}
},
{
"GoodsCode": "1421117680",
"OriginalPrice": "9,800",
"SalePrice": "7,700",
"GoodsName": "나시(현대)",
}
]
...
...
Bây giờ ta sẽ sử dụng library axios để gọi API.
axios là một library cho nhận data không đồng bộ dựa trên promise API và có thể cài đặt ở npm/yarn.
Khi cài đặt hoàn tất sẽ import vào App.js.
import React, { Component } from "react";
import axios from "axios"; // After installation import
class App extends Component {
state = {
ItemList: []
};
....
}
Cùng với khai báo state thì cũng sẽ tạo ra một hàm gọi là loadItem lấy data bên dưới.
Trong hàm này, data có thể yêu cầu bằng axios.get để nhận giá trị phản hồi bằng .then, và thay đổi giá trị state của array ItemList đã được tạo bằng data.Item
Cùng với lấy data, giá trị thuộc tính loading đã được tạo cũng đổi thành true.
state = {
loading: false,
ItemList: []
};
loadItem = async () => {
axios
.get("./SearchJson.json")
.then(({ data }) => {
this.setState({
loading: true,
ItemList: data.Item
});
})
.catch(e => { // API call failed
console.error(e); // Error display
this.setState({
loading: false
});
});
};
render() {
...
}
}
Khi hoàn thành viết hàm loadItem(), ta sẽ gọi bằng cách dùng componentDidMount(), và như đã giải thích ở trên, componentDidMount() chủ yếu được sử dụng trong trường hợp gọi API bên ngoài để yêu cầu data cần thiết cho Component trước khi update.
Tham khảo : [React.js trong thực tiễn] Part1. Hiểu khái niệm
componentDidMount() {
this.loadItem(); // loadItem call
}
render() {
...
}
Nếu đã viết đến đây, hãy check xem API item list đã được gọi đúng chưa..
render() {
const { ItemList } = this.state;
console.log(ItemList);
3. Tạo DOM item list
Bây giờ ta sẽ viết Component tạo html page item list.
- lp.js : Component lặp lại item card và xuất ra list
- itemcard.js : Component tạo ra từng DOM để tạo thành item card
Bắt đầu từ App.js đến itemcard.js, Props được truyền từ Component bố mẹ sang con, và Event được truyền từ itemcard.js để thay đổi giá trị setState()
Đầu tiên, hãy viết một Component sẽ xuất ra một data sản phẩm
ItemCard Component được viết dưới dạng Component dạng hàm số như dưới đây, sắp xếp các giá trị hiển thị trên màn hình và chuyển chúng dưới dạng các giá trị tham số (parameter).
Ở đây, key được sử dụng để gán một giá trị riêng cho mỗi sản phẩm và gán các biến số chứa URL hình ảnh, tên brand và tên sản phẩm vào từng vị trí như dưới đây.
// itemcard.js
function ItemCard({ key, ImageURL, BrandName, GoodsName }) {
return (
<li className="component component--item_card" key={key}>
<img src={ImageURL} className="image--itemcard" alt="" />
<p>
브랜드명 : <span className="text--brand">{BrandName}</span>
</p>
<p>상품명 : {GoodsName}</p>
</li>
);
}
4. Rendering array ItemList mà dữ liệu được nhập vào
Đầu tiên, gọi Component ItemCard vào hàm render() trong lp.js
Nếu làm thế này: <ItemCard ImageURL={data.ImageURL} /> thì DOM sẽ được gọi,
Nếu viết bằng cách thêm giá trị data.ImageURL vào thuộc tính tên là ImageURL được tạo trước bằng giá trị tham số, data sẽ được truyền đến Component ItemCard.
Để lặp lại ItemCard Component bằng với json array và xuất ra, ta sử dụng map() để return nhiều data theo thứ tự.
// lp.js
import React, { Component } from "react";
import ItemCard from "./components/itemcard";
class Listpage extends Component {
state = {};
render() {
const { Itemcard } = this.props;
return (
<ul className="list__itemview">
{Itemcard &&
Itemcard.map((itemdata) => {
return (
<ItemCard
ImageURL={itemdata.ImageURL}
BrandName={itemdata.BrandName}
GoodsName={itemdata.GoodsName}
/>
);
})}
</ul>
);
}
}
export default Listpage;
Sau đó, nếu render lần cuối cùng item list được tạo cho đến nay trong App.js,
//App.js
import React, { Component } from "react";
import Listpage from "./page/lp";
....
render() {
console.log(ItemList);
return (
<div>
<Listpage Itemcard={ItemList} />
</div>
);
}
index.js đang render App.js cuối cùng sẽ hiển thị ra màn hình.
Vừa rồi tôi đã giới thiệu cách gọi API sử dụng axios và xuất list sản phẩm. Trong Part sau, tôi sẽ đề cập đến việc triển khai các chức năng như Filter, Sort, Toggle.
Bạn có thể xem code trực tiếp thông qua link dưới đây để thực hành :)
http://t.ly/k2E1m
Thông tin series
- [React.js trong thực tiễn] Part1. Hiểu khái niệm
- [React.js trong thực tiễn] Part2. Bắt đầu một project
- [React.js trong thực tiễn] Part3. Tạo list
- [React.js trong thực tiễn] Part4. Biểu hiện Filter, sort
- [React.js trong thực tiễn] Part5. Cho vào giỏ
Comments
Post a Comment