Phân Trang cho ReactJs
I.Sau đây mình xin hướng dẫn các bạn tạo phân trang trong Reactjs
1.Tạo project demopaging
npx create-react-app demopaging cd demopaging npm start
2.Cài đặt thư viện
2.1 Cài đặt thư viện react route
npm install react-router-dom
2.2 Cài đặt thư viện paging
npm install react-js-pagination
2.3 Cài đặt Bootstrap 4
npm install bootstrap --save
2.4 Cài đặt axios
npm install axios --save
3.Tạo các component và cấu hình router
3.1 Edit file App.js
import React, { Component } from 'react'; import 'bootstrap/dist/css/bootstrap.min.css'; class App extends Component { render() { return ( <div className="container"> <h2>React Paging Tutorial</h2> </div> ); } } export default App;
Mở browser xem chạy có ok không?
3.2 Cấu hình routing
Edit file index.js và bao thẻ BrowserRouter quanh App.js
import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import App from './App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, 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();
Tạo folder components trong folder src và tạo 3 component sau:
create.component.js edit.component.js index.component.js
// create.component.js import React, { Component } from 'react'; export default class Create extends Component { render() { return ( <div> <p>Welcome to Create Component!!</p> </div> ) } }
// edit.component.js import React, { Component } from 'react'; export default class Edit extends Component { render() { return ( <div> <p>Welcome to Edit Component!!</p> </div> ) } }
// index.component.js import React, { Component } from 'react'; export default class Index extends Component { render() { return ( <div> <p>Welcome to Index Component!!</p> </div> ) } }
4.Tạo navigation bar bằng cách sửa lại file App.js
Giao diện trên browser hiển thị như sau:
II.Tạo backend với Nodejs
Tạo folder pagingserver.Tiếp theo tạo file package.json trong folder pagingserver:
{ "name": "pagingserver", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "cors": "^2.8.5", "express": "^4.17.1", "lodash": "^4.17.15", "moment": "^2.24.0", "mysql": "^2.17.1" } }
Tiếp theo install package:
npm install
Tạo table news
DROP TABLE IF EXISTS `news`; CREATE TABLE IF NOT EXISTS `news` ( `id` int(11) NOT NULL AUTO_INCREMENT, `title` varchar(100) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8; -- Dumping data for table nodejslogin.news: ~3 rows (approximately) DELETE FROM `news`; /*!40000 ALTER TABLE `news` DISABLE KEYS */; INSERT INTO `news` (`id`, `title`) VALUES (1, 'Người Vũ Hán trở vềNgười Vũ Hán trở về'), (2, 'Khách nhập cảnh từ EU, Campuchia phải khai y tế'), (3, 'Sinh viên Đại học Quốc gia TP HCM nghỉ hết tháng 3'), (4, 'Thượng viện Mỹ duyệt 8,3 tỷ USD chống Covid-19'), (5, 'Số ca nghi nhiễm giảm còn 68'), (6, 'Hơn 98.000 người nhiễm nCoV trên thế giới 49'); /*!40000 ALTER TABLE `news` ENABLE KEYS */;
Tạo file index.js với nội dung sau:
Display the backend data
Tạo file axios.js
import axios from 'axios'; export default axios.create({ baseURL: `http://localhost:81/`, });
Tạo file TableRow.js
Edit file index.component.js
Code reactjs in here
Code nodejs in here
Leave a Reply