React + jQuery

Question

Witam

Piszę w React juz od paru dni, ale zastanawia mnie czy jest szansa by połączyć reacta z jQuery. Bardzo by mi to ułatwiło pisanie, ale także mam drugie pytanie. Niestety gdy piszę w funkcjach normalnego JS to niestety nie mam żadnych podpowiedzi, a czasami odnalezienie gdzieś literówki jest problematyczne, czy jest szansa by w VS code włączyć te podpowiedzi także do reacta (do html są normalnie). Pozdrawiam

Answer 1

Da się używać jQuery bez problemu, ale jeśli dopiero zaczynasz z React to pytanie zasadnicze po co Ci to? Pytam, ponieważ przypuszczam, że próbujesz zrobić coś po "nie-reaktowemu" i nie do końca chyba poznałeś gdzie jest granica między DOM a virtual DOM. Wiem, bo sam miałem podobne problemy na początku.

Napisz więc najlepiej co chcesz osiągnąć przy użyciu jQuery i zobaczymy, czy faktycznie jest to dobre wyjście. A jQuery możesz podpiąć normalnie na stronie jako skrypt zaciągany z jakiegoś źródła zdalnego lub lokalnie.

Comments

Znacznie przyjemniej mi się działa z jQuery niż czystym js. Chcę osiągnąć: przekazanie funkcji do innego komponentu dla którego ta funkcja doda nową klasę.

var arr = this.state.tasks;
                arr[i]. ? ? ?
                this.setState({
                    tasks: arr
                })

. Tam gdzie zostawiłem "? ? ?" nie mam pojęcia co wstawić by dodać nową klase. Wielu rzeczy już próbowałem, dlatego zastanawiam się nad tym jQuery.

---

Już powoli zaczynam się w tym gubić gdzie mogę używać normalnego JS. Myślałem także nad return w podmienioną classą, zapewne by zadziałało, ale nie tak chce do tego podejść.

---

Wydaje mi się, że chcesz coś mocno przekombinować i nie do końca jeszcze zrozumiałeś czym jest DOM vs VDOM oraz czym są propsy i state w React. Ale spokojnie, sam na początku miałem z tym pewne problemy jak i zapewne wiele osób :) Jak to opanujesz to zobaczysz, że React w sumie jest bardzo fajny.

Najlepiej rozpisz kolejno co chcesz osiągnąć, ale nie w sensie jQuery, vanilla itp. tylko jaki masz komponent i jaką funkcjonalność chcesz do niego dołączyć, to spróbujemy znaleźć jakieś optymalne rozwiązanie.

A tak na marginesie przyszłościowo do ajax w React polecam axios, fajna, lekka biblioteka.

Answer 2

Jest najbardziej to możliwe, tylko mnie zastanawia po co?

Jeżeli chcesz podpiąć skrypt jQ. Jak dobrze pamiętam do głównego rodzica twoim drzewko reactowym, tworzysz metodę componentDIdMount() i wtedy odwołujesz się do drzewa jeżeli korzystasz z wersji w standardzie UMD/CDN. A dlaczego componentDidMount() , gdyż chcemy pierw parsować drzewo DOM do VDOM. A następnie gdy się to zakończy parsować na nim, możesz użyć jQ (Inaczej dostaniesz piękne undefined) Wadą jest tego to... że co komponent trzeba mu oznajamiać kiedy chcemy korzystac jQ. Nie wiem czy nawet referencję między komponentami będą działać (Chyba, że użyć Redux hmmm...). Lepszą metodą jest dołączenie do projektu i na przykład na pliku wyjściowym(index.jsx) wykonywać jQ. Tylko, że wersja npm troszkę cieższa jest :).

Co do twojego problemu z VS Code poszukałbym templatki :).

PS: Jeżeli próbujesz użyć tylko AJAX to są lepsze rozwiązania.

PS2: React dzięki biblioteką może dostarczać podobne wsparcie co jQ. np takiej --> https://www.npmjs.com/package/react-polyfill

No chyba, że chcesz jakieś trupy wspierać.

Comments

Przyznam szczerze, ledwo co zrozumiałem ^^ jestem nowy w react i to bardzo. Aktualnie korzystam z CDN jako podpiętej biblioteki, bo instalacja webpackiem sprawia u mnie problemy. Na ten moment jeszcze odpuszczę sobie jQuery :) Dzięki za info

---

Jeżeli masz problemy z konfigiem to polecam na początek użyć tego -->

https://github.com/facebookincubator/create-react-app

Skonfigurowany React prosto od fb :)

Proponuje na dzieńdobry zrozumieć props i state. No i używać wersji z ES6 :).