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