Frontend Development Quickstart Guide » Historie » Verze 3
Václav Honzík, 2022-03-31 11:39
| 1 | 1 | Václav Honzík | h1. Frontend Development Quickstart Guide |
|---|---|---|---|
| 2 | |||
| 3 | 2 | Václav Honzík | Pro spuštění frontendové aplikace je potřeba mít nainstalovanou (ideálně) nejnovější verzi YARN: https://yarnpkg.com/, který lze snadno nainstalovat přes NPM jež je součástí NodeJS (https://nodejs.org/en/). Yarn nainstalujeme následujícím příkazem (v rootové složce frontendu, tzn. /frontend): |
| 4 | 1 | Václav Honzík | <pre> |
| 5 | npm install --global yarn |
||
| 6 | </pre> |
||
| 7 | |||
| 8 | Následně můžeme příkaz yarn používat kdekoliv v konzoli (nicméně může být nutný restart). Před samotným spuštěním je potřeba stahnout všechny dependencies pro projekt, což provedeme příkazem: <pre>yarn install</pre> |
||
| 9 | |||
| 10 | Samotnou aplikaci spustíme příkazem: |
||
| 11 | <pre>yarn run start</pre> |
||
| 12 | |||
| 13 | Aplikace ve výchozím nastavení poběží na portu 3000 na localhostu, tzn.: http://localhost:3000/ |
||
| 14 | 3 | Václav Honzík | |
| 15 | h2. Adresářová struktura |
||
| 16 | |||
| 17 | * features - logické moduly v aplikaci - např. katalog, home, apod. |
||
| 18 | * swagger - kód vygenerovaný ze swaggeru přes gen:swagger skript |
||
| 19 | * utils - utilitní třídy, které se logicky nehodí do žádné features složky |
||
| 20 | |||
| 21 | h2. Sdílení stavu mezi komponentami |
||
| 22 | |||
| 23 | Pokud potřebujeme sdílet stav jinak než přes props (např. napříč více komponentami) musí se použít globální store objekt, který poskytuje Redux (redux/store.ts). Pro uchování stavu je potřeba vytvořit *reducer*, který se stavem manipuluje = je to funkce, která vezme aktuální stav a akci a podle akce provede úpravu stavu. Jako template je vhodný soubor features/Auth/userReducer.ts |