Giới thiệu React.js
React.js hiện là một trong những thư viện JavaScript phổ biến nhất dành cho phát triển giao diện người dùng phía frontend.
Khởi tạo dự án
# Cài đặt công cụ CLI toàn cục
$ npm install -g create-react-app
# Tạo ứng dụng mới với TypeScript
$ create-react-app my-first-app --template typescript
# Di chuyển vào thư mục dự án
$ cd my-first-app
# Khởi động server phát triển
$ npm start
# Truy cập http://localhost:3000 để xem kết quả
Các khái niệm cốt lõi về Component
- Dùng
ReactDOM.render()để gắn component vào DOM — nhận hai tham số: phần tử React và node DOM đích. - JSX cho phép viết cấu trúc UI giống HTML/XML, nhưng được biên dịch thành JavaScript thuần.
- Mỗi component JSX phải có một phần tử gốc duy nhất bao bọc nội dung bên trong.
- Dùng cặp dấu
{}để nhúng biểu thức JavaScript vào JSX. - Thuộc tính trong JSX có thể nhận giá trị tĩnh (dùng dấu nháy) hoặc động (dùng
{}).
Component dạng hàm
- Là hàm nhận tham số
propsvà trả về một React element. - Tương đương với class component chỉ có phương thức
render. - Dữ liệu từ component cha truyền xuống con thông qua props — tên thuộc tính khớp với key trong đối tượng
props.
Component dạng lớp
- Kế thừa từ
React.Component. - Hàm tạo (
constructor) nhậnprops, các phương thức khác truy cập quathis.props. - Phương thức
render()bắt buộc phải trả về React element. - Các lifecycle quan trọng:
componentDidMount(sau khi render lần đầu),componentWillUnmount(trước khi bị xóa). - Trạng thái (
state) được khởi tạo trong constructor hoặc trực tiếp trong class, truy cập quathis.state, cập nhật bằngthis.setState(). - Xử lý sự kiện có thể dùng:
.bind(this), arrow function trong class, hoặc arrow function inline trong JSX. - Điều kiện hiển thị: dùng toán tử logic
&&,||, hoặc ternary? :. - Lặp danh sách: dùng
array.map()để sinh ra nhiều phần tử JSX từ mảng.
Cấu trúc HTML cơ bản để chạy React đơn giản
<html>
<head>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<meta charset="utf-8"/>
</head>
<body>
<div id="app-root"></div>
<script type="text/babel">
const Greeting = (props) => {
return <h2>Xin chào, {props.visitor}!</h2>;
};
const uiElement = <Greeting visitor="Minh" />;
ReactDOM.render(
uiElement,
document.getElementById('app-root')
);
</script>
</body>
</html>