2. diel - React Native - Štruktúra projektu a životný cyklus aplikácie

V predchádzajúcej lekcii, React Native - Predstavenie frameworku , sme si popísali výhody mobilných aplikácií, inštaláciu NodeJS a Android Studia a pripravili si vývojové prostredie.

V dnešnom tutoriále vývoja multiplatformných mobilných aplikácií v React Native sa pozrieme na štruktúru React Native projektu a životný cyklus aplikácie.

Vytvorenie a štruktúra React Native projektu

Nový projekt si vytvoríme jednoducho pomocou spustenia príkazu v termináli. Presunieme sa do zložky, v ktorej chceme projekt mať. V termináli zadáme:

Nástroj npx sme nainštalovali spoločne s Node.js. Tento príkaz spúšťa balíčky npm, navyše dokáže spustiť ľubovoľný npm balíček bez toho, aby sme tento balíček inštalovali. PrvniProjekt je potom vcelku logicky názov nášho prvého projektu. Pozrime sa, ako vyzerá štruktúra, ktorú sme vytvorili.

Zložka assets/

Do tejto zložky patria obrázky, fonty, zvuky a ďalšie mediálne súbory.

Priečinok node_modules/

Naša aplikácia používa rôzne balíčky a knižnice. Tie sú práve v tomto priečinku a špecifikované sú v súbore package.json.

Priečinok .gitignore/

Priečinky a súbory v tomto súbore budú ignorované pri práci s verziovacím systémom Git. To sa hodí, keď chceme vylúčiť určité časti projektu z repositára. Viac informácií o tomto populárnom verziovacom systéme máme v kurze Git.

Súbor App.js

Toto je vstupný bod pre našu aplikáciu. Súbor obsahuje hlavný komponent, ktorý sa vyrenderuje pri štarte aplikácie.

Súbor app.json

V tomto konfiguračnom súbore nájdeme nastavenia ako zobrazované meno, popis a rôzne špecifikácie pre jednotlivé platformy.

Súbor babel.config.js

Tento súbor konfiguruje JavaScript transkompilátor Babel. Definuje, ako by mal byť náš JavaScript kód transformovaný, aby bol kompatibilný na zariadeniach so staršími verziami JavaScriptu. Takže kód so syntaxom ES5 a novší je prekonvertovaný tak, aby mohol byť spustený na zariadeniach, ktoré tieto funkcie nepodporujú.

Súbor package-lock.json

Súbor slúži na zaznamenávanie konkrétnych verzií závislostí a ich podzávislostí, ktoré sú nainštalované v našom projekte. Zaisťuje, že každý autor pracujúci na projekte používa rovnaké verzie balíčkov, čo zabraňuje neočakávanému správaniu spôsobenému nesúladom verzií.

Súbor package.json

Tu sú všetky metadáta, závislosti a skripty našej aplikácie. Spomínané skripty slúžia napríklad na spustenie servera alebo zostavenie aplikácie.

Životný cyklus React Native aplikácie

V React Native nezáleží, či vytvárame aplikácie pre Android alebo iOS, životný cyklus je rovnaký. Komponent referuje na konkrétnu časť našej aplikácie a definuje celý svoj život od vytvorenia / zobrazenia až do zatvorenia / zrušenia, čomu hovoríme životný cyklus komponenty. Tento cyklus zahŕňa niekoľko etáp a metód, ktoré sú volané pri prechode medzi týmito etapami. Dôležité je si uvedomiť, že každá samostatná časť aplikácie by mala byť reprezentovaná svojím vlastným komponentom. Napríklad:

• keď spustíme aplikáciu, uvidíme prvú obrazovku s logom, čo je reprezentované prvým komponentom,
• potom zobrazíme základné menu (druhý komponent),
• po kliknutí na odkaz v menu sa otvorí nová obrazovka (tretí komponent) a tak ďalej.

Životný cyklus komponenty

Teraz už vieme, že existujú komponenty, ktoré majú svoje metódy. Kedy a prečo sa ale ktoré metódy volajú? Pozrime sa na grafické znázornenie:

Etapy komponenty

Život komponenty rozdelíme do štyroch fáz:

Mounting fáza

Montáž čiže Mounting - jedná sa o proces, kedy je komponent vytvorený a pripojený do DOMu, alebo v prípade React Native do hierarchie komponentov pre zobrazenie na obrazovke. Počas mountu komponenty dochádza k volaniu štyroch metód:

