Hướng dẫn cài đặt react js với yarn
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 Node JS + React JS - Cài đặt cơ bản Kết nối React JS - Node JS Authentication + Authorization Node JS and Nosql database - mongodb 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 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. 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. NodeJs viết bằng Javascript nên có cộng đồng hỗ trợ cực lớn, nên những vấn đề gặp phải sẽ nhận được sự support rộng rãi so với nhiều framework khác. Hiệu năng cao + real time: NodeJs với cơ chế xử lý bất đồng bộ - non-blocking giúp NodeJs tiếp nhận và xử lý hàng ngàn request một lúc mà không gặp một khó khăn nào. Dễ dàng mở rộng. JSON API - Với javascript thì NodeJS + Nosql làm server là sự lựa chọn số 1 cho JSON API. 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ể. 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
4 Cù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
2 Như 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
4 Server Node JS sẽ chạy ở port 4000
5 Frontend Đế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.
6 App react local sẽ chạy ở localhost:3000
7 Lư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à
0 Cò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é =]]. |