Lession 1 - React.js

React.js là gì?

• React.js là một framework backend.

• React.js là một ngôn ngữ lập trình.
• React.js là một công cụ quản lý cơ sở dữ liệu.
• React.js là thư viện JavaScript để xây dựng giao diện người dùng (User Interface) được tạo bởi Facebook.

Các tính năng nổi bật của React.js

• Kiến trúc dựa trên thành phần (Component-based)

• Virtual DOM

• Declarative API

• One-way Data binding

• Cộng đồng lớn và hệ sinh thái phong phú

Kiến trúc dựa trên thành phần - Component-based - nghĩa là gì?

• Kiến trúc dựa trên thành phần chỉ sử dụng một thành phần duy nhất.
• Kiến trúc dựa trên thành phần là phương pháp thiết kế chỉ dành cho ứng dụng di động.
• Kiến trúc dựa trên thành phần là phương pháp thiết kế cho phép phân chia giao diện thành các thành phần độc lập, dễ dàng tái sử dụng và duy trì

• Kiến trúc dựa trên thành phần không cho phép tái sử dụng mã.

Declarative API nghĩa là gì?

• Là mô hình lập trình trong đó tập trung vào kết quả đầu ra thay vì chi tiết thực hiện từng bước như thế nào.

• Cần chỉ rõ từng bước, từng câu lệnh thực hiện như thế nào

• Là cách quản lý trạng thái trong ứng dụng

• Là một thư viện làm việc với API

Virtual DOM là gì?

• Virtual DOM là một công cụ để tạo ra các hình ảnh động.
• Virtual DOM là một loại cơ sở dữ liệu cho ứng dụng web.
• Virtual DOM là một phần mềm chỉnh sửa video.
• Virtual DOM là một bản sao nhẹ của DOM thực, giúp tối ưu hóa hiệu suất cập nhật giao diện người dùng.

Virtual DOM tác động đến hiệu suất trang web như thế nào?

• Không có tác dụng gì

• Giảm hiệu suất do tăng các thao tác DOM

• Về cơ bản là một phiên bản khác của DOM, hiệu suất tương tự

• Nâng cao hiệu suất do có thể tối ưu hoá thao tác cập nhật lên DOM thật

JSX là gì?

• JSX là một loại thư viện JavaScript.
• JSX là một ngôn ngữ lập trình độc lập.
• JSX là một công cụ biên dịch cho JavaScript.
• JSX là một cú pháp mở rộng cho JavaScript cho phép mô tả giao diện thành phần dễ dàng hơn

Một số quy tắc cần lưu ý khi sử dụng cú pháp JSX

• Tất cả element phải có phần đóng

• Biểu thức JSX phải có một phần tử gốc duy nhất

• Sử dụng camelCase cho các thuộc tính, ví dụ className, onClick, ...

• Cho phép nhúng biểu thức JavaScript trong cặp {}