@bachnguyen2907 ví dụ b làm html css js thuần, cái file js thuần đó b để xử lý các sự kiện, làm animate cho web, thì trong react cái đống js kia thêm như nào ấy, react là dom ảo còn js kia là tương tác với dom thật, ý mình là thế đó
@quanghung97 vậy ví dụ bình thường chỉ làm html css js thuần, click vào nút A và nút A đổi màu, trong react thì mình sẽ onClick thì thêm class active chẳng hạn vào nút A, và css cho class active màu khác à b?
@ngduyws à thế tức là thế này. Bên trong reactjs đã có các phương thức sẵn có để xử lý DOM cấu trúc HTML, xử lý animate kết hợp các state của component đó theo các event. Reactjs sinh ra để giải quyết các component giao tiếp qua lại, khắc phục sự rối loạn của javascript thuần khi scale dự án và bất đồng bộ của ngôn ngữ dễ sai nhất thế giới.
Về câu hỏi, không những chỉ làm hiệu ứng tuyết rơi như vậy mà còn làm được nhiều hiệu ứng đẹp khác với HTML và CSS3 nhé bạn. Với việc làm hiệu ứng tuyết rơi, như bạn nói, chúng ta sẽ cần kết hợp thêm một chút đồ họa là ảnh một bông tuyết đẹp mắt chẳng hạn. Chìa khóa để làm hiệu ứng này là sự kết hợp sử dụng các thuộc tính CSS3 về animation, keyframes để tạo ra các chu kỳ hoạt động liên tục cho bông tuyết. Giống như demo của các bạn @HuyDQ@quanghung97 ở bên dưới nha bạn. Chỉ cần nắm được animation, keyframes và CSS cơ bản là bạn có thể tạo ra nhiều hiệu ứng khác theo cách sáng tạo của riêng bạn.
khi b làm 1 trang html, bạn thêm js để tạo hiệu ứng khi click, khi scroll chẳng hạn, ý mình là cái js đó ấy, bình thường thì gộp nó thành 1 file main.js rồi thêm vào html, nhưng react thì thêm js đó kiểu gì ấy
Đóng trình duyệt thì cái cookie tương ứng chịu trách nhiệm quản lý session đó ở client cũng bị xóa. Do đó, session lưu trên server cũng vô dụng và sẽ xóa khi hết timeout
Ý bạn là viết js thuần, sử dụng các phương thức getElementById(), querySelector()... để get các element không có trong component?
nó vẫn là js nên bạn thích viết như nào cũng đc mà
cái ví dụ trên mình vẽ có 1 web server cho dễ hiểu. chứ chuẩn bài ra sẽ có load balance kết hợp với autoscaling ở bên trên con web nữa.
Còn về phía docker sẽ dùng docker Swarm để quản lí, scaling và Load balancing cho các container.
Nên có 1000 người hay nhiều hơn nữa mình thấy sẽ ít gặp vấn đề hơn. Cũng không thể nói là ok 100% được.
Để an toàn hơn nữa thì cần có cơ chế rate limiting cho call api nữa. để hạn chế việc gọi quá nhiều api cùng 1 lúc.
Nên để hệ thống có thể chạy và xử lí hàng tỉ request thì mình nghĩ cần phải làm nhiều việc hơn nữa.
Nên để bài toán dễ hiểu nên mình đã thu gọn lại thành cấu trúc đơn giản nhất để mọi người hiểu rõ nó làm thế nào.
Bạn cho mình hỏi :
Trong trường hợp click vào button , data được load nhưng không hề update url như comment trong link https://www.thegioididong.com/dtdd/iphone-xr, mình có sử dụng thử code của bạn nhưng không crawl được hết cmt
Thứ 2, khi click button, XHR response về nội dung cmt mình muốn crawl nhưng khi click vào link trong XHR thì return empty web. Mình đã thử vòng lặp Formrequest nhưng không được. Nếu có giải pháp thì phản hồi giúp mình nhé, mình cảm ơn !
Đây là code của mình:
THẢO LUẬN
bài viết khá hay, tiếc là không có phần import
(
@quanghung97 ừ cám ơn bạn nhé
@ngduyws uk đúng thế rồi còn j. Còn có cả life cycle hook nữa bạn để quản lý nữa cơ.
@bachnguyen2907 ví dụ b làm html css js thuần, cái file js thuần đó b để xử lý các sự kiện, làm animate cho web, thì trong react cái đống js kia thêm như nào ấy, react là dom ảo còn js kia là tương tác với dom thật, ý mình là thế đó
@quanghung97 vậy ví dụ bình thường chỉ làm html css js thuần, click vào nút A và nút A đổi màu, trong react thì mình sẽ onClick thì thêm class active chẳng hạn vào nút A, và css cho class active màu khác à b?
@ngduyws dùng chung thì vẫn dùng được nhưng loạn lên hết thư viện này đè thư viện khác, rối cực kì
@quanghung97 vậy tức là dự án thật thì react sẽ ko sử dụng jquery hay js làm animate mà nó sẽ có riêng các thư viện gì đó khác à b?
@ngduyws ý bạn là import file trong React ??
@ngduyws à thế tức là thế này. Bên trong reactjs đã có các phương thức sẵn có để xử lý DOM cấu trúc HTML, xử lý animate kết hợp các state của component đó theo các event. Reactjs sinh ra để giải quyết các component giao tiếp qua lại, khắc phục sự rối loạn của javascript thuần khi scale dự án và bất đồng bộ của ngôn ngữ dễ sai nhất thế giới.
Về câu hỏi, không những chỉ làm hiệu ứng tuyết rơi như vậy mà còn làm được nhiều hiệu ứng đẹp khác với HTML và CSS3 nhé bạn. Với việc làm hiệu ứng tuyết rơi, như bạn nói, chúng ta sẽ cần kết hợp thêm một chút đồ họa là ảnh một bông tuyết đẹp mắt chẳng hạn. Chìa khóa để làm hiệu ứng này là sự kết hợp sử dụng các thuộc tính CSS3 về animation, keyframes để tạo ra các chu kỳ hoạt động liên tục cho bông tuyết. Giống như demo của các bạn @HuyDQ @quanghung97 ở bên dưới nha bạn. Chỉ cần nắm được animation, keyframes và CSS cơ bản là bạn có thể tạo ra nhiều hiệu ứng khác theo cách sáng tạo của riêng bạn.
khi b làm 1 trang html, bạn thêm js để tạo hiệu ứng khi click, khi scroll chẳng hạn, ý mình là cái js đó ấy, bình thường thì gộp nó thành 1 file main.js rồi thêm vào html, nhưng react thì thêm js đó kiểu gì ấy
ý mình là js thuần xử lý animte cho giao diện thêm đẹp ấy
Đóng trình duyệt thì cái cookie tương ứng chịu trách nhiệm quản lý session đó ở client cũng bị xóa. Do đó, session lưu trên server cũng vô dụng và sẽ xóa khi hết timeout
Ý bạn là viết js thuần, sử dụng các phương thức
getElementById(), querySelector()...để get các element không có trong component? nó vẫn là js nên bạn thích viết như nào cũng đc màcái ví dụ trên mình vẽ có 1 web server cho dễ hiểu. chứ chuẩn bài ra sẽ có load balance kết hợp với autoscaling ở bên trên con web nữa.
Còn về phía docker sẽ dùng docker Swarm để quản lí, scaling và Load balancing cho các container. Nên có 1000 người hay nhiều hơn nữa mình thấy sẽ ít gặp vấn đề hơn. Cũng không thể nói là ok 100% được.
Để an toàn hơn nữa thì cần có cơ chế rate limiting cho call api nữa. để hạn chế việc gọi quá nhiều api cùng 1 lúc. Nên để hệ thống có thể chạy và xử lí hàng tỉ request thì mình nghĩ cần phải làm nhiều việc hơn nữa.
Nên để bài toán dễ hiểu nên mình đã thu gọn lại thành cấu trúc đơn giản nhất để mọi người hiểu rõ nó làm thế nào.
I'm just kidding
bài viết hay
Bạn cho mình hỏi : Trong trường hợp click vào button , data được load nhưng không hề update url như comment trong link https://www.thegioididong.com/dtdd/iphone-xr, mình có sử dụng thử code của bạn nhưng không crawl được hết cmt Thứ 2, khi click button, XHR response về nội dung cmt mình muốn crawl nhưng khi click vào link trong XHR thì return empty web. Mình đã thử vòng lặp Formrequest nhưng không được. Nếu có giải pháp thì phản hồi giúp mình nhé, mình cảm ơn ! Đây là code của mình:

Bai viet ra de hieu. Cam on ban.