Chào mọi người ở phần trước mình đã giới thiệu cơ bản về những thành phần quan trọng của React, hôm nay nhân một ngày đẹp trời mình tiếp tục phần tự học React của mình, ở bài viết này mình sẽ chỉ tập chung phần xử lý dữ liệu gồm có CRUD với React. Cùng bắt đầu nhé !!!.

Ở bài viết này tớ có sử dụng:

• express là server xử lý dữ liệu
• Mysql là nơi lưu trữ dữ liệu
• React là phần hiển thị cho người dùng

Xử lý bên back-end nào

Cài đặt express và package liên quan.

Tạo thư mục để chạy cậu lệnh dưới đây để cài đặt express nhé:

npm install express --save
npx express-generator
npm install

Kết quả sau cài đặt chúng ta đã có :

• bin: chứ file www là nơi chạy server.
• public: là một static file chúng chứa những file như: hình ảnh, css,video ...
• routes: chứa những router file
• views: chứ các file giao diện
• app.js là nơi chúng ta config những package chúng ta sử dụng

nodemon

nodemon là một package giúp chúng ta tự động cập nhật và khởi động lại mỗi khi có sự thay đổi.

Nói cụ thể sẽ là như thế này: Mỗi khi thêm code hoặc sửa code và để code chạy được thì bắt buộc chúng ta phải khởi động lại nhưng có nodemon việc đơn giản nhất của chúng ta là ctrl + s và để cài đặt nodemon thì chúng ta chạy câu lệnh:

npm install nodemon --save

Sau khi cài đặt thành công chúng ta mở file package.js cập nhật đoạn code này nhé:

"scripts": { "start": "nodemon --inspect ./bin/www" },

Sequelize và sequelize-cli

Sequelize: là một package giúp chúng ta thao tác với cơ sở dữ liệu và kiểm soát dễ hơn, thông qua model,migrate,seed.

Sau khi cài đặt thành công thì chúng ta tiếp tục cài đặt package Sequelize để thao tác cùng với cơ sở dữ liệu, để tiếp tục chúng ta chạy một số câu lệnh dưới đây.

npm install --save sequelize

Để lựa chọn CSDL mà từng người sử dụng thì ở đây có một số option cho mọi người lựa chọn và mình chọn MYSQL vì nó thân thuộc

$ npm install --save pg pg-hstore
$ npm install --save mysql2
$ npm install --save mariadb
$ npm install --save sqlite3
$ npm install --save tedious

Để tiếp tục thao tác dữ liệu cho dễ thì chúng ta cần tạo model, migrate thì chúng ta tiếp tục cài đặt với câu lệnh.

npm install --save-dev sequelize-cli
npx sequelize-cli init

Sau khi thực hiện hai câu lệnh trên thì chúng đã tạo cho chúng ta 3 thư mục gồm:

• config: chứa file config và sequelize-cli sử dụng để kết nối tới CSDL.
• models: chứa tất cả model của dự án (thao tác dữ liệu csdl)
• migrations: chứa tất cả migration (để thay đổi thuộc tính CSDL)
• seeders: chứ tất cả seed (tạo dữ liệu mẫu)

Ngoài ra chúng ta có thể cài thêm dotenv package để lưu trữ các thông tin quan trọng để tránh bị mất dữ liệu thông tin quan trọng như: thông tin csdl, secret, token ....

Kết nối và tạo model, migrate

Truy cập file config.json để cập nhật các thông tin liên quan đến cơ sở dữ liệu.

{ "development": { "username": "root", "password": "kawaibii1998", "database": "demo", "host": "127.0.0.1", "dialect": "mysql" }, "test": { "username": "root", "password": null, "database": "database_test", "host": "127.0.0.1", "dialect": "mysql" }, "production": { "username": "root", "password": null, "database": "database_production", "host": "127.0.0.1", "dialect": "mysql" }
} 

vì hiện trong file index.js của thư mục model đang chạy ở môi trường development nên chúng ta sẽ cập nhật ở đó thôi.

Sau khi đã cập nhật thành công chúng ta cùng chạy câu lệnh để tạo ra model/migrate trong câu lệnh dưới đây:

npx sequelize-cli model:generate --name User --attributes name:string,email:string,password:string

Sau khi chạy thành công thì cũng là lúc chúng đã tạo migration cho chúng ta và chúng ta chỉ cần chạy migrate để tạo cơ sở dữ liệu với câu lệnh sau :

npx sequelize-cli db:migrate

Thêm sửa xóa đơn giản nào

• tạo file UserController.js ở thư mục controller nào :v.

const { User } = require('../models'); module.exports.index = async function (req, res) { const users = await User.findAll(); res.json({ users });
} module.exports.store = async function (req, res) { const user = await User.create({ name: req.body.name, email: req.body.email, password: req.body.password, }); res.json({ user });
} module.exports.update = async function (req, res) { const user = await User.update({ name: req.body.name, email: req.body.email, password: req.body.password, },{ where: { id: req.params.id, } }); res.json({ user });
} module.exports.delete = async function (req, res) { const oldUser = await User.findByPk(req.params.id); if (!oldUser) { res.sendStatus(404); } else { const user = User.destroy({ where: { id: req.params.id, } }); res.json({ user }); }
}

js là một ngôn ngữ bất đồng bộ chính vì thế chúng ta cần async await để giải quyết vấn đề truy cập CSDL :v.

• tạo user.js ở thư mục routes để tạo router cho chúng nhé.

var express = require('express');
var router = express.Router();
var controller = require('../controllers/UserController');
/* GET users listing. */
router.get('/', controller.index);
router.post('/create', controller.store);
router.post('/update/:id', controller.update);
router.get('/delete/:id', controller.delete); module.exports = router;

Thêm router mà chúng ta vừa tạo vào file app.js nhé .

var usersRouter = require('./routes/users');
app.use('/users', usersRouter);

Giờ chạy POSTMAN để kiểm tra để xem ok không nhé.

Xử lý bên font-end

Cài đặt react và các package liên quan.

Cài đặt React và một số package cần dùng bằng câu lệnh sau:

npx create-react-app fontend
cd fontend
npm install axios --save
npm install react-router-dom --save
npm install material-ui --save

cài đặt router