React (còn được gọi là ReactJS) khá giống về chức năng & tính năng với AngularJS; được sử dụng để thiết kế các ứng dụng front-end. Thư viện JavaScript và một loạt các API và chức năng được xác định trước cho phép các nhà phát triển thiết kế các thiết kế giao diện người dùng tương tác. Sự khác biệt chính giữa ReactJS và AngularJS là trong khi AngularJS chủ yếu được sử dụng để thiết kế & triển khai các ứng dụng web; ReactJS có thể được ưu tiên cho các ứng dụng một trang hoặc thậm chí các ứng dụng di động cũng như nó có các thư viện chuyên dụng phù hợp với mục đích cụ thể.

Trái ngược với ReactJS, NodeJS tập trung vào chức năng phía máy chủ và được sử dụng để viết mã các thư viện JavaScript thực thi bên ngoài trình duyệt internet.

Lý do đằng sau việc tích hợp NodeJS & ReactJS

Như đã được gợi ý trong phần trên; NodeJS hoàn toàn khác về chức năng hoặc khả năng sử dụng đối với ReactJS - trong khi một cái thực thi ở phía máy khách, cái kia chạy ở phía máy chủ.

Bây giờ, không phải tất cả các mã & logic nghiệp vụ đều chạy ở đầu máy khách (tức là ở trình duyệt). Có một số yêu cầu trong đó xác thực cụ thể hoặc logic nghiệp vụ cần được thực thi ở cuối máy chủ. Trong những tình huống như vậy, ReactJS được tích hợp với NodeJS để yêu cầu được gửi bởi ReactJS sẽ bị NodeJS chặn ở cuối máy chủ; và các quy trình xác nhận bắt buộc được thực hiện.

Thiết lập API React cho máy chủ NodeJS

Bước đầu tiên để thiết lập một ứng dụng React là cài đặt công cụ 'tạo Ứng dụng React' có thể hỗ trợ trong quá trình phát triển front-end. Tuy nhiên, ứng dụng này sẽ không hỗ trợ các thực thi phía máy chủ. Đối với điều này, các bước tiếp theo sẽ cho thấy cách một 'máy chủ Express Node' có thể được liên kết động với API React.

Khi đoạn mã trên được thực thi; ứng dụng React đã sẵn sàng được triển khai. Bước tiếp theo sẽ tập trung vào việc tích hợp tính năng này với máy chủ Node. Các phần phụ thuộc của máy chủ có thể được tích hợp bằng cách sử dụng đoạn mã dưới đây.

Như trong hình, môi trường Node được thiết lập trong mã. Có bốn yếu tố chính cần được quan tâm:

1. 'Node-env-run' - Hàm này giúp tải tất cả các biến môi trường liên quan đến các thư viện NodeJS để tham khảo thêm
2. 'Nodemon' - Chức năng này tự động khởi động lại máy chủ NodeJS khi có bất kỳ thay đổi nào được thực hiện đối với hệ thống hiện có
3. 'Npm-run-all' - Chức năng này cho phép các nhà phát triển thực thi nhiều tập lệnh NodeJS cùng lúc trên máy chủ
4. Ngoài các chức năng này, có một số tính năng của trình ghi nhật ký cũng được tham chiếu để đảm bảo ghi nhật ký máy chủ phù hợp

Do đó, ở giai đoạn này, máy chủ bắt đầu chạy. Tuy nhiên, để có được kết quả mong muốn; cả máy chủ Node cũng như kịch bản máy khách ReactJS cần phải thực thi cùng một lúc; sẽ được đề cập trong phần cuối cùng của bài báo.

Chạy ứng dụng React và máy chủ Node đồng thời

Trong khi chạy hoặc khởi động riêng lẻ cả hai có thể khá đơn giản; để thực hiện đồng bộ cả hai yêu cầu thêm một vài bước. Bước đầu tiên đề cập đến việc tạo một 'proxy'; đến lượt nó cần được trỏ đến cùng một IP và cổng mà máy chủ đang chạy.

Sau khi proxy máy chủ được trỏ đến cổng được chỉ định; bước tiếp theo là sử dụng hai chức năng - 'npm-run-all' (cho phép các nhà phát triển chạy nhiều chức năng trên máy chủ) và 'run-p' sẽ đảm bảo rằng các quy trình thực thi song song với nhau. Tập lệnh được sử dụng để thực thi điều này được đề cập bên dưới để tham khảo -

Chạy tập lệnh trên sẽ đảm bảo rằng cả máy chủ Node cũng như ứng dụng React đều chạy cùng một lúc.