-----
1.6 Tổng quan về React
Tới đây đã biết tạo database server (tạo cluster trên MongoDB
Atlas) để làm việc với cơ sở dữ liệu MongoDB, đã biết cài đặt Nodejs, dùng ngôn
ngữ JavaScript để lập trình với Nodejs; đã biết dùng NPM để tải các mô-đun trên
mạng về dự án, sau đó dùng require để gọi mô-đun ra sử dụng; và đã biết dùng từ
khóa exports để tự định nghĩa mô-đun trong dự án.
Phần này sẽ tiếp tục tìm hiểu cách dùng React để lập trình xử
lý phía client (client-side, front-end) của một ứng dụng web. Gồm tạo giao diện,
thực hiện các xử lý, gửi thông tin qua lại giữa client và server.
[Tham khảo thêm khóa học React của tác giả nghiepuit: https://www.youtube.com/watch?v=gL5HBA_1bDQ&list=PLJ5qtRQovuEOoKffoCBzTfvzMTTORnoyp&index=1]
1.6.1
React là gì?
React (cũng được gọi là ReactJS, React.js) là một thư viện
JavaScript do Facebook đưa ra năm 2013, được sử dụng để xây dựng giao diện người
dùng (UI) cho một ứng dụng mobile application, hoặc SPA - single page
application.
React tạo ra giao diện từ các thành phần nhỏ hơn gọi là các
component.
Vì React chỉ quan tâm tới việc kết xuất dữ liệu ra DOM, nên
khi xây dựng front-end cần kết hợp React với các thư viện khác như Redux, và
React Router để quản lý trạng thái (state management) và điều hướng xử lý
(routing).
Thư viện React chạy trên cả client và server.
Để kiểm tra một trang web có sử dụng React hay không, cần
cài React Developer Tools cho trình duyệt Chrome. Làm như sau:
– Vào google.com, nhập từ khóa: “chrome how to install react
developer tools”
– Mở kết quả tìm kiếm đầu tiên “https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi”
– Trình duyệt sẽ mở trang có React Developer Tools, bấm vào nút Add to Chrome để cài đặt
cho trình duyệt
– Nếu cài đặt thành công, biểu tượng của React Developer
Tools (đừng nhầm với Developer Tools của trình duyệt) sẽ xuất hiện ở phía phải
của thanh địa chỉ trình duyệt, và nó sẽ sáng lên khi trang web hiện tại có sử dụng
React. Mở thử trang https://reactjs.org/ là
cái biểu tượng nó sẽ sáng lên, bấm vào biểu tượng rồi đọc thông báo để rõ thêm
– Mở Developer Tools sẽ thấy có thêm tab Components và
Profiler giúp làm việc với React
1.6.2
Nhúng React vào một website
React được thiết kế để bạn có thể áp dụng nó vào website tùy
theo nhu cầu, có thể áp dụng ít hoặc nhiều đều được.
Để đơn giản, phần dưới đây sẽ thực hiện nhúng React vào website
có sẵn, bằng cách thêm một nội dung nhỏ (component của React) vào một trang
web.
Bước 1: Tạo thư mục
để chứa website, ví dụ component; trong thư mục component tạo tập tin component.html;
trong trang component.html tạo một phần tử để chứa/hiển thị nội dung sẽ được React
thêm vào.
[component.html]
<body>
<!-- hiển thị một nút like ở đây -->
<div id="like_button_container"></div>
</body>
Gắn vào div một id để chút nữa dùng JavaScript tham chiếu
tới, rồi hiển thị một cái component của React vào đó.
Bạn có thể tạo ra rất nhiều các div trống như trên để React
sẽ chèn nội dung vào sau. Các div này thường được gọi là các thùng chứa (container).
Bước 2: Tải thư
viện React về trình duyệt, tải và thực thi mã nguồn của một component.
[component.html]
<body>
<!-- hiển thị một nút like ở đây -->
<div id="like_button_container"></div>
<!-- tải React từ trên mạng về trình duyệt -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- tải và thực thi đoạn mã của component -->
<script src="like_button.js"></script>
</body>
Bước 3: Viết đoạn
mã để tạo ra một component của React
Trong thư mục component, tạo tập tin like_button.js. Nhập
vào đoạn mã sau (chưa cần hiểu đoạn mã này, chỉ cần biết rằng đoạn mã viết bằng
JavaScript, dùng thư viện React để tạo ra và xử lý cho một cái nút trên giao diện)
:
[like_button.js]
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}
// tìm vị trí của div với id="like_button_container" và gắn React component vào
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);
Bước 4: Mở tập
tin component.html bằng trình duyệt để xem kết quả, sẽ thấy một nút Like xuất
hiện, bấm chuột vào, sẽ hiển thị dòng chữ “You liked this.”
Qua ví dụ trên rút ra
được điều gì?
– React cũng là một thư viện, viết bằng JavaScript, nên để sử
dụng thư viện này thì cần nhúng nó vào trang web
– React component (trong tập tin like_button.js) là một đoạn
mã JavaScript, nó sử dụng các lớp (class) của thư viện React để thao tác với DOM
(tài liệu HTML)
– Thử dùng trình duyệt, mở mã nguồn của React ra xem (https://unpkg.com/react@16/umd/react.development.js),
tìm theo từ khóa “function Component ” để xem qua định nghĩa của lớp này
– Thử dùng trình duyệt, mở mã nguồn của react-dom ra xem (https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js),
tìm theo từ khóa “function render” để xem phần định nghĩa của phương thức
render().
– Thư viện React tách thành hai tập tin react và react-dom
– Có thể dùng React mà không cần sử dụng tới các công cụ hỗ
trợ khác (ví dụ: công cụ quản lý cài đặt npm, công cụ tạo dự án React tự động)
1.6.3
Dùng lại Component
Một đặc tính hữu ích của React là nó cho phép chia giao diện
trang web thành các bộ phận nhỏ hơn, gọi là các component. Lắp ghép các
component lại sẽ tạo ra một trang web hoàn chỉnh.
Các component có đặc điểm là nhỏ gọn, độc lập và có thể tái
sử dụng.
Ở phần trên đã tạo ra một component là một cái nút (nút like),
phần này sẽ sửa mã nguồn để có thể sử dụng cái nút đó ở 3 chỗ khác nhau trên
trang HTML.
Tham khảo mã nguồn tại đây: https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda
[reuse_component.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Sử dụng lại component</title>
</head>
<body>
<p>Minh họa việc sử dụng React mà không cần dùng tới các công cụ khác.</p>
<p>Tải React về như một thư viện JavaScript thông thường</p>
<p>
Nội dung của bình luận số 1
<!-- hiển thị một nút like ở đây -->
<div class="like_button_container" data-commentid="1"></div>
</p>
<p>
Nội dung của bình luận số 2
<!-- hiển thị một nút like ở đây -->
<div class="like_button_container" data-commentid="2"></div>
</p>
<p>
Nội dung của bình luận số 3
<!-- hiển thị một nút like ở đây -->
<div class="like_button_container" data-commentid="3"></div>
</p>
<!-- tải React từ trên mạng về trình duyệt -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- tải đoạn mã của component -->
<script src="like_button.js"></script>
</body>
[like_button.js]
Không nhất thiết phải hiểu hiết đoạn mã JavaScript này, chỉ
cần đọc các chú thích để biết đoạn mã này làm gì.
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'Bạn đã "thích" bình luận số ' + this.props.commentID;
}
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}
// tìm tất cả các div với class="like_button_container" (tìm DOM container) và gắn React component vào
document.querySelectorAll('.like_button_container')
.forEach(domContainer => {
// ĐọcID của mỗi bình luận (comment) dựa vào thuộc tính data-*
const commentID = parseInt(domContainer.dataset.commentid, 10);
ReactDOM.render(
e(LikeButton, { commentID: commentID }),
domContainer
);
});s
-----
Cập nhật: [09/07/2020]
-----
Xem thêm: MERN (6) - JSX và Babel
Xem thêm: Danh sách bài học
Xem thêm: Danh sách bài học