React a jQuery

React a jQuery
« kdy: 30. 11. 2019, 16:56:26 »
Predstavte si že chcete mať všetky linky ktoré vedú mimo vášho webu označené ikonkou.  s document.querySelectorAll alebo jQuery je niečo také hračka a môžem zmeniť všetko globálne raz dva. Ale len ak sa jedná a serverom predgenerované HTML. Proste po načítaní stránky treba vyhľadať všetky elementy anchor s stribútom href a zistiť či adresa vedie mimo servera a potom pridať css triedu s príslušnou ikonkou.

Lenže čo ak sa gui generuje dynamicky a niektoré jeho časti pri načítaní stránky jednoducho neexistujú, napr v Reacte??? vždy pri zmene každej komponenty musím prejsť celú komponentu aj s vnoreným kódom a aplikovať na ňu tento kód. Je to proste prasárna a radšej to ani ani nepoužívam.

Neexistuje na to nejaké sofistikovanejšie riešenie? Ktoré by celý proces zjednodušilo a umožňovalo aplikovať úpravu len raz globálne, no zároveň by nemalo výkonnostné problémy?


Re:React a jQuery
« Odpověď #1 kdy: 30. 11. 2019, 17:01:54 »
Viem že pri čisto SPA aplikáciách treba použiť komponentový prístup. To znamená vytvorím si komponentu s príslušným linkom ktorá bude testovať kam vedie adresa a ak vedie mimo servera tak zobrazí ikonku. Lenže čo ak neni stránka generovaná čisto dynamicky, ale kombinuje statický kód s dynamickým? V tom prípade je takéto riešenie nepoužiteľné.

L..

  • ****
  • 302
    • Zobrazit profil
    • E-mail
Re:React a jQuery
« Odpověď #2 kdy: 30. 11. 2019, 17:16:46 »
Já bych to dělal tak, že dynamická část používá komponentový přístup a v té statické se ikonky přidávají přes DOM manipulaci. Aby DOM manipulace neměla dynamickou část se dá zajistit například přes "značkovací" CSS třídu.

gill

  • ****
  • 270
    • Zobrazit profil
    • E-mail
Re:React a jQuery
« Odpověď #3 kdy: 30. 11. 2019, 17:27:38 »
Jestli potřebujete přidávat ikony do dynamicky generované části volejte DOM manipulaci v componentDidMount a componentDidUpdate kořenového elementu nebo v MutationObserveru.

gill

  • ****
  • 270
    • Zobrazit profil
    • E-mail
Re:React a jQuery
« Odpověď #4 kdy: 30. 11. 2019, 17:43:25 »
componentDidMount a componentDidUpdate kořenového elementu nebo

*kořenové komponenty


Re:React a jQuery
« Odpověď #5 kdy: 02. 12. 2019, 12:42:46 »
React a jQuery... 🤣 Tak to mluví za vše, nic více dodávat...

Co si třeba přečíst něco o React Router. Možná bych začal nejprve tím, že si nastuduji co je to vlastně React a jak funguje. Pak otázky typu "čo keď je dynamická a pri načítaní stránky jednoducho neexistujú"...

Použití observer či didMount / didUpdate je také nesmysl. Stejně tak vytváření pomocné CSS třídy. Pokud takto uvažujete, vypadají dnešní weby, tak jak vypadají.

Mlocik97

  • *****
  • 830
  • Ubunťák, JS dev.
    • Zobrazit profil
    • E-mail
Re:React a jQuery
« Odpověď #6 kdy: 02. 12. 2019, 13:14:44 »
Už z nadpisu som dostal husinu... a jak čítam, tak radši už to nedočítam. A ne, ne len kvôli tomu že som antiReact. Ale s jQuery je to ako k židli primontovať kovovú super pevnú opierku plastovými šróbmi. A tými šróbmi myslím práve jQuery.
« Poslední změna: 02. 12. 2019, 13:19:10 od Gabriel Mlocik »

gill

  • ****
  • 270
    • Zobrazit profil
    • E-mail
Re:React a jQuery
« Odpověď #7 kdy: 02. 12. 2019, 13:33:28 »
Tady je zase odborníků na "best practices". Doufám, že nepoužíváte žádné doplňky do prohlížeče modifkující DOM, když se to podle vás nesmí.
« Poslední změna: 02. 12. 2019, 13:35:17 od gill »

gill

  • ****
  • 270
    • Zobrazit profil
    • E-mail
Re:React a jQuery
« Odpověď #8 kdy: 02. 12. 2019, 13:40:32 »
Co si třeba přečíst něco o React Router. Možná bych začal nejprve tím, že si nastuduji co je to vlastně React a jak funguje. Pak otázky typu "čo keď je dynamická a pri načítaní stránky jednoducho neexistujú"...

jak Router souvisí s otázkou? Můžete ukázat, jak pomocí routeru přidáte ikonku ke všem odkazům ve stránce vedoucím mimo stránku?

Mlocik97

  • *****
  • 830
  • Ubunťák, JS dev.
    • Zobrazit profil
    • E-mail
Re:React a jQuery
« Odpověď #9 kdy: 02. 12. 2019, 17:18:09 »
čo môžem povedať k Reactu je to že je špatný z dôvodov:

je to zlepenec 13 knižníc, ktoré vôbec neboli pripravené fungovať pospolu
JSX je ako keby sme strčili čokoládu do polievky, do toho pridali bagetu zo SubWay a poriadne to pomixovali,... CSSka v JS ako premenné?
Špagetový kód a totálny chaos.
O tom že Syntax má jak kdyby niekto z JavaScriptu chcel vytvoriť Javu, lebo no, má to v názve a mýli sa to, asi s takou logikou šiel FaceBook.

AngularJS byl svého času fakt jeden z najlepších frameworkov, a princípovo i je, akurát už je neaktuálny, hodne funkcionality nepokrýva vrátane prácu s vDOM či service-workery. Angular zas by bol skvelej ale je extrémne obézny framework, ktorého mohutnosť ničí možnosť ho používať. A tak popravde posledné dni prechádzam z AngularJS na VueJS, a ešte pokukávam na Svelte.

Debata o jQuery je zbytočná, ale ako i ona to bola relatívne dobrá knižnica, svého času,... ale teraz už je zbytočná.

gill

  • ****
  • 270
    • Zobrazit profil
    • E-mail
Re:React a jQuery
« Odpověď #10 kdy: 02. 12. 2019, 18:09:40 »
Vývojáři mají tendenci kritizovat technologie, které neznají.