Hướng dẫn nodejs reactjs - nodejs reactjs
Chào mọi người, lại là mình đây, sau chuỗi ngày vọc về server với hàng tá các command line khó nhớ thì hãy cùng mình đổi gió một xíu với series này nhé =]]. Hôm nay hãy cùng mình bắt đầu một tour về combo Node JS + React JS. Cả series chúng ta sẽ cùng tìm hiểu về combo ReactJS + Node JS qua những ví dụ cơ bản. Trong đó sẽ trải qua các nội dung như sau
Series sẽ bắt đầu bằng những cấu hình cơ bản với nội dung là Cài đặt cơ bản và kết nối React JS + Node JSCài đặt cơ bản và kết nối React JS + Node JS Node js + React JS ?Node.js là một hệ thống phần mềm được thiết kế để viết các ứng dụng internet có khả năng mở rộng, đặc biệt là máy chủ web. Chương trình được viết bằng JavaScript, sử dụng kỹ thuật điều khiển theo sự kiện, nhập/xuất không đồng bộ để tối thiểu tổng tài nguyên và tối đa khả năng mở rộng. Node.js bao gồm có V8 JavaScript engine của Google, libUV, và vài thư viện khác. là một hệ thống phần mềm được thiết kế để viết các ứng dụng internet có khả năng mở rộng, đặc biệt là máy chủ web. Chương trình được viết bằng JavaScript, sử dụng kỹ thuật điều khiển theo sự kiện, nhập/xuất không đồng bộ để tối thiểu tổng tài nguyên và tối đa khả năng mở rộng. Node.js bao gồm có V8 JavaScript engine của Google, libUV, và vài thư viện khác. Với nhiều ưu điểm, thì NodeJs đang phát triển rất nhanh với cộng đồng hỗ trợ lớn.
Với ứng dụng NodeJs thì một framework nhỏ mà mạnh mẽ thường được sử dụng là Express Js. Ở bài viết này chúng ta sẽ tiến hành cài đặt và cấu hình Express Js cho ứng dụng. React JS đang là một trong những thư viện phổ biến nhất giới frontend. Sử dụng React Js để build các ứng dụng front-end với hiệu năng cao và thời gian xây dựng nhanh nhất có thể. đang là một trong những thư viện phổ biến nhất giới frontend. Sử dụng React Js để build các ứng dụng front-end với hiệu năng cao và thời gian xây dựng nhanh nhất có thể. Cài đặt các tool cần thiết
Link: https://tecadmin.net/install-latest-nodejs-npm-on-ubuntu
Link: https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/ Sau khi cài các ứng dụng cần thiết thì chúng ta đến bước cấu hình và cài đặt famework + dependencies. Mình sẽ chia 2 folder để tách backend và frontend làm 2 project riêng. Cài đặtNode JSĐầu tiên hãy tạo folder và cài đặt framework
Hãy tạo file package.json để cài đặt nhanh framework và các thư viện liên quan. Ở đây mình sẽ cài 8 để phần log thêm sinh động, framework 9, dùng 0 + 1 làm database và connect database, 2 cho việc show log ở terminal dễ dàng hơn. Và 3 để chạy ngầm server, sử dụng cho việc deploy sau này.
Và chạy npm install để cài đặt hết tất cả các dependencies này cho server Node Js
Hãy chắc rằng bạn đã chạy mongo db 4Cùng xem cấu trúc thư mục của backend như nào nhé
Mọi cấu hình mình sẽ đặt ở folder 5, như database, routes, các setup cho port ứng dụng, link database ...Các controller xử lý logic sẽ nằm ở 6. Ở ngoài cùng sẽ là 7 dùng cho việc chạy server.
File 8 này sẽ là nơi chúng ta lưu các thông số cố định như đường link hay các cổng kết nối với các ứng dụng khác .v.v.
File cấu hình 9 sẽ đảm nhiệm việc quản lý kết nối từ NodeJS đến mongodb, handle khi kết nối/ngắt kết nối và các lỗi nếu có.
React js
Cùng xem cấu trúc cây thư mục sẽ như thế nào, ngoài các folders + files được generate bởi create-react-app, mình sẽ chia nhỏ các folder riêng, ở đây các components sẽ được viết ở folder 0 0Để cài đặt nhanh một vài dependencies cần thiết, hãy thêm packages trực tiếp vào package.json, ở react thì trước tiên mình sẽ cài 1, 2 và 3 để tạo request http lên server Node JS. Dependencies của react sẽ như thế này. 1 2Như vậy thì cài đặt cơ bản bước đầu đã gần như là hoàn thành. Kết nối frontend - backendBackend: Hãy bắt đầu với một controller nhận request đơn giản nhất - 4. 3 4Server Node JS sẽ chạy ở port 4000 5Frontend Đến đây chúng ta sẽ thử gọi request lên server NodeJS nhé. Để bắt đầu, hãy tạo một http request với axios ngay ở component App. Với package 3, chúng ta dễ dàng tạo một 6 từ browser. 6App react local sẽ chạy ở localhost:3000 7Lưu ý : Đến đây hãy mở lại trang web react qua 7 để kiểm tra xem frontend có thể gọi đến backend hay chưa. Trường hợp bị block do Cors thì hãy kiểm tra lại ở NodeJS đã cài package cors cũng như đã allow request
chéo từ domain của react js hay chưa.Hãy thêm domain của react vào biến 8 ở file server.js nhé. Ở đây server react js của mình chạy ở 7 nên ở properties của mình sẽ là 0Còn đây là kết quả của bài viết hôm nay. React JS nhận được message response từ NodeJS Như vậy là phần 1 với nội dung Cài đặt cơ bản và kết nối React JS + NodeJS đã xong, hãy đón đọc tiếp những phần sau của series nhé =]]. Repos:
|