expressjs+reactjs

" xyz:3000/A után megy xyz:3000/B "

A reactban a gyakorlatban nincs /A meg /B. #A meg #B van, es igy mukodik a "bookmark". At lehet irni JS-bol az URL-t amugy bizonyos JS eventek hatasara, egyebkent /A es /B -re is, de "kezzel" (gyanitom fel evente kijon ra uj plugin ami mukodik par honapig) kell atirni az URL-t, mikor a componentet lecserelted, passthrough-olnod a webservernek, hogy a /A -t is az o feladata lesz ertelmezni, ne a public/A -t keresse, (node, esetleg nginx-szel kombinalva ProxyPass-kent) es a frontendnek is elmagyarazni, hogy milyen componenteket rajzoljon, ha a beutott URL elso megnyitaskor /A volt.

xyz:3000/A után megy xyz:3000/B -re

Szerver oldalon azert kell egy url mapping, hogy ugyanazt az index.html-t szolgald ki.

Pl. expressben:

app.route('/*')
.get(function(req, res) {
res.sendFile(app.get('appPath') + '/index.html', function(err){
if (err) { /*hibakezeles*/ }
});
});


Es akkor kell meg neki egy masik cb fuggveny, hogy a static cuccokat (.css, .pdf, .png, .jpg),
kiszolgalja, es ne az index.html-t adja oda:


app.route('/:url(api|auth|components|app|bower_components|assets)/*')
.get(errors[404]);


Azt, hogy a react alkalmazasodat, hogyan strukturald, szerintem idovel gondold at, nem hiszem, hogy
erdemes egy orasi nagy bundle.js-bol kiszolgalni a weboldalt, a dokumentumkezelot, a fajlkezelot, meg ami meg eszedbejut.

El lehet szorakozni... Ha megerkeztel a webpack fertobe, akkor ott jo dagonyaszast! (2 hetig minimum) :)

---
Saying a programming language is good because it works on all platforms is like saying anal sex is good because it works on all genders....

> akkor az első betöltésnek mindig a "/" kell legyen, mert valamikor renderelni kell a header,nav-bar, footer-t.

Nem biztos, hogy a hazifeladatot le lehet sporolni (dokumentacio olvasgatasa).

A react ugy mukodik, hogy a html oldaladban az egyik DOM node-ot kicsereli es javascriptbol ujrageneralja. Ez maga a react (vagyis a react-dom.render()).
Eleve nem is tudod a body tagra aggatni a react-ot, csak egy div-re a bodyn belul.

Szoval nyugodtan lehet az oldaladon statikus footered, az lehet a react komponensen kivul.

A navigalas meg ugy tortenik, hogy fogsz egy segedkonyvtarat, pl. a react-router (vagy irsz egyet).
Ami annyit csinal, hogy az oldaladon az osszes < a href=" tagra akaszt egy javascript event listenert, hogy a browser ne kerje le a komplett html-t ujra a szervertol (ujratoltve a bundle.js-t),
hanem o frissiti a window.location -t (igy a bongeszo url-jet), es ujrageneralja a react komponenseket, amik kellenek. Ezt altalaban kevesebb sikerrel.

Erdemes azoknak a komponenseidnek amik kulso halozati adatot igenyelnek odaadni az urlt, mint react prop-ot, hogy ujra tudja magat tolteni, vagy pedig ujrageneralja a komponenst nullarol (uncontrolled component).

De amikor ezeket megcsinaltad, akkor felmerul a kerdes, hogy minek a react-router. Mit csinal o maga? :) Van egy jo url regex match-ere....

De a hype az irgalmatlan korulotte. Meg mostmar van mobilra is. Egyebkent mobilon masik "router" a meno (react-navigation).
De ott mire osszerakod sajat magad, vert izzadsz. Ott ugye van sajat js bundlere, amit hasznal (metro), ahh, nem is folytatom.

---
Saying a programming language is good because it works on all platforms is like saying anal sex is good because it works on all genders....

Igazad van.
https://github.com/IFRCGo/go-frontend - itt van az a frontend ReactJS rendszer, amit a go.ifrc.org használ, és erre vonatkozóan szoktak lenni kérdéseim. Nyitok majd akkor egy új topicot ennek. (Bár a kérés továbbra is aktuális, hogy ha van az a pénz, amiért valaki dedikált időt tud erre/rám szánni, akkor ne kíméljen.)

persze-persze.

En amit ajanlani tudok az a "vanilla javascript".
Azaz MDN-t kell olvasni, es ha valamit azon keresztul meg lehet oldani, akkor kar framework utan nyulni.

Az a tudas az maradando, nem pedig egy framework hasznalata, ami 2 ev alatt elavul (pl. angular v1).

---
Saying a programming language is good because it works on all platforms is like saying anal sex is good because it works on all genders....