• Constructor(): Prvý z nich je konštruktor. Slúži na inicializáciu komponentov v pôvodnom stave ak prípadnému nastaveniu stavu.
• getDerivedStateFromProps(): Táto metóda iba vracia objekt s aktualizovaným stavom.
• render(): Toto je jediná vyžadovaná metóda v React komponentoch. Metóda udáva, čo bude zobrazené na obrazovke.
• ComponentDidMount(): Táto metóda sa volá potom, čo komponent dokončí vykresľovaciu časť. Je dobrým zvykom načítať tu dáta zo vzdialeného koncového bodu, čo vedie k aktualizácii stavu a opätovnému vykresleniu.

Updating fáza

Aktualizácia alebo Updating - pri aktualizácii dochádza k zmene stavu dát a prípadnému prekresleniu komponentov. Rovnako ako pri Mountingu aj Updating má svoje metódy. Na optimalizáciu výkonu sa pri update vytvára virtuálny DOM, čo je abstraktná reprezentácia zmien, ktoré majú byť vykonané na skutočnom DOMe. Tým sa minimalizuje počet zmien, ktoré musia byť vykonané na strane používateľského rozhrania. Kedykoľvek sa vyskytne nejaká zmena v stave alebo props, začne aktualizačný proces s nasledujúcimi metódami:

• getDerivedStateFromProps(): Ako sme už uviedli, metóda vracia aktualizovaný objekt.
• `shouldComponen­tUpdate(): Tu sa rozhodne, či dôjde k prekresleniu komponentu s novými dátami. Vo väčšine prípadov chceme, aby vrátená hodnota bola true, čo je aj defaultné nastavenie.
• render(): Metóda závisí od hodnoty z metódy shouldComponentUpdate().
• getSnapshotBeforeUpdate(): Hlavným prípadom použitia tejto metódy je zachytenie informácií, ktoré sú potrebné na zachovanie niektorého aspektu používateľského rozhrania alebo správanie komponentu predtým, než sa môže zmeniť v dôsledku nového vykreslenia.
• componentDidUpdate(): Táto metóda je volaná ihneď po dokončení vykresľovania.

Unmounting fáza

Demontáž čiže Unmounting označuje proces, kedy je komponent odstránený z DOMu a už nie je aktívny alebo viditeľný na obrazovke. To sa zvyčajne deje vtedy, keď používateľ opúšťa obrazovku, na ktorej bol komponent zobrazený, alebo keď je komponent explicitne odstránený z hierarchie komponentov. Táto fáza má iba jednu metódu a to componentWillUnmount(). Tá sa spustí, akonáhle je komponent odstránený z DOMu. Možno tak oi zrušiť prebiehajúci network request.

Error Handling fáza

Ošetrenie chýb alebo Error Handling - kedykoľvek sa objaví nejaká chyba pri vykresľovaní komponentu, sú zavolané patričné metódy:

• getDerivedStateFromError(): Táto metóda je volaná pri aktualizácii stavu komponentu po zachytení chyby a slúži na aktualizáciu stavu tak, aby komponent mohol vykresliť nejaký alternatívny obsah alebo informácie o chybe.
• componentDidCatch(): Používa sa na zachytenie a spracovanie chýb, ktoré sa vyskytnú vo vnútri komponentu alebo u jeho potomkov počas procesu renderovania.

Všetky vyššie uvedené metódy sú virtuálne, preto ich možno prepisovať a tým im dodať vlastnú logiku.

Spustenie aplikácie

Aplikáciu spustíme. Presunieme sa do zložky PrvniProjekt/ a otvoríme terminál. Do príkazového riadka zadáme: Výstupom bude: Spustíme Android Studio (prvé spustenie chvíľu trvá kvôli sťahovaniu rôznych aktualizácií). Vyberieme New Project -> No Activity a Finish. Na ploche s novým projektom klikneme vpravo na Device Manager a potom na Pixel 7 Pro API 33. Kliknite na ikonu Play:

Tým sa nám otvorí Device Manager s displejom telefónu:

Presunieme sa do otvoreného terminálu a zvolíme možnosť a. Zobrazí sa nám:

Tým máme aplikáciu spustenú. Zatiaľ síce nič nevie, ale na tom zapracujeme v ďalších lekciách.

V budúcej lekcii, React Native - Promises a asynchrónne funkcie , si popíšeme asynchrónne funkcie a promises a ich využitie.