Có nên dùng react with ajax

React core

Package “react” cung cấp thư viện bao gồm các hàm và class để tạo ra component và quản lý state của từng component. Bất kỳ nền tảng nào chạy được JavaScript đều có thể sử dụng package “react”.

React DOM

Package “react-dom” là thư viện bổ sung cho “react”, nó thao tác với DOM để hiển thị (render) các component một cách tối ưu nhất có thể, dựa vào thuật toán DOM ảo (virtual DOM, thường gọi là vDOM). Khi các component xảy ra thay đổi, tất cả những thay đổi ấy sẽ được render lên vDOM, sau đó cây vDOM sẽ được so sánh với cây DOM thật của trình duyệt, đảm bảo chỉ những node nào thật sự khác biệt mới được cập nhật lên DOM thật. Thuật toán này giúp cho giao diện phức tạp vẫn giữ được sự mượt mà, tránh giật lag khi có nhiều component được cập nhật.

React Native

Package “react-native” cũng là thư viện bổ sung cho “react” nhưng dùng để phát triển giao diện cho ứng dụng di động. Trong khi “react-dom” gắn kết React core với trình duyệt để hiển thị ứng dụng web, “react-native” lại giúp gắn kết giữa core với nền tảng di động bên dưới (Android, iOS…), giúp lập trình viên chỉ cần thao tác với JavaScript, những chi tiết liên quan đến native API sẽ được xử lý giùm, nhờ đó cùng một mã nguồn React Native có thể build ra được app cho các nền tảng khác nhau (Android, iOS v.v.)

Một số thư viện bổ sung khác

“react-art“: Nếu như “react-dom” chuyên về HTML Element thì “react-act” lại chuyên về SVG Element, dùng để hiển thị hình ảnh vector trên nền web.

“react-three“: Dựa trên thư viện ThreeJS chuyên dùng để hiển thị đồ họa 3D.

“react-canvas“: Hiển thị giao diện dưới dạng đồ họa pixel lên <canvas> chứ không dùng HTML Element.

Các câu hỏi thường gặp

Những câu hỏi tưởng như “ngớ ngẩn” của người mới học, nhưng lại thường được hỏi khi phỏng vấn để thứ thách kiến thức nền tảng của ứng viên.

1. Vì sao nói “React là thư viện (library), Angular là framework”?

Bởi vì React chỉ chịu trách nhiệm tầng giao diện (V-View trong MVC, P-Presentation trong mô hình 3 lớp), nó là một thư viện cung cấp các class và function để tạo component và hiển thị component đó lên giao diện app. Còn Angular vừa có tầng giao diện (presentation layer), vừa có service ở tầng xử lý nghiệp vụ (business layer), lại còn kèm theo các hàm để tạo request HTTP (data access layer).

React không áp đặt, cũng không đề xuất một kiểu giao tiếp nào giữa các component, người sử dụng thư viện có thể tham khảo trong cộng đồng mạng để chọn ra một cách phù hợp nhất (Prop drilling, Context API, Redux). Mặc định trong Angular là dependency injection và pub/sub thông qua Observable, nếu người dùng không có chủ ý muốn làm gì đó khác biệt, thì cứ lấy cái có sẵn của Angular mà dùng.

React cũng không áp đặt cấu trúc project, riêng việc cấu trúc thư mục của project React như thế nào cũng là vấn đề tranh cãi trên các diễn đàn. Angular có quy định cấu trúc project, người dùng có thể thay đổi, nhưng sẽ gặp rắc rối khi cần chạy lệnh auto update từ phiên bản Angular cũ lên Angular mới. Miễn là làm theo những đề xuất của Angular thì rất nhiều tác vụ có thể được làm tự động, một khi đã muốn tự custom thì bạn phải tự lo.

Công cụ CLI của Angular quá xịn, create-react-app không là đối thủ. Có thể thấy, Angular trang bị cho người dùng “đến tận răng” từ 3 layer của code, cho đến cấu trúc app và cả công cụ hỗ trợ, nên Angular là một framework, còn quy mô của React chỉ là một thư viện. Tất nhiên không nói ai tốt hơn ai, mỗi loại đều có ưu khuyết điểm riêng, sẽ nói ở một bài khác.

2. React có làm được sản phẩm như làm với Angular không?

Được! Nhưng lập trình viên phải tự tìm và ráp những thư viện và dev tool hỗ trợ lại với nhau, chứ không có sẵn như Angular, thậm chí dùng React với TypeScript cũng khả thi, và trên thực tế nhiều công ty cũng dùng TypeScript cho React. Việc tự ráp thư viện này có thể được coi là sự tự do không gò bó, hay là sự phiền phức, tùy quan điểm mỗi người.

3. React có phải là một ngôn ngữ Front-end mới không?

Không phải! Các lập trình viên React có thể sử dụng cú pháp của phiên bản JavaScript mới nhất, cộng với việc chèn mã JSX chung với mã JS, dễ khiến người ta tưởng lầm React là một “ngôn ngữ lập trình”. Tuy nhiên, những điều kỳ diệu này không phải của React, mà là của một công cụ hỗ trợ lập trình (dev tool) tên là Babel. Babel đã được sử dụng từ lâu, thậm chí với jQuery.

4. Học React rồi có cần học JavaScript nữa không?

Tất nhiên là có! Phải học kỹ nữa là khác, vì một khi đã dùng React nghĩa là bạn đang muốn phát triển một web app phức tạp, nếu lơ mơ JS thì không được đâu. React là một thư viện được viết bằng JS. Hiện nay nếu không học JS thì không còn ngôn ngữ lập trình nào khác để làm web app front-end nữa.

5. Dùng React rồi có cần dùng jQuery không?

Không cần jQuery. Nhưng vẫn có thể dùng chung React với jQuery, vì có một số thư viện plug-in jQuery rất hay mà bên React chưa có, người ta vẫn phải dùng jQuery trong app React (chẳng hạn: react-owl-carousel).

6. Có thể dùng React thay cho AJAX không?

Cách đặt câu hỏi không đúng!

AJAX là kỹ thuật để JS ở client lấy dữ liệu từ server mà không cần tải lại trang, nó là tên một kỹ thuật, không thể lấy nó ra so sánh với một thư viện. Nói thêm một chút, với JS thuần có 2 cách để tạo AJAX request là bằng class XMLHttpRequest và hàm fetch(). Ở đằng sau những thư viện như jQuery.ajax(), Axios hay thậm chí Angular vẫn phải dùng một trong hai cách này để tạo HTTP request.

(Còn nữa, sẽ tiếp tục bổ sung)