Tích hợp ứng dụng trang đơn với Spring Boot - Integrate single page application with Spring Boot
SBA301 - Phát triển ứng dụng trang đơn (Single Page Application) dạy cách dựng một ứng dụng web có hai nửa ghép lại: ReactJS chạy trong trình duyệt và dịch vụ REST viết bằng Spring Boot chạy trên máy chủ. Câu hỏi xuyên suốt là ranh giới giữa hai nửa đó nằm ở đâu, dữ liệu đi qua lại thế nào và ai chịu trách nhiệm phần nào. Nửa trình duyệt bắt đầu từ JSX cùng cách chia giao diện thành component, rồi tới trạng thái: React Hooks với useState, useEffect, useMemo, useCallback, các ràng buộc của Rules of Hooks, và lối giữ state ở component hàm đặt cạnh lối cũ ở component lớp. Bộ component dựng sẵn React-Bootstrap lo phần trình bày. Việc chuyển trang không còn do máy chủ đảm nhận mà do định tuyến phía client với React Router v6, kèm tham số đường dẫn đọc bằng useParams và trang 404 bắt ở cuối bảng route. Để lấy dữ liệu, môn đi qua nền bất đồng bộ của JavaScript gồm Promise và async/await, rồi tới thư viện Axios cho các lời gọi thực tế. Nửa máy chủ mở bằng nền tảng HTTP và nguyên tắc của một REST API, sau đó dựng dịch vụ bằng Spring Boot với các chú giải ánh xạ yêu cầu như RequestBody, PathVariable, RequestParam, cách đặt mã trạng thái và thân phản hồi. Tài liệu cho dịch vụ được sinh sống bằng OpenAPI và Swagger, còn phần kiểm thử dùng bộ khởi tạo spring-boot-starter-test để chạy thử cả tầng web lẫn toàn bộ ứng dụng. Tầng dữ liệu có hai nhánh. Nhánh quan hệ dùng JPA và Hibernate với ánh xạ đối tượng sang bảng, Session và Transaction, khoá lạc quan chống xung đột khi ghi đồng thời, phân trang cùng lựa chọn Slice khi không cần đếm toàn bộ bản ghi, và hbm2ddl sinh lược đồ. Nhánh tài liệu dùng MongoDB với lược đồ linh hoạt, Spring Data MongoDB, MongoTemplate cho truy vấn phức tạp và dịch vụ đám mây MongoDB Atlas. Khép môn là bảo mật với Spring Security, từ xác thực cơ bản và phiên làm việc tới token JWT cho dịch vụ phi trạng thái. Học xong, người học dựng được trọn một ứng dụng trang đơn có đăng nhập, gọi dịch vụ REST, lưu dữ liệu ở cả cơ sở dữ liệu quan hệ lẫn cơ sở dữ liệu tài liệu, và có tài liệu mô tả giao diện lập trình kèm theo.
Trong React, phương pháp được sử dụng để truyền dữ liệu từ con sang cha là sử dụng props. Props là một tính chất độc lập của React, cho phép các thành phần con nhận dữ liệu từ thành phần cha mà không cần phải thay đổi trạng thái của thành phần cha. Tuy nhiên, trong một số trường hợp, chúng ta cần truyền dữ liệu từ con sang cha, và phương pháp này được gọi là sử dụng callbacks. Callbacks là các hàm được gọi khi một sự kiện xảy ra, và chúng ta có thể sử dụng chúng để truyền dữ liệu từ con sang cha. Ví dụ, khi một thành phần con được cập nhật, chúng ta có thể gọi một hàm callback được truyền từ thành phần cha để cập nhật dữ liệu của thành phần cha.
Hàm useEffect trong React được sử dụng để chạy các tác dụng phụ như fetching dữ liệu, cập nhật trạng thái ứng dụng, hoặc thực hiện các hành động khác ngoài vòng đời của một thành phần. Nó cho phép bạn thực hiện các hành động này sau khi render thành phần một lần. Ví dụ, bạn có thể sử dụng useEffect để fetch dữ liệu từ API và cập nhật trạng thái ứng dụng khi dữ liệu được nhận về. Ngoài ra, bạn cũng có thể sử dụng nó để hủy các tác dụng phụ khi thành phần bị loại bỏ khỏi DOM.
Trong React, khi chúng ta muốn quản lý trạng thái trong một thành phần chức năng (functional component), chúng ta cần sử dụng một hook đặc biệt. Hook là một hàm có thể được sử dụng trong các thành phần chức năng để truy cập các tính năng của React. Trong trường hợp này, chúng ta cần sử dụng hook "useState" để quản lý trạng thái. Hook "useState" cho phép chúng ta tạo một biến trạng thái và các hàm để cập nhật nó. Điều này giúp chúng ta có thể quản lý trạng thái của ứng dụng một cách dễ dàng và hiệu quả.
Khi nâng cấp trạng thái lên trong React, chúng ta cần lưu ý cách thức đúng đắn. Trước hết, chúng ta không nên lưu trạng thái trong thành phần con (Store state in the child component), vì điều này sẽ dẫn đến sự phức tạp và khó khăn trong việc quản lý trạng thái. Thay vào đó, chúng ta có thể sử dụng callback từ cha sang con (Pass callback from parent to child), nơi mà cha sẽ truyền một hàm callback xuống con, và con sẽ thực hiện hành động cần thiết khi nhận được callback. Ngoài ra, chúng ta cũng có thể sử dụng Redux, một thư viện quản lý trạng thái phổ biến trong React. Tuy nhiên, lưu trữ trạng thái trong một đối tượng toàn cầu (Store state in a global object) không phải là một lựa chọn tốt, vì nó có thể dẫn đến sự phức tạp và khó khăn trong việc quản lý trạng thái.
Trong React, lifecycle method là các phương thức được gọi tại các giai đoạn khác nhau trong quá trình hoạt động của một thành phần. Trong các thành phần chức năng (functional components), useEffect được sử dụng để thay thế một số lifecycle method. Trong số các lựa chọn trên, phương thức được thay thế bởi useEffect là componentDidMount. Phương thức này được gọi sau khi thành phần đã được render và các thành phần con đã được render xong. Nó thường được sử dụng để thực hiện các hành động như tải dữ liệu từ server, đăng ký các sự kiện, v.v. Trong các thành phần chức năng, useEffect được sử dụng để thực hiện các hành động tương tự, nhưng với cách tiếp cận khác.
Để cập nhật trạng thái trong React, chúng ta cần sử dụng phương thức setState hoặc useState setter. Phương thức này giúp cập nhật trạng thái một cách an toàn và hiệu quả. Khi sử dụng setState hoặc useState setter, chúng ta có thể cập nhật trạng thái một cách dễ dàng và đảm bảo rằng trạng thái được cập nhật một cách đồng bộ. Phương thức này cũng giúp ngăn chặn việc cập nhật trạng thái không mong muốn, giúp ứng dụng của chúng ta trở nên ổn định và hiệu quả hơn. Ngoài ra, sử dụng setState hoặc useState setter cũng giúp chúng ta có thể theo dõi và quản lý trạng thái một cách dễ dàng hơn.
CComponent whose input value is controlled by React state
DComponent with internal timer
Lời giải
Trong React, một thành phần được kiểm soát (controlled component) là một thành phần có giá trị đầu vào được kiểm soát bởi trạng thái của ứng dụng. Điều này có nghĩa là giá trị của thành phần sẽ được cập nhật tự động khi trạng thái của ứng dụng thay đổi. Ví dụ, khi bạn nhập giá trị vào một trường văn bản trong một thành phần được kiểm soát, giá trị đó sẽ được lưu trữ trong trạng thái của ứng dụng và sẽ được cập nhật tự động khi bạn thay đổi giá trị đó. Điều này giúp đảm bảo rằng giá trị của thành phần luôn được đồng bộ với trạng thái của ứng dụng.
BIt returns the state value and a function to update it
CIt is used only in class components
DIt creates side effects
Lời giải
useState là một hàm trong React được sử dụng để quản lý trạng thái của một thành phần. Nó được sử dụng trong cả class và function components. Khi sử dụng useState, nó sẽ trả về một mảng có hai phần: giá trị hiện tại của trạng thái và một hàm để cập nhật trạng thái. Hàm này sẽ được sử dụng để thay đổi giá trị của trạng thái. Ví dụ, nếu bạn muốn tạo một button có thể tăng hoặc giảm giá trị, bạn sẽ sử dụng useState để quản lý giá trị này và hàm để cập nhật giá trị này khi button được click. Điều này giúp bạn có thể quản lý trạng thái của thành phần một cách dễ dàng và hiệu quả.
Khi thực hiện các tác vụ phức tạp trong ứng dụng React, chúng ta thường muốn tối ưu hóa hiệu suất bằng cách tránh thực hiện chúng không cần thiết. Để đạt được điều này, chúng ta có thể sử dụng hook `useMemo` để lưu trữ giá trị của một hàm tính toán và chỉ thực hiện lại khi dữ liệu đầu vào thay đổi. Điều này giúp giảm thiểu số lần thực hiện tác vụ và cải thiện hiệu suất của ứng dụng. Ví dụ, nếu chúng ta có một hàm tính toán phức tạp để tạo ra một mảng dữ liệu, chúng ta có thể sử dụng `useMemo` để lưu trữ kết quả của hàm này và chỉ thực hiện lại khi dữ liệu đầu vào thay đổi.
Lifting state up là một kỹ thuật trong React giúp chia sẻ trạng thái giữa các thành phần con và cha. Khi nói đến việc nâng trạng thái lên, chúng ta đang nói về việc di chuyển trạng thái từ một thành phần con sang thành phần cha gần nhất. Điều này giúp giảm thiểu việc sử dụng props và tạo ra một cấu trúc dữ liệu được chia sẻ giữa các thành phần. Ví dụ, nếu bạn có một danh sách các thành phần con và mỗi thành phần con cần truy cập vào một trạng thái chung, thì việc nâng trạng thái lên sẽ giúp bạn chia sẻ trạng thái đó giữa các thành phần con mà không cần phải sử dụng props.
Các thành phần được kiểm soát (controlled components) trong React là các thành phần có trạng thái được quản lý bởi React. Điều này có nghĩa là React sẽ quản lý và cập nhật trạng thái của thành phần đó thay vì DOM. Điều này giúp đảm bảo rằng trạng thái của thành phần luôn được đồng bộ và cập nhật chính xác. Trong các thành phần được kiểm soát, React sẽ quản lý giá trị của các trường nhập liệu (input) và đảm bảo rằng giá trị đó luôn được cập nhật chính xác. Điều này giúp ngăn chặn các vấn đề liên quan đến trạng thái không đồng bộ và đảm bảo rằng ứng dụng luôn hoạt động ổn định.
Trong React, việc định tuyến (routing) là một phần quan trọng của ứng dụng. Để quản lý các đường dẫn trong ứng dụng, chúng ta cần sử dụng các gói (package) chuyên dụng. Một trong những gói phổ biến nhất được sử dụng cho định tuyến trong ứng dụng React là react-router-dom. Gói này cho phép chúng ta tạo ra các đường dẫn và chuyển đổi giữa các trang trong ứng dụng một cách dễ dàng. Nó cũng cung cấp các tính năng như quản lý lịch sử trang, tạo ra các đường dẫn động và nhiều hơn nữa. Ngoài ra, gói này cũng được sử dụng để tạo ra các ứng dụng đa màn hình (multi-screen) và ứng dụng di động.
DRoutes must be wrapped in <Router> or <BrowserRouter>
Lời giải
React Router v6 là một công cụ giúp quản lý đường dẫn trong ứng dụng React. Nó cho phép bạn tạo ra các đường dẫn động và quản lý trạng thái ứng dụng. Để sử dụng React Router v6, bạn cần phải.wrap các tuyến đường trong <Router> hoặc <BrowserRouter>. Điều này giúp React Router biết được đường dẫn hiện tại và có thể điều hướng ứng dụng đến đúng tuyến đường. Ngoài ra, <Switch> vẫn được sử dụng để nhóm các tuyến đường, giúp ứng dụng có thể xử lý các tuyến đường trùng nhau một cách hiệu quả. Tuy nhiên, React Router v6 không hỗ trợ routing dựa trên hash, vì vậy bạn không thể sử dụng nó để tạo ra các đường dẫn dựa trên hash. Tóm lại, để sử dụng React Router v6, bạn cần phải.wrap các tuyến đường trong <Router> hoặc <BrowserRouter> và sử dụng <Switch> để nhóm các tuyến đường.
Trong React Router, <Outlet /> là một thành phần quan trọng trong việc quản lý các đường dẫn con (nested routes). Mục đích chính của <Outlet /> là render (hiển thị) phần tử con phù hợp với đường dẫn hiện tại. Khi bạn sử dụng <Outlet />, nó sẽ tìm kiếm và hiển thị phần tử con phù hợp với đường dẫn hiện tại, giúp bạn có thể tổ chức các đường dẫn một cách linh hoạt và dễ dàng quản lý.
Để xử lý việc chuyển hướng (routing) trong các ứng dụng React, người dùng có thể sử dụng một số thư viện khác nhau. Tuy nhiên, trong số các lựa chọn trên, chỉ có một thư viện được sử dụng phổ biến và rộng rãi để xử lý routing. Đó là React Router. Thư viện này cung cấp các tính năng như định nghĩa đường dẫn, chuyển hướng giữa các trang, và quản lý trạng thái của ứng dụng. Nó cho phép người dùng tạo ra các ứng dụng có giao diện người dùng phức tạp và dễ dàng quản lý.
Trong React Router, thành phần <Switch> đóng vai trò quan trọng trong việc định tuyến. Nó được sử dụng để nhóm nhiều tuyến đường lại với nhau và chỉ render tuyến đường đầu tiên mà nó gặp phải. Điều này có nghĩa là khi bạn sử dụng <Switch>, React Router sẽ chỉ render tuyến đường đầu tiên mà nó tìm thấy mà không cần phải render các tuyến đường khác. Điều này giúp tăng hiệu suất và giảm thiểu việc render không cần thiết. Ngoài ra, <Switch> cũng giúp bạn dễ dàng quản lý và tổ chức các tuyến đường trong ứng dụng của mình.
Để xử lý một yêu cầu fetch thành công, chúng ta cần sử dụng hàm then để thực hiện các hành động tiếp theo sau khi dữ liệu được tải về. Trong ví dụ này, chúng ta cần chuyển đổi dữ liệu từ dạng JSON sang dạng dễ đọc hơn bằng cách sử dụng hàm response.json(). Sau đó, chúng ta có thể sử dụng hàm console.log() để in ra dữ liệu đã được chuyển đổi. Vì vậy, câu trả lời đúng là fetch(url).then(response =>
Lời giải
response.json()).then(data => console.log(data));
. Câu trả lời này cho phép chúng ta xử lý dữ liệu một cách linh hoạt và dễ dàng.
Axios hỗ trợ các phương thức HTTP sau: GET, POST, PUT, DELETE, PATCH, OPTIONS, HEAD. Điều này có nghĩa là bạn có thể sử dụng bất kỳ phương thức nào trong số này khi sử dụng Axios để gửi yêu cầu HTTP. Ví dụ, bạn có thể sử dụng phương thức PUT để cập nhật dữ liệu, phương thức DELETE để xóa dữ liệu, phương thức PATCH để cập nhật một phần dữ liệu, v.v. Ngoài ra, bạn cũng có thể sử dụng phương thức OPTIONS để kiểm tra các phương thức HTTP được hỗ trợ bởi server, và phương thức HEAD để kiểm tra thông tin về tài nguyên mà không tải về dữ liệu.
Để gửi dữ liệu POST bằng Axios, bạn cần sử dụng phương thức post(). Phương thức này yêu cầu hai tham số: URL và dữ liệu cần gửi. Dữ liệu có thể là một đối tượng JSON hoặc một chuỗi. Ví dụ, bạn có thể sử dụng phương thức post() như sau: axios.post('url', dữ liệu). Phương thức này sẽ gửi một yêu cầu POST đến URL chỉ định với dữ liệu được gửi kèm theo. Ngoài ra, bạn cũng có thể sử dụng phương thức post() để gửi dữ liệu POST với các tùy chọn khác nhau, chẳng hạn như headers, params, hoặc data.
Khi thực hiện một yêu cầu bằng Axios, kết quả trả về sẽ là một đối tượng Promise. Đối tượng Promise là một loại đối tượng trong JavaScript được sử dụng để xử lý các tác vụ bất đồng bộ. Nó cho phép bạn thực hiện các tác vụ như gửi yêu cầu HTTP, đọc dữ liệu từ cơ sở dữ liệu, v.v. mà không phải chờ đợi kết quả. Khi tác vụ được thực hiện xong, đối tượng Promise sẽ được giải phóng và trả về kết quả. Trong trường hợp của Axios, đối tượng Promise sẽ được trả về sau khi gửi yêu cầu HTTP thành công. Bạn có thể sử dụng phương thức then() hoặc async/await để lấy kết quả từ đối tượng Promise này.
