Hôm nay mình tiếp tục chia sẻ tiếp. Trong bài viết này ta sẽ thực hiện việc lấy dữ liệu từ một đường dẫn API nào đó trả về, sau đó lưu dữ liệu trả về từ API vào State.
Sau khi có dữ liệu trong State, ta render dữ liệu đó ra ngoài cho người dùng xem. Ok giờ ta tạo một project mới, thực hiện thôi. Các bạn có thể xem lại các bài viết trước tại đây:
Install Create React App & Bootstrap CSS framework
npx create-react-app render-data-react cd render-data-react npm install bootstrap@4.1.2
Ok, giờ ta mở file index.js trong thư mục src. Thêm file css của bootstrap như sau:
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; import 'bootstrap/dist/css/bootstrap.css'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister();
Tiếp theo mình sẽ dùng Axios để xử lý API
npm install axios
Sau khi cài đặt xong, tạo đường dẫn thư mục src/api. Sau đó tạo file index.js trong thư mục src/api
+ src/api/index.js
import axios from 'axios'; let API_URL = 'https://5adc8779b80f490014fb883a.mockapi.io'; export default function callApi(endpoint, method = 'GET', body) { return axios({ method, url: `${API_URL}/${endpoint}`, data: body }).catch(err => { console.log(err); }); }
Giờ đây ta cần gọi API để trả về dữ liệu, sao đó render ra cho người dùng xem
Tạo đường dẫn thư mục src/components/home. Rồi tạo file component Home.js trong thư mục src/components/home
import React, { Component } from 'react' import callApi from '../../api' class Home extends Component { constructor(props){ super(props) this.state = { loading:false, _products:[] } } componentDidMount(){ //CALL API https://5adc8779b80f490014fb883a.mockapi.io/products callApi("/products",'GET',null).then(res => { this.setState({ loading:true, _products:res.data }) }); } render() { const {loading,_products} = this.state; if(!loading){ return ( <div> <h4>Loading...</h4> </div> ) } return ( <div> <h1>List Product</h1> <ul style={{display:'flex',flexWrap:'wrap'}}> { _products.map((item,index)=>( <li key={index} style={{ width:'calc(100% / 4 - 20px)', heigth:'80px', listStyle:'none', paddingRight:'20px', boxSizing:'border-box', margin:'10px', border:'1px solid #ccc' }}> <h5>{item.name}</h5> <strong>price : {item.price}</strong> </li> )) } </ul> </div> ) } } export default Home
Để dùng được file api, ta cần import api/index.js vào Home.js
import callApi from '../../api'
Thay đổi giá trị dữ liệu, khi gọi hàm callApi(), setState lại _products & loading
callApi("/products",'GET',null).then(res => { this.setState({ loading:true, _products:res.data }) });
Sau khi dữ liệu đã tồn tại, ta dùng map để render dữ liệu cho người dùng
_products.map((item,index)=>())
Ok, giờ ta cần import file component Home.js đến App.js, hãy mở file App.js lên chỉnh sửa lại như sau:
import React from 'react'; import './App.css'; import Home from './components/home/Home'; function App() { return ( <div className="App"> <Home /> </div> ); } export default App;
Vậy là xong, giờ ta start lại ứng dụng: npm start