Thêm js 'thường' vào reactjs
Chào mọi người, mình mới học reactjs, mình không biết cách thêm js (js thuần, như khi làm html css và thêm js xử lý animate ấy) vào như nào
Ví dụ bạn làm 1 trang html cơ bản và thêm file main.js gồm các hàm xử lý các sự kiện click, scroll... làm đẹp web ấy, thì thêm file đó vào react như nào, vì react nó là DOM ảo, còn js thường hay jquery nó tương tác với DOM thật
3 CÂU TRẢ LỜI
chuyển từ jquery sang React đòi hỏi bạn đổi hoàn toàn mindset, bạn chắc mới học React thì mình khuyên bạn hãy quên jquery và chỉ quan tâm đến state, props và component, vào docs React, phần main concept cày hết ví dụ trong đó trước.
Hi @cuong_nguyen , Bạn cho mình hỏi nếu html có nhiều thư viện js như slide. Mà thư viện slide đó dùng jQuery, thì nếu bạn bỏ jQuery đi thì bạn phải viết lại slide đó ah? Note: React không có component slide này nhé. Trên đó là mình mới vd slide thôi. Còn rất nhiều cái khác dùng jQuery nữa.
@thuongnv chắc bạn bị quen với jquery và ngại thay đổi, hoặc chắc bạn chưa nghiên cứu React đủ lâu để nhận ra chẳng có gì react không làm được cả, jquery hay react thì đều là thư viện Javascript mà thôi, 1 task làm được bằng JS thì đều làm được với 2 công cụ trên. Chuyển sang react mà cứ nấn ná jquery thì tốt nhất cứ ở lại với jquery nhé bạn.
ReactJs là thư viện javascript, bản chất component trong đó đều là Js, vậy không rõ câu hỏi của bạn ý là gì ?
ý mình là js thuần xử lý animte cho giao diện thêm đẹp ấy
@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.
@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 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 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 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ơ.
@quanghung97 ừ cám ơn bạn nhé
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
@ngduyws ý bạn là import file trong React ??
@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ế đó
@ngduyws thì dùng Ref, import code js bên thứ 3(code của bạn trước đó: jquery hay gì gì đó) vào, để phần code này xử lý phần dom đó, reactjs không can thiệp phần dom đó nữa là được. Mọi thứ hoạt động ổn, nếu cần tìm hiểu thêm https://reactjs.org/docs/integrating-with-other-libraries.html#integrating-with-jquery-chosen-plugin
Ý 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à